Remove the special handling of the horizontal scrollbar in content hover widget (microsoft#210450)

* doing CSS changes allowing us to remove the special handling of the horizontal scrollbar

* removing compilation error

Author: aiday-mar

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;

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);

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);
 }

src/vs/editor/contrib/hover/browser/markdownHoverParticipant.ts

@@ -134,16 +134,21 @@ export class MarkdownHoverParticipant implements IEditorHoverParticipant<Markdow
 	}
 
 	public renderHoverParts(context: IEditorHoverRenderContext, hoverParts: MarkdownHover[]): IDisposable {
-		return renderMarkdownHovers(context, hoverParts, this._editor, this._languageService, this._openerService);
+		const renderedMarkdown = $('div.hover-row');
+		context.fragment.appendChild(renderedMarkdown);
+		const renderedMarkdownContents = $('div.hover-row-contents');
+		renderedMarkdown.appendChild(renderedMarkdownContents);
+		return renderMarkdownHovers(renderedMarkdownContents, hoverParts, this._editor, this._languageService, this._openerService, context.onContentsChanged);
 	}
 }
 
 export function renderMarkdownHovers(
-	context: IEditorHoverRenderContext,
+	container: DocumentFragment | HTMLElement,
 	hoverParts: MarkdownHover[],
 	editor: ICodeEditor,
 	languageService: ILanguageService,
 	openerService: IOpenerService,
+	onFinishedRendering: () => 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;

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);
 	}
 }