diff --git a/src/vs/base/browser/ui/actionbar/actionViewItems.ts b/src/vs/base/browser/ui/actionbar/actionViewItems.ts index cd1f27f6b9b..0968da8a678 100644 --- a/src/vs/base/browser/ui/actionbar/actionViewItems.ts +++ b/src/vs/base/browser/ui/actionbar/actionViewItems.ts @@ -14,7 +14,7 @@ import { EventType as TouchEventType, Gesture } from 'vs/base/browser/touch'; import { IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview'; import { DataTransfers } from 'vs/base/browser/dnd'; import { isFirefox } from 'vs/base/browser/browser'; -import { $, addClasses, addDisposableListener, append, EventHelper, EventLike, EventType, removeClasses, removeTabIndexAndUpdateFocus } from 'vs/base/browser/dom'; +import { $, addDisposableListener, append, EventHelper, EventLike, EventType, removeTabIndexAndUpdateFocus } from 'vs/base/browser/dom'; export interface IBaseActionViewItemOptions { draggable?: boolean; @@ -294,7 +294,7 @@ export class ActionViewItem extends BaseActionViewItem { updateClass(): void { if (this.cssClass && this.label) { - removeClasses(this.label, this.cssClass); + this.label.classList.remove(...this.cssClass.split(' ')); } if (this.options.icon) { @@ -303,7 +303,7 @@ export class ActionViewItem extends BaseActionViewItem { if (this.label) { this.label.classList.add('codicon'); if (this.cssClass) { - addClasses(this.label, this.cssClass); + this.label.classList.add(...this.cssClass.split(' ')); } } diff --git a/src/vs/base/browser/ui/contextview/contextview.ts b/src/vs/base/browser/ui/contextview/contextview.ts index d4aa1a0bede..82e9fddfa28 100644 --- a/src/vs/base/browser/ui/contextview/contextview.ts +++ b/src/vs/base/browser/ui/contextview/contextview.ts @@ -295,10 +295,10 @@ export class ContextView extends Disposable { const left = layout(window.innerWidth, viewSizeWidth, horizontalAnchor); - DOM.removeClasses(this.view, 'top', 'bottom', 'left', 'right'); - DOM.addClass(this.view, anchorPosition === AnchorPosition.BELOW ? 'bottom' : 'top'); - DOM.addClass(this.view, anchorAlignment === AnchorAlignment.LEFT ? 'left' : 'right'); - DOM.toggleClass(this.view, 'fixed', this.useFixedPosition); + this.view.classList.remove('top', 'bottom', 'left', 'right'); + this.view.classList.add(anchorPosition === AnchorPosition.BELOW ? 'bottom' : 'top'); + this.view.classList.add(anchorAlignment === AnchorAlignment.LEFT ? 'left' : 'right'); + this.view.classList.toggle('fixed', this.useFixedPosition); const containerPosition = DOM.getDomNodePagePosition(this.container!); this.view.style.top = `${top - (this.useFixedPosition ? DOM.getDomNodePagePosition(this.view).top : containerPosition.top)}px`; diff --git a/src/vs/base/browser/ui/dialog/dialog.ts b/src/vs/base/browser/ui/dialog/dialog.ts index 623aa9c00d0..93df3c8f22d 100644 --- a/src/vs/base/browser/ui/dialog/dialog.ts +++ b/src/vs/base/browser/ui/dialog/dialog.ts @@ -6,7 +6,7 @@ import 'vs/css!./dialog'; import * as nls from 'vs/nls'; import { Disposable } from 'vs/base/common/lifecycle'; -import { $, hide, show, EventHelper, clearNode, removeClasses, addClasses, removeNode, isAncestor, addDisposableListener, EventType } from 'vs/base/browser/dom'; +import { $, hide, show, EventHelper, clearNode, isAncestor, addDisposableListener, EventType } from 'vs/base/browser/dom'; import { domEvent } from 'vs/base/browser/event'; import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent'; import { KeyCode, KeyMod } from 'vs/base/common/keyCodes'; @@ -234,23 +234,23 @@ export class Dialog extends Disposable { } })); - removeClasses(this.iconElement, dialogErrorIcon.classNames, dialogWarningIcon.classNames, dialogInfoIcon.classNames, Codicon.loading.classNames); + this.iconElement.classList.remove(...dialogErrorIcon.classNamesArray, ...dialogWarningIcon.classNamesArray, ...dialogInfoIcon.classNamesArray, ...Codicon.loading.classNamesArray); switch (this.options.type) { case 'error': - addClasses(this.iconElement, dialogErrorIcon.classNames); + this.iconElement.classList.add(...dialogErrorIcon.classNamesArray); break; case 'warning': - addClasses(this.iconElement, dialogWarningIcon.classNames); + this.iconElement.classList.add(...dialogWarningIcon.classNamesArray); break; case 'pending': - addClasses(this.iconElement, Codicon.loading.classNames, 'codicon-animation-spin'); + this.iconElement.classList.add(...Codicon.loading.classNamesArray, 'codicon-animation-spin'); break; case 'none': case 'info': case 'question': default: - addClasses(this.iconElement, dialogInfoIcon.classNames); + this.iconElement.classList.add(...dialogInfoIcon.classNamesArray); break; } @@ -334,7 +334,7 @@ export class Dialog extends Disposable { dispose(): void { super.dispose(); if (this.modal) { - removeNode(this.modal); + this.modal.remove(); this.modal = undefined; } diff --git a/src/vs/base/browser/ui/menu/menu.ts b/src/vs/base/browser/ui/menu/menu.ts index 608b6db98d7..92200558707 100644 --- a/src/vs/base/browser/ui/menu/menu.ts +++ b/src/vs/base/browser/ui/menu/menu.ts @@ -8,7 +8,7 @@ import * as strings from 'vs/base/common/strings'; import { IActionRunner, IAction, SubmenuAction, Separator, IActionViewItemProvider } from 'vs/base/common/actions'; import { ActionBar, ActionsOrientation } from 'vs/base/browser/ui/actionbar/actionbar'; import { ResolvedKeybinding, KeyCode } from 'vs/base/common/keyCodes'; -import { addClass, EventType, EventHelper, EventLike, removeTabIndexAndUpdateFocus, isAncestor, hasClass, addDisposableListener, removeClass, append, $, addClasses, removeClasses, clearNode, createStyleSheet, isInShadowDOM, getActiveElement, Dimension, IDomNodePagePosition } from 'vs/base/browser/dom'; +import { EventType, EventHelper, EventLike, removeTabIndexAndUpdateFocus, isAncestor, addDisposableListener, append, $, clearNode, createStyleSheet, isInShadowDOM, getActiveElement, Dimension, IDomNodePagePosition } from 'vs/base/browser/dom'; import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent'; import { RunOnceScheduler } from 'vs/base/common/async'; import { DisposableStore } from 'vs/base/common/lifecycle'; @@ -73,10 +73,10 @@ export class Menu extends ActionBar { protected styleSheet: HTMLStyleElement | undefined; constructor(container: HTMLElement, actions: ReadonlyArray, options: IMenuOptions = {}) { - addClass(container, 'monaco-menu-container'); + container.classList.add('monaco-menu-container'); container.setAttribute('role', 'presentation'); const menuElement = document.createElement('div'); - addClass(menuElement, 'monaco-menu'); + menuElement.classList.add('monaco-menu'); menuElement.setAttribute('role', 'presentation'); super(menuElement, { @@ -171,7 +171,7 @@ export class Menu extends ActionBar { target = target.parentElement; } - if (hasClass(target, 'action-item')) { + if (target.classList.contains('action-item')) { const lastFocusedItem = this.focusedItem; this.setFocusedItem(target); @@ -597,37 +597,37 @@ class BaseMenuActionViewItem extends BaseActionViewItem { updateClass(): void { if (this.cssClass && this.item) { - removeClasses(this.item, this.cssClass); + this.item.classList.remove(...this.cssClass.split(' ')); } if (this.options.icon && this.label) { this.cssClass = this.getAction().class || ''; - addClass(this.label, 'icon'); + this.label.classList.add('icon'); if (this.cssClass) { - addClasses(this.label, this.cssClass); + this.label.classList.add(...this.cssClass.split(' ')); } this.updateEnabled(); } else if (this.label) { - removeClass(this.label, 'icon'); + this.label.classList.remove('icon'); } } updateEnabled(): void { if (this.getAction().enabled) { if (this.element) { - removeClass(this.element, 'disabled'); + this.element.classList.remove('disabled'); } if (this.item) { - removeClass(this.item, 'disabled'); + this.item.classList.remove('disabled'); this.item.tabIndex = 0; } } else { if (this.element) { - addClass(this.element, 'disabled'); + this.element.classList.add('disabled'); } if (this.item) { - addClass(this.item, 'disabled'); + this.item.classList.add('disabled'); removeTabIndexAndUpdateFocus(this.item); } } @@ -639,11 +639,11 @@ class BaseMenuActionViewItem extends BaseActionViewItem { } if (this.getAction().checked) { - addClass(this.item, 'checked'); + this.item.classList.add('checked'); this.item.setAttribute('role', 'menuitemcheckbox'); this.item.setAttribute('aria-checked', 'true'); } else { - removeClass(this.item, 'checked'); + this.item.classList.remove('checked'); this.item.setAttribute('role', 'menuitem'); this.item.setAttribute('aria-checked', 'false'); } @@ -658,7 +658,7 @@ class BaseMenuActionViewItem extends BaseActionViewItem { return; } - const isSelected = this.element && hasClass(this.element, 'focused'); + const isSelected = this.element && this.element.classList.contains('focused'); const fgColor = isSelected && this.menuStyle.selectionForegroundColor ? this.menuStyle.selectionForegroundColor : this.menuStyle.foregroundColor; const bgColor = isSelected && this.menuStyle.selectionBackgroundColor ? this.menuStyle.selectionBackgroundColor : undefined; const border = isSelected && this.menuStyle.selectionBorderColor ? `thin solid ${this.menuStyle.selectionBorderColor}` : ''; @@ -726,7 +726,7 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem { } if (this.item) { - addClass(this.item, 'monaco-submenu-item'); + this.item.classList.add('monaco-submenu-item'); this.item.setAttribute('aria-haspopup', 'true'); this.updateAriaExpanded('false'); this.submenuIndicator = append(this.item, $('span.submenu-indicator' + menuSubmenuIcon.cssSelector)); @@ -841,7 +841,7 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem { if (!this.parentData.submenu) { this.updateAriaExpanded('true'); this.submenuContainer = append(this.element, $('div.monaco-submenu')); - addClasses(this.submenuContainer, 'menubar-menu-items-holder', 'context-view'); + this.submenuContainer.classList.add('menubar-menu-items-holder', 'context-view'); // Set the top value of the menu container before construction // This allows the menu constructor to calculate the proper max height @@ -919,7 +919,7 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem { return; } - const isSelected = this.element && hasClass(this.element, 'focused'); + const isSelected = this.element && this.element.classList.contains('focused'); const fgColor = isSelected && this.menuStyle.selectionForegroundColor ? this.menuStyle.selectionForegroundColor : this.menuStyle.foregroundColor; if (this.submenuIndicator) { diff --git a/src/vs/base/browser/ui/menu/menubar.ts b/src/vs/base/browser/ui/menu/menubar.ts index 3a0c90d47e7..cb03f5f2df7 100644 --- a/src/vs/base/browser/ui/menu/menubar.ts +++ b/src/vs/base/browser/ui/menu/menubar.ts @@ -100,7 +100,7 @@ export class MenuBar extends Disposable { this.container.setAttribute('role', 'menubar'); if (this.options.compactMode !== undefined) { - DOM.addClass(this.container, 'compact'); + this.container.classList.add('compact'); } this.menuCache = []; @@ -425,12 +425,12 @@ export class MenuBar extends Disposable { super.dispose(); this.menuCache.forEach(menuBarMenu => { - DOM.removeNode(menuBarMenu.titleElement); - DOM.removeNode(menuBarMenu.buttonElement); + menuBarMenu.titleElement.remove(); + menuBarMenu.buttonElement.remove(); }); - DOM.removeNode(this.overflowMenu.titleElement); - DOM.removeNode(this.overflowMenu.buttonElement); + this.overflowMenu.titleElement.remove(); + this.overflowMenu.buttonElement.remove(); dispose(this.overflowLayoutScheduled); this.overflowLayoutScheduled = undefined; @@ -509,7 +509,7 @@ export class MenuBar extends Disposable { } if (this.overflowMenu.buttonElement.nextElementSibling !== this.menuCache[this.numMenusShown].buttonElement) { - DOM.removeNode(this.overflowMenu.buttonElement); + this.overflowMenu.buttonElement.remove(); this.container.insertBefore(this.overflowMenu.buttonElement, this.menuCache[this.numMenusShown].buttonElement); this.overflowMenu.buttonElement.style.visibility = 'visible'; } @@ -520,7 +520,7 @@ export class MenuBar extends Disposable { this.overflowMenu.actions.push(...compactMenuActions); } } else { - DOM.removeNode(this.overflowMenu.buttonElement); + this.overflowMenu.buttonElement.remove(); this.container.appendChild(this.overflowMenu.buttonElement); this.overflowMenu.buttonElement.style.visibility = 'hidden'; } @@ -923,7 +923,7 @@ export class MenuBar extends Disposable { if (this.focusedMenu.holder) { if (this.focusedMenu.holder.parentElement) { - DOM.removeClass(this.focusedMenu.holder.parentElement, 'open'); + this.focusedMenu.holder.parentElement.classList.remove('open'); } this.focusedMenu.holder.remove(); @@ -947,7 +947,7 @@ export class MenuBar extends Disposable { const menuHolder = $('div.menubar-menu-items-holder', { 'title': '' }); - DOM.addClass(customMenu.buttonElement, 'open'); + customMenu.buttonElement.classList.add('open'); if (this.options.compactMode === Direction.Right) { menuHolder.style.top = `0px`; diff --git a/src/vs/platform/actions/browser/menuEntryActionViewItem.ts b/src/vs/platform/actions/browser/menuEntryActionViewItem.ts index a269a486852..3975c7fbd7e 100644 --- a/src/vs/platform/actions/browser/menuEntryActionViewItem.ts +++ b/src/vs/platform/actions/browser/menuEntryActionViewItem.ts @@ -3,7 +3,7 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -import { addClasses, createCSSRule, removeClasses, asCSSUrl } from 'vs/base/browser/dom'; +import { createCSSRule, asCSSUrl } from 'vs/base/browser/dom'; import { domEvent } from 'vs/base/browser/event'; import { IAction, Separator } from 'vs/base/common/actions'; import { Emitter } from 'vs/base/common/event'; @@ -237,10 +237,10 @@ export class MenuEntryActionViewItem extends ActionViewItem { // theme icons const iconClass = ThemeIcon.asClassName(icon); if (this.label && iconClass) { - addClasses(this.label, iconClass); + this.label.classList.add(...iconClass.split(' ')); this._itemClassDispose.value = toDisposable(() => { if (this.label) { - removeClasses(this.label, iconClass); + this.label.classList.remove(...iconClass.split(' ')); } }); } @@ -263,11 +263,10 @@ export class MenuEntryActionViewItem extends ActionViewItem { } if (this.label) { - - addClasses(this.label, 'icon', iconClass); + this.label.classList.add('icon', ...iconClass.split(' ')); this._itemClassDispose.value = toDisposable(() => { if (this.label) { - removeClasses(this.label, 'icon', iconClass); + this.label.classList.remove('icon', ...iconClass.split(' ')); } }); } diff --git a/src/vs/platform/contextview/browser/contextMenuHandler.ts b/src/vs/platform/contextview/browser/contextMenuHandler.ts index 1804ce3328e..d307c29276b 100644 --- a/src/vs/platform/contextview/browser/contextMenuHandler.ts +++ b/src/vs/platform/contextview/browser/contextMenuHandler.ts @@ -14,7 +14,7 @@ import { INotificationService } from 'vs/platform/notification/common/notificati import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding'; import { IThemeService } from 'vs/platform/theme/common/themeService'; import { IContextMenuDelegate } from 'vs/base/browser/contextmenu'; -import { EventType, $, removeNode, isHTMLElement } from 'vs/base/browser/dom'; +import { EventType, $, isHTMLElement } from 'vs/base/browser/dom'; import { attachMenuStyler } from 'vs/platform/theme/common/styler'; import { domEvent } from 'vs/base/browser/event'; import { StandardMouseEvent } from 'vs/base/browser/mouseEvent'; @@ -132,7 +132,7 @@ export class ContextMenuHandler { } if (this.block) { - removeNode(this.block); + this.block.remove(); this.block = null; } diff --git a/src/vs/workbench/browser/parts/compositeBarActions.ts b/src/vs/workbench/browser/parts/compositeBarActions.ts index 01a0c16c51b..be07132e53f 100644 --- a/src/vs/workbench/browser/parts/compositeBarActions.ts +++ b/src/vs/workbench/browser/parts/compositeBarActions.ts @@ -299,8 +299,8 @@ export class ActivityActionViewItem extends BaseActionViewItem { } if (clazz) { - dom.addClasses(this.badge, clazz); - this.badgeDisposable.value = toDisposable(() => dom.removeClasses(this.badge, clazz)); + this.badge.classList.add(...clazz.split(' ')); + this.badgeDisposable.value = toDisposable(() => this.badge.classList.remove(...clazz.split(' '))); } } @@ -323,7 +323,7 @@ export class ActivityActionViewItem extends BaseActionViewItem { this.label.className = 'action-label'; if (this.activity.cssClass) { - dom.addClasses(this.label, this.activity.cssClass); + this.label.classList.add(...this.activity.cssClass.split(' ')); } if (this.options.icon && !this.activity.iconUrl) { diff --git a/src/vs/workbench/browser/parts/compositePart.ts b/src/vs/workbench/browser/parts/compositePart.ts index 6d9d046678a..556c347822d 100644 --- a/src/vs/workbench/browser/parts/compositePart.ts +++ b/src/vs/workbench/browser/parts/compositePart.ts @@ -28,7 +28,7 @@ import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding'; import { IThemeService } from 'vs/platform/theme/common/themeService'; import { attachProgressBarStyler } from 'vs/platform/theme/common/styler'; import { INotificationService } from 'vs/platform/notification/common/notification'; -import { Dimension, append, $, hide, show, addClasses } from 'vs/base/browser/dom'; +import { Dimension, append, $, hide, show } from 'vs/base/browser/dom'; import { AnchorAlignment } from 'vs/base/browser/ui/contextview/contextview'; import { assertIsDefined, withNullAsUndefined } from 'vs/base/common/types'; @@ -213,7 +213,7 @@ export abstract class CompositePart extends Part { // Build Container off-DOM compositeContainer = $('.composite'); - addClasses(compositeContainer, this.compositeCSSClass); + compositeContainer.classList.add(...this.compositeCSSClass.split(' ')); compositeContainer.id = composite.getId(); composite.create(compositeContainer); diff --git a/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts b/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts index 8310d162e06..fa7ce81e939 100644 --- a/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts +++ b/src/vs/workbench/browser/parts/titlebar/titlebarPart.ts @@ -25,7 +25,7 @@ import { isMacintosh, isWindows, isLinux, isWeb } from 'vs/base/common/platform' import { URI } from 'vs/base/common/uri'; import { Color } from 'vs/base/common/color'; import { trim } from 'vs/base/common/strings'; -import { EventType, EventHelper, Dimension, isAncestor, append, $, addDisposableListener, runAtThisOrScheduleAtNextAnimationFrame, removeNode } from 'vs/base/browser/dom'; +import { EventType, EventHelper, Dimension, isAncestor, append, $, addDisposableListener, runAtThisOrScheduleAtNextAnimationFrame } from 'vs/base/browser/dom'; import { CustomMenubarControl } from 'vs/workbench/browser/parts/titlebar/menubarControl'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { template } from 'vs/base/common/labels'; @@ -319,7 +319,7 @@ export class TitlebarPart extends Part implements ITitleService { } if (this.menubar) { - removeNode(this.menubar); + this.menubar.remove(); this.menubar = undefined; } } diff --git a/src/vs/workbench/browser/parts/views/viewPaneContainer.ts b/src/vs/workbench/browser/parts/views/viewPaneContainer.ts index c5817766f90..6e94dbf812f 100644 --- a/src/vs/workbench/browser/parts/views/viewPaneContainer.ts +++ b/src/vs/workbench/browser/parts/views/viewPaneContainer.ts @@ -9,7 +9,7 @@ import { Event, Emitter } from 'vs/base/common/event'; import { ColorIdentifier, activeContrastBorder, foreground } from 'vs/platform/theme/common/colorRegistry'; import { attachStyler, IColorMapping, attachButtonStyler, attachLinkStyler, attachProgressBarStyler } from 'vs/platform/theme/common/styler'; import { SIDE_BAR_DRAG_AND_DROP_BACKGROUND, SIDE_BAR_SECTION_HEADER_FOREGROUND, SIDE_BAR_SECTION_HEADER_BACKGROUND, SIDE_BAR_SECTION_HEADER_BORDER, PANEL_BACKGROUND, SIDE_BAR_BACKGROUND, PANEL_SECTION_HEADER_FOREGROUND, PANEL_SECTION_HEADER_BACKGROUND, PANEL_SECTION_HEADER_BORDER, PANEL_SECTION_DRAG_AND_DROP_BACKGROUND, PANEL_SECTION_BORDER } from 'vs/workbench/common/theme'; -import { after, append, $, trackFocus, EventType, isAncestor, Dimension, addDisposableListener, createCSSRule, asCSSUrl, addClasses } from 'vs/base/browser/dom'; +import { after, append, $, trackFocus, EventType, isAncestor, Dimension, addDisposableListener, createCSSRule, asCSSUrl } from 'vs/base/browser/dom'; import { IDisposable, combinedDisposable, dispose, toDisposable, Disposable, DisposableStore } from 'vs/base/common/lifecycle'; import { IAction, Separator, IActionViewItem } from 'vs/base/common/actions'; import { ActionsOrientation, prepareActions } from 'vs/base/browser/ui/actionbar/actionbar'; @@ -361,7 +361,7 @@ export abstract class ViewPane extends Pane implements IView { } if (cssClass) { - addClasses(this.iconContainer, cssClass); + this.iconContainer.classList.add(...cssClass.split(' ')); } const calculatedTitle = this.calculateTitle(title); diff --git a/src/vs/workbench/contrib/comments/browser/commentFormActions.ts b/src/vs/workbench/contrib/comments/browser/commentFormActions.ts index 1b7a6d7ae2e..71de392b373 100644 --- a/src/vs/workbench/contrib/comments/browser/commentFormActions.ts +++ b/src/vs/workbench/contrib/comments/browser/commentFormActions.ts @@ -3,7 +3,6 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -import * as DOM from 'vs/base/browser/dom'; import { Button } from 'vs/base/browser/ui/button/button'; import { IAction } from 'vs/base/common/actions'; import { DisposableStore, IDisposable } from 'vs/base/common/lifecycle'; @@ -25,7 +24,7 @@ export class CommentFormActions implements IDisposable { setActions(menu: IMenu) { this._toDispose.clear(); - this._buttonElements.forEach(b => DOM.removeNode(b)); + this._buttonElements.forEach(b => b.remove()); const groups = menu.getActions({ shouldForwardArgs: true }); for (const group of groups) {