From 5ccc2db0a2ed24e8c0dc3ecd7d515e4f76c87e69 Mon Sep 17 00:00:00 2001 From: Aiday Marlen Kyzy Date: Tue, 16 Apr 2024 12:06:05 +0200 Subject: [PATCH] Remove the special handling of the horizontal scrollbar in content hover widget (#210450) * doing CSS changes allowing us to remove the special handling of the horizontal scrollbar * removing compilation error --- src/vs/base/browser/ui/hover/hoverWidget.css | 7 ++++ .../contrib/hover/browser/contentHover.ts | 35 ------------------- src/vs/editor/contrib/hover/browser/hover.css | 10 ++++++ .../hover/browser/markdownHoverParticipant.ts | 15 +++++--- .../browser/unicodeHighlighter.ts | 2 +- 5 files changed, 28 insertions(+), 41 deletions(-) diff --git a/src/vs/base/browser/ui/hover/hoverWidget.css b/src/vs/base/browser/ui/hover/hoverWidget.css index ee294b766fba..094b16e58be1 100644 --- a/src/vs/base/browser/ui/hover/hoverWidget.css +++ b/src/vs/base/browser/ui/hover/hoverWidget.css @@ -122,6 +122,7 @@ .monaco-hover .hover-row.status-bar .actions { display: flex; padding: 0px 8px; + width: 100%; } .monaco-hover .hover-row.status-bar .actions .action-container { @@ -170,6 +171,12 @@ display: inline-block; } +.monaco-hover-content { + padding-right: 2px; + padding-bottom: 2px; + box-sizing: border-box; +} + .monaco-hover-content .action-container a { -webkit-user-select: none; user-select: none; diff --git a/src/vs/editor/contrib/hover/browser/contentHover.ts b/src/vs/editor/contrib/hover/browser/contentHover.ts index 503c1d31bc9f..2fe78c5a582c 100644 --- a/src/vs/editor/contrib/hover/browser/contentHover.ts +++ b/src/vs/editor/contrib/hover/browser/contentHover.ts @@ -481,7 +481,6 @@ class ContentHoverVisibleData { } const HORIZONTAL_SCROLLING_BY = 30; -const SCROLLBAR_WIDTH = 10; const CONTAINER_HEIGHT_PADDING = 6; export class ContentHoverWidget extends ResizableContentWidget { @@ -601,30 +600,11 @@ export class ContentHoverWidget extends ResizableContentWidget { this._layoutContentWidget(); } - private _hasHorizontalScrollbar(): boolean { - const scrollDimensions = this._hover.scrollbar.getScrollDimensions(); - const hasHorizontalScrollbar = scrollDimensions.scrollWidth > scrollDimensions.width; - return hasHorizontalScrollbar; - } - - private _adjustContentsBottomPadding(): void { - const contentsDomNode = this._hover.contentsDomNode; - const extraBottomPadding = `${this._hover.scrollbar.options.horizontalScrollbarSize}px`; - if (contentsDomNode.style.paddingBottom !== extraBottomPadding) { - contentsDomNode.style.paddingBottom = extraBottomPadding; - } - } - private _setAdjustedHoverWidgetDimensions(size: dom.Dimension): void { this._setHoverWidgetMaxDimensions('none', 'none'); const width = size.width; const height = size.height; this._setHoverWidgetDimensions(width, height); - // measure if widget has horizontal scrollbar after setting the dimensions - if (this._hasHorizontalScrollbar()) { - this._adjustContentsBottomPadding(); - this._setContentsDomNodeDimensions(width, height - SCROLLBAR_WIDTH); - } } private _updateResizableNodeMaxDimensions(): void { @@ -665,9 +645,6 @@ export class ContentHoverWidget extends ResizableContentWidget { maximumHeight += hoverPart.clientHeight; }); - if (this._hasHorizontalScrollbar()) { - maximumHeight += SCROLLBAR_WIDTH; - } return Math.min(availableSpace, maximumHeight); } @@ -857,14 +834,6 @@ export class ContentHoverWidget extends ResizableContentWidget { this._setHoverWidgetDimensions('auto', 'auto'); } - private _adjustHoverHeightForScrollbar(height: number) { - const containerDomNode = this._hover.containerDomNode; - const contentsDomNode = this._hover.contentsDomNode; - const maxRenderingHeight = this._findMaximumRenderingHeight() ?? Infinity; - this._setContainerDomNodeDimensions(dom.getTotalWidth(containerDomNode), Math.min(maxRenderingHeight, height)); - this._setContentsDomNodeDimensions(dom.getTotalWidth(contentsDomNode), Math.min(maxRenderingHeight, height - SCROLLBAR_WIDTH)); - } - public setMinimumDimensions(dimensions: dom.Dimension): void { // We combine the new minimum dimensions with the previous ones this._minimumSize = new dom.Dimension( @@ -900,10 +869,6 @@ export class ContentHoverWidget extends ResizableContentWidget { this._updateMinimumWidth(); this._resizableNode.layout(height, width); - if (this._hasHorizontalScrollbar()) { - this._adjustContentsBottomPadding(); - this._adjustHoverHeightForScrollbar(height); - } if (this._visibleData?.showAtPosition) { const widgetHeight = dom.getTotalHeight(this._hover.containerDomNode); this._positionPreference = this._findPositionPreference(widgetHeight, this._visibleData.showAtPosition); diff --git a/src/vs/editor/contrib/hover/browser/hover.css b/src/vs/editor/contrib/hover/browser/hover.css index 34695750fd49..6e0324a2d42c 100644 --- a/src/vs/editor/contrib/hover/browser/hover.css +++ b/src/vs/editor/contrib/hover/browser/hover.css @@ -22,6 +22,16 @@ color: var(--vscode-textLink-activeForeground); } +.monaco-editor .monaco-hover .hover-row { + display: flex; +} + +.monaco-editor .monaco-hover .hover-row .hover-row-contents { + min-width:0; + display: flex; + flex-direction: column; +} + .monaco-editor .monaco-hover .hover-row .actions { background-color: var(--vscode-editorHoverWidget-statusBarBackground); } diff --git a/src/vs/editor/contrib/hover/browser/markdownHoverParticipant.ts b/src/vs/editor/contrib/hover/browser/markdownHoverParticipant.ts index 2227602d0d99..c548b89e21dc 100644 --- a/src/vs/editor/contrib/hover/browser/markdownHoverParticipant.ts +++ b/src/vs/editor/contrib/hover/browser/markdownHoverParticipant.ts @@ -134,16 +134,21 @@ export class MarkdownHoverParticipant implements IEditorHoverParticipant void ): IDisposable { // Sort hover parts to keep them stable since they might come in async, out-of-order @@ -155,16 +160,16 @@ export function renderMarkdownHovers( if (isEmptyMarkdownString(contents)) { continue; } - const markdownHoverElement = $('div.hover-row.markdown-hover'); + const markdownHoverElement = $('div.markdown-hover'); const hoverContentsElement = dom.append(markdownHoverElement, $('div.hover-contents')); const renderer = disposables.add(new MarkdownRenderer({ editor }, languageService, openerService)); disposables.add(renderer.onDidRenderAsync(() => { hoverContentsElement.className = 'hover-contents code-hover-contents'; - context.onContentsChanged(); + onFinishedRendering(); })); const renderedContents = disposables.add(renderer.render(contents)); hoverContentsElement.appendChild(renderedContents.element); - context.fragment.appendChild(markdownHoverElement); + container.appendChild(markdownHoverElement); } } return disposables; diff --git a/src/vs/editor/contrib/unicodeHighlighter/browser/unicodeHighlighter.ts b/src/vs/editor/contrib/unicodeHighlighter/browser/unicodeHighlighter.ts index f44fc76e0bdf..8d25bcccde90 100644 --- a/src/vs/editor/contrib/unicodeHighlighter/browser/unicodeHighlighter.ts +++ b/src/vs/editor/contrib/unicodeHighlighter/browser/unicodeHighlighter.ts @@ -507,7 +507,7 @@ export class UnicodeHighlighterHoverParticipant implements IEditorHoverParticipa } public renderHoverParts(context: IEditorHoverRenderContext, hoverParts: MarkdownHover[]): IDisposable { - return renderMarkdownHovers(context, hoverParts, this._editor, this._languageService, this._openerService); + return renderMarkdownHovers(context.fragment, hoverParts, this._editor, this._languageService, this._openerService, context.onContentsChanged); } }