diff --git a/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts b/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts index f2af5fb3a2f..ed629878cdd 100644 --- a/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts +++ b/src/vs/workbench/browser/parts/activitybar/activitybarPart.ts @@ -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); diff --git a/src/vs/workbench/browser/parts/editor/auxiliaryEditorPart.ts b/src/vs/workbench/browser/parts/editor/auxiliaryEditorPart.ts index 220bdf1cc65..4a001a815ec 100644 --- a/src/vs/workbench/browser/parts/editor/auxiliaryEditorPart.ts +++ b/src/vs/workbench/browser/parts/editor/auxiliaryEditorPart.ts @@ -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(); diff --git a/src/vs/workbench/browser/parts/editor/editorDropTarget.ts b/src/vs/workbench/browser/parts/editor/editorDropTarget.ts index 244ef9cb890..9f0b51ba1c2 100644 --- a/src/vs/workbench/browser/parts/editor/editorDropTarget.ts +++ b/src/vs/workbench/browser/parts/editor/editorDropTarget.ts @@ -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) { diff --git a/src/vs/workbench/browser/parts/editor/editorGroupView.ts b/src/vs/workbench/browser/parts/editor/editorGroupView.ts index 15012e7e723..ceb003699c0 100644 --- a/src/vs/workbench/browser/parts/editor/editorGroupView.ts +++ b/src/vs/workbench/browser/parts/editor/editorGroupView.ts @@ -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; } diff --git a/src/vs/workbench/browser/parts/editor/editorPanes.ts b/src/vs/workbench/browser/parts/editor/editorPanes.ts index 68b73d9a588..89c9f8c9243 100644 --- a/src/vs/workbench/browser/parts/editor/editorPanes.ts +++ b/src/vs/workbench/browser/parts/editor/editorPanes.ts @@ -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 diff --git a/src/vs/workbench/browser/parts/editor/editorPart.ts b/src/vs/workbench/browser/parts/editor/editorPart.ts index 90254ef45be..0875886e68b 100644 --- a/src/vs/workbench/browser/parts/editor/editorPart.ts +++ b/src/vs/workbench/browser/parts/editor/editorPart.ts @@ -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 diff --git a/src/vs/workbench/browser/parts/editor/editorPlaceholder.ts b/src/vs/workbench/browser/parts/editor/editorPlaceholder.ts index 15d87f9ad15..4b3ef8b4dc7 100644 --- a/src/vs/workbench/browser/parts/editor/editorPlaceholder.ts +++ b/src/vs/workbench/browser/parts/editor/editorPlaceholder.ts @@ -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); diff --git a/src/vs/workbench/browser/parts/editor/editorTabsControl.ts b/src/vs/workbench/browser/parts/editor/editorTabsControl.ts index 7306519d4f7..51e7736fe03 100644 --- a/src/vs/workbench/browser/parts/editor/editorTabsControl.ts +++ b/src/vs/workbench/browser/parts/editor/editorTabsControl.ts @@ -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); diff --git a/src/vs/workbench/browser/parts/editor/editorTitleControl.ts b/src/vs/workbench/browser/parts/editor/editorTitleControl.ts index 65ef9fca411..00f7bf67590 100644 --- a/src/vs/workbench/browser/parts/editor/editorTitleControl.ts +++ b/src/vs/workbench/browser/parts/editor/editorTitleControl.ts @@ -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, { diff --git a/src/vs/workbench/browser/parts/editor/multiEditorTabsControl.ts b/src/vs/workbench/browser/parts/editor/multiEditorTabsControl.ts index 978c3f94059..b6cbb625b7a 100644 --- a/src/vs/workbench/browser/parts/editor/multiEditorTabsControl.ts +++ b/src/vs/workbench/browser/parts/editor/multiEditorTabsControl.ts @@ -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 diff --git a/src/vs/workbench/browser/parts/editor/singleEditorTabsControl.ts b/src/vs/workbench/browser/parts/editor/singleEditorTabsControl.ts index a3b16b2d7fc..d8620a08abd 100644 --- a/src/vs/workbench/browser/parts/editor/singleEditorTabsControl.ts +++ b/src/vs/workbench/browser/parts/editor/singleEditorTabsControl.ts @@ -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 diff --git a/src/vs/workbench/browser/parts/globalCompositeBar.ts b/src/vs/workbench/browser/parts/globalCompositeBar.ts index c026e158172..e927fbca8e3 100644 --- a/src/vs/workbench/browser/parts/globalCompositeBar.ts +++ b/src/vs/workbench/browser/parts/globalCompositeBar.ts @@ -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 diff --git a/src/vs/workbench/browser/parts/notifications/notificationsCenter.ts b/src/vs/workbench/browser/parts/notifications/notificationsCenter.ts index 85356ca85d9..d0ad9d533b8 100644 --- a/src/vs/workbench/browser/parts/notifications/notificationsCenter.ts +++ b/src/vs/workbench/browser/parts/notifications/notificationsCenter.ts @@ -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)); diff --git a/src/vs/workbench/browser/parts/notifications/notificationsList.ts b/src/vs/workbench/browser/parts/notifications/notificationsList.ts index d0893c26d1d..edb6062b717 100644 --- a/src/vs/workbench/browser/parts/notifications/notificationsList.ts +++ b/src/vs/workbench/browser/parts/notifications/notificationsList.ts @@ -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)); diff --git a/src/vs/workbench/browser/parts/notifications/notificationsToasts.ts b/src/vs/workbench/browser/parts/notifications/notificationsToasts.ts index f0dda3b44cb..aa20ba8de9e 100644 --- a/src/vs/workbench/browser/parts/notifications/notificationsToasts.ts +++ b/src/vs/workbench/browser/parts/notifications/notificationsToasts.ts @@ -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 diff --git a/src/vs/workbench/browser/parts/notifications/notificationsViewer.ts b/src/vs/workbench/browser/parts/notifications/notificationsViewer.ts index 389569cf5a7..ab770c9580b 100644 --- a/src/vs/workbench/browser/parts/notifications/notificationsViewer.ts +++ b/src/vs/workbench/browser/parts/notifications/notificationsViewer.ts @@ -45,12 +45,7 @@ export class NotificationsListDelegate implements IListVirtualDelegate 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 diff --git a/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts b/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts index 718037ce3e6..14cdd239376 100644 --- a/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts +++ b/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts @@ -149,9 +149,7 @@ export class BrowserTitleService extends MultiWindowParts 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 diff --git a/src/vs/workbench/browser/parts/views/viewPaneContainer.ts b/src/vs/workbench/browser/parts/views/viewPaneContainer.ts index b4f069c65f6..eaa4e9aae1a 100644 --- a/src/vs/workbench/browser/parts/views/viewPaneContainer.ts +++ b/src/vs/workbench/browser/parts/views/viewPaneContainer.ts @@ -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 diff --git a/src/vs/workbench/electron-sandbox/window.ts b/src/vs/workbench/electron-sandbox/window.ts index 4babd90fe70..810be457095 100644 --- a/src/vs/workbench/electron-sandbox/window.ts +++ b/src/vs/workbench/electron-sandbox/window.ts @@ -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 })); diff --git a/src/vs/workbench/services/auxiliaryWindow/browser/auxiliaryWindowService.ts b/src/vs/workbench/services/auxiliaryWindow/browser/auxiliaryWindowService.ts index aab43037968..276e603077f 100644 --- a/src/vs/workbench/services/auxiliaryWindow/browser/auxiliaryWindowService.ts +++ b/src/vs/workbench/services/auxiliaryWindow/browser/auxiliaryWindowService.ts @@ -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%';