Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-02-15 07:28:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

debt - adopt more $ over createElement (#242533)

Browse Source
This commit is contained in:
Benjamin Pasero
2025-03-04 09:46:29 +01:00
committed by GitHub
parent 3df8270693
commit 5d93bf37d9
23 changed files with 90 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/vs/workbench/browser/parts/activitybar/activitybarPart.ts
View File

@@ -280,8 +280,7 @@ export class ActivityBarCompositeBar extends PaneCompositeBar {
return; // prevent menu bar from installing twice #110720
}
this.menuBarContainer = document.createElement('div');
this.menuBarContainer.classList.add('menubar');
this.menuBarContainer = $('.menubar');
const content = assertIsDefined(this.element);
content.prepend(this.menuBarContainer);

8
src/vs/workbench/browser/parts/editor/auxiliaryEditorPart.ts
View File

@@ -4,7 +4,7 @@
*--------------------------------------------------------------------------------------------*/
import { onDidChangeFullscreen } from '../../../../base/browser/browser.js';
import { hide, show } from '../../../../base/browser/dom.js';
import { $, hide, show } from '../../../../base/browser/dom.js';
import { Emitter, Event } from '../../../../base/common/event.js';
import { DisposableStore } from '../../../../base/common/lifecycle.js';
import { isNative } from '../../../../base/common/platform.js';
@@ -105,9 +105,7 @@ export class AuxiliaryEditorPart {
const auxiliaryWindow = disposables.add(await this.auxiliaryWindowService.open(options));
// Editor Part
const editorPartContainer = document.createElement('div');
editorPartContainer.classList.add('part', 'editor');
editorPartContainer.setAttribute('role', 'main');
const editorPartContainer = $('.part.editor', { role: 'main' });
editorPartContainer.style.position = 'relative';
auxiliaryWindow.container.appendChild(editorPartContainer);
@@ -315,7 +313,7 @@ class AuxiliaryEditorPartImpl extends EditorPart implements IAuxiliaryEditorPart
const result = this.mergeAllGroups(targetGroup, {
// Try to reduce the impact of closing the auxiliary window
// as much as possible by not changing existing editors
// in the main window.
// in the main window.
preserveExistingIndex: true
});
targetGroup.focus();

8
src/vs/workbench/browser/parts/editor/editorDropTarget.ts
View File

@@ -5,7 +5,7 @@
import './media/editordroptarget.css';
import { DataTransfers } from '../../../../base/browser/dnd.js';
import { addDisposableListener, DragAndDropObserver, EventHelper, EventType, getWindow, isAncestor } from '../../../../base/browser/dom.js';
import { $, addDisposableListener, DragAndDropObserver, EventHelper, EventType, getWindow, isAncestor } from '../../../../base/browser/dom.js';
import { renderFormattedText } from '../../../../base/browser/formattedTextRenderer.js';
import { RunOnceScheduler } from '../../../../base/common/async.js';
import { toDisposable } from '../../../../base/common/lifecycle.js';
@@ -84,8 +84,7 @@ class DropOverlay extends Themable {
const overlayOffsetHeight = this.getOverlayOffsetHeight();
// Container
const container = this.container = document.createElement('div');
container.id = DropOverlay.OVERLAY_ID;
const container = this.container = $('div', { id: DropOverlay.OVERLAY_ID });
container.style.top = `${overlayOffsetHeight}px`;
// Parent
@@ -97,8 +96,7 @@ class DropOverlay extends Themable {
}));
// Overlay
this.overlay = document.createElement('div');
this.overlay.classList.add('editor-group-overlay-indicator');
this.overlay = $('.editor-group-overlay-indicator');
container.appendChild(this.overlay);
if (this.enableDropIntoEditor) {

13
src/vs/workbench/browser/parts/editor/editorGroupView.ts
View File

@@ -11,7 +11,7 @@ import { EditorInput } from '../../../common/editor/editorInput.js';
import { SideBySideEditorInput } from '../../../common/editor/sideBySideEditorInput.js';
import { Emitter, Relay } from '../../../../base/common/event.js';
import { IInstantiationService } from '../../../../platform/instantiation/common/instantiation.js';
import { Dimension, trackFocus, addDisposableListener, EventType, EventHelper, findParentWithClass, isAncestor, IDomNodePagePosition, isMouseEvent, isActiveElement, getWindow, getActiveElement } from '../../../../base/browser/dom.js';
import { Dimension, trackFocus, addDisposableListener, EventType, EventHelper, findParentWithClass, isAncestor, IDomNodePagePosition, isMouseEvent, isActiveElement, getWindow, getActiveElement, $ } from '../../../../base/browser/dom.js';
import { ServiceCollection } from '../../../../platform/instantiation/common/serviceCollection.js';
import { IContextKeyService } from '../../../../platform/contextkey/common/contextkey.js';
import { ProgressBar } from '../../../../base/browser/ui/progressbar/progressbar.js';
@@ -208,16 +208,14 @@ export class EditorGroupView extends Themable implements IEditorGroupView {
this.handleGroupContextKeys();
// Title container
this.titleContainer = document.createElement('div');
this.titleContainer.classList.add('title');
this.titleContainer = $('.title');
this.element.appendChild(this.titleContainer);
// Title control
this.titleControl = this._register(this.scopedInstantiationService.createInstance(EditorTitleControl, this.titleContainer, this.editorPartsView, this.groupsView, this, this.model));
// Editor container
this.editorContainer = document.createElement('div');
this.editorContainer.classList.add('editor-container');
this.editorContainer = $('.editor-container');
this.element.appendChild(this.editorContainer);
// Editor pane
@@ -406,8 +404,7 @@ export class EditorGroupView extends Themable implements IEditorGroupView {
private createContainerToolbar(): void {
// Toolbar Container
const toolbarContainer = document.createElement('div');
toolbarContainer.classList.add('editor-group-container-toolbar');
const toolbarContainer = $('.editor-group-container-toolbar');
this.element.appendChild(toolbarContainer);
// Toolbar
@@ -2151,7 +2148,7 @@ export class EditorGroupView extends Themable implements IEditorGroupView {
//#region ISerializableView
readonly element: HTMLElement = document.createElement('div');
readonly element: HTMLElement = $('div');
get minimumWidth(): number { return this.editorPane.minimumWidth; }
get minimumHeight(): number { return this.editorPane.minimumHeight; }

5
src/vs/workbench/browser/parts/editor/editorPanes.ts
View File

@@ -10,7 +10,7 @@ import Severity from '../../../../base/common/severity.js';
import { Disposable, DisposableStore } from '../../../../base/common/lifecycle.js';
import { EditorExtensions, EditorInputCapabilities, IEditorOpenContext, IVisibleEditorPane, isEditorOpenError } from '../../../common/editor.js';
import { EditorInput } from '../../../common/editor/editorInput.js';
import { Dimension, show, hide, IDomNodePagePosition, isAncestor, getActiveElement, getWindowById, isEditableElement } from '../../../../base/browser/dom.js';
import { Dimension, show, hide, IDomNodePagePosition, isAncestor, getActiveElement, getWindowById, isEditableElement, $ } from '../../../../base/browser/dom.js';
import { Registry } from '../../../../platform/registry/common/platform.js';
import { IEditorPaneRegistry, IEditorPaneDescriptor } from '../../editor.js';
import { IWorkbenchLayoutService } from '../../../services/layout/browser/layoutService.js';
@@ -360,8 +360,7 @@ export class EditorPanes extends Disposable {
// Create editor container as needed
if (!editorPane.getContainer()) {
const editorPaneContainer = document.createElement('div');
editorPaneContainer.classList.add('editor-instance');
const editorPaneContainer = $('.editor-instance');
// It is cruicial to append the container to its parent before
// passing on to the create() method of the pane so that the

6
src/vs/workbench/browser/parts/editor/editorPart.ts
View File

@@ -993,8 +993,7 @@ export class EditorPart extends Part implements IEditorPart, IEditorGroupsView {
// Container
this.element = parent;
this.container = document.createElement('div');
this.container.classList.add('content');
this.container = $('.content');
if (this.windowId !== mainWindow.vscodeWindowId) {
this.container.classList.add('auxiliary');
}
@@ -1067,8 +1066,7 @@ export class EditorPart extends Part implements IEditorPart, IEditorGroupsView {
this._register(this.createEditorDropTarget(container, Object.create(null)));
// No drop in the editor
const overlay = document.createElement('div');
overlay.classList.add('drop-block-overlay');
const overlay = $('.drop-block-overlay');
parent.appendChild(overlay);
// Hide the block if a mouse down event occurs #99065

8
src/vs/workbench/browser/parts/editor/editorPlaceholder.ts
View File

@@ -67,10 +67,10 @@ export abstract class EditorPlaceholder extends EditorPane {
protected createEditor(parent: HTMLElement): void {
// Container
this.container = document.createElement('div');
this.container.className = 'monaco-editor-pane-placeholder';
this.container = $('.monaco-editor-pane-placeholder', {
tabIndex: 0 // enable focus support from the editor part (do not remove)
});
this.container.style.outline = 'none';
this.container.tabIndex = 0; // enable focus support from the editor part (do not remove)
// Custom Scrollbars
this.scrollbar = this._register(new DomScrollableElement(this.container, { horizontal: ScrollbarVisibility.Auto, vertical: ScrollbarVisibility.Auto }));
@@ -107,7 +107,7 @@ export abstract class EditorPlaceholder extends EditorPane {
// Label
const labelContainer = container.appendChild($('.editor-placeholder-label-container'));
const labelWidget = document.createElement('span');
const labelWidget = $('span');
labelWidget.textContent = truncatedLabel;
labelContainer.appendChild(labelWidget);

4
src/vs/workbench/browser/parts/editor/editorTabsControl.ts
View File

@@ -6,7 +6,7 @@
import './media/editortabscontrol.css';
import { localize } from '../../../../nls.js';
import { applyDragImage, DataTransfers } from '../../../../base/browser/dnd.js';
import { Dimension, getActiveWindow, getWindow, isMouseEvent } from '../../../../base/browser/dom.js';
import { $, Dimension, getActiveWindow, getWindow, isMouseEvent } from '../../../../base/browser/dom.js';
import { StandardMouseEvent } from '../../../../base/browser/mouseEvent.js';
import { ActionsOrientation, IActionViewItem, prepareActions } from '../../../../base/browser/ui/actionbar/actionbar.js';
import { IAction, ActionRunner } from '../../../../base/common/actions.js';
@@ -177,7 +177,7 @@ export abstract class EditorTabsControl extends Themable implements IEditorTabsC
}
protected createEditorActionsToolBar(parent: HTMLElement, classes: string[]): void {
this.editorActionsToolbarContainer = document.createElement('div');
this.editorActionsToolbarContainer = $('div');
this.editorActionsToolbarContainer.classList.add(...classes);
parent.appendChild(this.editorActionsToolbarContainer);

5
src/vs/workbench/browser/parts/editor/editorTitleControl.ts
View File

@@ -4,7 +4,7 @@
*--------------------------------------------------------------------------------------------*/
import './media/editortitlecontrol.css';
import { Dimension, clearNode } from '../../../../base/browser/dom.js';
import { $, Dimension, clearNode } from '../../../../base/browser/dom.js';
import { IInstantiationService } from '../../../../platform/instantiation/common/instantiation.js';
import { IThemeService, Themable } from '../../../../platform/theme/common/themeService.js';
import { BreadcrumbsControl, BreadcrumbsControlFactory } from './breadcrumbsControl.js';
@@ -82,8 +82,7 @@ export class EditorTitleControl extends Themable {
}
// Breadcrumbs container
const breadcrumbsContainer = document.createElement('div');
breadcrumbsContainer.classList.add('breadcrumbs-below-tabs');
const breadcrumbsContainer = $('.breadcrumbs-below-tabs');
this.parent.appendChild(breadcrumbsContainer);
const breadcrumbsControlFactory = this.breadcrumbsControlDisposables.add(this.instantiationService.createInstance(BreadcrumbsControlFactory, breadcrumbsContainer, this.groupView, {

33
src/vs/workbench/browser/parts/editor/multiEditorTabsControl.ts
View File

@@ -32,7 +32,7 @@ import { ResourcesDropHandler, DraggedEditorIdentifier, DraggedEditorGroupIdenti
import { Color } from '../../../../base/common/color.js';
import { INotificationService } from '../../../../platform/notification/common/notification.js';
import { MergeGroupMode, IMergeGroupOptions } from '../../../services/editor/common/editorGroupsService.js';
import { addDisposableListener, EventType, EventHelper, Dimension, scheduleAtNextAnimationFrame, findParentWithClass, clearNode, DragAndDropObserver, isMouseEvent, getWindow } from '../../../../base/browser/dom.js';
import { addDisposableListener, EventType, EventHelper, Dimension, scheduleAtNextAnimationFrame, findParentWithClass, clearNode, DragAndDropObserver, isMouseEvent, getWindow, $ } from '../../../../base/browser/dom.js';
import { localize } from '../../../../nls.js';
import { IEditorGroupsView, EditorServiceImpl, IEditorGroupView, IInternalEditorOpenOptions, IEditorPartsView, prepareMoveCopyEditors } from './editor.js';
import { CloseEditorTabAction, UnpinEditorAction } from './editorActions.js';
@@ -170,15 +170,14 @@ export class MultiEditorTabsControl extends EditorTabsControl {
this.titleContainer = parent;
// Tabs and Actions Container (are on a single row with flex side-by-side)
this.tabsAndActionsContainer = document.createElement('div');
this.tabsAndActionsContainer.classList.add('tabs-and-actions-container');
this.tabsAndActionsContainer = $('.tabs-and-actions-container');
this.titleContainer.appendChild(this.tabsAndActionsContainer);
// Tabs Container
this.tabsContainer = document.createElement('div');
this.tabsContainer.setAttribute('role', 'tablist');
this.tabsContainer.draggable = true;
this.tabsContainer.classList.add('tabs-container');
this.tabsContainer = $('.tabs-container', {
role: 'tablist',
draggable: true
});
this._register(Gesture.addTarget(this.tabsContainer));
this.tabSizingFixedDisposables = this._register(new DisposableStore());
@@ -803,25 +802,23 @@ export class MultiEditorTabsControl extends EditorTabsControl {
private createTab(tabIndex: number, tabsContainer: HTMLElement, tabsScrollbar: ScrollableElement): HTMLElement {
// Tab Container
const tabContainer = document.createElement('div');
tabContainer.draggable = true;
tabContainer.setAttribute('role', 'tab');
tabContainer.classList.add('tab');
const tabContainer = $('.tab', {
draggable: true,
role: 'tab'
});
// Gesture Support
this._register(Gesture.addTarget(tabContainer));
// Tab Border Top
const tabBorderTopContainer = document.createElement('div');
tabBorderTopContainer.classList.add('tab-border-top-container');
const tabBorderTopContainer = $('.tab-border-top-container');
tabContainer.appendChild(tabBorderTopContainer);
// Tab Editor Label
const editorLabel = this.tabResourceLabels.create(tabContainer, { hoverTargetOverride: tabContainer });
// Tab Actions
const tabActionsContainer = document.createElement('div');
tabActionsContainer.classList.add('tab-actions');
const tabActionsContainer = $('.tab-actions');
tabContainer.appendChild(tabActionsContainer);
const that = this;
@@ -841,13 +838,11 @@ export class MultiEditorTabsControl extends EditorTabsControl {
// Tab Fade Hider
// Hides the tab fade to the right when tab action left and sizing shrink/fixed, ::after, ::before are already used
const tabShadowHider = document.createElement('div');
tabShadowHider.classList.add('tab-fade-hider');
const tabShadowHider = $('.tab-fade-hider');
tabContainer.appendChild(tabShadowHider);
// Tab Border Bottom
const tabBorderBottomContainer = document.createElement('div');
tabBorderBottomContainer.classList.add('tab-border-bottom-container');
const tabBorderBottomContainer = $('.tab-border-bottom-container');
tabContainer.appendChild(tabBorderBottomContainer);
// Eventing

5
src/vs/workbench/browser/parts/editor/singleEditorTabsControl.ts
View File

@@ -10,7 +10,7 @@ import { EditorTabsControl } from './editorTabsControl.js';
import { ResourceLabel, IResourceLabel } from '../../labels.js';
import { TAB_ACTIVE_FOREGROUND, TAB_UNFOCUSED_ACTIVE_FOREGROUND } from '../../../common/theme.js';
import { EventType as TouchEventType, GestureEvent, Gesture } from '../../../../base/browser/touch.js';
import { addDisposableListener, EventType, EventHelper, Dimension, isAncestor, DragAndDropObserver, isHTMLElement } from '../../../../base/browser/dom.js';
import { addDisposableListener, EventType, EventHelper, Dimension, isAncestor, DragAndDropObserver, isHTMLElement, $ } from '../../../../base/browser/dom.js';
import { CLOSE_EDITOR_COMMAND_ID, UNLOCK_GROUP_COMMAND_ID } from './editorCommands.js';
import { Color } from '../../../../base/common/color.js';
import { assertIsDefined, assertAllDefined } from '../../../../base/common/types.js';
@@ -46,8 +46,7 @@ export class SingleEditorTabsControl extends EditorTabsControl {
// Gesture Support
this._register(Gesture.addTarget(titleContainer));
const labelContainer = document.createElement('div');
labelContainer.classList.add('label-container');
const labelContainer = $('.label-container');
titleContainer.appendChild(labelContainer);
// Editor Label

2
src/vs/workbench/browser/parts/globalCompositeBar.ts
View File

@@ -67,7 +67,7 @@ export class GlobalCompositeBar extends Disposable {
) {
super();
this.element = document.createElement('div');
this.element = $('div');
const contextMenuAlignmentOptions = () => ({
anchorAlignment: configurationService.getValue('workbench.sideBar.location') === 'left' ? AnchorAlignment.RIGHT : AnchorAlignment.LEFT,
anchorAxisAlignment: AnchorAxisAlignment.HORIZONTAL

14
src/vs/workbench/browser/parts/notifications/notificationsCenter.ts
View File

@@ -14,7 +14,7 @@ import { IContextKeyService } from '../../../../platform/contextkey/common/conte
import { INotificationsCenterController, NotificationActionRunner } from './notificationsCommands.js';
import { NotificationsList } from './notificationsList.js';
import { IInstantiationService } from '../../../../platform/instantiation/common/instantiation.js';
import { Dimension, isAncestorOfActiveElement } from '../../../../base/browser/dom.js';
import { $, Dimension, isAncestorOfActiveElement } from '../../../../base/browser/dom.js';
import { widgetShadow } from '../../../../platform/theme/common/colorRegistry.js';
import { IEditorGroupsService } from '../../../services/editor/common/editorGroupsService.js';
import { localize } from '../../../../nls.js';
@@ -149,22 +149,18 @@ export class NotificationsCenter extends Themable implements INotificationsCente
private create(): void {
// Container
this.notificationsCenterContainer = document.createElement('div');
this.notificationsCenterContainer.classList.add('notifications-center');
this.notificationsCenterContainer = $('.notifications-center');
// Header
this.notificationsCenterHeader = document.createElement('div');
this.notificationsCenterHeader.classList.add('notifications-center-header');
this.notificationsCenterHeader = $('.notifications-center-header');
this.notificationsCenterContainer.appendChild(this.notificationsCenterHeader);
// Header Title
this.notificationsCenterTitle = document.createElement('span');
this.notificationsCenterTitle.classList.add('notifications-center-header-title');
this.notificationsCenterTitle = $('span.notifications-center-header-title');
this.notificationsCenterHeader.appendChild(this.notificationsCenterTitle);
// Header Toolbar
const toolbarContainer = document.createElement('div');
toolbarContainer.classList.add('notifications-center-header-toolbar');
const toolbarContainer = $('.notifications-center-header-toolbar');
this.notificationsCenterHeader.appendChild(toolbarContainer);
const actionRunner = this._register(this.instantiationService.createInstance(NotificationActionRunner));

5
src/vs/workbench/browser/parts/notifications/notificationsList.ts
View File

@@ -5,7 +5,7 @@
import './media/notificationsList.css';
import { localize } from '../../../../nls.js';
import { getWindow, isAncestorOfActiveElement, trackFocus } from '../../../../base/browser/dom.js';
import { $, getWindow, isAncestorOfActiveElement, trackFocus } from '../../../../base/browser/dom.js';
import { WorkbenchList } from '../../../../platform/list/browser/listService.js';
import { IInstantiationService } from '../../../../platform/instantiation/common/instantiation.js';
import { IListAccessibilityProvider, IListOptions } from '../../../../base/browser/ui/list/listWidget.js';
@@ -60,8 +60,7 @@ export class NotificationsList extends Disposable {
private createNotificationsList(): void {
// List Container
this.listContainer = document.createElement('div');
this.listContainer.classList.add('notifications-list-container');
this.listContainer = $('.notifications-list-container');
const actionRunner = this._register(this.instantiationService.createInstance(NotificationActionRunner));

11
src/vs/workbench/browser/parts/notifications/notificationsToasts.ts
View File

@@ -7,7 +7,7 @@ import './media/notificationsToasts.css';
import { localize } from '../../../../nls.js';
import { INotificationsModel, NotificationChangeType, INotificationChangeEvent, INotificationViewItem, NotificationViewItemContentChangeKind } from '../../../common/notifications.js';
import { IDisposable, dispose, toDisposable, DisposableStore } from '../../../../base/common/lifecycle.js';
import { addDisposableListener, EventType, Dimension, scheduleAtNextAnimationFrame, isAncestorOfActiveElement, getWindow } from '../../../../base/browser/dom.js';
import { addDisposableListener, EventType, Dimension, scheduleAtNextAnimationFrame, isAncestorOfActiveElement, getWindow, $ } from '../../../../base/browser/dom.js';
import { IInstantiationService } from '../../../../platform/instantiation/common/instantiation.js';
import { NotificationsList } from './notificationsList.js';
import { Event, Emitter } from '../../../../base/common/event.js';
@@ -165,8 +165,7 @@ export class NotificationsToasts extends Themable implements INotificationsToast
// Lazily create toasts containers
let notificationsToastsContainer = this.notificationsToastsContainer;
if (!notificationsToastsContainer) {
notificationsToastsContainer = this.notificationsToastsContainer = document.createElement('div');
notificationsToastsContainer.classList.add('notifications-toasts');
notificationsToastsContainer = this.notificationsToastsContainer = $('.notifications-toasts');
this.container.appendChild(notificationsToastsContainer);
}
@@ -175,8 +174,7 @@ export class NotificationsToasts extends Themable implements INotificationsToast
notificationsToastsContainer.classList.add('visible');
// Container
const notificationToastContainer = document.createElement('div');
notificationToastContainer.classList.add('notification-toast-container');
const notificationToastContainer = $('.notification-toast-container');
const firstToast = notificationsToastsContainer.firstChild;
if (firstToast) {
@@ -186,8 +184,7 @@ export class NotificationsToasts extends Themable implements INotificationsToast
}
// Toast
const notificationToast = document.createElement('div');
notificationToast.classList.add('notification-toast');
const notificationToast = $('.notification-toast');
notificationToastContainer.appendChild(notificationToast);
// Create toast with item and show

33
src/vs/workbench/browser/parts/notifications/notificationsViewer.ts
View File

@@ -45,12 +45,7 @@ export class NotificationsListDelegate implements IListVirtualDelegate<INotifica
}
private createOffsetHelper(container: HTMLElement): HTMLElement {
const offsetHelper = document.createElement('div');
offsetHelper.classList.add('notification-offset-helper');
container.appendChild(offsetHelper);
return offsetHelper;
return container.appendChild($('.notification-offset-helper'));
}
getHeight(notification: INotificationViewItem): number {
@@ -146,7 +141,7 @@ interface IMessageActionHandler {
class NotificationMessageRenderer {
static render(message: INotificationMessage, actionHandler?: IMessageActionHandler): HTMLElement {
const messageContainer = document.createElement('span');
const messageContainer = $('span');
for (const node of message.linkedText.nodes) {
if (typeof node === 'string') {
@@ -215,25 +210,20 @@ export class NotificationRenderer implements IListRenderer<INotificationViewItem
data.toDispose = new DisposableStore();
// Container
data.container = document.createElement('div');
data.container.classList.add('notification-list-item');
data.container = $('.notification-list-item');
// Main Row
data.mainRow = document.createElement('div');
data.mainRow.classList.add('notification-list-item-main-row');
data.mainRow = $('.notification-list-item-main-row');
// Icon
data.icon = document.createElement('div');
data.icon.classList.add('notification-list-item-icon', 'codicon');
data.icon = $('.notification-list-item-icon.codicon');
// Message
data.message = document.createElement('div');
data.message.classList.add('notification-list-item-message');
data.message = $('.notification-list-item-message');
// Toolbar
const that = this;
const toolbarContainer = document.createElement('div');
toolbarContainer.classList.add('notification-list-item-toolbar-container');
const toolbarContainer = $('.notification-list-item-toolbar-container');
data.toolbar = new ActionBar(
toolbarContainer,
{
@@ -279,16 +269,13 @@ export class NotificationRenderer implements IListRenderer<INotificationViewItem
data.toDispose.add(data.toolbar);
// Details Row
data.detailsRow = document.createElement('div');
data.detailsRow.classList.add('notification-list-item-details-row');
data.detailsRow = $('.notification-list-item-details-row');
// Source
data.source = document.createElement('div');
data.source.classList.add('notification-list-item-source');
data.source = $('.notification-list-item-source');
// Buttons Container
data.buttonsContainer = document.createElement('div');
data.buttonsContainer.classList.add('notification-list-item-buttons-container');
data.buttonsContainer = $('.notification-list-item-buttons-container');
container.appendChild(data.container);

6
src/vs/workbench/browser/parts/paneCompositePart.ts
View File

@@ -265,11 +265,9 @@ export abstract class AbstractPaneCompositePart extends CompositePart<PaneCompos
}
private createEmptyPaneMessage(parent: HTMLElement): void {
this.emptyPaneMessageElement = document.createElement('div');
this.emptyPaneMessageElement.classList.add('empty-pane-message-area');
this.emptyPaneMessageElement = $('.empty-pane-message-area');
const messageElement = document.createElement('div');
messageElement.classList.add('empty-pane-message');
const messageElement = $('.empty-pane-message');
messageElement.innerText = localize('pane.emptyMessage', "Drag a view here to display.");
this.emptyPaneMessageElement.appendChild(messageElement);

13
src/vs/workbench/browser/parts/statusbar/statusbarItem.ts
View File

@@ -13,7 +13,7 @@ import { WorkbenchActionExecutedEvent, WorkbenchActionExecutedClassification } f
import { IThemeService } from '../../../../platform/theme/common/themeService.js';
import { ThemeColor } from '../../../../base/common/themables.js';
import { isThemeColor } from '../../../../editor/common/editorCommon.js';
import { addDisposableListener, EventType, hide, show, append, EventHelper } from '../../../../base/browser/dom.js';
import { addDisposableListener, EventType, hide, show, append, EventHelper, $ } from '../../../../base/browser/dom.js';
import { INotificationService } from '../../../../platform/notification/common/notification.js';
import { assertIsDefined } from '../../../../base/common/types.js';
import { Command } from '../../../../editor/common/languages.js';
@@ -66,10 +66,10 @@ export class StatusbarEntryItem extends Disposable {
super();
// Label Container
this.labelContainer = document.createElement('a');
this.labelContainer.tabIndex = -1; // allows screen readers to read title, but still prevents tab focus.
this.labelContainer.setAttribute('role', 'button');
this.labelContainer.className = 'statusbar-item-label';
this.labelContainer = $('a.statusbar-item-label', {
role: 'button',
tabIndex: -1 // allows screen readers to read title, but still prevents tab focus.
});
this._register(Gesture.addTarget(this.labelContainer)); // enable touch
// Label (with support for progress)
@@ -77,8 +77,7 @@ export class StatusbarEntryItem extends Disposable {
this.container.appendChild(this.labelContainer);
// Beak Container
this.beakContainer = document.createElement('div');
this.beakContainer.className = 'status-bar-item-beak-container';
this.beakContainer = $('.status-bar-item-beak-container');
this.container.appendChild(this.beakContainer);
this.update(entry);

22
src/vs/workbench/browser/parts/statusbar/statusbarPart.ts
View File

@@ -16,7 +16,7 @@ import { IThemeService } from '../../../../platform/theme/common/themeService.js
import { STATUS_BAR_BACKGROUND, STATUS_BAR_FOREGROUND, STATUS_BAR_NO_FOLDER_BACKGROUND, STATUS_BAR_ITEM_HOVER_BACKGROUND, STATUS_BAR_BORDER, STATUS_BAR_NO_FOLDER_FOREGROUND, STATUS_BAR_NO_FOLDER_BORDER, STATUS_BAR_ITEM_COMPACT_HOVER_BACKGROUND, STATUS_BAR_ITEM_FOCUS_BORDER, STATUS_BAR_FOCUS_BORDER } from '../../../common/theme.js';
import { IWorkspaceContextService, WorkbenchState } from '../../../../platform/workspace/common/workspace.js';
import { contrastBorder, activeContrastBorder } from '../../../../platform/theme/common/colorRegistry.js';
import { EventHelper, addDisposableListener, EventType, clearNode, getWindow, isHTMLElement } from '../../../../base/browser/dom.js';
import { EventHelper, addDisposableListener, EventType, clearNode, getWindow, isHTMLElement, $ } from '../../../../base/browser/dom.js';
import { createStyleSheet } from '../../../../base/browser/domStylesheets.js';
import { IStorageService } from '../../../../platform/storage/common/storage.js';
import { Parts, IWorkbenchLayoutService } from '../../../services/layout/browser/layoutService.js';
@@ -324,10 +324,8 @@ class StatusbarPart extends Part implements IStatusbarEntryContainer {
}
private doCreateStatusItem(id: string, alignment: StatusbarAlignment, ...extraClasses: string[]): HTMLElement {
const itemContainer = document.createElement('div');
itemContainer.id = id;
const itemContainer = $('.statusbar-item', { id });
itemContainer.classList.add('statusbar-item');
if (extraClasses) {
itemContainer.classList.add(...extraClasses);
}
@@ -405,14 +403,12 @@ class StatusbarPart extends Part implements IStatusbarEntryContainer {
StatusBarFocused.bindTo(scopedContextKeyService).set(true);
// Left items container
this.leftItemsContainer = document.createElement('div');
this.leftItemsContainer.classList.add('left-items', 'items-container');
this.leftItemsContainer = $('.left-items.items-container');
this.element.appendChild(this.leftItemsContainer);
this.element.tabIndex = 0;
// Right items container
this.rightItemsContainer = document.createElement('div');
this.rightItemsContainer.classList.add('right-items', 'items-container');
this.rightItemsContainer = $('.right-items.items-container');
this.element.appendChild(this.rightItemsContainer);
// Context menu support
@@ -772,12 +768,12 @@ export class StatusbarService extends MultiWindowParts<StatusbarPart> implements
createAuxiliaryStatusbarPart(container: HTMLElement): IAuxiliaryStatusbarPart {
// Container
const statusbarPartContainer = document.createElement('footer');
statusbarPartContainer.classList.add('part', 'statusbar');
statusbarPartContainer.setAttribute('role', 'status');
const statusbarPartContainer = $('footer.part.statusbar', {
'role': 'status',
'aria-live': 'off',
'tabIndex': '0'
});
statusbarPartContainer.style.position = 'relative';
statusbarPartContainer.setAttribute('aria-live', 'off');
statusbarPartContainer.setAttribute('tabindex', '0');
container.appendChild(statusbarPartContainer);
// Statusbar Part

4
src/vs/workbench/browser/parts/titlebar/titlebarPart.ts
View File

@@ -149,9 +149,7 @@ export class BrowserTitleService extends MultiWindowParts<BrowserTitlebarPart> i
//#region Auxiliary Titlebar Parts
createAuxiliaryTitlebarPart(container: HTMLElement, editorGroupsContainer: IEditorGroupsContainer): IAuxiliaryTitlebarPart {
const titlebarPartContainer = document.createElement('div');
titlebarPartContainer.classList.add('part', 'titlebar');
titlebarPartContainer.setAttribute('role', 'none');
const titlebarPartContainer = $('.part.titlebar', { role: 'none' });
titlebarPartContainer.style.position = 'relative';
container.insertBefore(titlebarPartContainer, container.firstChild); // ensure we are first element

9
src/vs/workbench/browser/parts/views/viewPaneContainer.ts
View File

@@ -3,7 +3,7 @@
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import { addDisposableListener, Dimension, DragAndDropObserver, EventType, getWindow, isAncestor } from '../../../../base/browser/dom.js';
import { $, addDisposableListener, Dimension, DragAndDropObserver, EventType, getWindow, isAncestor } from '../../../../base/browser/dom.js';
import { StandardMouseEvent } from '../../../../base/browser/mouseEvent.js';
import { EventType as TouchEventType, Gesture } from '../../../../base/browser/touch.js';
import { IActionViewItem } from '../../../../base/browser/ui/actionbar/actionbar.js';
@@ -104,9 +104,9 @@ class ViewPaneDropOverlay extends Themable {
}
private create(): void {
// Container
this.container = document.createElement('div');
this.container.id = ViewPaneDropOverlay.OVERLAY_ID;
this.container = $('div', { id: ViewPaneDropOverlay.OVERLAY_ID });
this.container.style.top = '0px';
// Parent
@@ -118,8 +118,7 @@ class ViewPaneDropOverlay extends Themable {
}));
// Overlay
this.overlay = document.createElement('div');
this.overlay.classList.add('pane-overlay-indicator');
this.overlay = $('.pane-overlay-indicator');
this.container.appendChild(this.overlay);
// Overlay Event Handling

11
src/vs/workbench/electron-sandbox/window.ts
View File

@@ -8,7 +8,7 @@ import { localize } from '../../nls.js';
import { URI } from '../../base/common/uri.js';
import { onUnexpectedError } from '../../base/common/errors.js';
import { equals } from '../../base/common/objects.js';
import { EventType, EventHelper, addDisposableListener, ModifierKeyEmitter, getActiveElement, hasWindow, getWindowById, getWindows } from '../../base/browser/dom.js';
import { EventType, EventHelper, addDisposableListener, ModifierKeyEmitter, getActiveElement, hasWindow, getWindowById, getWindows, $ } from '../../base/browser/dom.js';
import { Action, Separator, WorkbenchActionExecutedClassification, WorkbenchActionExecutedEvent } from '../../base/common/actions.js';
import { IFileService } from '../../platform/files/common/files.js';
import { EditorResourceAccessor, IUntitledTextResourceEditorInput, SideBySideEditor, pathsToEditors, IResourceDiffEditorInput, IUntypedEditorInput, IEditorPane, isResourceEditorInput, IResourceMergeEditorInput } from '../common/editor.js';
@@ -1173,11 +1173,9 @@ class ZoomStatusEntry extends Disposable {
const disposables = new DisposableStore();
this.disposable.value = disposables;
const container = document.createElement('div');
container.classList.add('zoom-status');
const container = $('.zoom-status');
const left = document.createElement('div');
left.classList.add('zoom-status-left');
const left = $('.zoom-status-left');
container.appendChild(left);
const zoomOutAction: Action = disposables.add(new Action('workbench.action.zoomOut', localize('zoomOut', "Zoom Out"), ThemeIcon.asClassName(Codicon.remove), true, () => this.commandService.executeCommand(zoomOutAction.id)));
@@ -1195,8 +1193,7 @@ class ZoomStatusEntry extends Disposable {
actionBarLeft.push(this.zoomLevelLabel, { icon: false, label: true });
actionBarLeft.push(zoomInAction, { icon: true, label: false, keybinding: this.keybindingService.lookupKeybinding(zoomInAction.id)?.getLabel() });
const right = document.createElement('div');
right.classList.add('zoom-status-right');
const right = $('.zoom-status-right');
container.appendChild(right);
const actionBarRight = disposables.add(new ActionBar(right, { hoverDelegate: nativeHoverDelegate }));

5
src/vs/workbench/services/auxiliaryWindow/browser/auxiliaryWindowService.ts
View File

@@ -4,7 +4,7 @@
*--------------------------------------------------------------------------------------------*/
import { getZoomLevel } from '../../../../base/browser/browser.js';
import { Dimension, EventHelper, EventType, ModifierKeyEmitter, addDisposableListener, copyAttributes, createLinkElement, createMetaElement, getActiveWindow, getClientArea, getWindowId, isHTMLElement, position, registerWindow, sharedMutationObserver, trackAttributes } from '../../../../base/browser/dom.js';
import { $, Dimension, EventHelper, EventType, ModifierKeyEmitter, addDisposableListener, copyAttributes, createLinkElement, createMetaElement, getActiveWindow, getClientArea, getWindowId, isHTMLElement, position, registerWindow, sharedMutationObserver, trackAttributes } from '../../../../base/browser/dom.js';
import { cloneGlobalStylesheets, isGlobalStylesheet } from '../../../../base/browser/domStylesheets.js';
import { CodeWindow, ensureCodeWindow, mainWindow } from '../../../../base/browser/window.js';
import { coalesce } from '../../../../base/common/arrays.js';
@@ -504,8 +504,7 @@ export class BrowserAuxiliaryWindowService extends Disposable implements IAuxili
mark('code/auxiliaryWindow/willApplyHTML');
// Create workbench container and apply classes
const container = document.createElement('div');
container.setAttribute('role', 'application');
const container = $('div', { role: 'application' });
position(container, 0, 0, 0, 0, 'relative');
container.style.display = 'flex';
container.style.height = '100%';