Fixes #16860: Improving exception experience

src/vs/editor/contrib/gotoError/browser/gotoError.css

@@ -2,6 +2,7 @@
  *  Copyright (c) Microsoft Corporation. All rights reserved.
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
+
 /* marker zone */
 
 .monaco-editor .marker-widget {
@@ -12,11 +13,31 @@
 	white-space: nowrap;
 }
 
+.monaco-editor .zone-widget .zone-widget-container.marker-error-widget {
+	border-top-color: #ff5a5a;
+	border-bottom-color: #ff5a5a;
+}
+
+.monaco-editor .zone-widget .zone-widget-container.marker-warning-widget {
+	border-top-color: #5aac5a;
+	border-bottom-color: #5aac5a;
+}
+
+.monaco-editor .zone-widget-arrow.below.marker-error-widget {
+	border-bottom-color: #ff5a5a;
+}
+
+.monaco-editor .zone-widget-arrow.below.marker-warning-widget {
+	border-bottom-color: #5aac5a;
+}
+
 .monaco-editor.vs-dark .marker-widget {
 	background-color: #2D2D30;
 }
 
+
 /* High Contrast Theming */
+
 .monaco-editor.hc-black .marker-widget {
 	background-color: #0C141F;
 }

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

@@ -265,15 +265,16 @@ class MarkerNavigationWidget extends ZoneWidget {
 		this._message.update(marker);
 
 		this._model.withoutWatchingEditorPosition(() => {
+			const errorWidgetClass = 'marker-error-widget', warningWidgetClass = 'marker-warning-widget';
 
 			// update frame color (only applied on 'show')
 			switch (marker.severity) {
 				case Severity.Error:
-					this.options.frameColor = '#ff5a5a';
+					this.setCssClass(errorWidgetClass, warningWidgetClass);
 					break;
 				case Severity.Warning:
 				case Severity.Info:
-					this.options.frameColor = '#5aac5a';
+					this.setCssClass(warningWidgetClass, errorWidgetClass);
 					break;
 			}
 

src/vs/editor/contrib/referenceSearch/browser/referencesWidget.css

@@ -9,6 +9,10 @@
 	border-bottom-width: 1px;
 }
 
+.monaco-editor .reference-zone-widget.zone-widget-arrow.below {
+	background: transparent;
+}
+
 .monaco-editor .zone-widget .zone-widget-container.reference-zone-widget.results-loaded {
 	-webkit-transition: height 100ms ease-in;
 	transition: height 100ms ease-in;

src/vs/editor/contrib/referenceSearch/browser/referencesWidget.ts

@@ -505,7 +505,7 @@ export class ReferenceWidget extends PeekViewWidget {
 		private _contextService: IWorkspaceContextService,
 		private _instantiationService: IInstantiationService
 	) {
-		super(editor, { frameColor: '#007ACC', showFrame: false, showArrow: true, isResizeable: true });
+		super(editor, { showFrame: false, showArrow: true, isResizeable: true });
 
 		this._instantiationService = this._instantiationService.createChild(new ServiceCollection([IPeekViewService, this]));
 		this.create();
@@ -543,7 +543,7 @@ export class ReferenceWidget extends PeekViewWidget {
 	protected _fillBody(containerElement: HTMLElement): void {
 		var container = $(containerElement);
 
-		container.addClass('reference-zone-widget');
+		this.setCssClass('reference-zone-widget');
 
 		// message pane
 		container.div({ 'class': 'messages' }, div => {

src/vs/editor/contrib/zoneWidget/browser/peekViewWidget.css

@@ -5,7 +5,6 @@
 
 .monaco-editor .peekview-widget .head {
 	background-color: #fff;
-	border-top: 1px solid;
 	-webkit-box-sizing:	border-box;
 	-o-box-sizing: border-box;
 	-moz-box-sizing: border-box;
@@ -49,8 +48,8 @@
 
 .monaco-editor .peekview-widget > .body {
 	border-top: 1px solid;
-	border-bottom: 1px solid;
 	position: relative;
+	border-color: rgb(0, 122, 204);
 }
 
 /* Dark Theme */

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

@@ -77,16 +77,11 @@ export abstract class PeekViewWidget extends ZoneWidget implements IPeekViewServ
 
 	public show(where: any, heightInLines: number): void {
 		this._isActive = true;
-
-		this._headElement.style.borderTopColor = this.options.frameColor;
-		this._bodyElement.style.borderTopColor = this.options.frameColor;
-		this._bodyElement.style.borderBottomColor = this.options.frameColor;
-
 		super.show(where, heightInLines);
 	}
 
 	protected _fillContainer(container: HTMLElement): void {
-		$(container).addClass('peekview-widget');
+		this.setCssClass('peekview-widget');
 
 		this._headElement = <HTMLDivElement>$('.head').getHTMLElement();
 		this._bodyElement = <HTMLDivElement>$('.body').getHTMLElement();

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

@@ -16,15 +16,15 @@
 }
 
 .monaco-editor .zone-widget-arrow.below {
-	border-bottom-color: yellowGreen;
+	border-bottom-color: rgb(0, 122, 204);
 }
 
 .monaco-editor .zone-widget .zone-widget-container {
 	border-top-style: solid;
 	border-bottom-style: solid;
 	border-top-width: 0;
 	border-bottom-width: 0;
-	border-top-color: yellowGreen;
-	border-bottom-color: yellowGreen;
+	border-top-color: rgb(0, 122, 204);
+	border-bottom-color: rgb(0, 122, 204);
 	position: relative;
 }

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

@@ -18,7 +18,6 @@ import { ICodeEditor, IOverlayWidget, IOverlayWidgetPosition, IViewZone, IViewZo
 export interface IOptions {
 	showFrame?: boolean;
 	showArrow?: boolean;
-	frameColor?: string;
 	frameWidth?: number;
 	className?: string;
 	isAccessible?: boolean;
@@ -28,7 +27,6 @@ export interface IOptions {
 const defaultOptions: IOptions = {
 	showArrow: true,
 	showFrame: true,
-	frameColor: '',
 	className: ''
 };
 
@@ -103,6 +101,7 @@ export abstract class ZoneWidget extends Widget implements IHorizontalSashLayout
 	public domNode: HTMLElement;
 	public editor: ICodeEditor;
 	public options: IOptions;
+	private arrow: HTMLElement = null;
 
 	constructor(editor: ICodeEditor, options: IOptions = {}) {
 		super();
@@ -148,8 +147,12 @@ export abstract class ZoneWidget extends Widget implements IHorizontalSashLayout
 		this.container = document.createElement('div');
 		dom.addClass(this.container, 'zone-widget-container');
 		this.domNode.appendChild(this.container);
-		this._fillContainer(this.container);
+		if (this.options.showArrow) {
+			this.arrow = document.createElement('div');
+			this.arrow.className = 'zone-widget-arrow below';
+		}
 
+		this._fillContainer(this.container);
 		this._initSash();
 	}
 
@@ -232,22 +235,17 @@ export abstract class ZoneWidget extends Widget implements IHorizontalSashLayout
 
 		// Render the widget as zone (rendering) and widget (lifecycle)
 		let viewZoneDomNode = document.createElement('div'),
-			arrow = document.createElement('div'),
 			lineHeight = this.editor.getConfiguration().lineHeight,
 			arrowHeight = 0, frameThickness = 0;
 
 		// Render the arrow one 1/3 of an editor line height
 		if (this.options.showArrow) {
 			arrowHeight = Math.round(lineHeight / 3);
+			this.arrow.style.top = -arrowHeight + 'px';
+			this.arrow.style.borderWidth = arrowHeight + 'px';
+			this.arrow.style.left = this.editor.getOffsetForColumn(position.lineNumber, position.column) + 'px';
 
-			arrow = document.createElement('div');
-			arrow.className = 'zone-widget-arrow below';
-			arrow.style.top = -arrowHeight + 'px';
-			arrow.style.borderWidth = arrowHeight + 'px';
-			arrow.style.left = this.editor.getOffsetForColumn(position.lineNumber, position.column) + 'px';
-			arrow.style.borderBottomColor = this.options.frameColor;
-
-			viewZoneDomNode.appendChild(arrow);
+			viewZoneDomNode.appendChild(this.arrow);
 		}
 
 		// Render the frame as 1/9 of an editor line height
@@ -281,8 +279,6 @@ export abstract class ZoneWidget extends Widget implements IHorizontalSashLayout
 
 		if (this.options.showFrame) {
 			const width = this.options.frameWidth ? this.options.frameWidth : frameThickness;
-			this.container.style.borderTopColor = this.options.frameColor;
-			this.container.style.borderBottomColor = this.options.frameColor;
 			this.container.style.borderTopWidth = width + 'px';
 			this.container.style.borderBottomWidth = width + 'px';
 		}
@@ -302,6 +298,20 @@ export abstract class ZoneWidget extends Widget implements IHorizontalSashLayout
 		this.editor.revealLine(revealLineNumber);
 	}
 
+	protected setCssClass(className: string, classToReplace?: string): void {
+		if (classToReplace) {
+			this.container.classList.remove(classToReplace);
+			if (this.arrow) {
+				this.arrow.classList.remove(classToReplace);
+			}
+		}
+
+		this.container.classList.add(className);
+		if (this.arrow) {
+			this.arrow.classList.add(className);
+		}
+	}
+
 	protected abstract _fillContainer(container: HTMLElement): void;
 
 	protected _onWidth(widthInPixel: number): void {

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

@@ -37,7 +37,7 @@ export class BreakpointWidget extends ZoneWidget {
 		@IContextViewService private contextViewService: IContextViewService,
 		@IDebugService private debugService: IDebugService
 	) {
-		super(editor, { showFrame: true, showArrow: false, frameColor: '#007ACC', frameWidth: 1 });
+		super(editor, { showFrame: true, showArrow: false, frameWidth: 1 });
 
 		this.toDispose = [];
 		this.hitCountInput = '';
@@ -62,7 +62,7 @@ export class BreakpointWidget extends ZoneWidget {
 	}
 
 	protected _fillContainer(container: HTMLElement): void {
-		dom.addClass(container, 'breakpoint-widget monaco-editor-background');
+		this.setCssClass('breakpoint-widget');
 		const uri = this.editor.getModel().uri;
 		const breakpoint = this.debugService.getModel().getBreakpoints().filter(bp => bp.lineNumber === this.lineNumber && bp.uri.toString() === uri.toString()).pop();
 

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

@@ -0,0 +1,40 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the MIT License. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import 'vs/css!../browser/media/exceptionWidget';
+import * as nls from 'vs/nls';
+import * as dom from 'vs/base/browser/dom';
+import { ZoneWidget } from 'vs/editor/contrib/zoneWidget/browser/zoneWidget';
+import { ICodeEditor } from 'vs/editor/browser/editorBrowser';
+import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
+import { IDebugService } from 'vs/workbench/parts/debug/common/debug';
+const $ = dom.$;
+
+export class ExceptionWidget extends ZoneWidget {
+
+	constructor(editor: ICodeEditor, private lineNumber: number,
+		@IContextViewService private contextViewService: IContextViewService,
+		@IDebugService private debugService: IDebugService
+	) {
+		super(editor, { showFrame: true, showArrow: true, frameWidth: 1 });
+
+		this.create();
+	}
+
+	protected _fillContainer(container: HTMLElement): void {
+		this.setCssClass('exception-widget');
+
+		let title = $('.title');
+		title.textContent = nls.localize('exceptionThrown', 'Exception occured.');
+		dom.append(container, title);
+
+		const thread = this.debugService.getViewModel().focusedThread;
+		if (thread && thread.stoppedDetails) {
+			let msg = $('.message');
+			msg.textContent = thread.stoppedDetails.text;
+			dom.append(container, msg);
+		}
+	}
+}

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

@@ -6,6 +6,7 @@
 .monaco-editor .zone-widget .zone-widget-container.breakpoint-widget {
 	height: 30px !important;
 	display: flex;
+	border-color: #007ACC;
 }
 
 .monaco-editor .zone-widget .zone-widget-container.breakpoint-widget .breakpoint-select-container {

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

@@ -8,12 +8,9 @@
 	background-image: url('debug.svg');
 }
 
-.monaco-editor .debug-top-stack-frame-line {
-	background: rgba(255, 255, 102, 0.45);
-}
-
+.monaco-editor .debug-top-stack-frame-line,
 .monaco-editor .debug-top-stack-frame-exception-line {
-	background: rgba(242, 222, 222, 0.8);
+	background: rgba(255, 255, 102, 0.45);
 }
 
 .monaco-editor .debug-top-stack-frame-column::before {
@@ -181,12 +178,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-color: 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

@@ -2,17 +2,33 @@
  *  Copyright (c) Microsoft Corporation. All rights reserved.
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
-/* marker zone */
 
-.monaco-editor .exception-widget {
-	background-color: white;
+.monaco-editor .zone-widget .zone-widget-container.exception-widget {
+	padding: 8px;
+	font-family: Monaco, Menlo, Consolas, "Droid Sans Mono", "Inconsolata", "Courier New", monospace, "Droid Sans Fallback";
 }
 
-.monaco-editor.vs-dark .exception-widget {
-	background-color: #2D2D30;
+.monaco-editor .zone-widget .zone-widget-container.exception-widget .title {
+	font-weight: bold;
+}
+
+.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.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: rgba(163, 21, 21, 0.25);
 }
 
 /* High Contrast Theming */
-.monaco-editor.hc-black .exception-widget {
-	background-color: #0C141F;
+.monaco-editor.hc-black .zone-widget .zone-widget-container.exception-widget {
+	background-color: rgba(163, 21, 21, 0.45);
 }