Skip to content

Commit 93c96b6

Browse files
isidornisidorn
committed
debug and explroer: do not use dom.addClass, dom.toggleClass
1 parent 2920016 commit 93c96b6

18 files changed

+69
-75
lines changed

‎src/vs/workbench/contrib/debug/browser/baseDebugView.ts

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ export interface IVariableTemplateData {
4343

4444
export function renderViewTree(container: HTMLElement): HTMLElement {
4545
const treeContainer = $('.');
46-
dom.addClass(treeContainer, 'debug-view-content');
46+
treeContainer.classList.add('debug-view-content');
4747
container.appendChild(treeContainer);
4848
return treeContainer;
4949
}
@@ -55,9 +55,9 @@ export function renderExpressionValue(expressionOrValue: IExpressionContainer |
5555
container.className = 'value';
5656
// when resolving expressions we represent errors from the server as a variable with name === null.
5757
if (value === null || ((expressionOrValue instanceof Expression || expressionOrValue instanceof Variable || expressionOrValue instanceof ReplEvaluationResult) && !expressionOrValue.available)) {
58-
dom.addClass(container, 'unavailable');
58+
container.classList.add('unavailable');
5959
if (value !== Expression.DEFAULT_VALUE) {
60-
dom.addClass(container, 'error');
60+
container.classList.add('error');
6161
}
6262
} else if ((expressionOrValue instanceof ExpressionContainer) && options.showChanged && expressionOrValue.valueChanged && value !== Expression.DEFAULT_VALUE) {
6363
// value changed color has priority over other colors.
@@ -67,13 +67,13 @@ export function renderExpressionValue(expressionOrValue: IExpressionContainer |
6767

6868
if (options.colorize && typeof expressionOrValue !== 'string') {
6969
if (expressionOrValue.type === 'number' || expressionOrValue.type === 'boolean' || expressionOrValue.type === 'string') {
70-
dom.addClass(container, expressionOrValue.type);
70+
container.classList.add(expressionOrValue.type);
7171
} else if (!isNaN(+value)) {
72-
dom.addClass(container, 'number');
72+
container.classList.add('number');
7373
} else if (booleanRegex.test(value)) {
74-
dom.addClass(container, 'boolean');
74+
container.classList.add('boolean');
7575
} else if (stringRegex.test(value)) {
76-
dom.addClass(container, 'string');
76+
container.classList.add('string');
7777
}
7878
}
7979

@@ -103,7 +103,7 @@ export function renderVariable(variable: Variable, data: IVariableTemplateData,
103103
text += ':';
104104
}
105105
data.label.set(text, highlights, variable.type ? variable.type : variable.name);
106-
dom.toggleClass(data.name, 'virtual', !!variable.presentationHint && variable.presentationHint.kind === 'virtual');
106+
data.name.classList.toggle('virtual', !!variable.presentationHint && variable.presentationHint.kind === 'virtual');
107107
} else if (variable.value && typeof variable.name === 'string' && variable.name) {
108108
data.label.set(':');
109109
}

‎src/vs/workbench/contrib/debug/browser/breakpointsView.ts

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -86,8 +86,8 @@ export class BreakpointsView extends ViewPane {
8686
public renderBody(container: HTMLElement): void {
8787
super.renderBody(container);
8888

89-
dom.addClass(this.element, 'debug-pane');
90-
dom.addClass(container, 'debug-breakpoints');
89+
this.element.classList.add('debug-pane');
90+
container.classList.add('debug-breakpoints');
9191
const delegate = new BreakpointsDelegate(this.debugService);
9292

9393
this.list = <WorkbenchList<BreakpointItem>>this.instantiationService.createInstance(WorkbenchList, 'Breakpoints', container, delegate, [
@@ -369,7 +369,7 @@ class BreakpointsRenderer implements IListRenderer<IBreakpoint, IBreakpointTempl
369369

370370
renderElement(breakpoint: IBreakpoint, index: number, data: IBreakpointTemplateData): void {
371371
data.context = breakpoint;
372-
dom.toggleClass(data.breakpoint, 'disabled', !this.debugService.getModel().areBreakpointsActivated());
372+
data.breakpoint.classList.toggle('disabled', !this.debugService.getModel().areBreakpointsActivated());
373373

374374
data.name.textContent = resources.basenameOrAuthority(breakpoint.uri);
375375
data.lineNumber.textContent = breakpoint.lineNumber.toString();
@@ -385,7 +385,7 @@ class BreakpointsRenderer implements IListRenderer<IBreakpoint, IBreakpointTempl
385385

386386
const debugActive = this.debugService.state === State.Running || this.debugService.state === State.Stopped;
387387
if (debugActive && !breakpoint.verified) {
388-
dom.addClass(data.breakpoint, 'disabled');
388+
data.breakpoint.classList.add('disabled');
389389
}
390390
}
391391

@@ -421,7 +421,7 @@ class ExceptionBreakpointsRenderer implements IListRenderer<IExceptionBreakpoint
421421
dom.append(data.breakpoint, data.checkbox);
422422

423423
data.name = dom.append(data.breakpoint, $('span.name'));
424-
dom.addClass(data.breakpoint, 'exception');
424+
data.breakpoint.classList.add('exception');
425425

426426
return data;
427427
}
@@ -483,7 +483,7 @@ class FunctionBreakpointsRenderer implements IListRenderer<FunctionBreakpoint, I
483483

484484
// Mark function breakpoints as disabled if deactivated or if debug type does not support them #9099
485485
const session = this.debugService.getViewModel().focusedSession;
486-
dom.toggleClass(data.breakpoint, 'disabled', (session && !session.capabilities.supportsFunctionBreakpoints) || !this.debugService.getModel().areBreakpointsActivated());
486+
data.breakpoint.classList.toggle('disabled', (session && !session.capabilities.supportsFunctionBreakpoints) || !this.debugService.getModel().areBreakpointsActivated());
487487
if (session && !session.capabilities.supportsFunctionBreakpoints) {
488488
data.breakpoint.title = nls.localize('functionBreakpointsNotSupported', "Function breakpoints are not supported by this debug type");
489489
}
@@ -539,7 +539,7 @@ class DataBreakpointsRenderer implements IListRenderer<DataBreakpoint, IBaseBrea
539539

540540
// Mark function breakpoints as disabled if deactivated or if debug type does not support them #9099
541541
const session = this.debugService.getViewModel().focusedSession;
542-
dom.toggleClass(data.breakpoint, 'disabled', (session && !session.capabilities.supportsDataBreakpoints) || !this.debugService.getModel().areBreakpointsActivated());
542+
data.breakpoint.classList.toggle('disabled', (session && !session.capabilities.supportsDataBreakpoints) || !this.debugService.getModel().areBreakpointsActivated());
543543
if (session && !session.capabilities.supportsDataBreakpoints) {
544544
data.breakpoint.title = nls.localize('dataBreakpointsNotSupported', "Data breakpoints are not supported by this debug type");
545545
}

‎src/vs/workbench/contrib/debug/browser/callStackView.ts

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ export class CallStackView extends ViewPane {
158158
if (thread && thread.stoppedDetails) {
159159
this.pauseMessageLabel.textContent = thread.stoppedDetails.description || nls.localize('debugStopped', "Paused on {0}", thread.stoppedDetails.reason || '');
160160
this.pauseMessageLabel.title = thread.stoppedDetails.text || '';
161-
dom.toggleClass(this.pauseMessageLabel, 'exception', thread.stoppedDetails.reason === 'exception');
161+
this.pauseMessageLabel.classList.toggle('exception', thread.stoppedDetails.reason === 'exception');
162162
this.pauseMessage.hidden = false;
163163
this.updateActions();
164164
} else {
@@ -210,8 +210,8 @@ export class CallStackView extends ViewPane {
210210

211211
renderBody(container: HTMLElement): void {
212212
super.renderBody(container);
213-
dom.addClass(this.element, 'debug-pane');
214-
dom.addClass(container, 'debug-call-stack');
213+
this.element.classList.add('debug-pane');
214+
container.classList.add('debug-call-stack');
215215
const treeContainer = renderViewTree(container);
216216

217217
this.dataSource = new CallStackDataSource(this.debugService);
@@ -631,11 +631,11 @@ class StackFramesRenderer implements ICompressibleTreeRenderer<IStackFrame, Fuzz
631631

632632
renderElement(element: ITreeNode<IStackFrame, FuzzyScore>, index: number, data: IStackFrameTemplateData): void {
633633
const stackFrame = element.element;
634-
dom.toggleClass(data.stackFrame, 'disabled', !stackFrame.source || !stackFrame.source.available || isDeemphasized(stackFrame));
635-
dom.toggleClass(data.stackFrame, 'label', stackFrame.presentationHint === 'label');
636-
dom.toggleClass(data.stackFrame, 'subtle', stackFrame.presentationHint === 'subtle');
634+
data.stackFrame.classList.toggle('disabled', !stackFrame.source || !stackFrame.source.available || isDeemphasized(stackFrame));
635+
data.stackFrame.classList.toggle('label', stackFrame.presentationHint === 'label');
636+
data.stackFrame.classList.toggle('subtle', stackFrame.presentationHint === 'subtle');
637637
const hasActions = !!stackFrame.thread.session.capabilities.supportsRestartFrame && stackFrame.presentationHint !== 'label' && stackFrame.presentationHint !== 'subtle';
638-
dom.toggleClass(data.stackFrame, 'has-actions', hasActions);
638+
data.stackFrame.classList.toggle('has-actions', hasActions);
639639

640640
data.file.title = stackFrame.source.inMemory ? stackFrame.source.uri.path : this.labelService.getUriLabel(stackFrame.source.uri);
641641
if (stackFrame.source.raw.origin) {
@@ -648,9 +648,9 @@ class StackFramesRenderer implements ICompressibleTreeRenderer<IStackFrame, Fuzz
648648
if (stackFrame.range.startColumn) {
649649
data.lineNumber.textContent += `:${stackFrame.range.startColumn}`;
650650
}
651-
dom.removeClass(data.lineNumber, 'unavailable');
651+
data.lineNumber.classList.remove('unavailable');
652652
} else {
653-
dom.addClass(data.lineNumber, 'unavailable');
653+
data.lineNumber.classList.add('unavailable');
654654
}
655655

656656
data.actionBar.clear();

‎src/vs/workbench/contrib/debug/browser/debugActionViewItems.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ export class StartDebugActionViewItem implements IActionViewItem {
6767

6868
render(container: HTMLElement): void {
6969
this.container = container;
70-
dom.addClass(container, 'start-debug-action-item');
70+
container.classList.add('start-debug-action-item');
7171
this.start = dom.append(container, $('.codicon.codicon-debug-start'));
7272
this.start.title = this.action.label;
7373
this.start.setAttribute('role', 'button');
@@ -80,7 +80,7 @@ export class StartDebugActionViewItem implements IActionViewItem {
8080

8181
this.toDispose.push(dom.addDisposableListener(this.start, dom.EventType.MOUSE_DOWN, (e: MouseEvent) => {
8282
if (this.action.enabled && e.button === 0) {
83-
dom.addClass(this.start, 'active');
83+
this.start.classList.add('active');
8484
}
8585
}));
8686
this.toDispose.push(dom.addDisposableListener(this.start, dom.EventType.MOUSE_UP, () => {

‎src/vs/workbench/contrib/debug/browser/debugToolBar.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ export class DebugToolBar extends Themable implements IWorkbenchContribution {
142142
}));
143143

144144
this._register(dom.addDisposableGenericMouseDownListner(this.dragArea, (event: MouseEvent) => {
145-
dom.addClass(this.dragArea, 'dragged');
145+
this.dragArea.classList.add('dragged');
146146

147147
const mouseMoveListener = dom.addDisposableGenericMouseMoveListner(window, (e: MouseEvent) => {
148148
const mouseMoveEvent = new StandardMouseEvent(e);
@@ -154,7 +154,7 @@ export class DebugToolBar extends Themable implements IWorkbenchContribution {
154154

155155
const mouseUpListener = dom.addDisposableGenericMouseUpListner(window, (e: MouseEvent) => {
156156
this.storePosition();
157-
dom.removeClass(this.dragArea, 'dragged');
157+
this.dragArea.classList.remove('dragged');
158158

159159
mouseMoveListener.dispose();
160160
mouseUpListener.dispose();

‎src/vs/workbench/contrib/debug/browser/debugViewlet.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
import 'vs/css!./media/debugViewlet';
77
import * as nls from 'vs/nls';
88
import { IAction, IActionViewItem } from 'vs/base/common/actions';
9-
import * as DOM from 'vs/base/browser/dom';
109
import { IDebugService, VIEWLET_ID, State, BREAKPOINTS_VIEW_ID, IDebugConfiguration, CONTEXT_DEBUG_UX, CONTEXT_DEBUG_UX_KEY, REPL_VIEW_ID } from 'vs/workbench/contrib/debug/common/debug';
1110
import { StartAction, ConfigureAction, SelectAndStartAction, FocusSessionAction } from 'vs/workbench/contrib/debug/browser/debugActions';
1211
import { StartDebugActionViewItem, FocusSessionActionViewItem } from 'vs/workbench/contrib/debug/browser/debugActionViewItems';
@@ -91,7 +90,7 @@ export class DebugViewPaneContainer extends ViewPaneContainer {
9190

9291
create(parent: HTMLElement): void {
9392
super.create(parent);
94-
DOM.addClass(parent, 'debug-viewlet');
93+
parent.classList.add('debug-viewlet');
9594
}
9695

9796
focus(): void {

‎src/vs/workbench/contrib/debug/browser/loadedScriptsView.ts

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
*--------------------------------------------------------------------------------------------*/
55

66
import * as nls from 'vs/nls';
7-
import * as dom from 'vs/base/browser/dom';
87
import { IViewletViewOptions } from 'vs/workbench/browser/parts/views/viewsViewlet';
98
import { normalize, isAbsolute, posix } from 'vs/base/common/path';
109
import { ViewPane } from 'vs/workbench/browser/parts/views/viewPaneContainer';
@@ -441,9 +440,9 @@ export class LoadedScriptsView extends ViewPane {
441440
renderBody(container: HTMLElement): void {
442441
super.renderBody(container);
443442

444-
dom.addClass(this.element, 'debug-pane');
445-
dom.addClass(container, 'debug-loaded-scripts');
446-
dom.addClass(container, 'show-file-icons');
443+
this.element.classList.add('debug-pane');
444+
container.classList.add('debug-loaded-scripts');
445+
container.classList.add('show-file-icons');
447446

448447
this.treeContainer = renderViewTree(container);
449448

‎src/vs/workbench/contrib/debug/browser/repl.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -534,7 +534,7 @@ export class Repl extends ViewPane implements IHistoryNavigationWidget {
534534

535535
this.replDelegate = new ReplDelegate(this.configurationService);
536536
const wordWrap = this.configurationService.getValue<IDebugConfiguration>('debug').console.wordWrap;
537-
dom.toggleClass(treeContainer, 'word-wrap', wordWrap);
537+
treeContainer.classList.toggle('word-wrap', wordWrap);
538538
const linkDetector = this.instantiationService.createInstance(LinkDetector);
539539
this.tree = <WorkbenchAsyncDataTree<IDebugSession, IReplElement, FuzzyScore>>this.instantiationService.createInstance(
540540
WorkbenchAsyncDataTree,
@@ -609,8 +609,8 @@ export class Repl extends ViewPane implements IHistoryNavigationWidget {
609609
this._register(this.replInput.onDidFocusEditorText(() => this.updateInputDecoration()));
610610
this._register(this.replInput.onDidBlurEditorText(() => this.updateInputDecoration()));
611611

612-
this._register(dom.addStandardDisposableListener(this.replInputContainer, dom.EventType.FOCUS, () => dom.addClass(this.replInputContainer, 'synthetic-focus')));
613-
this._register(dom.addStandardDisposableListener(this.replInputContainer, dom.EventType.BLUR, () => dom.removeClass(this.replInputContainer, 'synthetic-focus')));
612+
this._register(dom.addStandardDisposableListener(this.replInputContainer, dom.EventType.FOCUS, () => this.replInputContainer.classList.add('synthetic-focus')));
613+
this._register(dom.addStandardDisposableListener(this.replInputContainer, dom.EventType.BLUR, () => this.replInputContainer.classList.remove('synthetic-focus')));
614614
}
615615

616616
private onContextMenu(e: ITreeContextMenuEvent<IReplElement>): void {

‎src/vs/workbench/contrib/debug/browser/replFilter.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ export class ReplFilterActionViewItem extends BaseActionViewItem {
119119

120120
render(container: HTMLElement): void {
121121
this.container = container;
122-
DOM.addClass(this.container, 'repl-panel-filter-container');
122+
this.container.classList.add('repl-panel-filter-container');
123123

124124
this.element = DOM.append(this.container, DOM.$(''));
125125
this.element.className = this.class;

‎src/vs/workbench/contrib/debug/browser/replViewer.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ export class ReplSimpleElementsRenderer implements ITreeRenderer<SimpleReplEleme
147147

148148
renderTemplate(container: HTMLElement): ISimpleReplElementTemplateData {
149149
const data: ISimpleReplElementTemplateData = Object.create(null);
150-
dom.addClass(container, 'output');
150+
container.classList.add('output');
151151
const expression = dom.append(container, $('.output.expression.value-and-source'));
152152

153153
data.container = container;
@@ -179,7 +179,7 @@ export class ReplSimpleElementsRenderer implements ITreeRenderer<SimpleReplEleme
179179
const result = handleANSIOutput(element.value, this.linkDetector, this.themeService, element.session);
180180
templateData.value.appendChild(result);
181181

182-
dom.addClass(templateData.value, (element.severity === severity.Warning) ? 'warn' : (element.severity === severity.Error) ? 'error' : (element.severity === severity.Ignore) ? 'ignore' : 'info');
182+
templateData.value.classList.add((element.severity === severity.Warning) ? 'warn' : (element.severity === severity.Error) ? 'error' : (element.severity === severity.Ignore) ? 'ignore' : 'info');
183183
templateData.source.textContent = element.sourceData ? `${element.sourceData.source.name}:${element.sourceData.lineNumber}` : '';
184184
templateData.source.title = element.sourceData ? `${this.labelService.getUriLabel(element.sourceData.source.uri)}:${element.sourceData.lineNumber}` : '';
185185
templateData.getReplElementSource = () => element.sourceData;
@@ -226,7 +226,7 @@ export class ReplRawObjectsRenderer implements ITreeRenderer<RawObjectReplElemen
226226
}
227227

228228
renderTemplate(container: HTMLElement): IRawObjectReplTemplateData {
229-
dom.addClass(container, 'output');
229+
container.classList.add('output');
230230

231231
const expression = dom.append(container, $('.output.expression'));
232232
const name = dom.append(expression, $('span.name'));

‎src/vs/workbench/contrib/debug/browser/statusbarColorProvider.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ import { IWorkbenchLayoutService, Parts } from 'vs/workbench/services/layout/bro
1111
import { IDebugService, State, IDebugSession } from 'vs/workbench/contrib/debug/common/debug';
1212
import { IWorkspaceContextService, WorkbenchState } from 'vs/platform/workspace/common/workspace';
1313
import { STATUS_BAR_NO_FOLDER_BACKGROUND, STATUS_BAR_NO_FOLDER_FOREGROUND, STATUS_BAR_BACKGROUND, STATUS_BAR_FOREGROUND, STATUS_BAR_NO_FOLDER_BORDER, STATUS_BAR_BORDER } from 'vs/workbench/common/theme';
14-
import { addClass, removeClass, createStyleSheet } from 'vs/base/browser/dom';
1514
import { assertIsDefined } from 'vs/base/common/types';
15+
import { createStyleSheet } from 'vs/base/browser/dom';
1616

1717
// colors for theming
1818

@@ -59,9 +59,9 @@ export class StatusBarColorProvider extends Themable implements IWorkbenchContri
5959

6060
const container = assertIsDefined(this.layoutService.getContainer(Parts.STATUSBAR_PART));
6161
if (isStatusbarInDebugMode(this.debugService.state, this.debugService.getViewModel().focusedSession)) {
62-
addClass(container, 'debugging');
62+
container.classList.add('debugging');
6363
} else {
64-
removeClass(container, 'debugging');
64+
container.classList.remove('debugging');
6565
}
6666

6767
// Container Colors
@@ -72,10 +72,10 @@ export class StatusBarColorProvider extends Themable implements IWorkbenchContri
7272
// Border Color
7373
const borderColor = this.getColor(this.getColorKey(STATUS_BAR_NO_FOLDER_BORDER, STATUS_BAR_DEBUGGING_BORDER, STATUS_BAR_BORDER)) || this.getColor(contrastBorder);
7474
if (borderColor) {
75-
addClass(container, 'status-border-top');
75+
container.classList.add('status-border-top');
7676
container.style.setProperty('--status-border-top-color', borderColor.toString());
7777
} else {
78-
removeClass(container, 'status-border-top');
78+
container.classList.remove('status-border-top');
7979
container.style.removeProperty('--status-border-top-color');
8080
}
8181

‎src/vs/workbench/contrib/debug/browser/variablesView.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -114,8 +114,8 @@ export class VariablesView extends ViewPane {
114114
renderBody(container: HTMLElement): void {
115115
super.renderBody(container);
116116

117-
dom.addClass(this.element, 'debug-pane');
118-
dom.addClass(container, 'debug-variables');
117+
this.element.classList.add('debug-pane');
118+
container.classList.add('debug-variables');
119119
const treeContainer = renderViewTree(container);
120120

121121
this.tree = <WorkbenchAsyncDataTree<IStackFrame | null, IExpression | IScope, FuzzyScore>>this.instantiationService.createInstance(WorkbenchAsyncDataTree, 'VariablesView', treeContainer, new VariablesDelegate(),

‎src/vs/workbench/contrib/debug/browser/watchExpressionsView.ts

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55

66
import * as nls from 'vs/nls';
77
import { RunOnceScheduler } from 'vs/base/common/async';
8-
import * as dom from 'vs/base/browser/dom';
98
import { CollapseAction } from 'vs/workbench/browser/viewlet';
109
import { IViewletViewOptions } from 'vs/workbench/browser/parts/views/viewsViewlet';
1110
import { IDebugService, IExpression, CONTEXT_WATCH_EXPRESSIONS_FOCUSED } from 'vs/workbench/contrib/debug/common/debug';
@@ -68,8 +67,8 @@ export class WatchExpressionsView extends ViewPane {
6867
renderBody(container: HTMLElement): void {
6968
super.renderBody(container);
7069

71-
dom.addClass(this.element, 'debug-pane');
72-
dom.addClass(container, 'debug-watch');
70+
this.element.classList.add('debug-pane');
71+
container.classList.add('debug-watch');
7372
const treeContainer = renderViewTree(container);
7473

7574
const expressionsRenderer = this.instantiationService.createInstance(WatchExpressionsRenderer);

0 commit comments

Comments
 (0)