#67076 Show Peek Problem action in the hover footer

src/vs/editor/contrib/hover/hover.css

@@ -23,7 +23,7 @@
 	display: none;
 }
 
-.monaco-editor-hover .hover-row {
+.monaco-editor-hover .hover-contents {
 	padding: 4px 8px;
 }
 
@@ -72,39 +72,12 @@
 	word-break: break-all;
 }
 
-.monaco-editor-hover .marker-hover {
+.monaco-editor-hover .hover-row .actions {
 	display: flex;
+	padding: 2px 0px;
 }
 
-.monaco-editor-hover .marker-hover > .marker {
-	flex: 1;
-}
-
-.monaco-editor-hover .marker-hover > .actions {
-	padding-left: 12px;
-	display: flex;
-}
-
-.monaco-editor-hover .marker-hover > .actions > .icon {
-	width: 16px;
-	height: 16px;
-}
-
-.monaco-editor-hover .marker-hover > .actions .action {
+.monaco-editor-hover .hover-row .actions .action {
 	cursor: pointer;
-	padding-left: 4px;
-}
-
+	padding-left: 8px;
+}
\ No newline at end of file
-.monaco-editor-hover .marker-hover > .actions > .peek-marker {
-	font-size: large;
-	vertical-align: middle;
-}
-
-.monaco-editor-hover .marker-hover > .actions > .light-bulb {
-	background: url('../codeAction/lightbulb.svg') center center no-repeat;
-}
-
-.hc-black .monaco-editor-hover .marker-hover > .actions > .light-bulb,
-.vs-dark  .monaco-editor-hover .marker-hover > .actions > .light-bulb {
-	background: url('../codeAction/lightbulb-dark.svg') center center no-repeat;
-}

src/vs/editor/contrib/hover/hover.ts

@@ -23,12 +23,9 @@ import { ModesGlyphHoverWidget } from 'vs/editor/contrib/hover/modesGlyphHover';
 import { MarkdownRenderer } from 'vs/editor/contrib/markdown/markdownRenderer';
 import { KeybindingWeight } from 'vs/platform/keybinding/common/keybindingsRegistry';
 import { IOpenerService } from 'vs/platform/opener/common/opener';
-import { editorHoverBackground, editorHoverBorder, editorHoverHighlight, textCodeBlockBackground, textLinkForeground } from 'vs/platform/theme/common/colorRegistry';
+import { editorHoverBackground, editorHoverBorder, editorHoverHighlight, textCodeBlockBackground, textLinkForeground, editorHoverFooterBackground } from 'vs/platform/theme/common/colorRegistry';
 import { IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
 import { IMarkerDecorationsService } from 'vs/editor/common/services/markersDecorationService';
-import { IBulkEditService } from 'vs/editor/browser/services/bulkEditService';
-import { ICommandService } from 'vs/platform/commands/common/commands';
-import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
 
 export class ModesHoverController implements IEditorContribution {
 
@@ -65,9 +62,6 @@ export class ModesHoverController implements IEditorContribution {
 
 	constructor(private readonly _editor: ICodeEditor,
 		@IOpenerService private readonly _openerService: IOpenerService,
-		@IContextMenuService private readonly _contextMenuService: IContextMenuService,
-		@IBulkEditService private readonly _bulkEditService: IBulkEditService,
-		@ICommandService private readonly _commandService: ICommandService,
 		@IModeService private readonly _modeService: IModeService,
 		@IMarkerDecorationsService private readonly _markerDecorationsService: IMarkerDecorationsService,
 		@IThemeService private readonly _themeService: IThemeService
@@ -213,7 +207,7 @@ export class ModesHoverController implements IEditorContribution {
 
 	private _createHoverWidget() {
 		const renderer = new MarkdownRenderer(this._editor, this._modeService, this._openerService);
-		this._contentWidget = new ModesContentHoverWidget(this._editor, renderer, this._markerDecorationsService, this._themeService, this._contextMenuService, this._bulkEditService, this._commandService, this._openerService);
+		this._contentWidget = new ModesContentHoverWidget(this._editor, renderer, this._markerDecorationsService, this._themeService, this._openerService);
 		this._glyphWidget = new ModesGlyphHoverWidget(this._editor, renderer);
 	}
 
@@ -295,6 +289,10 @@ registerThemingParticipant((theme, collector) => {
 		collector.addRule(`.monaco-editor .monaco-editor-hover hr { border-top: 1px solid ${hoverBorder.transparent(0.5)}; }`);
 		collector.addRule(`.monaco-editor .monaco-editor-hover hr { border-bottom: 0px solid ${hoverBorder.transparent(0.5)}; }`);
 	}
+	const actionsBackground = theme.getColor(editorHoverFooterBackground);
+	if (actionsBackground) {
+		collector.addRule(`.monaco-editor .monaco-editor-hover .hover-row .actions { background-color: ${actionsBackground}; }`);
+	}
 	const link = theme.getColor(textLinkForeground);
 	if (link) {
 		collector.addRule(`.monaco-editor .monaco-editor-hover a { color: ${link}; }`);

src/vs/editor/contrib/hover/modesContentHover.ts

@@ -8,7 +8,7 @@ import * as dom from 'vs/base/browser/dom';
 import { CancellationToken } from 'vs/base/common/cancellation';
 import { Color, RGBA } from 'vs/base/common/color';
 import { IMarkdownString, MarkdownString, isEmptyMarkdownString, markedStringsEquals } from 'vs/base/common/htmlContent';
-import { Disposable, IDisposable, combinedDisposable, toDisposable } from 'vs/base/common/lifecycle';
+import { Disposable, IDisposable, combinedDisposable } from 'vs/base/common/lifecycle';
 import { ICodeEditor } from 'vs/editor/browser/editorBrowser';
 import { Position } from 'vs/editor/common/core/position';
 import { IRange, Range } from 'vs/editor/common/core/range';
@@ -30,14 +30,6 @@ import { IMarkerDecorationsService } from 'vs/editor/common/services/markersDeco
 import { onUnexpectedError } from 'vs/base/common/errors';
 import { IOpenerService, NullOpenerService } from 'vs/platform/opener/common/opener';
 import { MarkerController } from 'vs/editor/contrib/gotoError/gotoError';
-import { getCodeActions } from 'vs/editor/contrib/codeAction/codeAction';
-import { CodeActionKind } from 'vs/editor/contrib/codeAction/codeActionTrigger';
-import { Action } from 'vs/base/common/actions';
-import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
-import { applyCodeAction } from 'vs/editor/contrib/codeAction/codeActionCommands';
-import { ICommandService } from 'vs/platform/commands/common/commands';
-import { IBulkEditService } from 'vs/editor/browser/services/bulkEditService';
-import { CancelablePromise, createCancelablePromise } from 'vs/base/common/async';
 
 const $ = dom.$;
 
@@ -215,9 +207,6 @@ export class ModesContentHoverWidget extends ContentHoverWidget {
 		markdownRenderer: MarkdownRenderer,
 		markerDecorationsService: IMarkerDecorationsService,
 		private readonly _themeService: IThemeService,
-		private readonly _contextMenuService: IContextMenuService,
-		private readonly _bulkEditService: IBulkEditService,
-		private readonly _commandService: ICommandService,
 		private readonly _openerService: IOpenerService | null = NullOpenerService,
 	) {
 		super(ModesContentHoverWidget.ID, editor);
@@ -356,6 +345,7 @@ export class ModesContentHoverWidget extends ContentHoverWidget {
 
 		let containColorPicker = false;
 		let markdownDisposeable: IDisposable;
+		const markerMessages: MarkerHover[] = [];
 		messages.forEach((msg) => {
 			if (!msg.range) {
 				return;
@@ -449,21 +439,23 @@ export class ModesContentHoverWidget extends ContentHoverWidget {
 				});
 			} else {
 				if (msg instanceof MarkerHover) {
+					markerMessages.push(msg);
 					isEmptyHoverContent = false;
-					fragment.appendChild($('div.hover-row', undefined, this.renderMarkerHover(msg)));
 				} else {
 					msg.contents
 						.filter(contents => !isEmptyMarkdownString(contents))
 						.forEach(contents => {
 							const renderedContents = this._markdownRenderer.render(contents);
 							markdownDisposeable = renderedContents;
-							fragment.appendChild($('div.hover-row', undefined, renderedContents.element));
+							fragment.appendChild($('div.hover-row.hover-contents', undefined, renderedContents.element));
 							isEmptyHoverContent = false;
 						});
 				}
 			}
 		});
 
+		markerMessages.forEach(msg => fragment.appendChild(this.renderMarkerHover(msg)));
+
 		// show
 
 		if (!containColorPicker && !isEmptyHoverContent) {
@@ -480,8 +472,8 @@ export class ModesContentHoverWidget extends ContentHoverWidget {
 	}
 
 	private renderMarkerHover(markerHover: MarkerHover): HTMLElement {
-		const hoverElement = $('div.marker-hover');
-		const markerElement = dom.append(hoverElement, $('div.marker'));
+		const hoverElement = $('div.hover-row');
+		const markerElement = dom.append(hoverElement, $('div.marker.hover-contents'));
 		const { source, message, code, relatedInformation } = markerHover.marker;
 
 		const messageElement = dom.append(markerElement, $('span'));
@@ -515,22 +507,9 @@ export class ModesContentHoverWidget extends ContentHoverWidget {
 		}
 
 		const actionsElement = dom.append(hoverElement, $('div.actions'));
-		const showCodeActions = dom.append(actionsElement, $('a.action.icon.light-bulb', { title: nls.localize('code actions', "Show Fixes...") }));
 		const disposables: IDisposable[] = [];
-		disposables.push(dom.addDisposableListener(showCodeActions, dom.EventType.CLICK, async e => {
-			e.stopPropagation();
-			e.preventDefault();
-			const codeActionsPromise = this.getCodeActions(markerHover.marker);
-			disposables.push(toDisposable(() => codeActionsPromise.cancel()));
-			const actions = await codeActionsPromise;
-			const elementPosition = dom.getDomNodePagePosition(showCodeActions);
-			this._contextMenuService.showContextMenu({
-				getAnchor: () => ({ x: elementPosition.left + 6, y: elementPosition.top + elementPosition.height + 6 }),
-				getActions: () => actions
-			});
-		}));
-		const peekMarkerAction = dom.append(actionsElement, $('a.action.icon.peek-marker', { title: nls.localize('go to problem', "Go to Problem") }));
-		peekMarkerAction.textContent = '↪';
+		const peekMarkerAction = dom.append(actionsElement, $('a.action.peek-marker', { title: nls.localize('go to problem', "Peek Problem") }));
+		peekMarkerAction.textContent = 'Peek Problem';
 		disposables.push(dom.addDisposableListener(peekMarkerAction, dom.EventType.CLICK, e => {
 			e.stopPropagation();
 			e.preventDefault();
@@ -542,23 +521,6 @@ export class ModesContentHoverWidget extends ContentHoverWidget {
 		return hoverElement;
 	}
 
-	private getCodeActions(marker: IMarker): CancelablePromise<Action[]> {
-		return createCancelablePromise(async cancellationToken => {
-			const codeActions = await getCodeActions(this._editor.getModel()!, new Range(marker.startLineNumber, marker.startColumn, marker.endLineNumber, marker.endColumn), { type: 'manual', filter: { kind: CodeActionKind.QuickFix } }, cancellationToken);
-			if (codeActions.length) {
-				return codeActions.map(codeAction => new Action(
-					codeAction.command ? codeAction.command.id : codeAction.title,
-					codeAction.title,
-					undefined,
-					true,
-					() => applyCodeAction(codeAction, this._bulkEditService, this._commandService)));
-			}
-			return [
-				new Action('', nls.localize('editor.action.quickFix.noneMessage', "No code actions available"))
-			];
-		});
-	}
-
 	private static readonly _DECORATION_OPTIONS = ModelDecorationOptions.register({
 		className: 'hoverHighlight'
 	});

src/vs/platform/theme/common/colorRegistry.ts

@@ -310,6 +310,7 @@ export const editorFindRangeHighlightBorder = registerColor('editor.findRangeHig
 export const editorHoverHighlight = registerColor('editor.hoverHighlightBackground', { light: '#ADD6FF26', dark: '#264f7840', hc: '#ADD6FF26' }, nls.localize('hoverHighlight', 'Highlight below the word for which a hover is shown. The color must not be opaque so as not to hide underlying decorations.'), true);
 export const editorHoverBackground = registerColor('editorHoverWidget.background', { light: editorWidgetBackground, dark: editorWidgetBackground, hc: editorWidgetBackground }, nls.localize('hoverBackground', 'Background color of the editor hover.'));
 export const editorHoverBorder = registerColor('editorHoverWidget.border', { light: editorWidgetBorder, dark: editorWidgetBorder, hc: editorWidgetBorder }, nls.localize('hoverBorder', 'Border color of the editor hover.'));
+export const editorHoverFooterBackground = registerColor('editorHoverWidget.footerBackground', { dark: Color.fromHex('#808080').transparent(0.2), light: Color.fromHex('#808080').transparent(0.2), hc: null }, nls.localize('hoverFotterground', "Background color of the editor hover footer."));
 
 /**
  * Editor link colors