Remove calls to DOM.addClass and DOM.removeClass (#13063)

This commit is contained in:
Charles Gagnon
2020-10-23 14:42:22 -07:00
committed by GitHub
parent c7ab69d46d
commit 2d182fcd03
24 changed files with 89 additions and 93 deletions

View File

@@ -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 {

View File

@@ -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 = <HTMLElement>this.toolbarElement.nativeElement;
DOM.addClass(nativeToolbar, MARKDOWN_CLASS);
nativeToolbar.classList.add(MARKDOWN_CLASS);
}
}

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -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<ITreeItem, FuzzyS
}
renderTemplate(container: HTMLElement): ITreeExplorerTemplateData {
DOM.addClass(container, 'custom-view-tree-node-item');
container.classList.add('custom-view-tree-node-item');
const icon = DOM.append(container, DOM.$('.custom-view-tree-node-item-icon'));

View File

@@ -289,7 +289,7 @@ export class GuidedTour extends Disposable {
firstTourElement.classList.add('ads-tour-show');
this._overlay.style.display = 'block';
const workbench = document.querySelector('.monaco-workbench') as HTMLElement;
dom.addClass(workbench, 'blur-background');
workbench.classList.add('blur-background');
this._overlayVisible.set(true);
this._overlay.focus();
}
@@ -306,7 +306,7 @@ export class GuidedTour extends Disposable {
if (this._overlay.style.display !== 'none') {
this._overlay.style.display = 'none';
const workbench = document.querySelector('.monaco-workbench') as HTMLElement;
dom.removeClass(workbench, 'blur-background');
workbench.classList.remove('blur-background');
this._overlayVisible.reset();
}
}

View File

@@ -345,7 +345,7 @@ class TreeItemRenderer extends Disposable implements ITreeRenderer<ITreeItemFrom
// }
renderTemplate(container: HTMLElement): ITreeExplorerTemplateData {
DOM.addClass(container, 'custom-view-tree-node-item');
container.classList.add('custom-view-tree-node-item');
const icon = DOM.append(container, DOM.$('.custom-view-tree-node-item-icon'));

View File

@@ -489,9 +489,9 @@ 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.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) {

View File

@@ -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<void> {
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)));