microsoft#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();
  }
 }