diff --git a/src/vs/editor/contrib/hover/hover.css b/src/vs/editor/contrib/hover/hover.css index 6aa31e6e1fcd1b27840fe30188ba6808c429306a..41f6a72c725a45441fbf64defaee4894b95bfadc 100644 --- a/src/vs/editor/contrib/hover/hover.css +++ b/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; -} - -.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; -} + padding-left: 8px; +} \ No newline at end of file diff --git a/src/vs/editor/contrib/hover/hover.ts b/src/vs/editor/contrib/hover/hover.ts index 93192a81278a2ea6a8ce1a9432ee6a7dade4483a..e1ec830551a479efd327d9340974a0502e5fa842 100644 --- a/src/vs/editor/contrib/hover/hover.ts +++ b/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}; }`); diff --git a/src/vs/editor/contrib/hover/modesContentHover.ts b/src/vs/editor/contrib/hover/modesContentHover.ts index 11e8475733f90670f38a8417ff891e79c902edce..5922afb26420a8fc669cf969fda156187fb5f2ce 100644 --- a/src/vs/editor/contrib/hover/modesContentHover.ts +++ b/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 { - 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' }); diff --git a/src/vs/platform/theme/common/colorRegistry.ts b/src/vs/platform/theme/common/colorRegistry.ts index 9c26136e804869552e48b3f5ac782e03b0e85c69..0b3362fffeb0a9aca267fbcc6a32c384e7f048ed 100644 --- a/src/vs/platform/theme/common/colorRegistry.ts +++ b/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