chrome-devtools-frontend 1.0.1703574 → 1.0.1705227

package/front_end/models/source_map_scopes/NamesResolver.ts

@@ -9,13 +9,25 @@ import * as Protocol from '../../generated/protocol.js';
 import type * as Bindings from '../bindings/bindings.js';
 import * as Formatter from '../formatter/formatter.js';
 
+/**
+ * The result of resolving a generated scope via the source map's mappings/names.
+ */
+interface ResolvedScope {
+  /** Generated name -> authored name, for generated names that we could map. */
+  variableMapping: Map<string, string>;
+  thisMapping: string|null;
+  /** All generated names declared by the scope, including ones that we couldn't map. */
+  generatedNames: string[];
+}
+
 interface CachedScopeMap {
   sourceMap: SDK.SourceMap.SourceMap|undefined;
-  mappingPromise: Promise<{variableMapping: Map<string, string>, thisMapping: string|null}>;
+  mappingPromise: Promise<ResolvedScope>;
 }
 
 const scopeToCachedIdentifiersMap = new WeakMap<Formatter.FormatterWorkerPool.ScopeTreeNode, CachedScopeMap>();
-const cachedMapByCallFrame = new WeakMap<SDK.DebuggerModel.CallFrame, Array<Map<string, string|null>>>();
+const cachedMapByCallFrame =
+    new WeakMap<SDK.DebuggerModel.CallFrame, Formatter.FormatterWorkerPool.ScopeVariableMapping[]>();
 
 export async function getTextFor(contentProvider: TextUtils.ContentProvider.ContentProvider):
     Promise<TextUtils.Text.Text|null> {
@@ -119,9 +131,11 @@ export async function findScopeChainForDebuggerScope(scope: SDK.DebuggerModel.Sc
   const {scopeTree, text} = scopeTreeAndText;
 
   // Compute the offset within the scope tree coordinate space.
+  const start = script.rawLocationToRelativeLocation(startLocation);
+  const end = script.rawLocationToRelativeLocation(endLocation);
   const scopeOffsets = {
-    start: text.offsetFromPosition(startLocation.lineNumber, startLocation.columnNumber),
-    end: text.offsetFromPosition(endLocation.lineNumber, endLocation.columnNumber),
+    start: text.offsetFromPosition(start.lineNumber, start.columnNumber),
+    end: text.offsetFromPosition(end.lineNumber, end.columnNumber),
   };
 
   return findScopeChain(scopeTree, scopeOffsets);
@@ -191,13 +205,13 @@ const enum Punctuation {
 const resolveDebuggerScope =
     async(scope: SDK.DebuggerModel.ScopeChainEntry,
           debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding):
-        Promise<{variableMapping: Map<string, string>, thisMapping: string | null}> => {
+        Promise<ResolvedScope> => {
           if (!scope.callFrame()
                    .debuggerModel.target()
                    .targetManager()
                    .settings.resolve(SDK.SDKSettings.jsSourceMapsEnabledSettingDescriptor)
                    .get()) {
-            return {variableMapping: new Map(), thisMapping: null};
+            return {variableMapping: new Map(), thisMapping: null, generatedNames: []};
           }
           const script = scope.callFrame().script;
           const scopeChain = await findScopeChainForDebuggerScope(scope);
@@ -206,10 +220,10 @@ const resolveDebuggerScope =
 
 const resolveScope = async(script: SDK.Script.Script, scopeChain: Formatter.FormatterWorkerPool.ScopeTreeNode[],
                            debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding):
-    Promise<{variableMapping: Map<string, string>, thisMapping: string | null}> => {
+    Promise<ResolvedScope> => {
       const parsedScope = scopeChain[scopeChain.length - 1];
       if (!parsedScope) {
-        return {variableMapping: new Map<string, string>(), thisMapping: null};
+        return {variableMapping: new Map<string, string>(), thisMapping: null, generatedNames: []};
       }
       let cachedScopeMap = scopeToCachedIdentifiersMap.get(parsedScope);
       const sourceMap = script.sourceMap();
@@ -221,7 +235,7 @@ const resolveScope = async(script: SDK.Script.Script, scopeChain: Formatter.Form
               let thisMapping = null;
 
               if (!sourceMap) {
-                return {variableMapping, thisMapping};
+                return {variableMapping, thisMapping, generatedNames: []};
               }
               // Extract as much as possible from SourceMap and resolve
               // missing identifier names from SourceMap ranges.
@@ -259,7 +273,7 @@ const resolveScope = async(script: SDK.Script.Script, scopeChain: Formatter.Form
 
               const parsedVariables = await scopeIdentifiers(script, parsedScope, scopeChain.slice(0, -1));
               if (!parsedVariables) {
-                return {variableMapping, thisMapping};
+                return {variableMapping, thisMapping, generatedNames: []};
               }
               for (const id of parsedVariables.boundVariables) {
                 resolveEntry(id, sourceName => {
@@ -277,7 +291,8 @@ const resolveScope = async(script: SDK.Script.Script, scopeChain: Formatter.Form
                 });
               }
               await Promise.all(promises).then(getScopeResolvedForTest());
-              return {variableMapping, thisMapping};
+              const generatedNames = parsedVariables.boundVariables.map(id => id.name);
+              return {variableMapping, thisMapping, generatedNames};
             })();
         cachedScopeMap = {sourceMap, mappingPromise: identifiersPromise};
         scopeToCachedIdentifiersMap.set(parsedScope, {sourceMap, mappingPromise: identifiersPromise});
@@ -401,23 +416,39 @@ export const resolveScopeChain =
           return scopes.map(scope => new ScopeWithSourceMappedVariables(scope, thisObject, debuggerWorkspaceBinding));
         };
 
-function reverseScopeMapping(variableMapping: Map<string, string>): Map<string, string|null> {
-  const result = new Map<string, string|null>();
-  for (const [compiledName, originalName] of variableMapping) {
-    if (originalName && !result.has(originalName)) {
-      result.set(originalName, compiledName);
+/**
+ * Converts the generated name -> authored name mapping of a resolved scope into the
+ * authored name -> generated name form expected by `javaScriptSubstitute`.
+ */
+function toScopeVariableMapping({variableMapping, generatedNames}: ResolvedScope):
+    Formatter.FormatterWorkerPool.ScopeVariableMapping {
+  const bindings = new Map<string, string|null>();
+  for (const [generatedName, authoredName] of variableMapping) {
+    // Multiple generated names can map to the same authored name. We pick the first one. The worker still
+    // learns about the others via `generatedNames`, which it needs to detect shadowing of outer bindings.
+    if (authoredName && !bindings.has(authoredName)) {
+      bindings.set(authoredName, generatedName);
     }
   }
-  return result;
+  return {bindings, generatedNames};
 }
 
 /**
- * @returns An array of mappings (from inner-most to outer-most scope) of original name -> compiled name or binding expression.
+ * Source map scopes don't tell us which generated names a generated range declares. The worker falls back
+ * to the free identifiers of the binding expressions in that case.
+ */
+function fromSourceMapScopes(mappedVariables: Array<Map<string, string|null>>):
+    Formatter.FormatterWorkerPool.ScopeVariableMapping[] {
+  return mappedVariables.map(bindings => ({bindings, generatedNames: []}));
+}
+
+/**
+ * @returns An array of scopes (from inner-most to outer-most) with their original name -> compiled name or binding expression mappings.
  */
 export const allVariablesInCallFrame = async(
     callFrame: SDK.DebuggerModel.CallFrame,
     debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding):
-    Promise<Array<Map<string, string|null>>> => {
+    Promise<Formatter.FormatterWorkerPool.ScopeVariableMapping[]> => {
       if (!callFrame.debuggerModel.target()
                .targetManager()
                .settings.resolve(SDK.SDKSettings.jsSourceMapsEnabledSettingDescriptor)
@@ -435,36 +466,37 @@ export const allVariablesInCallFrame = async(
         const mappedVariables =
             sourceMap?.resolveMappedVariablesAtPosition(callFrame.location(), callFrame.returnValue() !== null);
         if (mappedVariables) {
-          cachedMapByCallFrame.set(callFrame, mappedVariables);
-          return mappedVariables;
+          const result = fromSourceMapScopes(mappedVariables);
+          cachedMapByCallFrame.set(callFrame, result);
+          return result;
         }
       }
 
       const scopeChain = callFrame.scopeChain().filter(scope => !scope.empty());
-      const nameMappings =
+      const resolvedScopes =
           await Promise.all(scopeChain.map(scope => resolveDebuggerScope(scope, debuggerWorkspaceBinding)));
-      const reverseMapping = nameMappings.map(({variableMapping}) => reverseScopeMapping(variableMapping));
-      cachedMapByCallFrame.set(callFrame, reverseMapping);
-      return reverseMapping;
+      const result = resolvedScopes.map(toScopeVariableMapping);
+      cachedMapByCallFrame.set(callFrame, result);
+      return result;
     };
 
 /**
- * @returns An array of mappings (from inner-most to outer-most scope) of original name -> compiled name or binding expression.
+ * @returns An array of scopes (from inner-most to outer-most) with their original name -> compiled name or binding expression mappings.
  */
 export const allVariablesAtPosition =
     async(location: SDK.DebuggerModel.Location,
           debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding):
-        Promise<Array<Map<string, string|null>>> => {
-          const reverseMapping: Array<Map<string, string|null>> = [];
+        Promise<Formatter.FormatterWorkerPool.ScopeVariableMapping[]> => {
+          const result: Formatter.FormatterWorkerPool.ScopeVariableMapping[] = [];
           const script = location.script();
           if (!script) {
-            return reverseMapping;
+            return result;
           }
           if (!script.debuggerModel.target()
                    .targetManager()
                    .settings.resolve(SDK.SDKSettings.jsSourceMapsEnabledSettingDescriptor)
                    .get()) {
-            return reverseMapping;
+            return result;
           }
 
           if (Root.Runtime.hostConfig.devToolsSourceMapScopesInSourcesPanel?.enabled) {
@@ -472,25 +504,25 @@ export const allVariablesAtPosition =
                 script.sourceMap() ?? await script.debuggerModel.sourceMapManager().sourceMapForClientPromise(script);
             const mappedVariables = sourceMap?.resolveMappedVariablesAtPosition(location);
             if (mappedVariables) {
-              return mappedVariables;
+              return fromSourceMapScopes(mappedVariables);
             }
           }
 
           const scopeTreeAndText = await computeScopeTree(script);
           if (!scopeTreeAndText) {
-            return reverseMapping;
+            return result;
           }
 
           const {scopeTree, text} = scopeTreeAndText;
-          const locationOffset = text.offsetFromPosition(location.lineNumber, location.columnNumber);
+          const {lineNumber, columnNumber} = script.rawLocationToRelativeLocation(location);
+          const locationOffset = text.offsetFromPosition(lineNumber, columnNumber);
           const scopeChain = findScopeChain(scopeTree, {start: locationOffset, end: locationOffset});
 
           while (scopeChain.length > 0) {
-            const {variableMapping} = await resolveScope(script, scopeChain, debuggerWorkspaceBinding);
-            reverseMapping.push(reverseScopeMapping(variableMapping));
+            result.push(toScopeVariableMapping(await resolveScope(script, scopeChain, debuggerWorkspaceBinding)));
             scopeChain.pop();
           }
-          return reverseMapping;
+          return result;
         };
 
 export const resolveThisObject = async(
@@ -746,8 +778,8 @@ export class RemoteObject extends SDK.RemoteObject.RemoteObject {
  * start or if the function scope does not start with a left paren (e.g., arrow
  * function with one parameter), the resolution returns null.
  **/
-async function getFunctionNameFromScopeStart(
-    script: SDK.Script.Script, lineNumber: number, columnNumber: number): Promise<string|null> {
+async function getFunctionNameFromScopeStart(script: SDK.Script.Script, rawLineNumber: number,
+                                             rawColumnNumber: number): Promise<string|null> {
   // To reduce the overhead of resolving function names,
   // we check for source maps first and immediately leave
   // this function if the script doesn't have a sourcemap.
@@ -756,6 +788,11 @@ async function getFunctionNameFromScopeStart(
     return null;
   }
 
+  // The source map and the script text are relative to the start of the script, whereas
+  // raw V8 positions in inline scripts are relative to the start of the document.
+  const {lineNumber, columnNumber} =
+      script.rawLocationToRelativeLocation({lineNumber: rawLineNumber, columnNumber: rawColumnNumber});
+
   const scopeName = sourceMap.findOriginalFunctionName({line: lineNumber, column: columnNumber});
   if (scopeName !== null) {
     return scopeName;

package/front_end/models/source_map_scopes/ScopeChainModel.ts

@@ -3,10 +3,9 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
-import * as SDK from '../../core/sdk/sdk.js';
-import type * as Bindings from '../bindings/bindings.js';
+import type * as SDK from '../../core/sdk/sdk.js';
 
-import {resolveScopeChain} from './NamesResolver.js';
+import {Events as ScopeChainResolverEvents, type ScopeChainResolver} from './ScopeChainResolver.js';
 
 /**
  * This class is responsible for resolving / updating the scope chain for a specific {@link SDK.DebuggerModel.CallFrame}
@@ -18,57 +17,35 @@ import {resolveScopeChain} from './NamesResolver.js';
  *
  * Source maps can be enabled/disabled dynamically and debugger plugins can attach debug info after the fact.
  *
- * This class tracks all that and sends events with the latest scope chain for a specific call frame.
+ * The {@link ScopeChainResolver} tracks all that and invalidates its cache accordingly. This class
+ * sends events with the latest scope chain for a specific call frame.
  */
 export class ScopeChainModel extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
-  static readonly #cachedScopeChainByCallFrame =
-      new WeakMap<SDK.DebuggerModel.CallFrame, Promise<SDK.DebuggerModel.ScopeChainEntry[]>>();
-
   readonly #callFrame: SDK.DebuggerModel.CallFrame;
-  readonly #debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding;
+  readonly #scopeChainResolver: ScopeChainResolver;
 
   /** We use the `Throttler` here to make sure that `#boundUpdate` is not run multiple times simultanously */
   readonly #throttler = new Common.Throttler.Throttler(5);
   readonly #boundUpdate = this.#update.bind(this);
 
-  constructor(callFrame: SDK.DebuggerModel.CallFrame,
-              debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding) {
+  constructor(callFrame: SDK.DebuggerModel.CallFrame, scopeChainResolver: ScopeChainResolver) {
     super();
     this.#callFrame = callFrame;
-    this.#debuggerWorkspaceBinding = debuggerWorkspaceBinding;
-    this.#callFrame.debuggerModel.addEventListener(
-        SDK.DebuggerModel.Events.DebugInfoAttached, this.#debugInfoAttached, this);
-    this.#callFrame.debuggerModel.sourceMapManager().addEventListener(SDK.SourceMapManager.Events.SourceMapAttached,
-                                                                      this.#sourceMapChanged, this);
-    this.#callFrame.debuggerModel.sourceMapManager().addEventListener(SDK.SourceMapManager.Events.SourceMapDetached,
-                                                                      this.#sourceMapChanged, this);
+    this.#scopeChainResolver = scopeChainResolver;
+    this.#scopeChainResolver.addEventListener(ScopeChainResolverEvents.SCOPE_CHAIN_INVALIDATED,
+                                              this.#scopeChainInvalidated, this);
 
     void this.#throttler.schedule(this.#boundUpdate);
   }
 
   dispose(): void {
-    this.#callFrame.debuggerModel.removeEventListener(
-        SDK.DebuggerModel.Events.DebugInfoAttached, this.#debugInfoAttached, this);
-    this.#callFrame.debuggerModel.sourceMapManager().removeEventListener(SDK.SourceMapManager.Events.SourceMapAttached,
-                                                                         this.#sourceMapChanged, this);
-    this.#callFrame.debuggerModel.sourceMapManager().removeEventListener(SDK.SourceMapManager.Events.SourceMapDetached,
-                                                                         this.#sourceMapChanged, this);
+    this.#scopeChainResolver.removeEventListener(ScopeChainResolverEvents.SCOPE_CHAIN_INVALIDATED,
+                                                 this.#scopeChainInvalidated, this);
     this.listeners?.clear();
   }
 
-  static resolveScopeChain(callFrame: SDK.DebuggerModel.CallFrame,
-                           debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding):
-      Promise<SDK.DebuggerModel.ScopeChainEntry[]> {
-    let cachedPromise = ScopeChainModel.#cachedScopeChainByCallFrame.get(callFrame);
-    if (!cachedPromise) {
-      cachedPromise = resolveScopeChain(callFrame, debuggerWorkspaceBinding);
-      ScopeChainModel.#cachedScopeChainByCallFrame.set(callFrame, cachedPromise);
-    }
-    return cachedPromise;
-  }
-
   resolveScopeChain(): Promise<SDK.DebuggerModel.ScopeChainEntry[]> {
-    return ScopeChainModel.resolveScopeChain(this.#callFrame, this.#debuggerWorkspaceBinding);
+    return this.#scopeChainResolver.resolveScopeChain(this.#callFrame);
   }
 
   async #update(): Promise<void> {
@@ -76,17 +53,8 @@ export class ScopeChainModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.dispatchEventToListeners(Events.SCOPE_CHAIN_UPDATED, new ScopeChain(scopeChain));
   }
 
-  #debugInfoAttached(event: Common.EventTarget.EventTargetEvent<SDK.Script.Script>): void {
+  #scopeChainInvalidated(event: Common.EventTarget.EventTargetEvent<SDK.Script.Script>): void {
     if (event.data === this.#callFrame.script) {
-      ScopeChainModel.#cachedScopeChainByCallFrame.delete(this.#callFrame);
-      void this.#throttler.schedule(this.#boundUpdate);
-    }
-  }
-
-  #sourceMapChanged(event: Common.EventTarget
-                        .EventTargetEvent<{client: SDK.Script.Script, sourceMap: SDK.SourceMap.SourceMap}>): void {
-    if (event.data.client === this.#callFrame.script) {
-      ScopeChainModel.#cachedScopeChainByCallFrame.delete(this.#callFrame);
       void this.#throttler.schedule(this.#boundUpdate);
     }
   }

package/front_end/models/source_map_scopes/ScopeChainResolver.ts

@@ -0,0 +1,101 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Common from '../../core/common/common.js';
+import * as Root from '../../core/root/root.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import type * as Bindings from '../bindings/bindings.js';
+
+import {resolveScopeChain} from './NamesResolver.js';
+
+/**
+ * Resolves and caches the scope chain for {@link SDK.DebuggerModel.CallFrame}s.
+ *
+ * There is one instance per `Universe`. Caching the resolved scope chain allows different consumers
+ * (e.g. the Scope view and the inline values in the editor) to share the exact same
+ * {@link SDK.DebuggerModel.ScopeChainEntry} and {@link SDK.RemoteObject.RemoteObject} instances for a
+ * given pause, without redundant CDP evaluations.
+ *
+ * The cache for a script is invalidated whenever debugging info (e.g. from a debugger language plugin)
+ * or a source map is attached to or detached from that script. The {@link Events.SCOPE_CHAIN_INVALIDATED}
+ * event is dispatched afterwards, so consumers can re-resolve the scope chain.
+ */
+export class ScopeChainResolver extends Common.ObjectWrapper.ObjectWrapper<EventTypes> implements
+    SDK.TargetManager.SDKModelObserver<SDK.DebuggerModel.DebuggerModel> {
+  readonly #debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding;
+  readonly #cache = new WeakMap<SDK.Script.Script,
+                                WeakMap<SDK.DebuggerModel.CallFrame, Promise<SDK.DebuggerModel.ScopeChainEntry[]>>>();
+
+  constructor(targetManager: SDK.TargetManager.TargetManager,
+              debuggerWorkspaceBinding: Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding) {
+    super();
+    this.#debuggerWorkspaceBinding = debuggerWorkspaceBinding;
+    targetManager.observeModels(SDK.DebuggerModel.DebuggerModel, this);
+  }
+
+  /**
+   * @deprecated Pass the `ScopeChainResolver` of the `Universe` via constructor instead.
+   */
+  static instance(): ScopeChainResolver {
+    // TODO(crbug.com/458180550): Remove once all callers receive the instance via constructor.
+    return Root.DevToolsContext.globalInstance().get(ScopeChainResolver);
+  }
+
+  modelAdded(debuggerModel: SDK.DebuggerModel.DebuggerModel): void {
+    debuggerModel.addEventListener(SDK.DebuggerModel.Events.DebugInfoAttached, this.#debugInfoAttached, this);
+    debuggerModel.sourceMapManager().addEventListener(SDK.SourceMapManager.Events.SourceMapAttached,
+                                                      this.#sourceMapChanged, this);
+    debuggerModel.sourceMapManager().addEventListener(SDK.SourceMapManager.Events.SourceMapDetached,
+                                                      this.#sourceMapChanged, this);
+  }
+
+  modelRemoved(debuggerModel: SDK.DebuggerModel.DebuggerModel): void {
+    debuggerModel.removeEventListener(SDK.DebuggerModel.Events.DebugInfoAttached, this.#debugInfoAttached, this);
+    debuggerModel.sourceMapManager().removeEventListener(SDK.SourceMapManager.Events.SourceMapAttached,
+                                                         this.#sourceMapChanged, this);
+    debuggerModel.sourceMapManager().removeEventListener(SDK.SourceMapManager.Events.SourceMapDetached,
+                                                         this.#sourceMapChanged, this);
+  }
+
+  /**
+   * Returns the (cached) resolved scope chain for `callFrame`. Repeated calls return the same promise
+   * until the cache for the call frame's script is invalidated.
+   */
+  resolveScopeChain(callFrame: SDK.DebuggerModel.CallFrame): Promise<SDK.DebuggerModel.ScopeChainEntry[]> {
+    let cacheForScript = this.#cache.get(callFrame.script);
+    if (!cacheForScript) {
+      cacheForScript = new WeakMap();
+      this.#cache.set(callFrame.script, cacheForScript);
+    }
+    let cachedPromise = cacheForScript.get(callFrame);
+    if (!cachedPromise) {
+      cachedPromise = resolveScopeChain(callFrame, this.#debuggerWorkspaceBinding);
+      cacheForScript.set(callFrame, cachedPromise);
+    }
+    return cachedPromise;
+  }
+
+  #invalidate(script: SDK.Script.Script): void {
+    this.#cache.delete(script);
+    this.dispatchEventToListeners(Events.SCOPE_CHAIN_INVALIDATED, script);
+  }
+
+  #debugInfoAttached(event: Common.EventTarget.EventTargetEvent<SDK.Script.Script>): void {
+    this.#invalidate(event.data);
+  }
+
+  #sourceMapChanged(event: Common.EventTarget
+                        .EventTargetEvent<{client: SDK.Script.Script, sourceMap: SDK.SourceMap.SourceMap}>): void {
+    this.#invalidate(event.data.client);
+  }
+}
+
+export const enum Events {
+  SCOPE_CHAIN_INVALIDATED = 'ScopeChainInvalidated',
+}
+
+export interface EventTypes {
+  /** Dispatched with the script for which the cached scope chains have been invalidated. */
+  [Events.SCOPE_CHAIN_INVALIDATED]: SDK.Script.Script;
+}

package/front_end/models/source_map_scopes/source_map_scopes.ts

@@ -5,9 +5,11 @@
 import * as FunctionCodeResolver from './FunctionCodeResolver.js';
 import * as NamesResolver from './NamesResolver.js';
 import * as ScopeChainModel from './ScopeChainModel.js';
+import * as ScopeChainResolver from './ScopeChainResolver.js';
 
 export {
   FunctionCodeResolver,
   NamesResolver,
   ScopeChainModel,
+  ScopeChainResolver,
 };

package/front_end/panels/accessibility/AccessibilityAnnouncementRecordingListView.ts

@@ -4,6 +4,7 @@
 
 import '../../ui/legacy/components/data_grid/data_grid.js';
 
+import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
@@ -45,6 +46,14 @@ const UIStrings = {
    * @description Accessible title for the announcements data grid.
    */
   ariaLiveRecordingList: 'Accessibility Announcements',
+  /**
+   * @description Context menu item for copying the announcement message text to the clipboard.
+   */
+  copyMessage: 'Copy message',
+  /**
+   * @description Context menu item for copying the announcement element HTML snippet to the clipboard.
+   */
+  copyElementHtml: 'Copy element HTML',
 } as const;
 const str_ =
     i18n.i18n.registerUIStrings('panels/accessibility/AccessibilityAnnouncementRecordingListView.ts', UIStrings);
@@ -53,6 +62,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export interface ViewInput {
   items: readonly A11yAnnouncement[];
   selectedItem: A11yAnnouncement|null;
+  onContextMenu: (menu: UI.ContextMenu.ContextMenu, item: A11yAnnouncement) => void;
   onSelect: (item: A11yAnnouncement) => void;
   onDeselect: () => void;
 }
@@ -92,7 +102,12 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
           return html`
             <tr
               ?selected=${item === input.selectedItem}
-              @select=${() => input.onSelect(item)}>
+              @select=${() => input.onSelect(item)}
+              @contextmenu=${(e: CustomEvent<UI.ContextMenu.ContextMenu>) => {
+                if (e.detail instanceof UI.ContextMenu.ContextMenu) {
+                  input.onContextMenu(e.detail, item);
+                }
+              }}>
               <td data-value=${item.time}>
                 <span>${timeString}</span>
               </td>
@@ -159,10 +174,27 @@ export class AccessibilityAnnouncementRecordingListView extends UI.Widget.VBox {
     this.requestUpdate();
   }
 
+  #populateContextMenu(contextMenu: UI.ContextMenu.ContextMenu, item: A11yAnnouncement): void {
+    if (item.message) {
+      contextMenu.clipboardSection().appendItem(i18nString(UIStrings.copyMessage), () => {
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(item.message);
+      }, {jslogContext: 'copy-message'});
+    }
+
+    if (item.element) {
+      contextMenu.clipboardSection().appendItem(i18nString(UIStrings.copyElementHtml), () => {
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(item.element);
+      }, {jslogContext: 'copy-element-html'});
+    }
+  }
+
   override performUpdate(): void {
     const input: ViewInput = {
       items: this.#items,
       selectedItem: this.#selectedItem,
+      onContextMenu: (contextMenu: UI.ContextMenu.ContextMenu, item: A11yAnnouncement) => {
+        this.#populateContextMenu(contextMenu, item);
+      },
       onSelect: (item: A11yAnnouncement) => {
         this.selectedItem = item;
         this.#onSelect?.(item);

package/front_end/panels/accessibility/AccessibilityAnnouncementRecordingView.ts

@@ -744,14 +744,6 @@ export function validateAndSanitizeAnnouncement(payload: unknown): A11yAnnouncem
   };
 }
 
-export function escapeCsvValue(val: string): string {
-  const escaped = val.replace(/"/g, '""');
-  if (escaped.includes(',') || escaped.includes('\n') || escaped.includes('\r') || escaped.includes('"')) {
-    return `"${escaped}"`;
-  }
-  return escaped;
-}
-
 export function buildCsvContent(announcements: readonly A11yAnnouncement[]): string {
   const csvRows: string[] = [];
   csvRows.push(['Time', 'API', 'Politeness', 'Message'].join(','));
@@ -759,10 +751,10 @@ export function buildCsvContent(announcements: readonly A11yAnnouncement[]): str
   for (const item of announcements) {
     const timeString = new Date(item.time).toISOString();
     const row = [
-      escapeCsvValue(timeString),
-      escapeCsvValue(item.api),
-      escapeCsvValue(item.politeness),
-      escapeCsvValue(item.message),
+      Platform.StringUtilities.escapeCsvCell(timeString),
+      Platform.StringUtilities.escapeCsvCell(item.api),
+      Platform.StringUtilities.escapeCsvCell(item.politeness),
+      Platform.StringUtilities.escapeCsvCell(item.message),
     ];
     csvRows.push(row.join(','));
   }