diff --git a/src/sql/base/browser/ui/button/button.ts b/src/sql/base/browser/ui/button/button.ts index 2dc1a43e57..0278d1bdc1 100644 --- a/src/sql/base/browser/ui/button/button.ts +++ b/src/sql/base/browser/ui/button/button.ts @@ -24,18 +24,18 @@ export class Button extends vsButton { this._register(DOM.addDisposableListener(this.element, DOM.EventType.MOUSE_DOWN, e => { if (!DOM.hasClass(this.element, 'disabled') && e.button === 0) { - DOM.addClass(this.element, 'active'); + this.element.classList.add('active'); } })); this._register(DOM.addDisposableListener(this.element, DOM.EventType.MOUSE_UP, e => { DOM.EventHelper.stop(e); - DOM.removeClass(this.element, 'active'); + this.element.classList.remove('active'); })); this._register(DOM.addDisposableListener(this.element, DOM.EventType.MOUSE_LEAVE, e => { DOM.EventHelper.stop(e); - DOM.removeClass(this.element, 'active'); + this.element.classList.remove('active'); })); } diff --git a/src/sql/base/browser/ui/infoButton/infoButton.ts b/src/sql/base/browser/ui/infoButton/infoButton.ts index 6ea1e35955..eebdd771df 100644 --- a/src/sql/base/browser/ui/infoButton/infoButton.ts +++ b/src/sql/base/browser/ui/infoButton/infoButton.ts @@ -5,7 +5,6 @@ import 'vs/css!./infoButton'; import { Button as sqlButton } from 'sql/base/browser/ui/button/button'; -import * as DOM from 'vs/base/browser/dom'; import { IButtonOptions } from 'vs/base/browser/ui/button/button'; export interface IInfoButtonOptions extends IButtonOptions { @@ -39,28 +38,28 @@ export class InfoButton extends sqlButton { super(container, options); this._container = container; - DOM.addClass(this._container, 'info-button-container'); + this._container.classList.add('info-button-container'); this._main = document.createElement('div'); - DOM.addClass(this._main, 'flexContainer'); - DOM.addClass(this._main, 'info-main'); + this._main.classList.add('flexContainer'); + this._main.classList.add('info-main'); this._iconContainer = document.createElement('div'); - DOM.addClass(this._iconContainer, 'info-icon'); + this._iconContainer.classList.add('info-icon'); this._iconContainer.style.alignItems = 'flex-start'; this._iconElement = document.createElement('div'); - DOM.addClass(this._iconElement, 'icon'); + this._iconElement.classList.add('icon'); this._textContainer = document.createElement('div'); - DOM.addClass(this._textContainer, 'info-text'); + this._textContainer.classList.add('info-text'); this._pTitle = document.createElement('p'); - DOM.addClass(this._pTitle, 'info-title'); + this._pTitle.classList.add('info-title'); this._pTitle.setAttribute('aria-hidden', 'false'); this._pDesc = document.createElement('p'); - DOM.addClass(this._pDesc, 'info-desc'); + this._pDesc.classList.add('info-desc'); this._pDesc.setAttribute('aria-hidden', 'false'); this._textContainer.appendChild(this._pTitle); @@ -71,7 +70,7 @@ export class InfoButton extends sqlButton { this._main.appendChild(this._iconContainer); this._main.appendChild(this._textContainer); - DOM.addClass(this.element, 'info-button'); + this.element.classList.add('info-button'); this.element.appendChild(this._main); this.element.style.background = 'none'; @@ -135,7 +134,7 @@ export class InfoButton extends sqlButton { } public set iconClass(value: string) { this._iconClass! = value; - DOM.addClass(this._iconElement, this._iconClass!); + this._iconElement.classList.add(this._iconClass!); } public set infoButtonOptions(options: IInfoButtonOptions | undefined) { diff --git a/src/sql/base/browser/ui/listBox/listBox.ts b/src/sql/base/browser/ui/listBox/listBox.ts index 85fede58b5..924dcb3673 100644 --- a/src/sql/base/browser/ui/listBox/listBox.ts +++ b/src/sql/base/browser/ui/listBox/listBox.ts @@ -221,7 +221,7 @@ export class ListBox extends SelectBox { let spanElement: HTMLElement = (this.message.formatContent ? renderFormattedText(this.message.content, renderOptions) : renderText(this.message.content, renderOptions)) as any; - dom.addClass(spanElement, this.classForType(this.message.type)); + spanElement.classList.add(this.classForType(this.message.type)); const styles = this.stylesForType(this.message.type); spanElement.style.backgroundColor = styles.background ? styles.background.toString() : ''; diff --git a/src/sql/base/browser/ui/panel/panel.ts b/src/sql/base/browser/ui/panel/panel.ts index 7859087087..1b60326d1e 100644 --- a/src/sql/base/browser/ui/panel/panel.ts +++ b/src/sql/base/browser/ui/panel/panel.ts @@ -217,8 +217,8 @@ export class TabbedPanel extends Disposable { if (this._shownTabId) { const shownTab = this._tabMap.get(this._shownTabId); if (shownTab) { - DOM.removeClass(shownTab.label, 'active'); - DOM.removeClass(shownTab.header, 'active'); + shownTab.label.classList.remove('active'); + shownTab.header.classList.remove('active'); shownTab.header.setAttribute('aria-selected', 'false'); if (shownTab.body) { shownTab.body.remove(); @@ -246,8 +246,8 @@ export class TabbedPanel extends Disposable { } this.body.appendChild(tab.body); this.body.setAttribute('aria-labelledby', tab.tab.identifier); - DOM.addClass(tab.label, 'active'); - DOM.addClass(tab.header, 'active'); + tab.label.classList.add('active'); + tab.header.classList.add('active'); tab.header.setAttribute('aria-selected', 'true'); this._onTabChange.fire(id); if (tab.tab.view.onShow) { diff --git a/src/sql/base/browser/ui/selectBox/selectBox.ts b/src/sql/base/browser/ui/selectBox/selectBox.ts index 1d66958504..fa2f3d15b8 100644 --- a/src/sql/base/browser/ui/selectBox/selectBox.ts +++ b/src/sql/base/browser/ui/selectBox/selectBox.ts @@ -234,11 +234,11 @@ export class SelectBox extends vsSelectBox { this.message = message; if (this.element) { - dom.removeClass(this.element, 'idle'); - dom.removeClass(this.element, 'info'); - dom.removeClass(this.element, 'warning'); - dom.removeClass(this.element, 'error'); - dom.addClass(this.element, this.classForType(message.type)); + this.element.classList.remove('idle'); + this.element.classList.remove('info'); + this.element.classList.remove('warning'); + this.element.classList.remove('error'); + this.element.classList.add(this.classForType(message.type)); } // ARIA Support @@ -279,7 +279,7 @@ export class SelectBox extends vsSelectBox { let spanElement: HTMLElement = (message.formatContent ? renderFormattedText(message.content, renderOptions) : renderText(message.content, renderOptions)) as any; - dom.addClass(spanElement, this.classForType(message.type)); + spanElement.classList.add(this.classForType(message.type)); const styles = this.stylesForType(message.type); spanElement.style.backgroundColor = styles.background ? styles.background.toString() : ''; @@ -296,10 +296,10 @@ export class SelectBox extends vsSelectBox { public hideMessage(): void { if (this.element) { - dom.removeClass(this.element, 'info'); - dom.removeClass(this.element, 'warning'); - dom.removeClass(this.element, 'error'); - dom.addClass(this.element, 'idle'); + this.element.classList.remove('info'); + this.element.classList.remove('warning'); + this.element.classList.remove('error'); + this.element.classList.add('idle'); } this._hideMessage(); diff --git a/src/sql/base/browser/ui/table/highPerf/tableView.ts b/src/sql/base/browser/ui/table/highPerf/tableView.ts index f202260028..8df68a5393 100644 --- a/src/sql/base/browser/ui/table/highPerf/tableView.ts +++ b/src/sql/base/browser/ui/table/highPerf/tableView.ts @@ -173,7 +173,7 @@ export class TableView implements IDisposable { this.domNode.setAttribute('aria-rowcount', '0'); this.domNode.setAttribute('aria-readonly', 'true'); - DOM.addClass(this.domNode, this.domId); + this.domNode.classList.add(this.domId); this.domNode.tabIndex = 0; DOM.toggleClass(this.domNode, 'mouse-support', typeof options.mouseSupport === 'boolean' ? options.mouseSupport : true); @@ -568,7 +568,7 @@ export class TableView implements IDisposable { const cell = this.cache.alloc(column.id); row.cells[index] = cell; if (column.cellClass) { - DOM.addClass(cell.domNode!, column.cellClass); + cell.domNode!.classList.add(column.cellClass); } row.row.appendChild(cell.domNode!); } diff --git a/src/sql/base/browser/ui/table/highPerf/tableWidget.ts b/src/sql/base/browser/ui/table/highPerf/tableWidget.ts index daf740cfee..48bea9d943 100644 --- a/src/sql/base/browser/ui/table/highPerf/tableWidget.ts +++ b/src/sql/base/browser/ui/table/highPerf/tableWidget.ts @@ -161,7 +161,7 @@ class Trait implements IDisposable { } unrender(container: HTMLElement): void { - DOM.removeClass(container, this._trait); + container.classList.remove(this._trait); } /** diff --git a/src/sql/base/browser/ui/table/table.ts b/src/sql/base/browser/ui/table/table.ts index 4c11396a62..3ed13cc046 100644 --- a/src/sql/base/browser/ui/table/table.ts +++ b/src/sql/base/browser/ui/table/table.ts @@ -81,14 +81,14 @@ export class Table extends Widget implements IDisposa this._register(DOM.addDisposableListener(this._container, DOM.EventType.FOCUS, () => { clearTimeout(this._classChangeTimeout); this._classChangeTimeout = setTimeout(() => { - DOM.addClass(this._container, 'focused'); + this._container.classList.add('focused'); }, 100); }, true)); this._register(DOM.addDisposableListener(this._container, DOM.EventType.BLUR, () => { clearTimeout(this._classChangeTimeout); this._classChangeTimeout = setTimeout(() => { - DOM.removeClass(this._container, 'focused'); + this._container.classList.remove('focused'); }, 100); }, true)); @@ -99,7 +99,7 @@ export class Table extends Widget implements IDisposa this.styleElement = DOM.createStyleSheet(this._container); this._grid = new Slick.Grid(this._tableContainer, this._data, this._columns, newOptions); this.idPrefix = this._tableContainer.classList[0]; - DOM.addClass(this._container, this.idPrefix); + this._container.classList.add(this.idPrefix); if (configuration && configuration.sorter) { this._sorter = configuration.sorter; this._grid.onSort.subscribe((e, args) => { diff --git a/src/sql/base/browser/ui/taskbar/actionbar.ts b/src/sql/base/browser/ui/taskbar/actionbar.ts index 8a16e388cc..c314d459c5 100644 --- a/src/sql/base/browser/ui/taskbar/actionbar.ts +++ b/src/sql/base/browser/ui/taskbar/actionbar.ts @@ -62,7 +62,7 @@ export class ActionBar extends ActionRunner implements IActionRunner { this._domNode.className = 'monaco-action-bar'; if (options.animated !== false) { - DOM.addClass(this._domNode, 'animated'); + this._domNode.classList.add('animated'); } let isVertical = this._options.orientation === ActionsOrientation.VERTICAL; diff --git a/src/sql/workbench/browser/modal/modal.ts b/src/sql/workbench/browser/modal/modal.ts index ea31e1071f..acf787530c 100644 --- a/src/sql/workbench/browser/modal/modal.ts +++ b/src/sql/workbench/browser/modal/modal.ts @@ -297,7 +297,7 @@ export abstract class Modal extends Disposable implements IThemable { private updateExpandMessageState() { this._messageSummary!.style.cursor = this.shouldShowExpandMessageButton ? 'pointer' : 'default'; - DOM.removeClass(this._messageSummary!, MESSAGE_EXPANDED_MODE_CLASS); + this._messageSummary!.classList.remove(MESSAGE_EXPANDED_MODE_CLASS); if (this.shouldShowExpandMessageButton) { DOM.append(this._detailsButtonContainer!, this._toggleMessageDetailButton!.element); } else { diff --git a/src/sql/workbench/contrib/notebook/browser/cellViews/code.component.ts b/src/sql/workbench/contrib/notebook/browser/cellViews/code.component.ts index 092dcd58ce..9bee458f99 100644 --- a/src/sql/workbench/contrib/notebook/browser/cellViews/code.component.ts +++ b/src/sql/workbench/contrib/notebook/browser/cellViews/code.component.ts @@ -56,7 +56,7 @@ export class CodeComponent extends CellView implements OnInit, OnChanges { this._cellModel = value; if (this.toolbarElement && value && value.cellType === CellTypes.Markdown) { let nativeToolbar = this.toolbarElement.nativeElement; - DOM.addClass(nativeToolbar, MARKDOWN_CLASS); + nativeToolbar.classList.add(MARKDOWN_CLASS); } } diff --git a/src/sql/workbench/contrib/notebook/browser/cellViews/output.component.ts b/src/sql/workbench/contrib/notebook/browser/cellViews/output.component.ts index 1b2ce5b5bf..f4385c235d 100644 --- a/src/sql/workbench/contrib/notebook/browser/cellViews/output.component.ts +++ b/src/sql/workbench/contrib/notebook/browser/cellViews/output.component.ts @@ -11,7 +11,6 @@ import { nb } from 'azdata'; import { ICellModel } from 'sql/workbench/services/notebook/browser/models/modelInterfaces'; import * as outputProcessor from 'sql/workbench/contrib/notebook/browser/models/outputProcessor'; import { IThemeService, IColorTheme } from 'vs/platform/theme/common/themeService'; -import * as DOM from 'vs/base/browser/dom'; import { ComponentHostDirective } from 'sql/base/browser/componentHost.directive'; import { Extensions, IMimeComponent, IMimeComponentRegistry } from 'sql/workbench/contrib/notebook/browser/outputs/mimeRegistry'; import * as colors from 'vs/platform/theme/common/colorRegistry'; @@ -82,9 +81,9 @@ export class OutputComponent extends CellView implements OnInit, AfterViewInit { return; } if (userSelect) { - DOM.addClass(this.nativeOutputElement, USER_SELECT_CLASS); + this.nativeOutputElement.classList.add(USER_SELECT_CLASS); } else { - DOM.removeClass(this.nativeOutputElement, USER_SELECT_CLASS); + this.nativeOutputElement.classList.remove(USER_SELECT_CLASS); } } diff --git a/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.component.ts b/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.component.ts index d34cc1b661..29ddc036e8 100644 --- a/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.component.ts +++ b/src/sql/workbench/contrib/notebook/browser/cellViews/textCell.component.ts @@ -15,7 +15,6 @@ import * as themeColors from 'vs/workbench/common/theme'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; import { Emitter } from 'vs/base/common/event'; import { URI } from 'vs/base/common/uri'; -import * as DOM from 'vs/base/browser/dom'; import { IColorTheme } from 'vs/platform/theme/common/themeService'; import { IConfigurationService } from 'vs/platform/configuration/common/configuration'; import { toDisposable } from 'vs/base/common/lifecycle'; @@ -317,9 +316,9 @@ export class TextCellComponent extends CellView implements OnInit, OnChanges { return; } if (userSelect) { - DOM.addClass(this.output.nativeElement, USER_SELECT_CLASS); + this.output.nativeElement.classList.add(USER_SELECT_CLASS); } else { - DOM.removeClass(this.output.nativeElement, USER_SELECT_CLASS); + this.output.nativeElement.classList.remove(USER_SELECT_CLASS); } } diff --git a/src/sql/workbench/contrib/notebook/browser/find/notebookFindWidget.ts b/src/sql/workbench/contrib/notebook/browser/find/notebookFindWidget.ts index cf2e622c23..50f609c4f8 100644 --- a/src/sql/workbench/contrib/notebook/browser/find/notebookFindWidget.ts +++ b/src/sql/workbench/contrib/notebook/browser/find/notebookFindWidget.ts @@ -271,12 +271,12 @@ export class FindWidget extends Widget implements IOverlayWidget, IVerticalSashL this._updateButtons(); setTimeout(() => { - dom.addClass(this._domNode, 'visible'); + this._domNode.classList.add('visible'); this._domNode.setAttribute('aria-hidden', 'false'); if (!animate) { - dom.addClass(this._domNode, 'noanimation'); + this._domNode.classList.add('noanimation'); setTimeout(() => { - dom.removeClass(this._domNode, 'noanimation'); + this._domNode.classList.remove('noanimation'); }, 200); } }, 0); @@ -290,7 +290,7 @@ export class FindWidget extends Widget implements IOverlayWidget, IVerticalSashL this._updateButtons(); - dom.removeClass(this._domNode, 'visible'); + this._domNode.classList.remove('visible'); this._domNode.setAttribute('aria-hidden', 'true'); if (focusTheEditor) { this._notebookController.focus(); diff --git a/src/sql/workbench/contrib/profiler/browser/profilerEditor.ts b/src/sql/workbench/contrib/profiler/browser/profilerEditor.ts index 67074e9dfd..38c87207d9 100644 --- a/src/sql/workbench/contrib/profiler/browser/profilerEditor.ts +++ b/src/sql/workbench/contrib/profiler/browser/profilerEditor.ts @@ -301,16 +301,16 @@ export class ProfilerEditor extends EditorPane { profilerTableContainer.style.position = 'relative'; let theme = this.themeService.getColorTheme(); if (theme.type === ColorScheme.DARK) { - DOM.addClass(profilerTableContainer, VS_DARK_THEME); + profilerTableContainer.classList.add(VS_DARK_THEME); } else if (theme.type === ColorScheme.HIGH_CONTRAST) { - DOM.addClass(profilerTableContainer, VS_HC_THEME); + profilerTableContainer.classList.add(VS_HC_THEME); } this.themeService.onDidColorThemeChange(e => { DOM.removeClasses(profilerTableContainer, VS_DARK_THEME, VS_HC_THEME); if (e.type === ColorScheme.DARK) { - DOM.addClass(profilerTableContainer, VS_DARK_THEME); + profilerTableContainer.classList.add(VS_DARK_THEME); } else if (e.type === ColorScheme.HIGH_CONTRAST) { - DOM.addClass(profilerTableContainer, VS_HC_THEME); + profilerTableContainer.classList.add(VS_HC_THEME); } }); this._profilerTableEditor = this._instantiationService.createInstance(ProfilerTableEditor); diff --git a/src/sql/workbench/contrib/profiler/browser/profilerFindWidget.ts b/src/sql/workbench/contrib/profiler/browser/profilerFindWidget.ts index 7ca8443fb2..bce56a8562 100644 --- a/src/sql/workbench/contrib/profiler/browser/profilerFindWidget.ts +++ b/src/sql/workbench/contrib/profiler/browser/profilerFindWidget.ts @@ -260,12 +260,12 @@ export class FindWidget extends Widget implements IOverlayWidget, IVerticalSashL this._updateButtons(); setTimeout(() => { - dom.addClass(this._domNode, 'visible'); + this._domNode.classList.add('visible'); this._domNode.setAttribute('aria-hidden', 'false'); if (!animate) { - dom.addClass(this._domNode, 'noanimation'); + this._domNode.classList.add('noanimation'); setTimeout(() => { - dom.removeClass(this._domNode, 'noanimation'); + this._domNode.classList.remove('noanimation'); }, 200); } }, 0); @@ -279,7 +279,7 @@ export class FindWidget extends Widget implements IOverlayWidget, IVerticalSashL this._updateButtons(); - dom.removeClass(this._domNode, 'visible'); + this._domNode.classList.remove('visible'); this._domNode.setAttribute('aria-hidden', 'true'); if (focusTheEditor) { this._tableController.focus(); diff --git a/src/sql/workbench/contrib/query/browser/queryEditor.ts b/src/sql/workbench/contrib/query/browser/queryEditor.ts index 81de149428..6d2196281a 100644 --- a/src/sql/workbench/contrib/query/browser/queryEditor.ts +++ b/src/sql/workbench/contrib/query/browser/queryEditor.ts @@ -134,7 +134,7 @@ export class QueryEditor extends EditorPane { * Called to create the editor in the parent element. */ public createEditor(parent: HTMLElement): void { - DOM.addClass(parent, 'query-editor'); + parent.classList.add('query-editor'); this.splitviewContainer = DOM.$('.query-editor-view'); diff --git a/src/sql/workbench/contrib/queryHistory/browser/queryHistoryRenderer.ts b/src/sql/workbench/contrib/queryHistory/browser/queryHistoryRenderer.ts index 101e7acc27..7e3609a229 100644 --- a/src/sql/workbench/contrib/queryHistory/browser/queryHistoryRenderer.ts +++ b/src/sql/workbench/contrib/queryHistory/browser/queryHistoryRenderer.ts @@ -67,11 +67,11 @@ export class QueryHistoryRenderer implements IRenderer { if (element && element.info) { templateData.icon.className = 'query-history-icon'; if (element.info.status === QueryStatus.Succeeded) { - dom.addClass(templateData.icon, QueryHistoryRenderer.SUCCESS_CLASS); + templateData.icon.classList.add(QueryHistoryRenderer.SUCCESS_CLASS); taskStatus = localize('succeeded', "succeeded"); } else if (element.info.status === QueryStatus.Failed) { - dom.addClass(templateData.icon, QueryHistoryRenderer.FAIL_CLASS); + templateData.icon.classList.add(QueryHistoryRenderer.FAIL_CLASS); taskStatus = localize('failed', "failed"); } diff --git a/src/sql/workbench/contrib/tasks/browser/tasksRenderer.ts b/src/sql/workbench/contrib/tasks/browser/tasksRenderer.ts index 18c81a9f80..c264cc3e6e 100644 --- a/src/sql/workbench/contrib/tasks/browser/tasksRenderer.ts +++ b/src/sql/workbench/contrib/tasks/browser/tasksRenderer.ts @@ -73,27 +73,27 @@ export class TaskHistoryRenderer implements IRenderer { switch (element.status) { case TaskStatus.SucceededWithWarning: case TaskStatus.Succeeded: - dom.addClass(templateData.icon, TaskHistoryRenderer.SUCCESS_CLASS); + templateData.icon.classList.add(TaskHistoryRenderer.SUCCESS_CLASS); taskStatus = localize('succeeded', "succeeded"); break; case TaskStatus.Failed: - dom.addClass(templateData.icon, TaskHistoryRenderer.FAIL_CLASS); + templateData.icon.classList.add(TaskHistoryRenderer.FAIL_CLASS); taskStatus = localize('failed', "failed"); break; case TaskStatus.InProgress: - dom.addClass(templateData.icon, TaskHistoryRenderer.INPROGRESS_CLASS); + templateData.icon.classList.add(TaskHistoryRenderer.INPROGRESS_CLASS); taskStatus = localize('inProgress', "in progress"); break; case TaskStatus.NotStarted: - dom.addClass(templateData.icon, TaskHistoryRenderer.NOTSTARTED_CLASS); + templateData.icon.classList.add(TaskHistoryRenderer.NOTSTARTED_CLASS); taskStatus = localize('notStarted', "not started"); break; case TaskStatus.Canceled: - dom.addClass(templateData.icon, TaskHistoryRenderer.CANCELED_CLASS); + templateData.icon.classList.add(TaskHistoryRenderer.CANCELED_CLASS); taskStatus = localize('canceled', "canceled"); break; case TaskStatus.Canceling: - dom.addClass(templateData.icon, TaskHistoryRenderer.INPROGRESS_CLASS); + templateData.icon.classList.add(TaskHistoryRenderer.INPROGRESS_CLASS); taskStatus = localize('canceling', "canceling"); break; } diff --git a/src/sql/workbench/contrib/views/browser/treeView.ts b/src/sql/workbench/contrib/views/browser/treeView.ts index 15221a5061..6e99c2ac46 100644 --- a/src/sql/workbench/contrib/views/browser/treeView.ts +++ b/src/sql/workbench/contrib/views/browser/treeView.ts @@ -359,8 +359,8 @@ export class TreeView extends Disposable implements ITreeView { this.domNode = DOM.$('.tree-explorer-viewlet-tree-view'); this.messageElement = DOM.append(this.domNode, DOM.$('.message')); this.treeContainer = DOM.append(this.domNode, DOM.$('.customview-tree')); - 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 focusTracker = this._register(DOM.trackFocus(this.domNode)); this._register(focusTracker.onDidFocus(() => this.focused = true)); this._register(focusTracker.onDidBlur(() => this.focused = false)); @@ -503,7 +503,7 @@ export class TreeView extends Disposable implements ITreeView { } private showMessage(message: string): void { - DOM.removeClass(this.messageElement, 'hide'); + this.messageElement.classList.remove('hide'); this.resetMessageElement(); this._messageValue = message; if (!isFalsyOrWhitespace(this._message)) { @@ -514,7 +514,7 @@ export class TreeView extends Disposable implements ITreeView { private hideMessage(): void { this.resetMessageElement(); - DOM.addClass(this.messageElement, 'hide'); + this.messageElement.classList.add('hide'); this.layout(this._height, this._width); } @@ -625,10 +625,10 @@ export class TreeView extends Disposable implements ITreeView { const isTreeEmpty = !this.root.children || this.root.children.length === 0; // Hide tree container only when there is a message and tree is empty and not refreshing if (this._messageValue && isTreeEmpty && !this.refreshing) { - DOM.addClass(this.treeContainer, 'hide'); + this.treeContainer.classList.add('hide'); this.domNode.setAttribute('tabindex', '0'); } else { - DOM.removeClass(this.treeContainer, 'hide'); + this.treeContainer.classList.remove('hide'); this.domNode.removeAttribute('tabindex'); } } @@ -756,7 +756,7 @@ class TreeRenderer extends Disposable implements ITreeRenderer this._logService.error(`Unexpected error populating Azure Account dropdown : ${err}`)); // Immediately show/hide appropriate elements though so user gets immediate feedback while we load accounts - DOM.addClass(this._tableContainer, 'hide-username'); - DOM.addClass(this._tableContainer, 'hide-password'); - DOM.removeClass(this._tableContainer, 'hide-azure-accounts'); + this._tableContainer.classList.add('hide-username'); + this._tableContainer.classList.add('hide-password'); + this._tableContainer.classList.remove('hide-azure-accounts'); } else if (currentAuthType === AuthenticationType.AzureMFAAndUser) { this.fillInAzureAccountOptions().then(async () => { // Don't enable the control until we've populated it @@ -501,17 +501,17 @@ export class ConnectionWidget extends lifecycle.Disposable { this._azureTenantDropdown.enable(); }).catch(err => this._logService.error(`Unexpected error populating Azure Account dropdown : ${err}`)); // Immediately show/hide appropriate elements though so user gets immediate feedback while we load accounts - DOM.removeClass(this._tableContainer, 'hide-username'); - DOM.addClass(this._tableContainer, 'hide-password'); - DOM.removeClass(this._tableContainer, 'hide-azure-accounts'); + this._tableContainer.classList.remove('hide-username'); + this._tableContainer.classList.add('hide-password'); + this._tableContainer.classList.remove('hide-azure-accounts'); } else { this._azureAccountDropdown.disable(); this._azureAccountDropdown.hideMessage(); this._azureTenantDropdown.disable(); this._azureTenantDropdown.hideMessage(); - DOM.removeClass(this._tableContainer, 'hide-username'); - DOM.removeClass(this._tableContainer, 'hide-password'); - DOM.addClass(this._tableContainer, 'hide-azure-accounts'); + this._tableContainer.classList.remove('hide-username'); + this._tableContainer.classList.remove('hide-password'); + this._tableContainer.classList.add('hide-azure-accounts'); } } @@ -538,9 +538,9 @@ export class ConnectionWidget extends lifecycle.Disposable { private updateRefreshCredentialsLink(): void { let chosenAccount = this._azureAccountList.find(account => account.key.accountId === this._azureAccountDropdown.value); if (chosenAccount && chosenAccount.isStale) { - DOM.removeClass(this._tableContainer, 'hide-refresh-link'); + this._tableContainer.classList.remove('hide-refresh-link'); } else { - DOM.addClass(this._tableContainer, 'hide-refresh-link'); + this._tableContainer.classList.add('hide-refresh-link'); } } @@ -574,7 +574,7 @@ export class ConnectionWidget extends lifecycle.Disposable { // There are multiple tenants available so let the user select one let options = selectedAccount.properties.tenants.map(tenant => tenant.displayName); this._azureTenantDropdown.setOptions(options); - DOM.removeClass(this._tableContainer, hideTenantsClassName); + this._tableContainer.classList.remove(hideTenantsClassName); this.onAzureTenantSelected(0); } else { if (selectedAccount && selectedAccount.properties.tenants && selectedAccount.properties.tenants.length === 1) { @@ -582,7 +582,7 @@ export class ConnectionWidget extends lifecycle.Disposable { } else { this._azureTenantId = undefined; } - DOM.addClass(this._tableContainer, hideTenantsClassName); + this._tableContainer.classList.add(hideTenantsClassName); } } @@ -695,9 +695,9 @@ export class ConnectionWidget extends lifecycle.Disposable { if (this._authTypeSelectBox) { this.onAuthTypeSelected(this._authTypeSelectBox.value); } else { - DOM.removeClass(this._tableContainer, 'hide-username'); - DOM.removeClass(this._tableContainer, 'hide-password'); - DOM.addClass(this._tableContainer, 'hide-azure-accounts'); + this._tableContainer.classList.remove('hide-username'); + this._tableContainer.classList.remove('hide-password'); + this._tableContainer.classList.add('hide-azure-accounts'); } if (this.authType === AuthenticationType.AzureMFA || this.authType === AuthenticationType.AzureMFAAndUser) { diff --git a/src/sql/workbench/services/fileBrowser/browser/fileBrowserTreeView.ts b/src/sql/workbench/services/fileBrowser/browser/fileBrowserTreeView.ts index f443e80f34..b54496cff1 100644 --- a/src/sql/workbench/services/fileBrowser/browser/fileBrowserTreeView.ts +++ b/src/sql/workbench/services/fileBrowser/browser/fileBrowserTreeView.ts @@ -9,7 +9,6 @@ import { FileBrowserRenderer } from 'sql/workbench/services/fileBrowser/browser/ import { IFileBrowserService } from 'sql/workbench/services/fileBrowser/common/interfaces'; import { FileNode } from 'sql/workbench/services/fileBrowser/common/fileNode'; import { IDisposable, Disposable } from 'vs/base/common/lifecycle'; -import * as DOM from 'vs/base/browser/dom'; import nls = require('vs/nls'); import { DefaultFilter, DefaultAccessibilityProvider, DefaultDragAndDrop } from 'vs/base/parts/tree/browser/treeDefaults'; import { Tree } from 'vs/base/parts/tree/browser/treeImpl'; @@ -38,7 +37,7 @@ export class FileBrowserTreeView extends Disposable implements IDisposable { */ public async renderBody(container: HTMLElement, rootNode: FileNode, selectedNode: FileNode, expandedNodes: FileNode[]): Promise { if (!this._tree) { - DOM.addClass(container, 'show-file-icons'); + container.classList.add('show-file-icons'); this._tree = this._register(this.createFileBrowserTree(container, this._instantiationService)); this._register(this._tree.onDidChangeSelection((event) => this.onSelected(event))); this._register(this._fileBrowserService.onExpandFolder(fileNode => this._tree.refresh(fileNode)));