From 5a927a75b2ca4e118fd837d81b1b926c0aac9b1b Mon Sep 17 00:00:00 2001 From: Aiday Marlen Kyzy Date: Mon, 19 Jun 2023 13:47:04 +0200 Subject: [PATCH] adding review chanegs --- src/vs/base/browser/ui/hover/hover.css | 101 +++++++------- src/vs/base/browser/ui/hover/hoverWidget.ts | 2 +- .../contrib/hover/browser/contentHover.ts | 132 +++++++++--------- src/vs/editor/contrib/hover/browser/hover.css | 10 +- src/vs/editor/contrib/hover/browser/hover.ts | 14 +- .../standalone/browser/standalone-tokens.css | 2 +- 6 files changed, 130 insertions(+), 131 deletions(-) diff --git a/src/vs/base/browser/ui/hover/hover.css b/src/vs/base/browser/ui/hover/hover.css index b7364a1160c..fbccf837739 100644 --- a/src/vs/base/browser/ui/hover/hover.css +++ b/src/vs/base/browser/ui/hover/hover.css @@ -3,15 +3,14 @@ * Licensed under the MIT License. See License.txt in the project root for license information. *--------------------------------------------------------------------------------------------*/ -.monaco-hover .resizable-hover { +.monaco-hover { z-index: 50; } -.monaco-hover { +.monaco-hover-container { cursor: default; position: absolute; overflow: hidden; - z-index: 50; user-select: text; -webkit-user-select: text; box-sizing: initial; @@ -19,52 +18,52 @@ line-height: 1.5em; } -.monaco-hover.hidden { +.monaco-hover-container.hidden { display: none; } -.monaco-hover a:hover:not(.disabled) { +.monaco-hover-container a:hover:not(.disabled) { cursor: pointer; } -.monaco-hover .hover-contents:not(.html-hover-contents) { +.monaco-hover-container .hover-contents:not(.html-hover-contents) { padding: 4px 8px; } -.monaco-hover .markdown-hover > .hover-contents:not(.code-hover-contents) { +.monaco-hover-container .markdown-hover > .hover-contents:not(.code-hover-contents) { word-wrap: break-word; } -.monaco-hover .markdown-hover > .hover-contents:not(.code-hover-contents) hr { +.monaco-hover-container .markdown-hover > .hover-contents:not(.code-hover-contents) hr { min-width: 100%; } -.monaco-hover p, -.monaco-hover .code, -.monaco-hover ul, -.monaco-hover h1, -.monaco-hover h2, -.monaco-hover h3, -.monaco-hover h4, -.monaco-hover h5, -.monaco-hover h6 { +.monaco-hover-container p, +.monaco-hover-container .code, +.monaco-hover-container ul, +.monaco-hover-container h1, +.monaco-hover-container h2, +.monaco-hover-container h3, +.monaco-hover-container h4, +.monaco-hover-container h5, +.monaco-hover-container h6 { margin: 8px 0; } -.monaco-hover h1, -.monaco-hover h2, -.monaco-hover h3, -.monaco-hover h4, -.monaco-hover h5, -.monaco-hover h6 { +.monaco-hover-container h1, +.monaco-hover-container h2, +.monaco-hover-container h3, +.monaco-hover-container h4, +.monaco-hover-container h5, +.monaco-hover-container h6 { line-height: 1.1; } -.monaco-hover code { +.monaco-hover-container code { font-family: var(--monaco-monospace-font); } -.monaco-hover hr { +.monaco-hover-container hr { box-sizing: border-box; border-left: 0px; border-right: 0px; @@ -75,87 +74,87 @@ height: 1px; } -.monaco-hover p:first-child, -.monaco-hover .code:first-child, -.monaco-hover ul:first-child { +.monaco-hover-container p:first-child, +.monaco-hover-container .code:first-child, +.monaco-hover-container ul:first-child { margin-top: 0; } -.monaco-hover p:last-child, -.monaco-hover .code:last-child, -.monaco-hover ul:last-child { +.monaco-hover-container p:last-child, +.monaco-hover-container .code:last-child, +.monaco-hover-container ul:last-child { margin-bottom: 0; } /* MarkupContent Layout */ -.monaco-hover ul { +.monaco-hover-container ul { padding-left: 20px; } -.monaco-hover ol { +.monaco-hover-container ol { padding-left: 20px; } -.monaco-hover li > p { +.monaco-hover-container li > p { margin-bottom: 0; } -.monaco-hover li > ul { +.monaco-hover-container li > ul { margin-top: 0; } -.monaco-hover code { +.monaco-hover-container code { border-radius: 3px; padding: 0 0.4em; } -.monaco-hover .monaco-tokenized-source { - white-space: pre-wrap; +.monaco-hover-container .monaco-tokenized-source { +white-space: pre-wrap; } -.monaco-hover .hover-row.status-bar { +.monaco-hover-container .hover-row.status-bar { font-size: 12px; line-height: 22px; } -.monaco-hover .hover-row.status-bar .info { +.monaco-hover-container .hover-row.status-bar .info { font-style: italic; padding: 0px 8px; } -.monaco-hover .hover-row.status-bar .actions { +.monaco-hover-container .hover-row.status-bar .actions { display: flex; padding: 0px 8px; } -.monaco-hover .hover-row.status-bar .actions .action-container { +.monaco-hover-container .hover-row.status-bar .actions .action-container { margin-right: 16px; cursor: pointer; } -.monaco-hover .hover-row.status-bar .actions .action-container .action .icon { +.monaco-hover-container .hover-row.status-bar .actions .action-container .action .icon { padding-right: 4px; } -.monaco-hover .markdown-hover .hover-contents .codicon { +.monaco-hover-container .markdown-hover .hover-contents .codicon { color: inherit; font-size: inherit; vertical-align: middle; } -.monaco-hover .hover-contents a.code-link:hover, -.monaco-hover .hover-contents a.code-link { +.monaco-hover-container .hover-contents a.code-link:hover, +.monaco-hover-container .hover-contents a.code-link { color: inherit; } -.monaco-hover .hover-contents a.code-link:before { +.monaco-hover-container .hover-contents a.code-link:before { content: '('; } -.monaco-hover .hover-contents a.code-link:after { +.monaco-hover-container .hover-contents a.code-link:after { content: ')'; } -.monaco-hover .hover-contents a.code-link > span { +.monaco-hover-container .hover-contents a.code-link > span { text-decoration: underline; /** Hack to force underline to show **/ border-bottom: 1px solid transparent; @@ -163,12 +162,12 @@ color: var(--vscode-textLink-foreground); } -.monaco-hover .hover-contents a.code-link > span:hover { +.monaco-hover-container .hover-contents a.code-link > span:hover { color: var(--vscode-textLink-activeForeground); } /** Spans in markdown hovers need a margin-bottom to avoid looking cramped: https://github.com/microsoft/vscode/issues/101496 **/ -.monaco-hover .markdown-hover .hover-contents:not(.code-hover-contents):not(.html-hover-contents) span { +.monaco-hover-container .markdown-hover .hover-contents:not(.code-hover-contents):not(.html-hover-contents) span { margin-bottom: 4px; display: inline-block; } diff --git a/src/vs/base/browser/ui/hover/hoverWidget.ts b/src/vs/base/browser/ui/hover/hoverWidget.ts index 96e99cbec4a..3f09ed882ee 100644 --- a/src/vs/base/browser/ui/hover/hoverWidget.ts +++ b/src/vs/base/browser/ui/hover/hoverWidget.ts @@ -26,7 +26,7 @@ export class HoverWidget extends Disposable { super(); this.containerDomNode = document.createElement('div'); - this.containerDomNode.className = 'monaco-hover'; + this.containerDomNode.className = 'monaco-hover-container'; this.containerDomNode.tabIndex = 0; this.containerDomNode.setAttribute('role', 'tooltip'); diff --git a/src/vs/editor/contrib/hover/browser/contentHover.ts b/src/vs/editor/contrib/hover/browser/contentHover.ts index 5ed23fcbf7c..f9e3ccc4bf0 100644 --- a/src/vs/editor/contrib/hover/browser/contentHover.ts +++ b/src/vs/editor/contrib/hover/browser/contentHover.ts @@ -29,7 +29,7 @@ const $ = dom.$; export class ContentHoverController extends Disposable { private readonly _participants: IEditorHoverParticipant[]; - private readonly _widget = this._register(this._instantiationService.createInstance(ResizableHoverWidget, this._editor)); + private readonly _widget = this._register(this._instantiationService.createInstance(ContentHoverWidget, this._editor)); private readonly _computer: ContentHoverComputer; private readonly _hoverOperation: HoverOperation; @@ -294,7 +294,7 @@ export class ContentHoverController extends Disposable { })); } - this._widget.showAt(fragment, new HoverData( + this._widget.showAt(fragment, new ContentHoverVisibleData( colorPicker, showAtPosition, showAtSecondaryPosition, @@ -424,7 +424,7 @@ class FilteredHoverResult extends HoverResult { } } -class HoverData { +class ContentHoverVisibleData { public closestMouseDistance: number | undefined = undefined; @@ -446,24 +446,24 @@ const HORIZONTAL_SCROLLING_BY = 30; const SCROLLBAR_WIDTH = 10; const SASH_WIDTH_MINUS_BORDER = 3; -export class ResizableHoverWidget extends ResizableContentWidget { +export class ContentHoverWidget extends ResizableContentWidget { public static ID = 'editor.contrib.resizableContentHoverWidget'; private _disposableStore = new DisposableStore(); - private _hoverData: HoverData | undefined; + private _visibleData: ContentHoverVisibleData | undefined; private _positionPreference: ContentWidgetPositionPreference | undefined; - private readonly _hoverWidget: HoverWidget = this._disposableStore.add(new HoverWidget()); + private readonly _hover: HoverWidget = this._disposableStore.add(new HoverWidget()); private readonly _hoverVisibleKey: IContextKey; private readonly _hoverFocusedKey: IContextKey; public get isColorPickerVisible(): boolean { - return Boolean(this._hoverData?.colorPicker); + return Boolean(this._visibleData?.colorPicker); } public get isVisibleFromKeyboard(): boolean { - return (this._hoverData?.source === HoverStartSource.Keyboard); + return (this._visibleData?.source === HoverStartSource.Keyboard); } public get isVisible(): boolean { @@ -478,8 +478,8 @@ export class ResizableHoverWidget extends ResizableContentWidget { this._hoverVisibleKey = EditorContextKeys.hoverVisible.bindTo(_contextKeyService); this._hoverFocusedKey = EditorContextKeys.hoverFocused.bindTo(_contextKeyService); - dom.append(this._resizableNode.domNode, this._hoverWidget.containerDomNode); - this._resizableNode.domNode.classList.add('resizable-hover'); + dom.append(this._resizableNode.domNode, this._hover.containerDomNode); + this._resizableNode.domNode.classList.add('monaco-hover'); this._disposableStore.add(this._editor.onDidLayoutChange(() => this._layout())); this._disposableStore.add(this._editor.onDidChangeConfiguration((e: ConfigurationChangedEvent) => { @@ -500,13 +500,13 @@ export class ResizableHoverWidget extends ResizableContentWidget { public override dispose(): void { super.dispose(); - this._hoverData?.disposables.dispose(); + this._visibleData?.disposables.dispose(); this._disposableStore.dispose(); this._editor.removeContentWidget(this); } public getId(): string { - return ResizableHoverWidget.ID; + return ContentHoverWidget.ID; } private _setDimensions(container: HTMLElement, width: number | string, height: number | string) { @@ -517,12 +517,12 @@ export class ResizableHoverWidget extends ResizableContentWidget { } private _setContentsDomNodeDimensions(width: number | string, height: number | string) { - const contentsDomNode = this._hoverWidget.contentsDomNode; + const contentsDomNode = this._hover.contentsDomNode; return this._setDimensions(contentsDomNode, width, height); } private _setContainerDomNodeDimensions(width: number | string, height: number | string) { - const containerDomNode = this._hoverWidget.containerDomNode; + const containerDomNode = this._hover.containerDomNode; return this._setDimensions(containerDomNode, width, height); } @@ -535,20 +535,20 @@ export class ResizableHoverWidget extends ResizableContentWidget { private _setContentsDomNodeMaxDimensions(width: number | string, height: number | string) { const transformedWidth = typeof width === 'number' ? `${width}px` : width; const transformedHeight = typeof height === 'number' ? `${height}px` : height; - const contentsDomNode = this._hoverWidget.contentsDomNode; + const contentsDomNode = this._hover.contentsDomNode; contentsDomNode.style.maxWidth = transformedWidth; contentsDomNode.style.maxHeight = transformedHeight; } private _hasHorizontalScrollbar(): boolean { - const scrollDimensions = this._hoverWidget.scrollbar.getScrollDimensions(); + const scrollDimensions = this._hover.scrollbar.getScrollDimensions(); const hasHorizontalScrollbar = scrollDimensions.scrollWidth > scrollDimensions.width; return hasHorizontalScrollbar; } private _adjustContentsBottomPadding() { - const contentsDomNode = this._hoverWidget.contentsDomNode; - const extraBottomPadding = `${this._hoverWidget.scrollbar.options.horizontalScrollbarSize}px`; + const contentsDomNode = this._hover.contentsDomNode; + const extraBottomPadding = `${this._hover.scrollbar.options.horizontalScrollbarSize}px`; if (contentsDomNode.style.paddingBottom !== extraBottomPadding) { contentsDomNode.style.paddingBottom = extraBottomPadding; } @@ -575,12 +575,12 @@ export class ResizableHoverWidget extends ResizableContentWidget { override _resize(size: dom.Dimension) { this._setAdjustedHoverWidgetDimensions(size); this._setResizableNodeMaxDimensions(); - this._hoverWidget.scrollbar.scanDomNode(); + this._hover.scrollbar.scanDomNode(); this._editor.layoutContentWidget(this); } private _findAvailableSpaceVertically(): number | undefined { - const position = this._hoverData?.showAtPosition; + const position = this._visibleData?.showAtPosition; if (!position) { return; } @@ -593,7 +593,7 @@ export class ResizableHoverWidget extends ResizableContentWidget { return; } let maximumHeight = 3 * SASH_WIDTH_MINUS_BORDER; - Array.from(this._hoverWidget.contentsDomNode.children).forEach((hoverPart) => { + Array.from(this._hover.contentsDomNode.children).forEach((hoverPart) => { maximumHeight += hoverPart.clientHeight; }); if (this._hasHorizontalScrollbar()) { @@ -608,30 +608,30 @@ export class ResizableHoverWidget extends ResizableContentWidget { } const editorBox = dom.getDomNodePagePosition(this._editor.getDomNode()); const glyphMarginWidth = this._editor.getLayoutInfo().glyphMarginWidth; - const leftOfContainer = this._hoverWidget.containerDomNode.offsetLeft; + const leftOfContainer = this._hover.containerDomNode.offsetLeft; return editorBox.width + editorBox.left - leftOfContainer - glyphMarginWidth; } public isMouseGettingCloser(posx: number, posy: number): boolean { - if (!this._hoverData) { + if (!this._visibleData) { return false; } - if (typeof this._hoverData.initialMousePosX === 'undefined' || typeof this._hoverData.initialMousePosY === 'undefined') { - this._hoverData.initialMousePosX = posx; - this._hoverData.initialMousePosY = posy; + if (typeof this._visibleData.initialMousePosX === 'undefined' || typeof this._visibleData.initialMousePosY === 'undefined') { + this._visibleData.initialMousePosX = posx; + this._visibleData.initialMousePosY = posy; return false; } const widgetRect = dom.getDomNodePagePosition(this.getDomNode()); - if (typeof this._hoverData.closestMouseDistance === 'undefined') { - this._hoverData.closestMouseDistance = computeDistanceFromPointToRectangle(this._hoverData.initialMousePosX, this._hoverData.initialMousePosY, widgetRect.left, widgetRect.top, widgetRect.width, widgetRect.height); + if (typeof this._visibleData.closestMouseDistance === 'undefined') { + this._visibleData.closestMouseDistance = computeDistanceFromPointToRectangle(this._visibleData.initialMousePosX, this._visibleData.initialMousePosY, widgetRect.left, widgetRect.top, widgetRect.width, widgetRect.height); } const distance = computeDistanceFromPointToRectangle(posx, posy, widgetRect.left, widgetRect.top, widgetRect.width, widgetRect.height); - if (distance > this._hoverData.closestMouseDistance + 4 /* tolerance of 4 pixels */) { + if (distance > this._visibleData.closestMouseDistance + 4 /* tolerance of 4 pixels */) { // The mouse is getting farther away return false; } - this._hoverData.closestMouseDistance = Math.min(this._hoverData.closestMouseDistance, distance); + this._visibleData.closestMouseDistance = Math.min(this._visibleData.closestMouseDistance, distance); return true; } @@ -639,42 +639,42 @@ export class ResizableHoverWidget extends ResizableContentWidget { this._position = position; } - private _setHoverData(hoverData: HoverData | undefined): void { + private _setHoverData(hoverData: ContentHoverVisibleData | undefined): void { this._setWidgetPosition(hoverData?.showAtPosition); - this._hoverData?.disposables.dispose(); - this._hoverData = hoverData; + this._visibleData?.disposables.dispose(); + this._visibleData = hoverData; this._hoverVisibleKey.set(!!hoverData); - this._hoverWidget.containerDomNode.classList.toggle('hidden', !hoverData); + this._hover.containerDomNode.classList.toggle('hidden', !hoverData); } private _layout(): void { const height = Math.max(this._editor.getLayoutInfo().height / 4, 250); const { fontSize, lineHeight } = this._editor.getOption(EditorOption.fontInfo); - const contentsDomNode = this._hoverWidget.contentsDomNode; + const contentsDomNode = this._hover.contentsDomNode; contentsDomNode.style.fontSize = `${fontSize}px`; contentsDomNode.style.lineHeight = `${lineHeight / fontSize}`; this._setContentsDomNodeMaxDimensions(Math.max(this._editor.getLayoutInfo().width * 0.66, 500), height); } private _updateFont(): void { - const codeClasses: HTMLElement[] = Array.prototype.slice.call(this._hoverWidget.contentsDomNode.getElementsByClassName('code')); + const codeClasses: HTMLElement[] = Array.prototype.slice.call(this._hover.contentsDomNode.getElementsByClassName('code')); codeClasses.forEach(node => this._editor.applyFontInfo(node)); } private _updateContent(node: DocumentFragment): void { - const contentsDomNode = this._hoverWidget.contentsDomNode; + const contentsDomNode = this._hover.contentsDomNode; contentsDomNode.style.paddingBottom = ''; contentsDomNode.textContent = ''; contentsDomNode.appendChild(node); } private _getWidgetHeight(): number { - return this._hoverWidget.containerDomNode.clientHeight + 2 * SASH_WIDTH_MINUS_BORDER; + return this._hover.containerDomNode.clientHeight + 2 * SASH_WIDTH_MINUS_BORDER; } private _layoutContentWidget(): void { this._editor.layoutContentWidget(this); - this._hoverWidget.onContentsChanged(); + this._hover.onContentsChanged(); } private _updateContentsDomNodeMaxDimensions() { @@ -683,7 +683,7 @@ export class ResizableHoverWidget extends ResizableContentWidget { this._setContentsDomNodeMaxDimensions(width, height); } - private _render(node: DocumentFragment, hoverData: HoverData) { + private _render(node: DocumentFragment, hoverData: ContentHoverVisibleData) { if (!this._hoverVisibleKey.get()) { this._editor.addContentWidget(this); } @@ -697,7 +697,7 @@ export class ResizableHoverWidget extends ResizableContentWidget { this._editor.render(); } - private _setContentPosition(hoverData: HoverData, preference?: ContentWidgetPositionPreference) { + private _setContentPosition(hoverData: ContentHoverVisibleData, preference?: ContentWidgetPositionPreference) { this._contentPosition = { position: hoverData.showAtPosition, secondaryPosition: hoverData.showAtSecondaryPosition, @@ -706,7 +706,7 @@ export class ResizableHoverWidget extends ResizableContentWidget { }; } - public showAt(node: DocumentFragment, hoverData: HoverData): void { + public showAt(node: DocumentFragment, hoverData: ContentHoverVisibleData): void { if (!this._editor || !this._editor.hasModel()) { return; } @@ -721,13 +721,13 @@ export class ResizableHoverWidget extends ResizableContentWidget { // TODO: Doing a second layout of the hover after force rendering the editor this.onContentsChanged(); if (hoverData.stoleFocus) { - this._hoverWidget.containerDomNode.focus(); + this._hover.containerDomNode.focus(); } hoverData.colorPicker?.layout(); } public hide(): void { - if (!this._hoverData) { + if (!this._visibleData) { return; } this._setHoverData(undefined); @@ -736,7 +736,7 @@ export class ResizableHoverWidget extends ResizableContentWidget { this._editor.removeContentWidget(this); this._hoverFocusedKey.set(false); this._editor.layoutContentWidget(this); - if (this._hoverData.stoleFocus) { + if (this._visibleData.stoleFocus) { this._editor.focus(); } } @@ -749,14 +749,14 @@ export class ResizableHoverWidget extends ResizableContentWidget { } private _setContainerAbsolutePosition(top: number, left: number): void { - const containerDomNode = this._hoverWidget.containerDomNode; + const containerDomNode = this._hover.containerDomNode; containerDomNode.style.top = top + 'px'; containerDomNode.style.left = left + 'px'; } private _adjustHoverHeightForScrollbar(height: number) { - const containerDomNode = this._hoverWidget.containerDomNode; - const contentsDomNode = this._hoverWidget.contentsDomNode; + const containerDomNode = this._hover.containerDomNode; + const contentsDomNode = this._hover.contentsDomNode; const maxRenderingHeight = this._findMaximumRenderingHeight() ?? Infinity; this._setContainerDomNodeDimensions(containerDomNode.clientWidth, Math.min(maxRenderingHeight, height)); this._setContentsDomNodeDimensions(contentsDomNode.clientWidth, Math.min(maxRenderingHeight, height - SCROLLBAR_WIDTH)); @@ -764,7 +764,7 @@ export class ResizableHoverWidget extends ResizableContentWidget { public onContentsChanged(): void { this._setPersistedHoverDimensionsOrRenderNormally(); - const containerDomNode = this._hoverWidget.containerDomNode; + const containerDomNode = this._hover.containerDomNode; const clientHeight = containerDomNode.clientHeight; const clientWidth = containerDomNode.clientWidth; const totalBorderWidth = 2 * SASH_WIDTH_MINUS_BORDER; @@ -778,49 +778,49 @@ export class ResizableHoverWidget extends ResizableContentWidget { } public focus(): void { - this._hoverWidget.containerDomNode.focus(); + this._hover.containerDomNode.focus(); } public scrollUp(): void { - const scrollTop = this._hoverWidget.scrollbar.getScrollPosition().scrollTop; + const scrollTop = this._hover.scrollbar.getScrollPosition().scrollTop; const fontInfo = this._editor.getOption(EditorOption.fontInfo); - this._hoverWidget.scrollbar.setScrollPosition({ scrollTop: scrollTop - fontInfo.lineHeight }); + this._hover.scrollbar.setScrollPosition({ scrollTop: scrollTop - fontInfo.lineHeight }); } public scrollDown(): void { - const scrollTop = this._hoverWidget.scrollbar.getScrollPosition().scrollTop; + const scrollTop = this._hover.scrollbar.getScrollPosition().scrollTop; const fontInfo = this._editor.getOption(EditorOption.fontInfo); - this._hoverWidget.scrollbar.setScrollPosition({ scrollTop: scrollTop + fontInfo.lineHeight }); + this._hover.scrollbar.setScrollPosition({ scrollTop: scrollTop + fontInfo.lineHeight }); } public scrollLeft(): void { - const scrollLeft = this._hoverWidget.scrollbar.getScrollPosition().scrollLeft; - this._hoverWidget.scrollbar.setScrollPosition({ scrollLeft: scrollLeft - HORIZONTAL_SCROLLING_BY }); + const scrollLeft = this._hover.scrollbar.getScrollPosition().scrollLeft; + this._hover.scrollbar.setScrollPosition({ scrollLeft: scrollLeft - HORIZONTAL_SCROLLING_BY }); } public scrollRight(): void { - const scrollLeft = this._hoverWidget.scrollbar.getScrollPosition().scrollLeft; - this._hoverWidget.scrollbar.setScrollPosition({ scrollLeft: scrollLeft + HORIZONTAL_SCROLLING_BY }); + const scrollLeft = this._hover.scrollbar.getScrollPosition().scrollLeft; + this._hover.scrollbar.setScrollPosition({ scrollLeft: scrollLeft + HORIZONTAL_SCROLLING_BY }); } public pageUp(): void { - const scrollTop = this._hoverWidget.scrollbar.getScrollPosition().scrollTop; - const scrollHeight = this._hoverWidget.scrollbar.getScrollDimensions().height; - this._hoverWidget.scrollbar.setScrollPosition({ scrollTop: scrollTop - scrollHeight }); + const scrollTop = this._hover.scrollbar.getScrollPosition().scrollTop; + const scrollHeight = this._hover.scrollbar.getScrollDimensions().height; + this._hover.scrollbar.setScrollPosition({ scrollTop: scrollTop - scrollHeight }); } public pageDown(): void { - const scrollTop = this._hoverWidget.scrollbar.getScrollPosition().scrollTop; - const scrollHeight = this._hoverWidget.scrollbar.getScrollDimensions().height; - this._hoverWidget.scrollbar.setScrollPosition({ scrollTop: scrollTop + scrollHeight }); + const scrollTop = this._hover.scrollbar.getScrollPosition().scrollTop; + const scrollHeight = this._hover.scrollbar.getScrollDimensions().height; + this._hover.scrollbar.setScrollPosition({ scrollTop: scrollTop + scrollHeight }); } public goToTop(): void { - this._hoverWidget.scrollbar.setScrollPosition({ scrollTop: 0 }); + this._hover.scrollbar.setScrollPosition({ scrollTop: 0 }); } public goToBottom(): void { - this._hoverWidget.scrollbar.setScrollPosition({ scrollTop: this._hoverWidget.scrollbar.getScrollDimensions().scrollHeight }); + this._hover.scrollbar.setScrollPosition({ scrollTop: this._hover.scrollbar.getScrollDimensions().scrollHeight }); } public escape(): void { diff --git a/src/vs/editor/contrib/hover/browser/hover.css b/src/vs/editor/contrib/hover/browser/hover.css index 34695750fd4..fbe1f340d28 100644 --- a/src/vs/editor/contrib/hover/browser/hover.css +++ b/src/vs/editor/contrib/hover/browser/hover.css @@ -7,26 +7,26 @@ background-color: var(--vscode-editor-hoverHighlightBackground); } -.monaco-editor .monaco-hover { +.monaco-editor .monaco-hover-container { color: var(--vscode-editorHoverWidget-foreground); background-color: var(--vscode-editorHoverWidget-background); border: 1px solid var(--vscode-editorHoverWidget-border); border-radius: 3px; } -.monaco-editor .monaco-hover a { +.monaco-editor .monaco-hover-container a { color: var(--vscode-textLink-foreground); } -.monaco-editor .monaco-hover a:hover { +.monaco-editor .monaco-hover-container a:hover { color: var(--vscode-textLink-activeForeground); } -.monaco-editor .monaco-hover .hover-row .actions { +.monaco-editor .monaco-hover-container .hover-row .actions { background-color: var(--vscode-editorHoverWidget-statusBarBackground); } -.monaco-editor .monaco-hover code { +.monaco-editor .monaco-hover-container code { background-color: var(--vscode-textCodeBlock-background); } diff --git a/src/vs/editor/contrib/hover/browser/hover.ts b/src/vs/editor/contrib/hover/browser/hover.ts index 430727b754a..50c84acb9b9 100644 --- a/src/vs/editor/contrib/hover/browser/hover.ts +++ b/src/vs/editor/contrib/hover/browser/hover.ts @@ -15,7 +15,7 @@ import { EditorContextKeys } from 'vs/editor/common/editorContextKeys'; import { ILanguageService } from 'vs/editor/common/languages/language'; import { GotoDefinitionAtPositionEditorContribution } from 'vs/editor/contrib/gotoSymbol/browser/link/goToDefinitionAtPosition'; import { HoverStartMode, HoverStartSource } from 'vs/editor/contrib/hover/browser/hoverOperation'; -import { ResizableHoverWidget, ContentHoverController } from 'vs/editor/contrib/hover/browser/contentHover'; +import { ContentHoverWidget, ContentHoverController } from 'vs/editor/contrib/hover/browser/contentHover'; import { MarginHoverWidget } from 'vs/editor/contrib/hover/browser/marginHover'; import { AccessibilitySupport } from 'vs/platform/accessibility/common/accessibility'; import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation'; @@ -108,7 +108,7 @@ export class ModesHoverController implements IEditorContribution { const target = mouseEvent.target; - if (target.type === MouseTargetType.CONTENT_WIDGET && target.detail === ResizableHoverWidget.ID) { + if (target.type === MouseTargetType.CONTENT_WIDGET && target.detail === ContentHoverWidget.ID) { this._hoverClicked = true; // mouse down on top of content hover widget return; @@ -148,7 +148,7 @@ export class ModesHoverController implements IEditorContribution { return; } - if (this._isHoverSticky && target.type === MouseTargetType.CONTENT_WIDGET && target.detail === ResizableHoverWidget.ID) { + if (this._isHoverSticky && target.type === MouseTargetType.CONTENT_WIDGET && target.detail === ContentHoverWidget.ID) { // mouse moved on top of content hover widget return; } @@ -159,7 +159,7 @@ export class ModesHoverController implements IEditorContribution { } if ( - !this._isHoverSticky && target.type === MouseTargetType.CONTENT_WIDGET && target.detail === ResizableHoverWidget.ID + !this._isHoverSticky && target.type === MouseTargetType.CONTENT_WIDGET && target.detail === ContentHoverWidget.ID && this._contentWidget?.isColorPickerVisible() ) { // though the hover is not sticky, the color picker needs to. @@ -691,8 +691,8 @@ HoverParticipantRegistry.register(MarkerHoverParticipant); registerThemingParticipant((theme, collector) => { const hoverBorder = theme.getColor(editorHoverBorder); if (hoverBorder) { - collector.addRule(`.monaco-editor .monaco-hover .hover-row:not(:first-child):not(:empty) { border-top: 1px solid ${hoverBorder.transparent(0.5)}; }`); - collector.addRule(`.monaco-editor .monaco-hover hr { border-top: 1px solid ${hoverBorder.transparent(0.5)}; }`); - collector.addRule(`.monaco-editor .monaco-hover hr { border-bottom: 0px solid ${hoverBorder.transparent(0.5)}; }`); + collector.addRule(`.monaco-editor .monaco-hover-content .hover-row:not(:first-child):not(:empty) { border-top: 1px solid ${hoverBorder.transparent(0.5)}; }`); + collector.addRule(`.monaco-editor .monaco-hover-content hr { border-top: 1px solid ${hoverBorder.transparent(0.5)}; }`); + collector.addRule(`.monaco-editor .monaco-hover-content hr { border-bottom: 0px solid ${hoverBorder.transparent(0.5)}; }`); } }); diff --git a/src/vs/editor/standalone/browser/standalone-tokens.css b/src/vs/editor/standalone/browser/standalone-tokens.css index 0df4a9bac81..d81607d46d0 100644 --- a/src/vs/editor/standalone/browser/standalone-tokens.css +++ b/src/vs/editor/standalone/browser/standalone-tokens.css @@ -20,7 +20,7 @@ stroke-width: 1.2px; } -.monaco-hover p { +.monaco-hover-container p { margin: 0; }