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

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -173,7 +173,7 @@ export class TableView<T> 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<T> 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!);
}

View File

@@ -161,7 +161,7 @@ class Trait<T> implements IDisposable {
}
unrender(container: HTMLElement): void {
DOM.removeClass(container, this._trait);
container.classList.remove(this._trait);
}
/**

View File

@@ -81,14 +81,14 @@ export class Table<T extends Slick.SlickData> 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<T extends Slick.SlickData> extends Widget implements IDisposa
this.styleElement = DOM.createStyleSheet(this._container);
this._grid = new Slick.Grid<T>(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) => {

View File

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