#67076 Add navigation actions to goto error widget

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

@@ -24,6 +24,7 @@ import { binarySearch } from 'vs/base/common/arrays';
 import { ICodeEditorService } from 'vs/editor/browser/services/codeEditorService';
 import { onUnexpectedError } from 'vs/base/common/errors';
 import { MenuRegistry, MenuId } from 'vs/platform/actions/common/actions';
+import { Action } from 'vs/base/common/actions';
 
 class MarkerModel {
 
@@ -242,11 +243,16 @@ export class MarkerController implements editorCommon.IEditorContribution {
 		this._model = new MarkerModel(this._editor, markers);
 		this._markerService.onMarkerChanged(this._onMarkerChanged, this, this._disposeOnClose);
 
-		this._widget = new MarkerNavigationWidget(this._editor, this._themeService);
+		const actions = [
+			new Action(PrevMarkerAction.ID, PrevMarkerAction.LABEL, 'show-previous-problem octicon octicon-chevron-up', this._model.canNavigate(), async () => this._model.move(false, true)),
+			new Action(NextMarkerAction.ID, NextMarkerAction.LABEL, 'show-next-problem octicon octicon-chevron-down', this._model.canNavigate(), async () => this._model.move(true, true))
+		];
+		this._widget = new MarkerNavigationWidget(this._editor, actions, this._themeService);
 		this._widgetVisible.set(true);
 
 		this._disposeOnClose.push(this._model);
 		this._disposeOnClose.push(this._widget);
+		this._disposeOnClose.push(...actions);
 		this._disposeOnClose.push(this._widget.onDidSelectRelatedInformation(related => {
 			this._editorService.openCodeEditor({
 				resource: related.resource,
@@ -411,21 +417,25 @@ class MarkerNavigationAction extends EditorAction {
 }
 
 class NextMarkerAction extends MarkerNavigationAction {
+	static ID: string = 'editor.action.marker.next';
+	static LABEL: string = nls.localize('markerAction.next.label', "Go to Next Problem (Error, Warning, Info)");
 	constructor() {
 		super(true, false, {
-			id: 'editor.action.marker.next',
-			label: nls.localize('markerAction.next.label', "Go to Next Problem (Error, Warning, Info)"),
+			id: NextMarkerAction.ID,
+			label: NextMarkerAction.LABEL,
 			alias: 'Go to Next Error or Warning',
 			precondition: EditorContextKeys.writable
 		});
 	}
 }
 
 class PrevMarkerAction extends MarkerNavigationAction {
+	static ID: string = 'editor.action.marker.prev';
+	static LABEL: string = nls.localize('markerAction.previous.label', "Go to Previous Problem (Error, Warning, Info)");
 	constructor() {
 		super(false, false, {
-			id: 'editor.action.marker.prev',
-			label: nls.localize('markerAction.previous.label', "Go to Previous Problem (Error, Warning, Info)"),
+			id: PrevMarkerAction.ID,
+			label: PrevMarkerAction.LABEL,
 			alias: 'Go to Previous Error or Warning',
 			precondition: EditorContextKeys.writable
 		});

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

@@ -6,7 +6,7 @@
 /* marker zone */
 
 .monaco-editor .marker-widget {
-	padding: 3px 12px;
+	padding: 8px 12px 0px 20px;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }

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

@@ -11,7 +11,6 @@ import { IMarker, MarkerSeverity, IRelatedInformation } from 'vs/platform/marker
 import { Position } from 'vs/editor/common/core/position';
 import { Range } from 'vs/editor/common/core/range';
 import { ICodeEditor } from 'vs/editor/browser/editorBrowser';
-import { ZoneWidget } from 'vs/editor/contrib/zoneWidget/zoneWidget';
 import { registerColor, oneOf } from 'vs/platform/theme/common/colorRegistry';
 import { IThemeService, ITheme } from 'vs/platform/theme/common/themeService';
 import { Color } from 'vs/base/common/color';
@@ -23,6 +22,10 @@ import { ScrollType } from 'vs/editor/common/editorCommon';
 import { getBaseLabel, getPathLabel } from 'vs/base/common/labels';
 import { isNonEmptyArray } from 'vs/base/common/arrays';
 import { Event, Emitter } from 'vs/base/common/event';
+import { PeekViewWidget } from 'vs/editor/contrib/referenceSearch/peekViewWidget';
+import { basename } from 'vs/base/common/resources';
+import { IAction } from 'vs/base/common/actions';
+import { IActionBarOptions, ActionsOrientation } from 'vs/base/browser/ui/actionbar/actionbar';
 
 class MessageWidget {
 
@@ -160,11 +163,10 @@ class MessageWidget {
 	}
 }
 
-export class MarkerNavigationWidget extends ZoneWidget {
+export class MarkerNavigationWidget extends PeekViewWidget {
 
 	private _parentContainer: HTMLElement;
 	private _container: HTMLElement;
-	private _title: HTMLElement;
 	private _message: MessageWidget;
 	private _callOnDispose: IDisposable[] = [];
 	private _severity: MarkerSeverity;
@@ -175,6 +177,7 @@ export class MarkerNavigationWidget extends ZoneWidget {
 
 	constructor(
 		editor: ICodeEditor,
+		private actions: IAction[],
 		private _themeService: IThemeService
 	) {
 		super(editor, { showArrow: true, showFrame: true, isAccessible: true });
@@ -218,7 +221,18 @@ export class MarkerNavigationWidget extends ZoneWidget {
 		this._parentContainer.focus();
 	}
 
-	protected _fillContainer(container: HTMLElement): void {
+	protected _fillHead(container: HTMLElement): void {
+		super._fillHead(container);
+		this._actionbarWidget.push(this.actions, { label: false, icon: true });
+	}
+
+	protected _getActionBarOptions(): IActionBarOptions {
+		return {
+			orientation: ActionsOrientation.HORIZONTAL_REVERSE
+		};
+	}
+
+	protected _fillBody(container: HTMLElement): void {
 		this._parentContainer = container;
 		dom.addClass(container, 'marker-widget');
 		this._parentContainer.tabIndex = 0;
@@ -227,10 +241,6 @@ export class MarkerNavigationWidget extends ZoneWidget {
 		this._container = document.createElement('div');
 		container.appendChild(this._container);
 
-		this._title = document.createElement('div');
-		this._title.className = 'block title';
-		this._container.appendChild(this._title);
-
 		this._message = new MessageWidget(this._container, this.editor, related => this._onDidSelectRelatedInformation.fire(related));
 		this._disposables.push(this._message);
 	}
@@ -244,7 +254,6 @@ export class MarkerNavigationWidget extends ZoneWidget {
 		// * title
 		// * message
 		this._container.classList.remove('stale');
-		this._title.innerHTML = nls.localize('title.wo_source', "({0}/{1})", markerIdx, markerCount);
 		this._message.update(marker);
 
 		// update frame color (only applied on 'show')
@@ -257,6 +266,11 @@ export class MarkerNavigationWidget extends ZoneWidget {
 		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);
+		this.setTitle(basename(this.editor.getModel().uri), detail);
+
 		this.editor.revealPositionInCenter(position, ScrollType.Smooth);
 
 		if (this.editor.getConfiguration().accessibilitySupport !== AccessibilitySupport.Disabled) {
@@ -274,7 +288,8 @@ export class MarkerNavigationWidget extends ZoneWidget {
 		this._relayout();
 	}
 
-	protected _doLayout(heightInPixel: number, widthInPixel: number): void {
+	protected _doLayoutBody(heightInPixel: number, widthInPixel: number): void {
+		super._doLayoutBody(heightInPixel, widthInPixel);
 		this._message.layout(heightInPixel, widthInPixel);
 		this._container.style.height = `${heightInPixel}px`;
 	}
@@ -284,7 +299,7 @@ export class MarkerNavigationWidget extends ZoneWidget {
 	}
 
 	private computeRequiredHeight() {
-		return 1 + this._message.getHeightInLines();
+		return 3 + this._message.getHeightInLines();
 	}
 }