diff --git a/src/vs/base/browser/ui/breadcrumbs/breadcrumbsWidget.ts b/src/vs/base/browser/ui/breadcrumbs/breadcrumbsWidget.ts index b0df6256ebccd9af43a6f90844397ad8b35f1b82..d355a968ee8dbb5da76ba2a60faec50557f97a39 100644 --- a/src/vs/base/browser/ui/breadcrumbs/breadcrumbsWidget.ts +++ b/src/vs/base/browser/ui/breadcrumbs/breadcrumbsWidget.ts @@ -230,10 +230,10 @@ export class BreadcrumbsWidget { for (let i = 0; i < this._nodes.length; i++) { const node = this._nodes[i]; if (i !== nth) { - dom.removeClass(node, 'focused'); + node.classList.remove('focused'); } else { this._focusedItemIdx = i; - dom.addClass(node, 'focused'); + node.classList.add('focused'); node.focus(); } } @@ -274,10 +274,10 @@ export class BreadcrumbsWidget { for (let i = 0; i < this._nodes.length; i++) { const node = this._nodes[i]; if (i !== nth) { - dom.removeClass(node, 'selected'); + node.classList.remove('selected'); } else { this._selectedItemIdx = i; - dom.addClass(node, 'selected'); + node.classList.add('selected'); } } this._onDidSelectItem.fire({ type: 'select', item: this._items[this._selectedItemIdx], node: this._nodes[this._selectedItemIdx], payload }); diff --git a/src/vs/editor/contrib/codelens/codelensWidget.ts b/src/vs/editor/contrib/codelens/codelensWidget.ts index 273fcfb7ea1d3a6284329b0331b5b621d6e54484..6fe58d4ee80b5ef30d041a9088f4b7c1187519b8 100644 --- a/src/vs/editor/contrib/codelens/codelensWidget.ts +++ b/src/vs/editor/contrib/codelens/codelensWidget.ts @@ -4,7 +4,6 @@ *--------------------------------------------------------------------------------------------*/ import 'vs/css!./codelensWidget'; -import * as dom from 'vs/base/browser/dom'; import { renderCodicons } from 'vs/base/common/codicons'; import { escape } from 'vs/base/common/strings'; import { IViewZone, IContentWidget, IActiveCodeEditor, IContentWidgetPosition, ContentWidgetPositionPreference, IViewZoneChangeAccessor } from 'vs/editor/browser/editorBrowser'; @@ -113,7 +112,7 @@ class CodeLensContentWidget implements IContentWidget { } this._domNode.innerHTML = innerHtml; if (this._isEmpty && animate) { - dom.addClass(this._domNode, 'fadein'); + this._domNode.classList.add('fadein'); } this._isEmpty = false; } diff --git a/src/vs/editor/contrib/documentSymbols/outlineTree.ts b/src/vs/editor/contrib/documentSymbols/outlineTree.ts index dc76b01e12279e94e1e704235ae57e2cb1d17a68..1bfcef9932398f634f793e8554ddd9ed24c86072 100644 --- a/src/vs/editor/contrib/documentSymbols/outlineTree.ts +++ b/src/vs/editor/contrib/documentSymbols/outlineTree.ts @@ -102,7 +102,7 @@ export class OutlineGroupRenderer implements ITreeRenderer 0) { dom.show(template.decoration); - dom.removeClass(template.decoration, 'bubble'); + template.decoration.classList.remove('bubble'); template.decoration.innerText = count < 10 ? count.toString() : '+9'; template.decoration.title = count === 1 ? localize('1.problem', "1 problem in this element") : localize('N.problem', "{0} problems in this element", count); template.decoration.style.setProperty('--outline-element-color', cssColor); } else { dom.show(template.decoration); - dom.addClass(template.decoration, 'bubble'); + template.decoration.classList.add('bubble'); template.decoration.innerText = '\uea71'; template.decoration.title = localize('deep.problem', "Contains elements with problems"); template.decoration.style.setProperty('--outline-element-color', cssColor); diff --git a/src/vs/editor/contrib/gotoSymbol/peek/referencesTree.ts b/src/vs/editor/contrib/gotoSymbol/peek/referencesTree.ts index 359b383774362a571d8b4245bf093b8488bc0a3f..b7d076b2a6417171b3129918cec67c7c0ebedd00 100644 --- a/src/vs/editor/contrib/gotoSymbol/peek/referencesTree.ts +++ b/src/vs/editor/contrib/gotoSymbol/peek/referencesTree.ts @@ -119,7 +119,7 @@ class FileReferencesTemplate extends Disposable { ) { super(); const parent = document.createElement('div'); - dom.addClass(parent, 'reference-file'); + parent.classList.add('reference-file'); this.file = this._register(new IconLabel(parent, { supportHighlights: true })); this.badge = new CountBadge(dom.append(parent, dom.$('.count'))); @@ -184,10 +184,10 @@ class OneReferenceTemplate { // we have score, then render the score const { value, highlight } = preview; if (score && !FuzzyScore.isDefault(score)) { - dom.toggleClass(this.label.element, 'referenceMatch', false); + this.label.element.classList.toggle('referenceMatch', false); this.label.set(value, createMatches(score)); } else { - dom.toggleClass(this.label.element, 'referenceMatch', true); + this.label.element.classList.toggle('referenceMatch', true); this.label.set(value, [highlight]); } } diff --git a/src/vs/editor/contrib/gotoSymbol/peek/referencesWidget.ts b/src/vs/editor/contrib/gotoSymbol/peek/referencesWidget.ts index 15cbac19aa408c31b75bb89cb3be6bc129cb5016..4c41acb0056ae0473c12fcc235af2d01c273d59a 100644 --- a/src/vs/editor/contrib/gotoSymbol/peek/referencesWidget.ts +++ b/src/vs/editor/contrib/gotoSymbol/peek/referencesWidget.ts @@ -465,7 +465,7 @@ export class ReferenceWidget extends peekView.PeekViewWidget { })); // make sure things are rendered - dom.addClass(this.container!, 'results-loaded'); + this.container!.classList.add('results-loaded'); dom.show(this._treeContainer); dom.show(this._previewContainer); this._splitView.layout(this._dim.width); diff --git a/src/vs/editor/contrib/rename/renameInputField.ts b/src/vs/editor/contrib/rename/renameInputField.ts index 3767c0157304cf352317a0f84e240d6d3eb3b054..d527c20ea96b63162d0b5c66465ef3d55d38c640 100644 --- a/src/vs/editor/contrib/rename/renameInputField.ts +++ b/src/vs/editor/contrib/rename/renameInputField.ts @@ -15,7 +15,6 @@ import { inputBackground, inputBorder, inputForeground, widgetShadow, editorWidg import { IColorTheme, IThemeService } from 'vs/platform/theme/common/themeService'; import { EditorOption } from 'vs/editor/common/config/editorOptions'; import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding'; -import { toggleClass } from 'vs/base/browser/dom'; import { CancellationToken } from 'vs/base/common/cancellation'; export const CONTEXT_RENAME_INPUT_VISIBLE = new RawContextKey('renameInputVisible', false); @@ -152,7 +151,7 @@ export class RenameInputField implements IContentWidget { getInput(where: IRange, value: string, selectionStart: number, selectionEnd: number, supportPreview: boolean, token: CancellationToken): Promise { - toggleClass(this._domNode!, 'preview', supportPreview); + this._domNode!.classList.toggle('preview', supportPreview); this._position = new Position(where.startLineNumber, where.startColumn); this._input!.value = value; diff --git a/src/vs/editor/contrib/suggest/suggestWidget.ts b/src/vs/editor/contrib/suggest/suggestWidget.ts index fa6e6352dc51b0bf0267f67d2ae2efd693b76b90..3956148566d6f86d33c59b7c7452cfb4330a693f 100644 --- a/src/vs/editor/contrib/suggest/suggestWidget.ts +++ b/src/vs/editor/contrib/suggest/suggestWidget.ts @@ -13,7 +13,7 @@ import * as strings from 'vs/base/common/strings'; import { Event, Emitter } from 'vs/base/common/event'; import { onUnexpectedError } from 'vs/base/common/errors'; import { IDisposable, dispose, toDisposable, DisposableStore, Disposable } from 'vs/base/common/lifecycle'; -import { addClass, append, $, hide, removeClass, show, toggleClass, getDomNodePagePosition, hasClass, addDisposableListener, addStandardDisposableListener, addClasses } from 'vs/base/browser/dom'; +import { append, $, hide, show, getDomNodePagePosition, addDisposableListener, addStandardDisposableListener, addClasses } from 'vs/base/browser/dom'; import { IListVirtualDelegate, IListEvent, IListRenderer, IListMouseEvent, IListGestureEvent } from 'vs/base/browser/ui/list/list'; import { List } from 'vs/base/browser/ui/list/listWidget'; import { DomScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement'; @@ -139,7 +139,7 @@ class ItemRenderer implements IListRenderer { e.stopPropagation(); @@ -266,7 +266,7 @@ class ItemRenderer implements IListRenderer toggleClass(this.element, 'with-status-bar', this.editor.getOption(EditorOption.suggest).statusBar.visible); + const applyStatusBarStyle = () => this.element.classList.toggle('with-status-bar', this.editor.getOption(EditorOption.suggest).statusBar.visible); applyStatusBarStyle(); this.statusBarElement = append(this.element, $('.suggest-status-bar')); @@ -598,7 +598,7 @@ export class SuggestWidget implements IContentWidget, IListVirtualDelegate toggleClass(this.element, 'no-icons', !this.editor.getOption(EditorOption.suggest).showIcons); + const applyIconStyle = () => this.element.classList.toggle('no-icons', !this.editor.getOption(EditorOption.suggest).showIcons); applyIconStyle(); let renderer = instantiationService.createInstance(ItemRenderer, this, this.editor, kbToggleDetails); @@ -797,7 +797,7 @@ export class SuggestWidget implements IContentWidget, IListVirtualDelegate { - addClass(this.element, 'visible'); + this.element.classList.add('visible'); this.onDidShowEmitter.fire(this); }, 100); } @@ -1140,7 +1139,7 @@ export class SuggestWidget implements IContentWidget, IListVirtualDelegate widgetY && this.details.element.offsetHeight > this.listElement.offsetHeight) { @@ -1248,18 +1247,17 @@ export class SuggestWidget implements IContentWidget, IListVirtualDelegate { const showIcons = this._cfShowIcons.getValue(); diff --git a/src/vs/workbench/browser/parts/editor/breadcrumbsPicker.ts b/src/vs/workbench/browser/parts/editor/breadcrumbsPicker.ts index 7311f8f8746a7b78ab888b830fe1cbaba77a15ae..d1585c4da27706b9300f857146f163d4b9ed48b5 100644 --- a/src/vs/workbench/browser/parts/editor/breadcrumbsPicker.ts +++ b/src/vs/workbench/browser/parts/editor/breadcrumbsPicker.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 { compareFileNames } from 'vs/base/common/comparers'; import { onUnexpectedError } from 'vs/base/common/errors'; import { Emitter, Event } from 'vs/base/common/event'; @@ -375,11 +374,11 @@ export class BreadcrumbsFilePicker extends BreadcrumbsPicker { _createTree(container: HTMLElement) { // tree icon theme specials - dom.addClass(this._treeContainer, 'file-icon-themable-tree'); - dom.addClass(this._treeContainer, 'show-file-icons'); + this._treeContainer.classList.add('file-icon-themable-tree'); + this._treeContainer.classList.add('show-file-icons'); const onFileIconThemeChange = (fileIconTheme: IFileIconTheme) => { - dom.toggleClass(this._treeContainer, 'align-icons-and-twisties', fileIconTheme.hasFileIcons && !fileIconTheme.hasFolderIcons); - dom.toggleClass(this._treeContainer, 'hide-arrows', fileIconTheme.hidesExplorerArrows === true); + this._treeContainer.classList.toggle('align-icons-and-twisties', fileIconTheme.hasFileIcons && !fileIconTheme.hasFolderIcons); + this._treeContainer.classList.toggle('hide-arrows', fileIconTheme.hidesExplorerArrows === true); }; this._disposables.add(this._themeService.onDidFileIconThemeChange(onFileIconThemeChange)); onFileIconThemeChange(this._themeService.getFileIconTheme()); diff --git a/src/vs/workbench/contrib/callHierarchy/browser/callHierarchyPeek.ts b/src/vs/workbench/contrib/callHierarchy/browser/callHierarchyPeek.ts index 54780c42bd70f4b0b45317f1c92759fd887db451..e722340f27a320d657e1b8f442a4039f046af0ee 100644 --- a/src/vs/workbench/contrib/callHierarchy/browser/callHierarchyPeek.ts +++ b/src/vs/workbench/contrib/callHierarchy/browser/callHierarchyPeek.ts @@ -16,7 +16,7 @@ import { localize } from 'vs/nls'; import { ScrollType } from 'vs/editor/common/editorCommon'; import { IRange, Range } from 'vs/editor/common/core/range'; import { SplitView, Orientation, Sizing } from 'vs/base/browser/ui/splitview/splitview'; -import { Dimension, addClass } from 'vs/base/browser/dom'; +import { Dimension } from 'vs/base/browser/dom'; import { Event } from 'vs/base/common/event'; import { IEditorService } from 'vs/workbench/services/editor/common/editorService'; import { EmbeddedCodeEditorWidget } from 'vs/editor/browser/widget/embeddedCodeEditorWidget'; @@ -152,23 +152,23 @@ export class CallHierarchyTreePeekWidget extends peekView.PeekViewWidget { this._dim = { height: 0, width: 0 }; this._parent = parent; - addClass(parent, 'call-hierarchy'); + parent.classList.add('call-hierarchy'); const message = document.createElement('div'); - addClass(message, 'message'); + message.classList.add('message'); parent.appendChild(message); this._message = message; this._message.tabIndex = 0; const container = document.createElement('div'); - addClass(container, 'results'); + container.classList.add('results'); parent.appendChild(container); this._splitView = new SplitView(container, { orientation: Orientation.HORIZONTAL }); // editor stuff const editorContainer = document.createElement('div'); - addClass(editorContainer, 'editor'); + editorContainer.classList.add('editor'); container.appendChild(editorContainer); let editorOptions: IEditorOptions = { scrollBeyondLastLine: false, @@ -195,7 +195,7 @@ export class CallHierarchyTreePeekWidget extends peekView.PeekViewWidget { // tree stuff const treeContainer = document.createElement('div'); - addClass(treeContainer, 'tree'); + treeContainer.classList.add('tree'); container.appendChild(treeContainer); const options: IWorkbenchAsyncDataTreeOptions = { sorter: new callHTree.Sorter(), diff --git a/src/vs/workbench/contrib/callHierarchy/browser/callHierarchyTree.ts b/src/vs/workbench/contrib/callHierarchy/browser/callHierarchyTree.ts index 47ee16fd343ceea1ec5c41e35ceeee9497a66227..2387788c3bf0ef7da68468b51691c913649abb34 100644 --- a/src/vs/workbench/contrib/callHierarchy/browser/callHierarchyTree.ts +++ b/src/vs/workbench/contrib/callHierarchy/browser/callHierarchyTree.ts @@ -10,7 +10,6 @@ import { IIdentityProvider, IListVirtualDelegate } from 'vs/base/browser/ui/list import { FuzzyScore, createMatches } from 'vs/base/common/filters'; import { IconLabel } from 'vs/base/browser/ui/iconLabel/iconLabel'; import { SymbolKinds, Location } from 'vs/editor/common/modes'; -import * as dom from 'vs/base/browser/dom'; import { compare } from 'vs/base/common/strings'; import { Range } from 'vs/editor/common/core/range'; import { IListAccessibilityProvider } from 'vs/base/browser/ui/list/listWidget'; @@ -109,7 +108,7 @@ export class CallRenderer implements ITreeRenderer= 25) { // heuristic: when the symbols-to-lines ratio changes by 50% between edits