From deafa9958eec9790c835f944d41be522b69a0dee Mon Sep 17 00:00:00 2001 From: Alex Dima Date: Thu, 30 Sep 2021 16:29:37 +0200 Subject: [PATCH] Merge `GlyphHoverWidget` and `ModesGlyphHoverWidget` (#114925) --- src/vs/editor/contrib/hover/hoverWidgets.ts | 103 ------------------ .../editor/contrib/hover/modesGlyphHover.ts | 88 +++++++++++++-- 2 files changed, 77 insertions(+), 114 deletions(-) delete mode 100644 src/vs/editor/contrib/hover/hoverWidgets.ts diff --git a/src/vs/editor/contrib/hover/hoverWidgets.ts b/src/vs/editor/contrib/hover/hoverWidgets.ts deleted file mode 100644 index 446be6a8b37..00000000000 --- a/src/vs/editor/contrib/hover/hoverWidgets.ts +++ /dev/null @@ -1,103 +0,0 @@ -/*--------------------------------------------------------------------------------------------- - * Copyright (c) Microsoft Corporation. All rights reserved. - * Licensed under the MIT License. See License.txt in the project root for license information. - *--------------------------------------------------------------------------------------------*/ - -import { Widget } from 'vs/base/browser/ui/widget'; -import { ICodeEditor, IOverlayWidget, IOverlayWidgetPosition } from 'vs/editor/browser/editorBrowser'; -import { ConfigurationChangedEvent, EditorOption } from 'vs/editor/common/config/editorOptions'; - -export class GlyphHoverWidget extends Widget implements IOverlayWidget { - - private readonly _id: string; - protected _editor: ICodeEditor; - private _isVisible: boolean; - private readonly _domNode: HTMLElement; - protected _showAtLineNumber: number; - - constructor(id: string, editor: ICodeEditor) { - super(); - this._id = id; - this._editor = editor; - this._isVisible = false; - - this._domNode = document.createElement('div'); - this._domNode.className = 'monaco-hover hidden'; - this._domNode.setAttribute('aria-hidden', 'true'); - this._domNode.setAttribute('role', 'tooltip'); - - this._showAtLineNumber = -1; - - this._register(this._editor.onDidChangeConfiguration((e: ConfigurationChangedEvent) => { - if (e.hasChanged(EditorOption.fontInfo)) { - this.updateFont(); - } - })); - - this._editor.addOverlayWidget(this); - } - - protected get isVisible(): boolean { - return this._isVisible; - } - - protected set isVisible(value: boolean) { - this._isVisible = value; - this._domNode.classList.toggle('hidden', !this._isVisible); - } - - public getId(): string { - return this._id; - } - - public getDomNode(): HTMLElement { - return this._domNode; - } - - public showAt(lineNumber: number): void { - this._showAtLineNumber = lineNumber; - - if (!this.isVisible) { - this.isVisible = true; - } - - const editorLayout = this._editor.getLayoutInfo(); - const topForLineNumber = this._editor.getTopForLineNumber(this._showAtLineNumber); - const editorScrollTop = this._editor.getScrollTop(); - const lineHeight = this._editor.getOption(EditorOption.lineHeight); - const nodeHeight = this._domNode.clientHeight; - const top = topForLineNumber - editorScrollTop - ((nodeHeight - lineHeight) / 2); - - this._domNode.style.left = `${editorLayout.glyphMarginLeft + editorLayout.glyphMarginWidth}px`; - this._domNode.style.top = `${Math.max(Math.round(top), 0)}px`; - } - - public hide(): void { - if (!this.isVisible) { - return; - } - this.isVisible = false; - } - - public getPosition(): IOverlayWidgetPosition | null { - return null; - } - - public override dispose(): void { - this._editor.removeOverlayWidget(this); - super.dispose(); - } - - private updateFont(): void { - const codeTags: HTMLElement[] = Array.prototype.slice.call(this._domNode.getElementsByTagName('code')); - const codeClasses: HTMLElement[] = Array.prototype.slice.call(this._domNode.getElementsByClassName('code')); - - [...codeTags, ...codeClasses].forEach(node => this._editor.applyFontInfo(node)); - } - - protected updateContents(node: Node): void { - this._domNode.textContent = ''; - this._domNode.appendChild(node); - this.updateFont(); - } -} diff --git a/src/vs/editor/contrib/hover/modesGlyphHover.ts b/src/vs/editor/contrib/hover/modesGlyphHover.ts index c968559e316..e91a09b82c2 100644 --- a/src/vs/editor/contrib/hover/modesGlyphHover.ts +++ b/src/vs/editor/contrib/hover/modesGlyphHover.ts @@ -8,10 +8,11 @@ import { asArray } from 'vs/base/common/arrays'; import { IMarkdownString, isEmptyMarkdownString } from 'vs/base/common/htmlContent'; import { DisposableStore } from 'vs/base/common/lifecycle'; import { MarkdownRenderer } from 'vs/editor/browser/core/markdownRenderer'; -import { ICodeEditor } from 'vs/editor/browser/editorBrowser'; +import { ICodeEditor, IOverlayWidget, IOverlayWidgetPosition } from 'vs/editor/browser/editorBrowser'; +import { ConfigurationChangedEvent, EditorOption } from 'vs/editor/common/config/editorOptions'; import { IModeService } from 'vs/editor/common/services/modeService'; import { HoverOperation, HoverStartMode, IHoverComputer } from 'vs/editor/contrib/hover/hoverOperation'; -import { GlyphHoverWidget } from 'vs/editor/contrib/hover/hoverWidgets'; +import { Widget } from 'vs/base/browser/ui/widget'; import { IOpenerService, NullOpenerService } from 'vs/platform/opener/common/opener'; export interface IHoverMessage { @@ -83,9 +84,14 @@ class MarginComputer implements IHoverComputer { } } -export class ModesGlyphHoverWidget extends GlyphHoverWidget { +export class ModesGlyphHoverWidget extends Widget implements IOverlayWidget { public static readonly ID = 'editor.contrib.modesGlyphHoverWidget'; + + private readonly _editor: ICodeEditor; + private readonly _domNode: HTMLElement; + + private _isVisible: boolean; private _messages: IHoverMessage[]; private _lastLineNumber: number; @@ -99,14 +105,20 @@ export class ModesGlyphHoverWidget extends GlyphHoverWidget { modeService: IModeService, openerService: IOpenerService = NullOpenerService, ) { - super(ModesGlyphHoverWidget.ID, editor); + super(); + this._editor = editor; + this._domNode = document.createElement('div'); + this._domNode.className = 'monaco-hover hidden'; + this._domNode.setAttribute('aria-hidden', 'true'); + this._domNode.setAttribute('role', 'tooltip'); + + this._isVisible = false; this._messages = []; this._lastLineNumber = -1; this._markdownRenderer = this._register(new MarkdownRenderer({ editor: this._editor }, modeService, openerService)); this._computer = new MarginComputer(this._editor); - this._hoverOperation = new HoverOperation( this._computer, (result: IHoverMessage[]) => this._withResult(result), @@ -115,15 +127,65 @@ export class ModesGlyphHoverWidget extends GlyphHoverWidget { 300 ); + this._register(this._editor.onDidChangeConfiguration((e: ConfigurationChangedEvent) => { + if (e.hasChanged(EditorOption.fontInfo)) { + this._updateFont(); + } + })); + + this._editor.addOverlayWidget(this); } public override dispose(): void { this._hoverOperation.cancel(); + this._editor.removeOverlayWidget(this); super.dispose(); } + public getId(): string { + return ModesGlyphHoverWidget.ID; + } + + public getDomNode(): HTMLElement { + return this._domNode; + } + + public getPosition(): IOverlayWidgetPosition | null { + return null; + } + + private _showAt(lineNumber: number): void { + if (!this._isVisible) { + this._isVisible = true; + this._domNode.classList.toggle('hidden', !this._isVisible); + } + + const editorLayout = this._editor.getLayoutInfo(); + const topForLineNumber = this._editor.getTopForLineNumber(lineNumber); + const editorScrollTop = this._editor.getScrollTop(); + const lineHeight = this._editor.getOption(EditorOption.lineHeight); + const nodeHeight = this._domNode.clientHeight; + const top = topForLineNumber - editorScrollTop - ((nodeHeight - lineHeight) / 2); + + this._domNode.style.left = `${editorLayout.glyphMarginLeft + editorLayout.glyphMarginWidth}px`; + this._domNode.style.top = `${Math.max(Math.round(top), 0)}px`; + } + + private _updateFont(): void { + const codeTags: HTMLElement[] = Array.prototype.slice.call(this._domNode.getElementsByTagName('code')); + const codeClasses: HTMLElement[] = Array.prototype.slice.call(this._domNode.getElementsByClassName('code')); + + [...codeTags, ...codeClasses].forEach(node => this._editor.applyFontInfo(node)); + } + + private _updateContents(node: Node): void { + this._domNode.textContent = ''; + this._domNode.appendChild(node); + this._updateFont(); + } + public onModelDecorationsChanged(): void { - if (this.isVisible) { + if (this._isVisible) { // The decorations have changed and the hover is visible, // we need to recompute the displayed text this._hoverOperation.cancel(); @@ -147,13 +209,17 @@ export class ModesGlyphHoverWidget extends GlyphHoverWidget { this._hoverOperation.start(HoverStartMode.Delayed); } - public override hide(): void { + public hide(): void { this._lastLineNumber = -1; this._hoverOperation.cancel(); - super.hide(); + if (!this._isVisible) { + return; + } + this._isVisible = false; + this._domNode.classList.toggle('hidden', !this._isVisible); } - public _withResult(result: IHoverMessage[]): void { + private _withResult(result: IHoverMessage[]): void { this._messages = result; if (this._messages.length > 0) { @@ -174,7 +240,7 @@ export class ModesGlyphHoverWidget extends GlyphHoverWidget { fragment.appendChild($('div.hover-row', undefined, renderedContents.element)); } - this.updateContents(fragment); - this.showAt(lineNumber); + this._updateContents(fragment); + this._showAt(lineNumber); } }