diff --git a/src/vs/base/browser/ui/hover/hoverWidget.ts b/src/vs/base/browser/ui/hover/hoverWidget.ts index 0d48dee8ecfd6c91f80f975441d39080ba1e4353..76b47430079edd580d636fe249d91dab2df1a365 100644 --- a/src/vs/base/browser/ui/hover/hoverWidget.ts +++ b/src/vs/base/browser/ui/hover/hoverWidget.ts @@ -7,12 +7,41 @@ import 'vs/css!./hover'; import * as dom from 'vs/base/browser/dom'; import { Widget } from 'vs/base/browser/ui/widget'; import { IDisposable } from 'vs/base/common/lifecycle'; +import { DomScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement'; +import { KeyCode } from 'vs/base/common/keyCodes'; +import { IKeyboardEvent } from 'vs/base/browser/keyboardEvent'; const $ = dom.$; -export class HoverWidget extends Widget { +export abstract class HoverWidget extends Widget { + protected readonly _containerDomNode: HTMLElement; + protected readonly _domNode: HTMLElement; + private readonly _scrollbar: DomScrollableElement; + constructor() { super(); + + this._containerDomNode = document.createElement('div'); + this._containerDomNode.classList.add('terminal-hover-widget', 'fadeIn', 'monaco-editor-hover', 'xterm-hover'); + this._containerDomNode.tabIndex = 0; + this._containerDomNode.setAttribute('role', 'tooltip'); + + this._domNode = document.createElement('div'); + this._domNode.className = 'monaco-editor-hover-content'; + + this._scrollbar = new DomScrollableElement(this._domNode, {}); + this._register(this._scrollbar); + this._containerDomNode.appendChild(this._scrollbar.getDomNode()); + + this.onkeydown(this._containerDomNode, (e: IKeyboardEvent) => { + if (e.equals(KeyCode.Escape)) { + this.hide(); + } + }); + } + + protected _onContentsChange(): void { + this._scrollbar.scanDomNode(); } protected _renderAction(parent: HTMLElement, actionOptions: { label: string, iconClass?: string, run: (target: HTMLElement) => void, commandId: string }, keybindingLabel: string | null): IDisposable { @@ -31,4 +60,6 @@ export class HoverWidget extends Widget { actionOptions.run(actionContainer); }); } + + protected abstract hide(): void; } diff --git a/src/vs/editor/contrib/hover/hoverWidgets.ts b/src/vs/editor/contrib/hover/hoverWidgets.ts index 19900aec4a5f44bcb0f9ae9ca3e716735441516d..aaedcae08be00a31ab9181d6e99ba4d6d9fa75d2 100644 --- a/src/vs/editor/contrib/hover/hoverWidgets.ts +++ b/src/vs/editor/contrib/hover/hoverWidgets.ts @@ -4,10 +4,7 @@ *--------------------------------------------------------------------------------------------*/ import * as dom from 'vs/base/browser/dom'; -import { IKeyboardEvent } from 'vs/base/browser/keyboardEvent'; -import { DomScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement'; import { Widget } from 'vs/base/browser/ui/widget'; -import { KeyCode } from 'vs/base/common/keyCodes'; import { IContentWidget, ICodeEditor, IContentWidgetPosition, ContentWidgetPositionPreference, IOverlayWidget, IOverlayWidgetPosition } from 'vs/editor/browser/editorBrowser'; import { ConfigurationChangedEvent, EditorOption } from 'vs/editor/common/config/editorOptions'; import { Position } from 'vs/editor/common/core/position'; @@ -21,12 +18,9 @@ export class ContentHoverWidget extends HoverWidget implements IContentWidget { private readonly _id: string; protected _editor: ICodeEditor; private _isVisible: boolean; - private readonly _containerDomNode: HTMLElement; - protected readonly _domNode: HTMLElement; protected _showAtPosition: Position | null; protected _showAtRange: Range | null; private _stoleFocus: boolean; - private readonly scrollbar: DomScrollableElement; // Editor.IContentWidget.allowEditorOverflow public allowEditorOverflow = true; @@ -52,24 +46,6 @@ export class ContentHoverWidget extends HoverWidget implements IContentWidget { this._isVisible = false; this._stoleFocus = false; - this._containerDomNode = document.createElement('div'); - this._containerDomNode.className = 'monaco-editor-hover hidden'; - this._containerDomNode.tabIndex = 0; - this._containerDomNode.setAttribute('role', 'tooltip'); - - this._domNode = document.createElement('div'); - this._domNode.className = 'monaco-editor-hover-content'; - - this.scrollbar = new DomScrollableElement(this._domNode, {}); - this._register(this.scrollbar); - this._containerDomNode.appendChild(this.scrollbar.getDomNode()); - - this.onkeydown(this._containerDomNode, (e: IKeyboardEvent) => { - if (e.equals(KeyCode.Escape)) { - this.hide(); - } - }); - this._register(this._editor.onDidChangeConfiguration((e: ConfigurationChangedEvent) => { if (e.hasChanged(EditorOption.fontInfo)) { this.updateFont(); @@ -152,20 +128,15 @@ export class ContentHoverWidget extends HoverWidget implements IContentWidget { this.updateFont(); this._editor.layoutContentWidget(this); - this.onContentsChange(); + this._onContentsChange(); } - protected _renderAction(parent: HTMLElement, actionOptions: { label: string, iconClass?: string, run: (target: HTMLElement) => void, commandId: string }): IDisposable { const keybinding = this._keybindingService.lookupKeybinding(actionOptions.commandId); const keybindingLabel = keybinding ? keybinding.getLabel() : null; return super._renderAction(parent, actionOptions, keybindingLabel); } - protected onContentsChange(): void { - this.scrollbar.scanDomNode(); - } - private layout(): void { const height = Math.max(this._editor.getLayoutInfo().height / 4, 250); const { fontSize, lineHeight } = this._editor.getOption(EditorOption.fontInfo); diff --git a/src/vs/editor/contrib/hover/modesContentHover.ts b/src/vs/editor/contrib/hover/modesContentHover.ts index acb9a28330a3b391b0fcbb5886da04fa2f5d4223..8d74c2ad4489e8b09eaa54bef6bb5dddd980cba0 100644 --- a/src/vs/editor/contrib/hover/modesContentHover.ts +++ b/src/vs/editor/contrib/hover/modesContentHover.ts @@ -461,7 +461,7 @@ export class ModesContentHoverWidget extends ContentHoverWidget { const renderer = markdownDisposeables.add(new MarkdownRenderer(this._editor, this._modeService, this._openerService)); markdownDisposeables.add(renderer.onDidRenderCodeBlock(() => { hoverContentsElement.className = 'hover-contents code-hover-contents'; - this.onContentsChange(); + this._onContentsChange(); })); const renderedContents = markdownDisposeables.add(renderer.render(contents)); hoverContentsElement.appendChild(renderedContents.element); diff --git a/src/vs/workbench/contrib/terminal/browser/widgets/hoverWidget.ts b/src/vs/workbench/contrib/terminal/browser/widgets/hoverWidget.ts index 6a591429dffc0d2a6f7427347084ae51506d81ae..43f9c0fbed589c18720b68ead3f4460be35c9317 100644 --- a/src/vs/workbench/contrib/terminal/browser/widgets/hoverWidget.ts +++ b/src/vs/workbench/contrib/terminal/browser/widgets/hoverWidget.ts @@ -12,8 +12,6 @@ import { editorHoverHighlight, editorHoverBackground, editorHoverBorder, textLin import * as dom from 'vs/base/browser/dom'; import { IKeybindingService } from 'vs/platform/keybinding/common/keybinding'; import { IHoverTarget, HorizontalAnchorSide, VerticalAnchorSide } from 'vs/workbench/contrib/terminal/browser/widgets/widgets'; -import { KeyCode } from 'vs/base/common/keyCodes'; -import { DomScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement'; import { IConfigurationService } from 'vs/platform/configuration/common/configuration'; import { EDITOR_FONT_DEFAULTS, IEditorOptions } from 'vs/editor/common/config/editorOptions'; import { HoverWidget as BaseHoverWidget } from 'vs/base/browser/ui/hover/hoverWidget'; @@ -22,11 +20,8 @@ import { Widget } from 'vs/base/browser/ui/widget'; const $ = dom.$; export class HoverWidget extends BaseHoverWidget { - private readonly _containerDomNode: HTMLElement; - private readonly _domNode: HTMLElement; private readonly _messageListeners = new DisposableStore(); private readonly _mouseTracker: CompositeMouseTracker; - private readonly _scrollbar: DomScrollableElement; private _isDisposed: boolean = false; @@ -47,29 +42,10 @@ export class HoverWidget extends BaseHoverWidget { ) { super(); - this._containerDomNode = document.createElement('div'); - this._containerDomNode.classList.add('terminal-hover-widget', 'fadeIn', 'monaco-editor-hover', 'xterm-hover'); - this._containerDomNode.tabIndex = 0; - this._containerDomNode.setAttribute('role', 'tooltip'); - - this._domNode = document.createElement('div'); - this._domNode.className = 'monaco-editor-hover-content'; - - this._scrollbar = new DomScrollableElement(this._domNode, {}); - this._register(this._scrollbar); - this._containerDomNode.appendChild(this._scrollbar.getDomNode()); - // Don't allow mousedown out of the widget, otherwise preventDefault will call and text will // not be selected. this.onmousedown(this._containerDomNode, e => e.stopPropagation()); - // Hide hover on escape - this.onkeydown(this._containerDomNode, e => { - if (e.equals(KeyCode.Escape)) { - this.dispose(); - } - }); - const rowElement = $('div.hover-row.markdown-hover'); const contentsElement = $('div.hover-contents'); const markdownElement = renderMarkdown(this._text, { @@ -152,13 +128,17 @@ export class HoverWidget extends BaseHoverWidget { this._containerDomNode.style.top = `${anchor.y}px`; } } - this._scrollbar.scanDomNode(); + this._onContentsChange(); } public focus() { this._containerDomNode.focus(); } + public hide(): void { + this.dispose(); + } + public dispose(): void { if (!this._isDisposed) { this._onDispose.fire();