1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
|
/*---------------------------------------------------------------------------------------------
* Copyright (c) Microsoft Corporation. All rights reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
import { registerColor, foreground, editorInfoForeground, editorWarningForeground, errorForeground, badgeBackground, badgeForeground, listDeemphasizedForeground, contrastBorder, inputBorder, toolbarHoverBackground } from 'vs/platform/theme/common/colorRegistry';
import { registerThemingParticipant, ThemeIcon } from 'vs/platform/theme/common/themeService';
import { Color } from 'vs/base/common/color';
import { localize } from 'vs/nls';
import * as icons from 'vs/workbench/contrib/debug/browser/debugIcons';
import { isHighContrast } from 'vs/platform/theme/common/theme';
export const debugToolBarBackground = registerColor('debugToolBar.background', {
dark: '#333333',
light: '#F3F3F3',
hcDark: '#000000',
hcLight: '#FFFFFF'
}, localize('debugToolBarBackground', "Debug toolbar background color."));
export const debugToolBarBorder = registerColor('debugToolBar.border', {
dark: null,
light: null,
hcDark: null,
hcLight: null
}, localize('debugToolBarBorder', "Debug toolbar border color."));
export const debugIconStartForeground = registerColor('debugIcon.startForeground', {
dark: '#89D185',
light: '#388A34',
hcDark: '#89D185',
hcLight: '#388A34'
}, localize('debugIcon.startForeground', "Debug toolbar icon for start debugging."));
export function registerColors() {
const debugTokenExpressionName = registerColor('debugTokenExpression.name', { dark: '#c586c0', light: '#9b46b0', hcDark: foreground, hcLight: foreground }, 'Foreground color for the token names shown in the debug views (ie. the Variables or Watch view).');
const debugTokenExpressionValue = registerColor('debugTokenExpression.value', { dark: '#cccccc99', light: '#6c6c6ccc', hcDark: foreground, hcLight: foreground }, 'Foreground color for the token values shown in the debug views (ie. the Variables or Watch view).');
const debugTokenExpressionString = registerColor('debugTokenExpression.string', { dark: '#ce9178', light: '#a31515', hcDark: '#f48771', hcLight: '#a31515' }, 'Foreground color for strings in the debug views (ie. the Variables or Watch view).');
const debugTokenExpressionBoolean = registerColor('debugTokenExpression.boolean', { dark: '#4e94ce', light: '#0000ff', hcDark: '#75bdfe', hcLight: '#0000ff' }, 'Foreground color for booleans in the debug views (ie. the Variables or Watch view).');
const debugTokenExpressionNumber = registerColor('debugTokenExpression.number', { dark: '#b5cea8', light: '#098658', hcDark: '#89d185', hcLight: '#098658' }, 'Foreground color for numbers in the debug views (ie. the Variables or Watch view).');
const debugTokenExpressionError = registerColor('debugTokenExpression.error', { dark: '#f48771', light: '#e51400', hcDark: '#f48771', hcLight: '#e51400' }, 'Foreground color for expression errors in the debug views (ie. the Variables or Watch view) and for error logs shown in the debug console.');
const debugViewExceptionLabelForeground = registerColor('debugView.exceptionLabelForeground', { dark: foreground, light: '#FFF', hcDark: foreground, hcLight: foreground }, 'Foreground color for a label shown in the CALL STACK view when the debugger breaks on an exception.');
const debugViewExceptionLabelBackground = registerColor('debugView.exceptionLabelBackground', { dark: '#6C2022', light: '#A31515', hcDark: '#6C2022', hcLight: '#A31515' }, 'Background color for a label shown in the CALL STACK view when the debugger breaks on an exception.');
const debugViewStateLabelForeground = registerColor('debugView.stateLabelForeground', { dark: foreground, light: foreground, hcDark: foreground, hcLight: foreground }, 'Foreground color for a label in the CALL STACK view showing the current session\'s or thread\'s state.');
const debugViewStateLabelBackground = registerColor('debugView.stateLabelBackground', { dark: '#88888844', light: '#88888844', hcDark: '#88888844', hcLight: '#88888844' }, 'Background color for a label in the CALL STACK view showing the current session\'s or thread\'s state.');
const debugViewValueChangedHighlight = registerColor('debugView.valueChangedHighlight', { dark: '#569CD6', light: '#569CD6', hcDark: '#569CD6', hcLight: '#569CD6' }, 'Color used to highlight value changes in the debug views (ie. in the Variables view).');
const debugConsoleInfoForeground = registerColor('debugConsole.infoForeground', { dark: editorInfoForeground, light: editorInfoForeground, hcDark: foreground, hcLight: foreground }, 'Foreground color for info messages in debug REPL console.');
const debugConsoleWarningForeground = registerColor('debugConsole.warningForeground', { dark: editorWarningForeground, light: editorWarningForeground, hcDark: '#008000', hcLight: editorWarningForeground }, 'Foreground color for warning messages in debug REPL console.');
const debugConsoleErrorForeground = registerColor('debugConsole.errorForeground', { dark: errorForeground, light: errorForeground, hcDark: errorForeground, hcLight: errorForeground }, 'Foreground color for error messages in debug REPL console.');
const debugConsoleSourceForeground = registerColor('debugConsole.sourceForeground', { dark: foreground, light: foreground, hcDark: foreground, hcLight: foreground }, 'Foreground color for source filenames in debug REPL console.');
const debugConsoleInputIconForeground = registerColor('debugConsoleInputIcon.foreground', { dark: foreground, light: foreground, hcDark: foreground, hcLight: foreground }, 'Foreground color for debug console input marker icon.');
const debugIconPauseForeground = registerColor('debugIcon.pauseForeground', {
dark: '#75BEFF',
light: '#007ACC',
hcDark: '#75BEFF',
hcLight: '#007ACC'
}, localize('debugIcon.pauseForeground', "Debug toolbar icon for pause."));
const debugIconStopForeground = registerColor('debugIcon.stopForeground', {
dark: '#F48771',
light: '#A1260D',
hcDark: '#F48771',
hcLight: '#A1260D'
}, localize('debugIcon.stopForeground', "Debug toolbar icon for stop."));
const debugIconDisconnectForeground = registerColor('debugIcon.disconnectForeground', {
dark: '#F48771',
light: '#A1260D',
hcDark: '#F48771',
hcLight: '#A1260D'
}, localize('debugIcon.disconnectForeground', "Debug toolbar icon for disconnect."));
const debugIconRestartForeground = registerColor('debugIcon.restartForeground', {
dark: '#89D185',
light: '#388A34',
hcDark: '#89D185',
hcLight: '#388A34'
}, localize('debugIcon.restartForeground', "Debug toolbar icon for restart."));
const debugIconStepOverForeground = registerColor('debugIcon.stepOverForeground', {
dark: '#75BEFF',
light: '#007ACC',
hcDark: '#75BEFF',
hcLight: '#007ACC'
}, localize('debugIcon.stepOverForeground', "Debug toolbar icon for step over."));
const debugIconStepIntoForeground = registerColor('debugIcon.stepIntoForeground', {
dark: '#75BEFF',
light: '#007ACC',
hcDark: '#75BEFF',
hcLight: '#007ACC'
}, localize('debugIcon.stepIntoForeground', "Debug toolbar icon for step into."));
const debugIconStepOutForeground = registerColor('debugIcon.stepOutForeground', {
dark: '#75BEFF',
light: '#007ACC',
hcDark: '#75BEFF',
hcLight: '#007ACC'
}, localize('debugIcon.stepOutForeground', "Debug toolbar icon for step over."));
const debugIconContinueForeground = registerColor('debugIcon.continueForeground', {
dark: '#75BEFF',
light: '#007ACC',
hcDark: '#75BEFF',
hcLight: '#007ACC'
}, localize('debugIcon.continueForeground', "Debug toolbar icon for continue."));
const debugIconStepBackForeground = registerColor('debugIcon.stepBackForeground', {
dark: '#75BEFF',
light: '#007ACC',
hcDark: '#75BEFF',
hcLight: '#007ACC'
}, localize('debugIcon.stepBackForeground', "Debug toolbar icon for step back."));
registerThemingParticipant((theme, collector) => {
// All these colours provide a default value so they will never be undefined, hence the `!`
const badgeBackgroundColor = theme.getColor(badgeBackground)!;
const badgeForegroundColor = theme.getColor(badgeForeground)!;
const listDeemphasizedForegroundColor = theme.getColor(listDeemphasizedForeground)!;
const debugViewExceptionLabelForegroundColor = theme.getColor(debugViewExceptionLabelForeground)!;
const debugViewExceptionLabelBackgroundColor = theme.getColor(debugViewExceptionLabelBackground)!;
const debugViewStateLabelForegroundColor = theme.getColor(debugViewStateLabelForeground)!;
const debugViewStateLabelBackgroundColor = theme.getColor(debugViewStateLabelBackground)!;
const debugViewValueChangedHighlightColor = theme.getColor(debugViewValueChangedHighlight)!;
const toolbarHoverBackgroundColor = theme.getColor(toolbarHoverBackground);
collector.addRule(`
/* Text colour of the call stack row's filename */
.debug-pane .debug-call-stack .monaco-list-row:not(.selected) .stack-frame > .file .file-name {
color: ${listDeemphasizedForegroundColor}
}
/* Line & column number "badge" for selected call stack row */
.debug-pane .monaco-list-row.selected .line-number {
background-color: ${badgeBackgroundColor};
color: ${badgeForegroundColor};
}
/* Line & column number "badge" for unselected call stack row (basically all other rows) */
.debug-pane .line-number {
background-color: ${badgeBackgroundColor.transparent(0.6)};
color: ${badgeForegroundColor.transparent(0.6)};
}
/* State "badge" displaying the active session's current state.
* Only visible when there are more active debug sessions/threads running.
*/
.debug-pane .debug-call-stack .thread > .state.label,
.debug-pane .debug-call-stack .session > .state.label {
background-color: ${debugViewStateLabelBackgroundColor};
color: ${debugViewStateLabelForegroundColor};
}
/* State "badge" displaying the active session's current state.
* Only visible when there are more active debug sessions/threads running
* and thread paused due to a thrown exception.
*/
.debug-pane .debug-call-stack .thread > .state.label.exception,
.debug-pane .debug-call-stack .session > .state.label.exception {
background-color: ${debugViewExceptionLabelBackgroundColor};
color: ${debugViewExceptionLabelForegroundColor};
}
/* Info "badge" shown when the debugger pauses due to a thrown exception. */
.debug-pane .call-stack-state-message > .label.exception {
background-color: ${debugViewExceptionLabelBackgroundColor};
color: ${debugViewExceptionLabelForegroundColor};
}
/* Animation of changed values in Debug viewlet */
@keyframes debugViewletValueChanged {
0% { background-color: ${debugViewValueChangedHighlightColor.transparent(0)} }
5% { background-color: ${debugViewValueChangedHighlightColor.transparent(0.9)} }
100% { background-color: ${debugViewValueChangedHighlightColor.transparent(0.3)} }
}
.debug-pane .monaco-list-row .expression .value.changed {
background-color: ${debugViewValueChangedHighlightColor.transparent(0.3)};
animation-name: debugViewletValueChanged;
animation-duration: 1s;
animation-fill-mode: forwards;
}
.monaco-list-row .expression .lazy-button:hover {
background-color: ${toolbarHoverBackgroundColor}
}
`);
const contrastBorderColor = theme.getColor(contrastBorder);
if (contrastBorderColor) {
collector.addRule(`
.debug-pane .line-number {
border: 1px solid ${contrastBorderColor};
}
`);
}
// Use fully-opaque colors for line-number badges
if (isHighContrast(theme.type)) {
collector.addRule(`
.debug-pane .line-number {
background-color: ${badgeBackgroundColor};
color: ${badgeForegroundColor};
}`);
}
const tokenNameColor = theme.getColor(debugTokenExpressionName)!;
const tokenValueColor = theme.getColor(debugTokenExpressionValue)!;
const tokenStringColor = theme.getColor(debugTokenExpressionString)!;
const tokenBooleanColor = theme.getColor(debugTokenExpressionBoolean)!;
const tokenErrorColor = theme.getColor(debugTokenExpressionError)!;
const tokenNumberColor = theme.getColor(debugTokenExpressionNumber)!;
collector.addRule(`
.monaco-workbench .monaco-list-row .expression .name {
color: ${tokenNameColor};
}
.monaco-workbench .monaco-list-row .expression .value,
.monaco-workbench .debug-hover-widget .value {
color: ${tokenValueColor};
}
.monaco-workbench .monaco-list-row .expression .value.string,
.monaco-workbench .debug-hover-widget .value.string {
color: ${tokenStringColor};
}
.monaco-workbench .monaco-list-row .expression .value.boolean,
.monaco-workbench .debug-hover-widget .value.boolean {
color: ${tokenBooleanColor};
}
.monaco-workbench .monaco-list-row .expression .error,
.monaco-workbench .debug-hover-widget .error,
.monaco-workbench .debug-pane .debug-variables .scope .error {
color: ${tokenErrorColor};
}
.monaco-workbench .monaco-list-row .expression .value.number,
.monaco-workbench .debug-hover-widget .value.number {
color: ${tokenNumberColor};
}
`);
const debugConsoleInputBorderColor = theme.getColor(inputBorder) || Color.fromHex('#80808060');
const debugConsoleInfoForegroundColor = theme.getColor(debugConsoleInfoForeground)!;
const debugConsoleWarningForegroundColor = theme.getColor(debugConsoleWarningForeground)!;
const debugConsoleErrorForegroundColor = theme.getColor(debugConsoleErrorForeground)!;
const debugConsoleSourceForegroundColor = theme.getColor(debugConsoleSourceForeground)!;
const debugConsoleInputIconForegroundColor = theme.getColor(debugConsoleInputIconForeground)!;
collector.addRule(`
.repl .repl-input-wrapper {
border-top: 1px solid ${debugConsoleInputBorderColor};
}
.monaco-workbench .repl .repl-tree .output .expression .value.info {
color: ${debugConsoleInfoForegroundColor};
}
.monaco-workbench .repl .repl-tree .output .expression .value.warn {
color: ${debugConsoleWarningForegroundColor};
}
.monaco-workbench .repl .repl-tree .output .expression .value.error {
color: ${debugConsoleErrorForegroundColor};
}
.monaco-workbench .repl .repl-tree .output .expression .source {
color: ${debugConsoleSourceForegroundColor};
}
.monaco-workbench .repl .repl-tree .monaco-tl-contents .arrow {
color: ${debugConsoleInputIconForegroundColor};
}
`);
if (!theme.defines(debugConsoleInputIconForeground)) {
collector.addRule(`
.monaco-workbench.vs .repl .repl-tree .monaco-tl-contents .arrow {
opacity: 0.25;
}
.monaco-workbench.vs-dark .repl .repl-tree .monaco-tl-contents .arrow {
opacity: 0.4;
}
.monaco-workbench.hc-black .repl .repl-tree .monaco-tl-contents .arrow,
.monaco-workbench.hc-light .repl .repl-tree .monaco-tl-contents .arrow {
opacity: 1;
}
`);
}
const debugIconStartColor = theme.getColor(debugIconStartForeground);
if (debugIconStartColor) {
collector.addRule(`.monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugStart)} { color: ${debugIconStartColor}; }`);
}
const debugIconPauseColor = theme.getColor(debugIconPauseForeground);
if (debugIconPauseColor) {
collector.addRule(`.monaco-workbench .part > .title > .title-actions .action-label${ThemeIcon.asCSSSelector(icons.debugPause)}, .monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugPause)} { color: ${debugIconPauseColor}; }`);
}
const debugIconStopColor = theme.getColor(debugIconStopForeground);
if (debugIconStopColor) {
collector.addRule(`.monaco-workbench .part > .title > .title-actions .action-label${ThemeIcon.asCSSSelector(icons.debugStop)},.monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugStop)} { color: ${debugIconStopColor}; }`);
}
const debugIconDisconnectColor = theme.getColor(debugIconDisconnectForeground);
if (debugIconDisconnectColor) {
collector.addRule(`.monaco-workbench .part > .title > .title-actions .action-label${ThemeIcon.asCSSSelector(icons.debugDisconnect)},.monaco-workbench .debug-view-content ${ThemeIcon.asCSSSelector(icons.debugDisconnect)}, .monaco-workbench .debug-toolbar ${ThemeIcon.asCSSSelector(icons.debugDisconnect)} { color: ${debugIconDisconnectColor}; }`);
}
const debugIconRestartColor = theme.getColor(debugIconRestartForeground);
if (debugIconRestartColor) {
collector.addRule(`.monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugRestart)}, .monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugRestartFrame)}, .monaco-workbench .part > .title > .title-actions .action-label${ThemeIcon.asCSSSelector(icons.debugRestart)}, .monaco-workbench .part > .title > .title-actions .action-label${ThemeIcon.asCSSSelector(icons.debugRestartFrame)} { color: ${debugIconRestartColor}; }`);
}
const debugIconStepOverColor = theme.getColor(debugIconStepOverForeground);
if (debugIconStepOverColor) {
collector.addRule(`.monaco-workbench .part > .title > .title-actions .action-label${ThemeIcon.asCSSSelector(icons.debugStepOver)}, .monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugStepOver)} { color: ${debugIconStepOverColor}; }`);
}
const debugIconStepIntoColor = theme.getColor(debugIconStepIntoForeground);
if (debugIconStepIntoColor) {
collector.addRule(`.monaco-workbench .part > .title > .title-actions .action-label${ThemeIcon.asCSSSelector(icons.debugStepInto)}, .monaco-workbench .part > .title > .title-actions .action-label${ThemeIcon.asCSSSelector(icons.debugStepInto)}, .monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugStepInto)} { color: ${debugIconStepIntoColor}; }`);
}
const debugIconStepOutColor = theme.getColor(debugIconStepOutForeground);
if (debugIconStepOutColor) {
collector.addRule(`.monaco-workbench .part > .title > .title-actions .action-label${ThemeIcon.asCSSSelector(icons.debugStepOut)}, .monaco-workbench .part > .title > .title-actions .action-label${ThemeIcon.asCSSSelector(icons.debugStepOut)}, .monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugStepOut)} { color: ${debugIconStepOutColor}; }`);
}
const debugIconContinueColor = theme.getColor(debugIconContinueForeground);
if (debugIconContinueColor) {
collector.addRule(`.monaco-workbench .part > .title > .title-actions .action-label${ThemeIcon.asCSSSelector(icons.debugContinue)}, .monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugContinue)}, .monaco-workbench .part > .title > .title-actions .action-label${ThemeIcon.asCSSSelector(icons.debugReverseContinue)}, .monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugReverseContinue)} { color: ${debugIconContinueColor}; }`);
}
const debugIconStepBackColor = theme.getColor(debugIconStepBackForeground);
if (debugIconStepBackColor) {
collector.addRule(`.monaco-workbench .part > .title > .title-actions .action-label${ThemeIcon.asCSSSelector(icons.debugStepBack)}, .monaco-workbench ${ThemeIcon.asCSSSelector(icons.debugStepBack)} { color: ${debugIconStepBackColor}; }`);
}
});
}
|
