microsoft#67076 Add icons to hover status bar actions

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

@@ -74,10 +74,22 @@
 
 .monaco-editor-hover .hover-row .actions {
 	display: flex;
-	padding: 2px 0px;
+	padding: 3px 0px 1px 0px;
 }
 
-.monaco-editor-hover .hover-row .actions .action {
-	cursor: pointer;
+.monaco-editor-hover .hover-row .actions .action-container {
 	padding-left: 8px;
+}
+
+.monaco-editor-hover .hover-row .actions .action-container .action {
+	cursor: pointer;
+}
+
+.monaco-editor-hover .hover-row .actions .action-container .action .icon {
+	padding-right: 4px;
+}
+
+.monaco-editor-hover .hover-row .actions .action-container .keybinding-label {
+	padding-left: 4px;
+	opacity: 0.6;
 }

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

@@ -23,7 +23,7 @@ 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, editorHoverFooterBackground } from 'vs/platform/theme/common/colorRegistry';
+import { editorHoverBackground, editorHoverBorder, editorHoverHighlight, textCodeBlockBackground, textLinkForeground, editorHoverStatusBarBackground } from 'vs/platform/theme/common/colorRegistry';
 import { IThemeService, registerThemingParticipant } from 'vs/platform/theme/common/themeService';
 import { IMarkerDecorationsService } from 'vs/editor/common/services/markersDecorationService';
 import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding';
@@ -291,7 +291,7 @@ 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);
+	const actionsBackground = theme.getColor(editorHoverStatusBarBackground);
 	if (actionsBackground) {
 		collector.addRule(`.monaco-editor .monaco-editor-hover .hover-row .actions { background-color: ${actionsBackground}; }`);
 	}

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

@@ -510,23 +510,42 @@ export class ModesContentHoverWidget extends ContentHoverWidget {
 			}
 		}
 
-		const actionsElement = dom.append(hoverElement, $('div.actions'));
 		const disposables: IDisposable[] = [];
+		const actionsElement = dom.append(hoverElement, $('div.actions'));
+
 		const keybinding = this._keybindingService.lookupKeybinding(NextMarkerAction.ID);
-		const label = nls.localize('peek problem', "Peek Problem") + (keybinding ? ` (${keybinding.getLabel()})` : '');
-		const peekMarkerAction = dom.append(actionsElement, $('a.action.peek-marker', { title: label }));
-		peekMarkerAction.textContent = label;
-		disposables.push(dom.addDisposableListener(peekMarkerAction, dom.EventType.CLICK, e => {
-			e.stopPropagation();
-			e.preventDefault();
-			this.hide();
-			MarkerController.get(this._editor).show(markerHover.marker);
-			this._editor.focus();
+		const label = nls.localize('peek problem', "Peek Problem");
+		disposables.push(this.renderAction(actionsElement, {
+			label, iconClass: 'octicon.octicon-eye', keybinding: keybinding ? keybinding.getLabel() : '', run: () => {
+				this.hide();
+				MarkerController.get(this._editor).show(markerHover.marker);
+				this._editor.focus();
+			}
 		}));
+
 		this.renderDisposable = combinedDisposable(disposables);
 		return hoverElement;
 	}
 
+	private renderAction(parent: HTMLElement, actionOptions: { label: string, iconClass?: string, run: () => void, keybinding?: string }): IDisposable {
+		const actionContainer = dom.append(parent, $('div.action-container'));
+		const action = dom.append(actionContainer, $('a.action'));
+		if (actionOptions.iconClass) {
+			dom.append(action, $(`span.icon.${actionOptions.iconClass}`));
+		}
+		const label = dom.append(action, $('span'));
+		label.textContent = actionOptions.label;
+		if (actionOptions.keybinding) {
+			const actionKeybindingLabel = dom.append(actionContainer, $('span.keybinding-label'));
+			actionKeybindingLabel.textContent = actionOptions.keybinding;
+		}
+		return dom.addDisposableListener(action, dom.EventType.CLICK, e => {
+			e.stopPropagation();
+			e.preventDefault();
+			actionOptions.run();
+		});
+	}
+
 	private static readonly _DECORATION_OPTIONS = ModelDecorationOptions.register({
 		className: 'hoverHighlight'
 	});

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

@@ -310,7 +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."));
+export const editorHoverStatusBarBackground = registerColor('editorHoverWidget.statusBarBackground', { dark: Color.fromHex('#808080').transparent(0.2), light: Color.fromHex('#808080').transparent(0.2), hc: null }, nls.localize('statusBarBackground', "Background color of the editor hover status bar."));
 
 /**
  * Editor link colors