feat: improve display of HTML in the debugger

CHANGELOG.md

@@ -4,6 +4,7 @@ This changelog records changes to stable releases since 1.50.2. "TBA" changes he
 
 ## Nightly (only)
 
+- feat: improve display of HTML elements in the debugger
 - feat: add node tool picker completion for launch.json ([#1997](https://github.com/microsoft/vscode-js-debug/issues/1997))
 - fix: process attachment with `--inspect=:1234` style ([#2063](https://github.com/microsoft/vscode-js-debug/issues/2063))
 

src/adapter/clientCapabilities.ts

@@ -0,0 +1,17 @@
+/*---------------------------------------------------------
+ * Copyright (C) Microsoft Corporation. All rights reserved.
+ *--------------------------------------------------------*/
+
+import { injectable } from 'inversify';
+import Dap from '../dap/api';
+
+export interface IClientCapabilies {
+  value?: Dap.InitializeParams;
+}
+
+export const IClientCapabilies = Symbol('IClientCapabilies');
+
+@injectable()
+export class ClientCapabilities implements IClientCapabilies {
+  value?: Dap.InitializeParams | undefined;
+}

src/adapter/debugAdapter.ts

@@ -24,6 +24,7 @@ import { IShutdownParticipants } from '../ui/shutdownParticipants';
 import { IAsyncStackPolicy } from './asyncStackPolicy';
 import { BreakpointManager } from './breakpoints';
 import { ICdpProxyProvider } from './cdpProxy';
+import { IClientCapabilies } from './clientCapabilities';
 import { ICompletions } from './completions';
 import { IConsole } from './console';
 import { Diagnostics } from './diagnosics';
@@ -250,6 +251,7 @@ export class DebugAdapter implements IDisposable {
   ): Promise<Dap.InitializeResult | Dap.Error> {
     console.assert(params.linesStartAt1);
     console.assert(params.columnsStartAt1);
+    this._services.get<IClientCapabilies>(IClientCapabilies).value = params;
     const capabilities = DebugAdapter.capabilities(true);
     setTimeout(() => this.dap.initialized({}), 0);
     setTimeout(() => this._thread?.dapInitialized(), 0);
@@ -310,6 +312,7 @@ export class DebugAdapter implements IDisposable {
       supportsEvaluationOptions: extended ? true : false,
       supportsDebuggerProperties: extended ? true : false,
       supportsSetSymbolOptions: extended ? true : false,
+      supportsANSIStyling: true,
       // supportsDataBreakpoints: false,
       // supportsDisassembleRequest: false,
     };
@@ -515,6 +518,7 @@ export class DebugAdapter implements IDisposable {
       this._services.get(IExceptionPauseService),
       this._services.get(SmartStepper),
       this._services.get(IShutdownParticipants),
+      this._services.get(IClientCapabilies),
     );
 
     const profile = this._services.get<IProfileController>(IProfileController);

src/adapter/messageFormat.ts

@@ -148,13 +148,13 @@ export function formatCssAsAnsi(style: string): string {
           if (background) escapedSequence += `\x1b[48;5;${background}m`;
           break;
         case 'font-weight':
-          if (match[2] === 'bold') escapedSequence += '\x1b[1m';
+          if (match[2] === 'bold') escapedSequence += AnsiStyles.Bold;
           break;
         case 'font-style':
-          if (match[2] === 'italic') escapedSequence += '\x1b[3m';
+          if (match[2] === 'italic') escapedSequence += AnsiStyles.Italic;
           break;
         case 'text-decoration':
-          if (match[2] === 'underline') escapedSequence += '\x1b[4m';
+          if (match[2] === 'underline') escapedSequence += AnsiStyles.Underline;
           break;
         default:
           // css not mapped, skip
@@ -166,3 +166,31 @@ export function formatCssAsAnsi(style: string): string {
 
   return escapedSequence;
 }
+
+export const enum AnsiStyles {
+  Reset = '\x1b[0m',
+  Bold = '\x1b[1m',
+  Dim = '\x1b[2m',
+  Italic = '\x1b[3m',
+  Underline = '\x1b[4m',
+  Blink = '\x1b[5m',
+  Reverse = '\x1b[7m',
+  Hidden = '\x1b[8m',
+  Strikethrough = '\x1b[9m',
+  Black = '\x1b[30m',
+  Red = '\x1b[31m',
+  Green = '\x1b[32m',
+  Yellow = '\x1b[33m',
+  Blue = '\x1b[34m',
+  Magenta = '\x1b[35m',
+  Cyan = '\x1b[36m',
+  White = '\x1b[37m',
+  BrightBlack = '\x1b[30;1m',
+  BrightRed = '\x1b[31;1m',
+  BrightGreen = '\x1b[32;1m',
+  BrightYellow = '\x1b[33;1m',
+  BrightBlue = '\x1b[34;1m',
+  BrightMagenta = '\x1b[35;1m',
+  BrightCyan = '\x1b[36;1m',
+  BrightWhite = '\x1b[37;1m',
+}

src/adapter/objectPreview/index.ts

@@ -314,12 +314,12 @@ function appendKeyValue(
   if (key.length + separator.length > characterBudget) {
     return stringUtils.trimEnd(key, characterBudget);
   }
-  return `${key}${separator}${
+  return escapeAnsiInString(`${key}${separator}${
     stringUtils.trimMiddle(
       value,
       characterBudget - key.length - separator.length,
     )
-  }`; // Keep in sync with characterBudget calculation.
+  }`); // Keep in sync with characterBudget calculation.
 }
 
 function renderPropertyPreview(
@@ -341,6 +341,10 @@ function renderPropertyPreview(
   return appendKeyValue(name, ': ', prop.value ?? 'unknown', characterBudget);
 }
 
+function escapeAnsiInString(value: string) {
+  return value.replaceAll('\x1b', '\\x1b');
+}
+
 function quoteStringValue(value: string) {
   // Try a quote style that doesn't appear in the string, preferring/falling back to single quotes
   const quoteStyle = value.includes("'")
@@ -368,7 +372,7 @@ function renderValue(
       quote = false;
     }
     const value = stringUtils.trimMiddle(stringValue, quote ? budget - 2 : budget);
-    return quote ? quoteStringValue(value) : value;
+    return escapeAnsiInString(quote ? quoteStringValue(value) : value);
   }
 
   if (object.type === 'undefined') {

src/adapter/templates/getNodeChildren.ts

@@ -0,0 +1,31 @@
+/*---------------------------------------------------------
+ * Copyright (C) Microsoft Corporation. All rights reserved.
+ *--------------------------------------------------------*/
+
+import { remoteFunction } from '.';
+
+/**
+ * Returns an object containing array property descriptors for the given
+ * range of array indices.
+ */
+export const getNodeChildren = remoteFunction(function(
+  this: Node,
+  start: number,
+  count: number,
+) {
+  const result: Record<number, Node | string> = {};
+  const from = start === -1 ? 0 : start;
+  const to = count === -1 ? this.childNodes.length : start + count;
+  for (let i = from; i < to && i < this.childNodes.length; ++i) {
+    const cn = this.childNodes[i];
+    if (cn.nodeName === '#comment') {
+      result[i] = `<!-- ${cn.textContent} -->`;
+    } else if (cn.nodeName === '#text') {
+      result[i] = cn.textContent || '';
+    } else {
+      result[i] = cn;
+    }
+  }
+
+  return result;
+});

src/adapter/threads.ts

@@ -27,6 +27,7 @@ import { ITarget } from '../targets/targets';
 import { IShutdownParticipants } from '../ui/shutdownParticipants';
 import { BreakpointManager, EntryBreakpointMode } from './breakpoints';
 import { UserDefinedBreakpoint } from './breakpoints/userDefinedBreakpoint';
+import { IClientCapabilies } from './clientCapabilities';
 import { ICompletions } from './completions';
 import { ExceptionMessage, IConsole, QueryObjectsMessage } from './console';
 import { customBreakpoints } from './customBreakpoints';
@@ -221,12 +222,20 @@ export class Thread implements IVariableStoreLocationProvider {
     private readonly exceptionPause: IExceptionPauseService,
     private readonly _smartStepper: SmartStepper,
     private readonly shutdown: IShutdownParticipants,
+    clientCapabilities: IClientCapabilies,
   ) {
     this._dap = new DeferredContainer(dap);
     this._sourceContainer = sourceContainer;
     this._cdp = cdp;
     this.id = Thread._lastThreadId++;
-    this.replVariables = new VariableStore(renameProvider, this._cdp, dap, launchConfig, this);
+    this.replVariables = new VariableStore(
+      renameProvider,
+      this._cdp,
+      dap,
+      launchConfig,
+      clientCapabilities,
+      this,
+    );
     sourceContainer.onSourceMappedSteppingChange(() => this.refreshStackTrace());
     this._initialize();
   }