microsoft#67076 Add icon to peek error widget

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

@@ -3,7 +3,7 @@
  *  Licensed under the MIT License. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import 'vs/css!./gotoErrorWidget';
+import 'vs/css!./media/gotoErrorWidget';
 import * as nls from 'vs/nls';
 import * as dom from 'vs/base/browser/dom';
 import { IDisposable, dispose } from 'vs/base/common/lifecycle';
@@ -270,13 +270,20 @@ export class MarkerNavigationWidget extends PeekViewWidget {
 		let position = editorPosition && range.containsPosition(editorPosition) ? editorPosition : range.getStartPosition();
 		super.show(position, this.computeRequiredHeight());
 
-		const detail = markerCount > 1
-			? nls.localize('problems', "{0} of {1} problems", markerIdx, markerCount)
-			: nls.localize('change', "{0} of {1} problem", markerIdx, markerCount);
 		const model = this.editor.getModel();
 		if (model) {
+			const detail = markerCount > 1
+				? nls.localize('problems', "{0} of {1} problems", markerIdx, markerCount)
+				: nls.localize('change', "{0} of {1} problem", markerIdx, markerCount);
 			this.setTitle(basename(model.uri), detail);
 		}
+		let headingIconClassName = 'error';
+		if (this._severity === MarkerSeverity.Warning) {
+			headingIconClassName = 'warning';
+		} else if (this._severity === MarkerSeverity.Info) {
+			headingIconClassName = 'info';
+		}
+		this.setTitleIcon(headingIconClassName);
 
 		this.editor.revealPositionInCenter(position, ScrollType.Smooth);
 

src/vs/editor/contrib/gotoError/gotoErrorWidget.css → src/vs/editor/contrib/gotoError/media/gotoErrorWidget.css

@@ -5,6 +5,30 @@
 
 /* marker zone */
 
+.monaco-editor .peekview-widget .head .peekview-title .icon.warning {
+	background: url('status-warning.svg') center center no-repeat;
+}
+
+.monaco-editor .peekview-widget .head .peekview-title .icon.error {
+	background: url('status-error.svg') center center no-repeat;
+}
+
+.monaco-editor .peekview-widget .head .peekview-title .icon.info {
+	background: url('status-info.svg') center center no-repeat;
+}
+
+.vs-dark .monaco-editor .peekview-widget .head .peekview-title .icon.warning {
+	background: url('status-warning-inverse.svg') center center no-repeat;
+}
+
+.vs-dark .monaco-editor .peekview-widget .head .peekview-title .icon.error {
+	background: url('status-error-inverse.svg') center center no-repeat;
+}
+
+.vs-dark .monaco-editor .peekview-widget .head .peekview-title .icon.info {
+	background: url('status-info-inverse.svg') center center no-repeat;
+}
+
 .monaco-editor .marker-widget {
 	padding: 8px 12px 0px 20px;
 	text-overflow: ellipsis;

src/vs/editor/contrib/referenceSearch/media/peekViewWidget.css

@@ -19,6 +19,14 @@
 	cursor: pointer;
 }
 
+.monaco-editor .peekview-widget .head .peekview-title .icon {
+	display: inline-block;
+	height: 16px;
+	width: 16px;
+	vertical-align: text-bottom;
+	margin-right: 4px;
+}
+
 .monaco-editor .peekview-widget .head .peekview-title .dirname:not(:empty) {
 	font-size: 0.9em;
 	margin-left: 0.5em;

src/vs/editor/contrib/referenceSearch/peekViewWidget.ts

@@ -54,6 +54,7 @@ export abstract class PeekViewWidget extends ZoneWidget {
 	private _onDidClose = new Emitter<PeekViewWidget>();
 
 	protected _headElement: HTMLDivElement;
+	protected _headingIcon: HTMLElement;
 	protected _primaryHeading: HTMLElement;
 	protected _secondaryHeading: HTMLElement;
 	protected _metaHeading: HTMLElement;
@@ -123,10 +124,11 @@ export abstract class PeekViewWidget extends ZoneWidget {
 		dom.append(this._headElement, titleElement);
 		dom.addStandardDisposableListener(titleElement, 'click', event => this._onTitleClick(event));
 
+		this._headingIcon = dom.$('span');
 		this._primaryHeading = dom.$('span.filename');
 		this._secondaryHeading = dom.$('span.dirname');
 		this._metaHeading = dom.$('span.meta');
-		dom.append(titleElement, this._primaryHeading, this._secondaryHeading, this._metaHeading);
+		dom.append(titleElement, this._headingIcon, this._primaryHeading, this._secondaryHeading, this._metaHeading);
 
 		const actionsContainer = dom.$('.peekview-actions');
 		dom.append(this._headElement, actionsContainer);
@@ -149,6 +151,10 @@ export abstract class PeekViewWidget extends ZoneWidget {
 		// implement me
 	}
 
+	public setTitleIcon(iconClassName: string): void {
+		this._headingIcon.className = iconClassName ? `icon ${iconClassName}` : '';
+	}
+
 	public setTitle(primaryHeading: string, secondaryHeading?: string): void {
 		this._primaryHeading.innerHTML = strings.escape(primaryHeading);
 		this._primaryHeading.setAttribute('aria-label', primaryHeading);