debt - use native classList, not util

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 });

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;
 		}

src/vs/editor/contrib/documentSymbols/outlineTree.ts

@@ -102,7 +102,7 @@ export class OutlineGroupRenderer implements ITreeRenderer<OutlineGroup, FuzzySc
 
 	renderTemplate(container: HTMLElement): OutlineGroupTemplate {
 		const labelContainer = dom.$('.outline-element-label');
-		dom.addClass(container, 'outline-element');
+		container.classList.add('outline-element');
 		dom.append(container, labelContainer);
 		return new OutlineGroupTemplate(labelContainer, new HighlightedLabel(labelContainer, true));
 	}
@@ -129,7 +129,7 @@ export class OutlineElementRenderer implements ITreeRenderer<OutlineElement, Fuz
 	) { }
 
 	renderTemplate(container: HTMLElement): OutlineElementTemplate {
-		dom.addClass(container, 'outline-element');
+		container.classList.add('outline-element');
 		const iconLabel = new IconLabel(container, { supportHighlights: true });
 		const iconClass = dom.$('.outline-element-icon');
 		const decoration = dom.$('.outline-element-decoration');
@@ -184,14 +184,14 @@ export class OutlineElementRenderer implements ITreeRenderer<OutlineElement, Fuz
 
 		} else if (count > 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);

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]);
 			}
 		}

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);

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<boolean>('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<RenameInputFieldResult | boolean> {
 
-		toggleClass(this._domNode!, 'preview', supportPreview);
+		this._domNode!.classList.toggle('preview', supportPreview);
 
 		this._position = new Position(where.startLineNumber, where.startColumn);
 		this._input!.value = value;

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<CompletionItem, ISuggestionTemplateD
 		data.disposables = new DisposableStore();
 
 		data.root = container;
-		addClass(data.root, 'show-file-icons');
+		data.root.classList.add('show-file-icons');
 
 		data.icon = append(container, $('.icon'));
 		data.colorspan = append(data.icon, $('span.colorspan'));
@@ -245,16 +245,16 @@ class ItemRenderer implements IListRenderer<CompletionItem, ISuggestionTemplateD
 			data.parametersLabel.textContent = '';
 			data.qualifierLabel.textContent = '';
 			data.detailsLabel.textContent = (suggestion.detail || '').replace(/\n.*$/m, '');
-			addClass(data.root, 'string-label');
+			data.root.classList.add('string-label');
 		} else {
 			data.parametersLabel.textContent = (suggestion.label.parameters || '').replace(/\n.*$/m, '');
 			data.qualifierLabel.textContent = (suggestion.label.qualifier || '').replace(/\n.*$/m, '');
 			data.detailsLabel.textContent = (suggestion.label.type || '').replace(/\n.*$/m, '');
-			removeClass(data.root, 'string-label');
+			data.root.classList.remove('string-label');
 		}
 
 		if (canExpandCompletionItem(element)) {
-			addClass(data.right, 'can-expand-details');
+			data.right.classList.add('can-expand-details');
 			show(data.readMore);
 			data.readMore.onmousedown = e => {
 				e.stopPropagation();
@@ -266,7 +266,7 @@ class ItemRenderer implements IListRenderer<CompletionItem, ISuggestionTemplateD
 				this.widget.toggleDetails();
 			};
 		} else {
-			removeClass(data.right, 'can-expand-details');
+			data.right.classList.remove('can-expand-details');
 			hide(data.readMore);
 			data.readMore.onmousedown = null;
 			data.readMore.onclick = null;
@@ -363,15 +363,15 @@ class SuggestionDetails {
 		if (!explainMode && !canExpandCompletionItem(item)) {
 			this.type.textContent = '';
 			this.docs.textContent = '';
-			addClass(this.el, 'no-docs');
+			this.el.classList.add('no-docs');
 			return;
 		}
-		removeClass(this.el, 'no-docs');
+		this.el.classList.remove('no-docs');
 		if (typeof documentation === 'string') {
-			removeClass(this.docs, 'markdown-docs');
+			this.docs.classList.remove('markdown-docs');
 			this.docs.textContent = documentation;
 		} else {
-			addClass(this.docs, 'markdown-docs');
+			this.docs.classList.add('markdown-docs');
 			this.docs.innerHTML = '';
 			const renderedContents = this.markdownRenderer.render(documentation);
 			this.renderDisposeable = renderedContents;
@@ -554,7 +554,7 @@ export class SuggestWidget implements IContentWidget, IListVirtualDelegate<Compl
 		this.messageElement = append(this.element, $('.message'));
 		this.listElement = append(this.element, $('.tree'));
 
-		const applyStatusBarStyle = () => 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<Compl
 
 		this.details = instantiationService.createInstance(SuggestionDetails, this.element, this, this.editor, markdownRenderer, kbToggleDetails);
 
-		const applyIconStyle = () => 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<Compl
 				if (this.expandDocsSettingFromStorage()) {
 					this.showDetails(false);
 				} else {
-					removeClass(this.element, 'docs-side');
+					this.element.classList.remove('docs-side');
 				}
 
 				this.editor.setAriaOptions({ activeDescendant: getAriaId(index) });
@@ -821,7 +821,7 @@ export class SuggestWidget implements IContentWidget, IListVirtualDelegate<Compl
 		const stateChanged = this.state !== state;
 		this.state = state;
 
-		toggleClass(this.element, 'frozen', state === State.Frozen);
+		this.element.classList.toggle('frozen', state === State.Frozen);
 
 		switch (state) {
 			case State.Hidden:
@@ -837,7 +837,7 @@ export class SuggestWidget implements IContentWidget, IListVirtualDelegate<Compl
 				this.messageElement.textContent = SuggestWidget.LOADING_MESSAGE;
 				hide(this.listElement, this.details.element, this.statusBarElement);
 				show(this.messageElement);
-				removeClass(this.element, 'docs-side');
+				this.element.classList.remove('docs-side');
 				this.show();
 				this.focusedItem = null;
 				break;
@@ -845,7 +845,7 @@ export class SuggestWidget implements IContentWidget, IListVirtualDelegate<Compl
 				this.messageElement.textContent = SuggestWidget.NO_SUGGESTIONS_MESSAGE;
 				hide(this.listElement, this.details.element, this.statusBarElement);
 				show(this.messageElement);
-				removeClass(this.element, 'docs-side');
+				this.element.classList.remove('docs-side');
 				this.show();
 				this.focusedItem = null;
 				break;
@@ -1072,8 +1072,7 @@ export class SuggestWidget implements IContentWidget, IListVirtualDelegate<Compl
 			this.ctxSuggestWidgetDetailsVisible.set(false);
 			this.updateExpandDocsSetting(false);
 			hide(this.details.element);
-			removeClass(this.element, 'docs-side');
-			removeClass(this.element, 'docs-below');
+			this.element.classList.remove('docs-side', 'doc-below');
 			this.editor.layoutContentWidget(this);
 			this.telemetryService.publicLog2('suggestWidget:collapseDetails');
 		} else {
@@ -1132,7 +1131,7 @@ export class SuggestWidget implements IContentWidget, IListVirtualDelegate<Compl
 		this.ctxSuggestWidgetVisible.set(true);
 
 		this.showTimeout.cancelAndSet(() => {
-			addClass(this.element, 'visible');
+			this.element.classList.add('visible');
 			this.onDidShowEmitter.fire(this);
 		}, 100);
 	}
@@ -1140,7 +1139,7 @@ export class SuggestWidget implements IContentWidget, IListVirtualDelegate<Compl
 	private hide(): void {
 		this.ctxSuggestWidgetVisible.reset();
 		this.ctxSuggestWidgetMultipleSuggestions.reset();
-		removeClass(this.element, 'visible');
+		this.element.classList.remove('visible');
 	}
 
 	hideWidget(): void {
@@ -1225,15 +1224,15 @@ export class SuggestWidget implements IContentWidget, IListVirtualDelegate<Compl
 
 		if (widgetX < cursorX - this.listWidth) {
 			// Widget is too far to the left of cursor, swap list and docs
-			addClass(this.element, 'list-right');
+			this.element.classList.add('list-right');
 		} else {
-			removeClass(this.element, 'list-right');
+			this.element.classList.remove('list-right');
 		}
 
 		// Compare top of the cursor (cursorY - lineheight) with widgetTop to determine if
 		// margin-top needs to be applied on list to make it appear right above the cursor
 		// Cannot compare cursorY directly as it may be a few decimals off due to zoooming
-		if (hasClass(this.element, 'docs-side')
+		if (this.element.classList.contains('docs-side')
 			&& cursorY - lineHeight > widgetY
 			&& this.details.element.offsetHeight > this.listElement.offsetHeight) {
 
@@ -1248,18 +1247,17 @@ export class SuggestWidget implements IContentWidget, IListVirtualDelegate<Compl
 	 */
 	private expandSideOrBelow() {
 		if (!canExpandCompletionItem(this.focusedItem) && this.firstFocusInCurrentList) {
-			removeClass(this.element, 'docs-side');
-			removeClass(this.element, 'docs-below');
+			this.element.classList.remove('docs-side', 'docs-below');
 			return;
 		}
 
 		let matches = this.element.style.maxWidth!.match(/(\d+)px/);
 		if (!matches || Number(matches[1]) < this.maxWidgetWidth) {
-			addClass(this.element, 'docs-below');
-			removeClass(this.element, 'docs-side');
+			this.element.classList.add('docs-below');
+			this.element.classList.remove('docs-side');
 		} else if (canExpandCompletionItem(this.focusedItem)) {
-			addClass(this.element, 'docs-side');
-			removeClass(this.element, 'docs-below');
+			this.element.classList.add('docs-side');
+			this.element.classList.remove('docs-below');
 		}
 	}
 

src/vs/editor/contrib/zoneWidget/zoneWidget.ts

@@ -214,13 +214,13 @@ export abstract class ZoneWidget implements IHorizontalSashLayoutProvider {
 
 	create(): void {
 
-		dom.addClass(this.domNode, 'zone-widget');
+		this.domNode.classList.add('zone-widget');
 		if (this.options.className) {
-			dom.addClass(this.domNode, this.options.className);
+			this.domNode.classList.add(this.options.className);
 		}
 
 		this.container = document.createElement('div');
-		dom.addClass(this.container, 'zone-widget-container');
+		this.container.classList.add('zone-widget-container');
 		this.domNode.appendChild(this.container);
 		if (this.options.showArrow) {
 			this._arrow = new Arrow(this.editor);

src/vs/workbench/browser/parts/editor/breadcrumbsControl.ts

@@ -91,7 +91,7 @@ class Item extends BreadcrumbsItem {
 				fileKind: this.element.kind,
 				fileDecorations: { colors: this.options.showDecorationColors, badges: false },
 			});
-			dom.addClass(container, FileKind[this.element.kind].toLowerCase());
+			container.classList.add(FileKind[this.element.kind].toLowerCase());
 			this._disposables.add(label);
 
 		} else if (this.element instanceof OutlineModel) {
@@ -113,7 +113,7 @@ class Item extends BreadcrumbsItem {
 				let icon = document.createElement('div');
 				icon.className = SymbolKinds.toCssClassName(this.element.symbol.kind);
 				container.appendChild(icon);
-				dom.addClass(container, 'shows-symbol-icon');
+				container.classList.add('shows-symbol-icon');
 			}
 			let label = new IconLabel(container);
 			let title = this.element.symbol.name.replace(/\r|\n|\r\n/g, '\u23CE');
@@ -183,7 +183,7 @@ export class BreadcrumbsControl {
 		@IBreadcrumbsService breadcrumbsService: IBreadcrumbsService,
 	) {
 		this.domNode = document.createElement('div');
-		dom.addClass(this.domNode, 'breadcrumbs-control');
+		this.domNode.classList.add('breadcrumbs-control');
 		dom.append(container, this.domNode);
 
 		this._cfUseQuickPick = BreadcrumbsConfig.UseQuickPick.bindTo(_configurationService);
@@ -221,13 +221,13 @@ export class BreadcrumbsControl {
 	}
 
 	isHidden(): boolean {
-		return dom.hasClass(this.domNode, 'hidden');
+		return this.domNode.classList.contains('hidden');
 	}
 
 	hide(): void {
 		this._breadcrumbsDisposables.clear();
 		this._ckBreadcrumbsVisible.set(false);
-		dom.toggleClass(this.domNode, 'hidden', true);
+		this.domNode.classList.toggle('hidden', true);
 	}
 
 	update(): boolean {
@@ -251,7 +251,7 @@ export class BreadcrumbsControl {
 			}
 		}
 
-		dom.toggleClass(this.domNode, 'hidden', false);
+		this.domNode.classList.toggle('hidden', false);
 		this._ckBreadcrumbsVisible.set(true);
 		this._ckBreadcrumbsPossible.set(true);
 
@@ -263,8 +263,8 @@ export class BreadcrumbsControl {
 			this._textResourceConfigurationService,
 			this._workspaceService
 		);
-		dom.toggleClass(this.domNode, 'relative-path', model.isRelative());
-		dom.toggleClass(this.domNode, 'backslash-path', this._labelService.getSeparator(uri.scheme, uri.authority) === '\\');
+		this.domNode.classList.toggle('relative-path', model.isRelative());
+		this.domNode.classList.toggle('backslash-path', this._labelService.getSeparator(uri.scheme, uri.authority) === '\\');
 
 		const updateBreadcrumbs = () => {
 			const showIcons = this._cfShowIcons.getValue();

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());

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<callHTree.Call, FuzzyScore> = {
 			sorter: new callHTree.Sorter(),

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<Call, FuzzyScore, CallRenderi
 	templateId: string = CallRenderer.id;
 
 	renderTemplate(container: HTMLElement): CallRenderingTemplate {
-		dom.addClass(container, 'callhierarchy-element');
+		container.classList.add('callhierarchy-element');
 		let icon = document.createElement('div');
 		container.appendChild(icon);
 		const label = new IconLabel(container, { supportHighlights: true });

src/vs/workbench/contrib/outline/browser/outlinePane.ts

@@ -305,7 +305,7 @@ export class OutlinePane extends ViewPane {
 
 		this._domNode = container;
 		this._domNode.tabIndex = 0;
-		dom.addClass(container, 'outline-pane');
+		container.classList.add('outline-pane');
 
 		let progressContainer = dom.$('.outline-progress');
 		this._message = dom.$('.outline-message');
@@ -452,7 +452,7 @@ export class OutlinePane extends ViewPane {
 	}
 
 	private _showMessage(message: string) {
-		dom.addClass(this._domNode, 'message');
+		this._domNode.classList.add('message');
 		this._tree.setInput(undefined!);
 		this._progressBar.stop().hide();
 		this._message.innerText = escape(message);
@@ -508,7 +508,7 @@ export class OutlinePane extends ViewPane {
 			return this._showMessage(localize('no-symbols', "No symbols found in document '{0}'", basename(textModel.uri)));
 		}
 
-		dom.removeClass(this._domNode, 'message');
+		this._domNode.classList.remove('message');
 
 		if (event && oldModel && textModel.getLineCount() >= 25) {
 			// heuristic: when the symbols-to-lines ratio changes by 50% between edits