Contribute rich hover for inline values for debugger + notebook execution values (microsoft#241713)

Yoyokrazy · web-flow · commit e95380d32c97 · 2025-02-24T17:20:11.000+01:00
* show as a language hover

* viewport truncation good to go
diff --git a/src/vs/workbench/contrib/debug/browser/debugEditorContribution.ts b/src/vs/workbench/contrib/debug/browser/debugEditorContribution.ts
@@ -52,6 +52,7 @@ import { ExceptionWidget } from './exceptionWidget.js';
 import { CONTEXT_EXCEPTION_WIDGET_VISIBLE, IDebugConfiguration, IDebugEditorContribution, IDebugService, IDebugSession, IExceptionInfo, IExpression, IStackFrame, State } from '../common/debug.js';
 import { Expression } from '../common/debugModel.js';
 import { IHostService } from '../../../services/host/browser/host.js';
+import { MarkdownString } from '../../../../base/common/htmlContent.js';
 
 const MAX_NUM_INLINE_VALUES = 100; // JS Global scope can have 700+ entries. We want to limit ourselves for perf reasons
 const MAX_INLINE_DECORATOR_LENGTH = 150; // Max string length of each inline decorator when debugging. If exceeded ... is added
@@ -73,10 +74,30 @@ class InlineSegment {
 	}
 }
 
