[theme] exception widget theming

src/vs/workbench/parts/debug/browser/exceptionWidget.ts

@@ -11,22 +11,56 @@ import { ICodeEditor } from 'vs/editor/browser/editorBrowser';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { IDebugService, IExceptionInfo } from 'vs/workbench/parts/debug/common/debug';
 import { RunOnceScheduler } from 'vs/base/common/async';
+import { IThemeService, ITheme } from "vs/platform/theme/common/themeService";
+import { Color } from "vs/base/common/color";
+import { registerColor } from "vs/platform/theme/common/colorRegistry";
 const $ = dom.$;
 
+// theming
+
+export const debugExceptionWidgetBorder = registerColor('debugExceptionWidgetBorder', { dark: '#a31515', light: '#a31515', hc: '#a31515' }, nls.localize('debugExceptionWidgetBorder', 'Exception widget border color'));
+export const debugExceptionWidgetBackground = registerColor('debugExceptionWidgetBackground', { dark: '#a3151540', light: '#a315150d', hc: '#a3151573' }, nls.localize('debugExceptionWidgetBackground', 'Exception widget background color'));
+
 export class ExceptionWidget extends ZoneWidget {
 
+	private _backgroundColor: Color;
+
+
 	constructor(editor: ICodeEditor, private exceptionInfo: IExceptionInfo, private lineNumber: number,
 		@IContextViewService private contextViewService: IContextViewService,
-		@IDebugService private debugService: IDebugService
+		@IDebugService private debugService: IDebugService,
+		@IThemeService themeService: IThemeService
 	) {
 		super(editor, { showFrame: true, showArrow: true, frameWidth: 1 });
 
+		this._backgroundColor = Color.white;
+
+		this._applyTheme(themeService.getTheme());
+		this._disposables.add(themeService.onThemeChange(this._applyTheme.bind(this)));
+
+
 		this.create();
 		const onDidLayoutChangeScheduler = new RunOnceScheduler(() => this._doLayout(undefined, undefined), 50);
 		this._disposables.add(this.editor.onDidLayoutChange(() => onDidLayoutChangeScheduler.schedule()));
 		this._disposables.add(onDidLayoutChangeScheduler);
 	}
 
+	private _applyTheme(theme: ITheme) {
+		this._backgroundColor = theme.getColor(debugExceptionWidgetBackground);
+		let frameColor = theme.getColor(debugExceptionWidgetBorder);
+		this.style({
+			arrowColor: frameColor,
+			frameColor: frameColor
+		}); // style() will trigger _applyStyles
+	}
+
+	protected _applyStyles() {
+		if (this.container) {
+			this.container.style.backgroundColor = this._backgroundColor.toString();
+		}
+		super._applyStyles();
+	}
+
 	protected _fillContainer(container: HTMLElement): void {
 		this.setCssClass('exception-widget');
 		// Set the font size and line height to the one from the editor configuration.

src/vs/workbench/parts/debug/browser/media/exceptionWidget.css

@@ -23,26 +23,7 @@
 	margin-top: 0.5em;
 }
 
-.monaco-editor .zone-widget-arrow.below.exception-widget {
-	border-bottom-color: rgb(163, 21, 21);
-}
-
-/* Light and Dark Theming */
-
-.monaco-editor .zone-widget .zone-widget-container.exception-widget {
-	background-color: rgba(163, 21, 21, 0.05);
-	border-top-color: rgb(163, 21, 21);
-	border-bottom-color: rgb(163, 21, 21);
-}
-
-.monaco-editor.vs-dark .zone-widget .zone-widget-container.exception-widget {
-	background-color: rgba(163, 21, 21, 0.25);
-}
-
 /* High Contrast Theming */
-.monaco-editor.hc-black .zone-widget .zone-widget-container.exception-widget {
-	background-color: rgba(163, 21, 21, 0.45);
-}
 
 .monaco-workbench.mac .zone-widget .zone-widget-container.exception-widget {
 	font-size: 11px;