diff --git a/src/vs/editor/contrib/gotoError/gotoError.ts b/src/vs/editor/contrib/gotoError/gotoError.ts index f6da3f9a22cb3..c1fff3b82d3a9 100644 --- a/src/vs/editor/contrib/gotoError/gotoError.ts +++ b/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,10 +417,12 @@ 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 }); @@ -422,10 +430,12 @@ class NextMarkerAction extends MarkerNavigationAction { } 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 }); diff --git a/src/vs/editor/contrib/gotoError/gotoErrorWidget.css b/src/vs/editor/contrib/gotoError/gotoErrorWidget.css index 7ca3f2a86e28e..3c029a94841fe 100644 --- a/src/vs/editor/contrib/gotoError/gotoErrorWidget.css +++ b/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; } diff --git a/src/vs/editor/contrib/gotoError/gotoErrorWidget.ts b/src/vs/editor/contrib/gotoError/gotoErrorWidget.ts index fd3598b5a2840..02623b797eec4 100644 --- a/src/vs/editor/contrib/gotoError/gotoErrorWidget.ts +++ b/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(); } }