debug: fix escape characters shown when hovering DOM element (microsoft#230176)

Merge pull request microsoft#229880 from microsoft/connor4312/issue229874

debug: fix escape characters shown when hovering DOM element

Co-authored-by: Daniel Imms <[email protected]>

Author: connor4312

src/vs/workbench/contrib/debug/browser/debugExpressionRenderer.ts

@@ -49,6 +49,26 @@ const MAX_VALUE_RENDER_LENGTH_IN_VIEWLET = 1024;
 const booleanRegex = /^(true|false)$/i;
 const stringRegex = /^(['"]).*\1$/;
 
+const enum Cls {
+	Value = 'value',
+	Unavailable = 'unavailable',
+	Error = 'error',
+	Changed = 'changed',
+	Boolean = 'boolean',
+	String = 'string',
+	Number = 'number',
+}
+
+const allClasses: readonly Cls[] = Object.keys({
+	[Cls.Value]: 0,
+	[Cls.Unavailable]: 0,
+	[Cls.Error]: 0,
+	[Cls.Changed]: 0,
+	[Cls.Boolean]: 0,
+	[Cls.String]: 0,
+	[Cls.Number]: 0,
+} satisfies { [key in Cls]: unknown }) as Cls[];
+
 export class DebugExpressionRenderer {
 	private displayType: IObservable<boolean>;
 	private readonly linkDetector: LinkDetector;
@@ -110,29 +130,32 @@ export class DebugExpressionRenderer {
 		let value = typeof expressionOrValue === 'string' ? expressionOrValue : expressionOrValue.value;
 
 		// remove stale classes
-		container.className = 'value';
+		for (const cls of allClasses) {
+			container.classList.remove(cls);
+		}
+		container.classList.add(Cls.Value);
 		// when resolving expressions we represent errors from the server as a variable with name === null.
 		if (value === null || ((expressionOrValue instanceof Expression || expressionOrValue instanceof Variable || expressionOrValue instanceof ReplEvaluationResult) && !expressionOrValue.available)) {
-			container.classList.add('unavailable');
+			container.classList.add(Cls.Unavailable);
 			if (value !== Expression.DEFAULT_VALUE) {
-				container.classList.add('error');
+				container.classList.add(Cls.Error);
 			}
 		} else {
 			if (typeof expressionOrValue !== 'string' && options.showChanged && expressionOrValue.valueChanged && value !== Expression.DEFAULT_VALUE) {
 				// value changed color has priority over other colors.
-				container.className = 'value changed';
+				container.classList.add(Cls.Changed);
 				expressionOrValue.valueChanged = false;
 			}
 
 			if (options.colorize && typeof expressionOrValue !== 'string') {
 				if (expressionOrValue.type === 'number' || expressionOrValue.type === 'boolean' || expressionOrValue.type === 'string') {
 					container.classList.add(expressionOrValue.type);
 				} else if (!isNaN(+value)) {
-					container.classList.add('number');
+					container.classList.add(Cls.Number);
 				} else if (booleanRegex.test(value)) {
-					container.classList.add('boolean');
+					container.classList.add(Cls.Boolean);
 				} else if (stringRegex.test(value)) {
-					container.classList.add('string');
+					container.classList.add(Cls.String);
 				}
 			}
 		}

src/vs/workbench/contrib/debug/browser/debugHover.ts

@@ -321,8 +321,7 @@ export class DebugHoverWidget implements IContentWidget {
 		this.valueContainer.hidden = true;
 
 		this.expressionToRender = expression;
-		this.complexValueTitle.textContent = expression.value;
-		this.complexValueTitle.title = expression.value;
+		store.add(this.expressionRenderer.renderValue(this.complexValueTitle, expression, { hover: false, session }));
 		this.editor.layoutContentWidget(this);
 		this.tree.scrollTop = 0;
 		this.tree.scrollLeft = 0;

src/vs/workbench/contrib/debug/test/browser/baseDebugView.test.ts

@@ -116,26 +116,26 @@ suite('Debug - Base Debug View', () => {
 		let container = $('.container');
 		const store = disposables.add(new DisposableStore());
 		store.add(renderer.renderValue(container, 'render \n me', {}));
-		assert.strictEqual(container.className, 'value');
+		assert.strictEqual(container.className, 'container value');
 		assert.strictEqual(container.textContent, 'render \n me');
 
 		const expression = new Expression('console');
 		expression.value = 'Object';
 		container = $('.container');
 		store.add(renderer.renderValue(container, expression, { colorize: true }));
-		assert.strictEqual(container.className, 'value unavailable error');
+		assert.strictEqual(container.className, 'container value unavailable error');
 
 		expression.available = true;
 		expression.value = '"string value"';
 		container = $('.container');
 		store.add(renderer.renderValue(container, expression, { colorize: true }));
-		assert.strictEqual(container.className, 'value string');
+		assert.strictEqual(container.className, 'container value string');
 		assert.strictEqual(container.textContent, '"string value"');
 
 		expression.type = 'boolean';
 		container = $('.container');
 		store.add(renderer.renderValue(container, expression, { colorize: true }));
-		assert.strictEqual(container.className, 'value boolean');
+		assert.strictEqual(container.className, 'container value boolean');
 		assert.strictEqual(container.textContent, expression.value);
 
 		expression.value = 'this is a long string';