Amended styling for exception widget.

src/vs/editor/contrib/zoneWidget/browser/zoneWidget.ts

@@ -240,6 +240,10 @@ export abstract class ZoneWidget extends Widget implements IHorizontalSashLayout
 
 			arrow = document.createElement('div');
 			arrow.className = 'zone-widget-arrow below';
+			if (this.options.className) {
+				arrow.classList.add(this.options.className);
+			}
+
 			arrow.style.top = -arrowHeight + 'px';
 			arrow.style.borderWidth = arrowHeight + 'px';
 			arrow.style.left = this.editor.getOffsetForColumn(position.lineNumber, position.column) + 'px';

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

@@ -11,8 +11,6 @@ import { IContextViewService } from 'vs/platform/contextview/browser/contextView
 import { IDebugService } from 'vs/workbench/parts/debug/common/debug';
 import * as strings from 'vs/base/common/strings';
 
-import * as dom from 'vs/base/browser/dom';
-
 export class ExceptionWidget extends ZoneWidget {
 
 
@@ -20,24 +18,27 @@ export class ExceptionWidget extends ZoneWidget {
 		@IContextViewService private contextViewService: IContextViewService,
 		@IDebugService private debugService: IDebugService
 	) {
-		super(editor, { showFrame: true, showArrow: false, frameWidth: 1 });
+		super(editor, { showFrame: true, showArrow: true, frameWidth: 1, className: 'exception-widget' });
 
 		this.create();
 	}
 
 	protected _fillContainer(container: HTMLElement): void {
-		dom.addClass(container, 'exception-widget monaco-editor-background');
+		let el = document.createElement('div');
+		el.textContent = nls.localize('exceptionThrown', 'Exception occured.');
+		el.className = 'exception-title';
+		container.appendChild(el);
 
 		const thread = this.debugService.getViewModel().focusedThread;
 		if (thread && thread.stoppedDetails) {
-			const exceptionThrown = nls.localize('exceptionThrown', "Exception occured: {0}", thread.stoppedDetails.text);
-			container.textContent = exceptionThrown;
+			let el = document.createElement('div');
+			el.textContent = thread.stoppedDetails.text;
+			container.appendChild(el);
 		}
 	}
 
 	protected _doLayout(heightInPixel: number, widthInPixel: number): void {
-		var height = Math.ceil(this.editor.getConfiguration().lineHeight * 1.2);
+		var height = Math.ceil(this.editor.getConfiguration().lineHeight * 1.8);
 		this.container.style.height = strings.format('{0}px', height);
-		this.container.style.lineHeight = this.container.style.height;
 	}
 }

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

@@ -8,14 +8,12 @@
 	background-image: url('debug.svg');
 }
 
-.monaco-editor .debug-top-stack-frame-line {
+.monaco-editor .debug-top-stack-frame-line,
+.monaco-editor .debug-top-stack-frame-exception-line
+{
 	background: rgba(255, 255, 102, 0.45);
 }
 
-.monaco-editor .debug-top-stack-frame-exception-line {
-	background: rgba(242, 222, 222, 0.8);
-}
-
 .monaco-editor .debug-top-stack-frame-column::before {
 	background: url('current-arrow.svg') center center no-repeat;
 }
@@ -181,12 +179,9 @@
 	background: rgba(122, 189, 122, 0.3);
 }
 
-.monaco-editor.vs-dark .debug-top-stack-frame-line {
-	background: rgba(255, 255, 0, 0.2)
-}
-
+.monaco-editor.vs-dark .debug-top-stack-frame-line,
 .monaco-editor.vs-dark .debug-top-stack-frame-exception-line {
-	background-color: rgba(90, 29, 29, 0.6);
+	background: rgba(255, 255, 0, 0.2)
 }
 
 .monaco-editor.vs-dark .debug-top-stack-frame-column::before {

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

@@ -3,26 +3,32 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-.monaco-editor .zone-widget .exception-widget {
+.monaco-editor .zone-widget.exception-widget .exception-title {
+	font-weight: bold;
+}
+
+.monaco-editor .zone-widget.exception-widget .zone-widget-container {
 	padding: 8px;
+	font-family: Monaco, Menlo, Consolas, "Droid Sans Mono", "Inconsolata", "Courier New", monospace, "Droid Sans Fallback";
 }
 
+.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: #FDF3F3;
-	border-top-color: #E51400;
-	border-bottom-color: #E51400;
+.monaco-editor .zone-widget.exception-widget .zone-widget-container {
+	background-color: rgba(163, 21, 21, 0.25);
+	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: #330000;
+.monaco-editor.vs-dark .zone-widget.exception-widget .zone-widget-container {
+	background-color: rgba(163, 21, 21, 0.25);
 }
 
-
 /* High Contrast Theming */
-
-.monaco-editor.hc-black .exception-widget {
-	background-color: #0C141F;
+.monaco-editor.hc-black .zone-widget.exception-widget .zone-widget-container {
+	background-color: rgba(163, 21, 21, 0.45);
 }

src/vs/workbench/parts/debug/electron-browser/debugEditorContribution.ts

@@ -332,7 +332,7 @@ export class DebugEditorContribution implements IDebugEditorContribution {
 		}
 
 		this.exceptionWidget = this.instantiationService.createInstance(ExceptionWidget, this.editor, lineNumber);
-		this.exceptionWidget.show({ lineNumber, column: 1 }, 2);
+		this.exceptionWidget.show({ lineNumber, column: 1 }, 3);
 	}
 
 	private hideExceptionWidget() {