Skip to content

Commit

Permalink
microsoft#67076 Show Peek Problem action in the hover footer
Browse files Browse the repository at this point in the history
  • Loading branch information
@sandy081
sandy081 committed Feb 22, 2019
1 parent 879de65 commit 0725e7d
Show file tree
Hide file tree
Showing 4 changed files with 23 additions and 89 deletions.
39 changes: 6 additions & 33 deletions src/vs/editor/contrib/hover/hover.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
display: none;
}

.monaco-editor-hover .hover-row {
.monaco-editor-hover .hover-contents {
padding: 4px 8px;
}

Expand Down Expand Up @@ -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;
}
14 changes: 6 additions & 8 deletions src/vs/editor/contrib/hover/hover.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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);
}

Expand Down Expand Up @@ -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}; }`);
Expand Down
58 changes: 10 additions & 48 deletions src/vs/editor/contrib/hover/modesContentHover.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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.$;

Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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) {
Expand All @@ -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'));
Expand Down Expand Up @@ -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();
Expand All @@ -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'
});
Expand Down
1 change: 1 addition & 0 deletions src/vs/platform/theme/common/colorRegistry.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 0725e7d

Please sign in to comment.