-function createInlineValueDecoration(lineNumber: number, contentText: string, column = Constants.MAX_SAFE_SMALL_INTEGER): IModelDeltaDecoration[] {
-	// If decoratorText is too long, trim and add ellipses. This could happen for minified files with everything on a single line
-	if (contentText.length > MAX_INLINE_DECORATOR_LENGTH) {
-		contentText = contentText.substring(0, MAX_INLINE_DECORATOR_LENGTH) + '...';
+export function formatHoverContent(contentText: string): MarkdownString {
+	if (contentText.includes('\n') || contentText.includes('\r')) {
+		// Split by commas in case of multiple variables
+		const pairs = contentText.split(/,\s*/);
+		const formattedPairs = pairs.map(pair => {
+			const equalsIndex = pair.indexOf('=');
+			if (equalsIndex !== -1) {
+				const indent = ' '.repeat(equalsIndex + 2);
+				const [firstLine, ...restLines] = pair.trim().split(/\r?\n/);
+				return [firstLine, ...restLines.map(line => indent + line)].join('\n');
+			}
+			return pair;
+		});
+		return new MarkdownString().appendCodeblock('', formattedPairs.join(',\n'));
+	}
+	return new MarkdownString().appendCodeblock('', contentText);
+}
+
+export function createInlineValueDecoration(lineNumber: number, contentText: string, classNamePrefix: string, column = Constants.MAX_SAFE_SMALL_INTEGER, viewportMaxCol: number = MAX_INLINE_DECORATOR_LENGTH): IModelDeltaDecoration[] {
+	const rawText = contentText; // store raw text for hover message
+
+	// Truncate contentText if it exceeds the viewport max column
+	if (contentText.length > viewportMaxCol) {
+		contentText = contentText.substring(0, viewportMaxCol) + '...';
 	}
 
 	return [
@@ -88,7 +109,7 @@ function createInlineValueDecoration(lineNumber: number, contentText: string, co
 				endColumn: column
 			},
 			options: {
-				description: 'debug-inline-value-decoration-spacer',
+				description: `${classNamePrefix}-inline-value-decoration-spacer`,
 				after: {
 					content: strings.noBreakWhitespace,
 					cursorStops: InjectedTextCursorStops.None
@@ -104,14 +125,15 @@ function createInlineValueDecoration(lineNumber: number, contentText: string, co
 				endColumn: column
 			},
 			options: {
-				description: 'debug-inline-value-decoration',
+				description: `${classNamePrefix}-inline-value-decoration`,
 				after: {
 					content: replaceWsWithNoBreakWs(contentText),
-					inlineClassName: 'debug-inline-value',
+					inlineClassName: `${classNamePrefix}-inline-value`,
 					inlineClassNameAffectsLetterSpacing: true,
 					cursorStops: InjectedTextCursorStops.None
 				},
 				showIfCollapsed: true,
+				hoverMessage: formatHoverContent(rawText)
 			}
 		},
 	];
@@ -769,7 +791,10 @@ export class DebugEditorContribution implements IDebugEditorContribution {
 				if (segments.length > 0) {
 					segments = segments.sort((a, b) => a.column - b.column);
 					const text = segments.map(s => s.text).join(separator);
-					allDecorations.push(...createInlineValueDecoration(line, text));
+					const editorWidth = this.editor.getLayoutInfo().width;
+					const fontInfo = this.editor.getOption(EditorOption.fontInfo);
+					const viewportMaxCol = Math.floor((editorWidth - 50) / fontInfo.typicalHalfwidthCharacterWidth);
+					allDecorations.push(...createInlineValueDecoration(line, text, 'debug', undefined, viewportMaxCol));
 				}
 			});
 
@@ -813,9 +838,13 @@ export class DebugEditorContribution implements IDebugEditorContribution {
 				}
 			}
 
-			allDecorations = [...valuesPerLine.entries()].flatMap(([line, values]) =>
-				createInlineValueDecoration(line, [...values].map(([n, v]) => `${n} = ${v}`).join(', '))
-			);
+			allDecorations = [...valuesPerLine.entries()].flatMap(([line, values]) => {
+				const text = [...values].map(([n, v]) => `${n} = ${v}`).join(', ');
+				const editorWidth = this.editor.getLayoutInfo().width;
+				const fontInfo = this.editor.getOption(EditorOption.fontInfo);
+				const viewportMaxCol = Math.floor((editorWidth - 50) / fontInfo.typicalHalfwidthCharacterWidth);
+				return createInlineValueDecoration(line, text, 'debug', undefined, viewportMaxCol);
+			});
 		}
 
 		if (cts.token.isCancellationRequested) {
diff --git a/src/vs/workbench/contrib/notebook/browser/contrib/notebookVariables/notebookInlineVariables.ts b/src/vs/workbench/contrib/notebook/browser/contrib/notebookVariables/notebookInlineVariables.ts
@@ -9,28 +9,25 @@ import { Event } from '../../../../../../base/common/event.js';
 import { Disposable, IDisposable } from '../../../../../../base/common/lifecycle.js';
 import { ResourceMap } from '../../../../../../base/common/map.js';
 import { isEqual } from '../../../../../../base/common/resources.js';
-import { format, noBreakWhitespace } from '../../../../../../base/common/strings.js';
-import { Constants } from '../../../../../../base/common/uint.js';
+import { format } from '../../../../../../base/common/strings.js';
 import { Position } from '../../../../../../editor/common/core/position.js';
 import { Range } from '../../../../../../editor/common/core/range.js';
 import { InlineValueContext, InlineValueText, InlineValueVariableLookup } from '../../../../../../editor/common/languages.js';
-import { IModelDeltaDecoration, InjectedTextCursorStops, ITextModel } from '../../../../../../editor/common/model.js';
+import { IModelDeltaDecoration, ITextModel } from '../../../../../../editor/common/model.js';
 import { ILanguageFeaturesService } from '../../../../../../editor/common/services/languageFeatures.js';
 import { localize } from '../../../../../../nls.js';
 import { registerAction2 } from '../../../../../../platform/actions/common/actions.js';
 import { IConfigurationService } from '../../../../../../platform/configuration/common/configuration.js';
 import { ServicesAccessor } from '../../../../../../platform/instantiation/common/instantiation.js';
+import { createInlineValueDecoration } from '../../../../debug/browser/debugEditorContribution.js';
 import { IDebugService, State } from '../../../../debug/common/debug.js';
 import { NotebookSetting } from '../../../common/notebookCommon.js';
 import { ICellExecutionStateChangedEvent, INotebookExecutionStateService, NotebookExecutionType } from '../../../common/notebookExecutionStateService.js';
-import { INotebookKernelMatchResult, INotebookKernelService, VariablesResult } from '../../../common/notebookKernelService.js';
+import { INotebookKernelService, VariablesResult } from '../../../common/notebookKernelService.js';
 import { INotebookActionContext, NotebookAction } from '../../controller/coreActions.js';
 import { ICellViewModel, INotebookEditor, INotebookEditorContribution } from '../../notebookBrowser.js';
 import { registerNotebookContribution } from '../../notebookEditorExtensions.js';
 
-// value from debug, may need to keep an eye on and shorter to account for cells having a narrower viewport width
-const MAX_INLINE_DECORATOR_LENGTH = 150; // Max string length of each inline decorator. If exceeded ... is added
-
 class InlineSegment {
 	constructor(public column: number, public text: string) {
 	}
@@ -136,57 +133,61 @@ export class NotebookInlineVariablesController extends Disposable implements INo
 			const fullCellRange = new Range(1, 1, lastLine, lastColumn);
 
 			const promises = providers.flatMap(provider => Promise.resolve(provider.provideInlineValues(model, fullCellRange, ctx, token)).then(async (result) => {
-				if (result) {
+				if (!result) {
+					return;
+				}
 
-					let kernel: INotebookKernelMatchResult;
-					const kernelVars: VariablesResult[] = [];
-					if (result.some(iv => iv.type === 'variable')) { // if anyone will need a lookup, get vars now to avoid needing to do it multiple times
-						if (!this.notebookEditor.hasModel()) {
-							return; // should not happen, a cell will be executed
-						}
-						kernel = this.notebookKernelService.getMatchingKernel(this.notebookEditor.textModel);
-						const variables = kernel.selected?.provideVariables(event.notebook, undefined, 'named', 0, token);
-						if (!variables) {
-							return;
-						}
+				const notebook = this.notebookEditor.textModel;
+				if (!notebook) {
+					return;
+				}
+
+				const kernel = this.notebookKernelService.getMatchingKernel(notebook);
+				const kernelVars: VariablesResult[] = [];
+				if (result.some(iv => iv.type === 'variable')) { // if anyone will need a lookup, get vars now to avoid needing to do it multiple times
+					if (!this.notebookEditor.hasModel()) {
+						return; // should not happen, a cell will be executed
+					}
+					const variables = kernel.selected?.provideVariables(event.notebook, undefined, 'named', 0, token);
+					if (variables) {
 						for await (const v of variables) {
 							kernelVars.push(v);
 						}
 					}
+				}
 
-					for (const iv of result) {
-						let text: string | undefined = undefined;
-						switch (iv.type) {
-							case 'text':
-								text = (iv as InlineValueText).text;
-								break;
-							case 'variable': {
-								const name = (iv as InlineValueVariableLookup).variableName;
-								if (!name) {
-									continue; // skip to next var, no valid name to lookup with
-								}
-								const value = kernelVars.find(v => v.name === name)?.value;
-								if (!value) {
-									continue;
-								}
-								text = format('{0} = {1}', name, value);
-								break;
+				for (const iv of result) {
+					let text: string | undefined = undefined;
+					switch (iv.type) {
+						case 'text':
+							text = (iv as InlineValueText).text;
+							break;
+						case 'variable': {
+							const name = (iv as InlineValueVariableLookup).variableName;
+							if (!name) {
+								continue; // skip to next var, no valid name to lookup with
 							}
-							case 'expression': {
-								continue; // no active debug session, so evaluate would break
+							const value = kernelVars.find(v => v.name === name)?.value;
+							if (!value) {
+								continue;
 							}
+							text = format('{0} = {1}', name, value);
+							break;
 						}
+						case 'expression': {
+							continue; // no active debug session, so evaluate would break
+						}
+					}
 
-						if (text) {
-							const line = iv.range.startLineNumber;
-							let lineSegments = lineDecorations.get(line);
-							if (!lineSegments) {
-								lineSegments = [];
-								lineDecorations.set(line, lineSegments);
-							}
-							if (!lineSegments.some(iv => iv.text === text)) { // de-dupe
-								lineSegments.push(new InlineSegment(iv.range.startColumn, text));
-							}
+					if (text) {
+						const line = iv.range.startLineNumber;
+						let lineSegments = lineDecorations.get(line);
+						if (!lineSegments) {
+							lineSegments = [];
+							lineDecorations.set(line, lineSegments);
+						}
+						if (!lineSegments.some(iv => iv.text === text)) { // de-dupe
+							lineSegments.push(new InlineSegment(iv.range.startColumn, text));
 						}
 					}
 				}
@@ -199,10 +200,18 @@ export class NotebookInlineVariablesController extends Disposable implements INo
 			// sort line segments and concatenate them into a decoration
 			lineDecorations.forEach((segments, line) => {
 				if (segments.length > 0) {
-					segments = segments.sort((a, b) => a.column - b.column);
+					segments.sort((a, b) => a.column - b.column);
 					const text = segments.map(s => s.text).join(', ');
-					inlineDecorations.push(...this.createNotebookInlineValueDecoration(line, text));
-
+					const editorWidth = cell.layoutInfo.editorWidth;
+					const fontInfo = cell.layoutInfo.fontInfo;
+					if (fontInfo && cell.textModel) {
+						const base = Math.floor((editorWidth - 50) / fontInfo.typicalHalfwidthCharacterWidth);
+						const lineLength = cell.textModel.getLineLength(line);
+						const available = Math.max(0, base - lineLength);
+						inlineDecorations.push(...createInlineValueDecoration(line, text, 'nb', undefined, available));
+					} else {
+						inlineDecorations.push(...createInlineValueDecoration(line, text, 'nb'));
+					}
 				}
 			});
 
@@ -231,6 +240,7 @@ export class NotebookInlineVariablesController extends Disposable implements INo
 			const processedVars = new Set<string>();
 
 			const functionRanges = this.getFunctionRanges(document);
+			const lineDecorations = new Map<number, InlineSegment[]>();
 
 			// For each variable name found in the kernel results
 			for (const varName of varNames) {
@@ -270,12 +280,38 @@ export class NotebookInlineVariablesController extends Disposable implements INo
 
 				if (lastMatchOutsideFunction) {
 					const inlineVal = varName + ' = ' + vars.find(v => v.name === varName)?.value;
-					inlineDecorations.push(...this.createNotebookInlineValueDecoration(lastMatchOutsideFunction.line, inlineVal));
+
+					let lineSegments = lineDecorations.get(lastMatchOutsideFunction.line);
+					if (!lineSegments) {
+						lineSegments = [];
+						lineDecorations.set(lastMatchOutsideFunction.line, lineSegments);
+					}
+					if (!lineSegments.some(iv => iv.text === inlineVal)) { // de-dupe
+						lineSegments.push(new InlineSegment(lastMatchOutsideFunction.column, inlineVal));
+					}
 				}
 
 				processedVars.add(varName);
 			}
 
+			// sort line segments and concatenate them into a decoration
+			lineDecorations.forEach((segments, line) => {
+				if (segments.length > 0) {
+					segments.sort((a, b) => a.column - b.column);
+					const text = segments.map(s => s.text).join(', ');
+					const editorWidth = cell.layoutInfo.editorWidth;
+					const fontInfo = cell.layoutInfo.fontInfo;
+					if (fontInfo && cell.textModel) {
+						const base = Math.floor((editorWidth - 50) / fontInfo.typicalHalfwidthCharacterWidth);
+						const lineLength = cell.textModel.getLineLength(line);
+						const available = Math.max(0, base - lineLength);
+						inlineDecorations.push(...createInlineValueDecoration(line, text, 'nb', undefined, available));
+					} else {
+						inlineDecorations.push(...createInlineValueDecoration(line, text, 'nb'));
+					}
+				}
+			});
+
 			if (inlineDecorations.length > 0) {
 				this.updateCellInlineDecorations(cell, inlineDecorations);
 				this.initCellContentListener(cell);
@@ -421,55 +457,6 @@ export class NotebookInlineVariablesController extends Disposable implements INo
 		this._clearNotebookInlineDecorations();
 	}
 
-	// taken from /src/vs/workbench/contrib/debug/browser/debugEditorContribution.ts
-	private createNotebookInlineValueDecoration(lineNumber: number, contentText: string, column = Constants.MAX_SAFE_SMALL_INTEGER): IModelDeltaDecoration[] {
-		// If decoratorText is too long, trim and add ellipses. This could happen for minified files with everything on a single line
-		if (contentText.length > MAX_INLINE_DECORATOR_LENGTH) {
-			contentText = contentText.substring(0, MAX_INLINE_DECORATOR_LENGTH) + '...';
-		}
-
-		return [
-			{
-				range: {
-					startLineNumber: lineNumber,
-					endLineNumber: lineNumber,
-					startColumn: column,
-					endColumn: column
-				},
-				options: {
-					description: 'nb-inline-value-decoration-spacer',
-					after: {
-						content: noBreakWhitespace,
-						cursorStops: InjectedTextCursorStops.None
-					},
-					showIfCollapsed: true,
-				}
-			},
-			{
-				range: {
-					startLineNumber: lineNumber,
-					endLineNumber: lineNumber,
-					startColumn: column,
-					endColumn: column
-				},
-				options: {
-					description: 'nb-inline-value-decoration',
-					after: {
-						content: this.replaceWsWithNoBreakWs(contentText),
-						inlineClassName: 'nb-inline-value',
-						inlineClassNameAffectsLetterSpacing: true,
-						cursorStops: InjectedTextCursorStops.None
-					},
-					showIfCollapsed: true,
-				}
-			},
-		];
-	}
-
-	private replaceWsWithNoBreakWs(str: string): string {
-		return str.replace(/[ \t]/g, noBreakWhitespace);
-	}
-
 	override dispose(): void {
 		super.dispose();
 		this._clearNotebookInlineDecorations();
@@ -478,7 +465,6 @@ export class NotebookInlineVariablesController extends Disposable implements INo
 	}
 }
 
-
 registerNotebookContribution(NotebookInlineVariablesController.id, NotebookInlineVariablesController);
 
 registerAction2(class ClearNotebookInlineValues extends NotebookAction {
