chrome-devtools-frontend 1.0.1690531 → 1.0.1695017

package/front_end/models/emulation/DeviceModeModel.ts

@@ -8,10 +8,8 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as TextUtils from '../../core/text_utils/text_utils.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Geometry from '../geometry/geometry.js';
-import * as Workspace from '../workspace/workspace.js';
 
 import {
   type Cutout,
@@ -128,19 +126,17 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   readonly #targetManager: SDK.TargetManager.TargetManager;
   readonly #settings: Common.Settings.Settings;
   readonly #multitargetNetworkManager: SDK.NetworkManager.MultitargetNetworkManager;
-  readonly #fileManager: Workspace.FileManager.FileManager;
+  #lastScreenshotBlobUrl: string|null = null;
 
   constructor(
       targetManager: SDK.TargetManager.TargetManager,
       settings: Common.Settings.Settings,
       multitargetNetworkManager: SDK.NetworkManager.MultitargetNetworkManager,
-      fileManager: Workspace.FileManager.FileManager,
   ) {
     super();
     this.#targetManager = targetManager;
     this.#settings = settings;
     this.#multitargetNetworkManager = multitargetNetworkManager;
-    this.#fileManager = fileManager;
     this.#screenRect = new Rect(0, 0, 1, 1);
     this.#visiblePageRect = new Rect(0, 0, 1, 1);
     this.#availableSize = new Geometry.Size(1, 1);
@@ -209,8 +205,6 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
               Common.Settings.Settings.instance(),
               // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
               SDK.NetworkManager.MultitargetNetworkManager.instance(),
-              // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
-              Workspace.FileManager.FileManager.instance(),
               ));
     }
 
@@ -241,6 +235,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
   dispose(): void {
     this.#targetManager.unobserveModels(SDK.EmulationModel.EmulationModel, this);
+    this.#revokeLastScreenshotBlobUrl();
   }
 
   static widthValidator(value: string): {
@@ -357,6 +352,8 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
 
     if (type !== Type.None) {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.DeviceModeEnabled);
+    } else {
+      this.#revokeLastScreenshotBlobUrl();
     }
     this.calculateAndEmulate(resetPageScaleFactor);
   }
@@ -499,7 +496,7 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       const resourceTreeModel = emulationModel.target().model(SDK.ResourceTreeModel.ResourceTreeModel);
       if (resourceTreeModel) {
         resourceTreeModel.addEventListener(SDK.ResourceTreeModel.Events.FrameResized, this.onFrameChange, this);
-        resourceTreeModel.addEventListener(SDK.ResourceTreeModel.Events.FrameNavigated, this.onFrameChange, this);
+        resourceTreeModel.addEventListener(SDK.ResourceTreeModel.Events.FrameNavigated, this.onFrameNavigated, this);
       }
     } else {
       void emulationModel.emulateTouch(this.#touchEnabled, this.#touchMobile);
@@ -511,8 +508,14 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       emulationModel.removeEventListener(
           SDK.EmulationModel.EmulationModelEvents.SCREEN_ORIENTATION_LOCK_CHANGED, this.onScreenOrientationLockChanged,
           this);
+      const resourceTreeModel = emulationModel.target().model(SDK.ResourceTreeModel.ResourceTreeModel);
+      if (resourceTreeModel) {
+        resourceTreeModel.removeEventListener(SDK.ResourceTreeModel.Events.FrameResized, this.onFrameChange, this);
+        resourceTreeModel.removeEventListener(SDK.ResourceTreeModel.Events.FrameNavigated, this.onFrameNavigated, this);
+      }
       this.#emulationModel = null;
       this.#screenOrientationLocked = false;
+      this.#revokeLastScreenshotBlobUrl();
       this.dispatchEventToListeners(Events.UPDATED);
     }
   }
@@ -530,6 +533,13 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.showDeviceOverlaysIfApplicable(overlayModel);
   }
 
+  private onFrameNavigated(event: Common.EventTarget.EventTargetEvent<SDK.ResourceTreeModel.ResourceTreeFrame>): void {
+    if (event.data.isMainFrame()) {
+      this.#revokeLastScreenshotBlobUrl();
+    }
+    this.onFrameChange();
+  }
+
   private onScreenOrientationLockChanged(
       event: Common.EventTarget.EventTargetEvent<SDK.EmulationModel.ScreenOrientationLockChangedEvent>): void {
     this.#screenOrientationLocked = event.data.locked;
@@ -934,54 +944,34 @@ export class DeviceModeModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     });
   }
 
-  private async saveScreenshot(canvas: OffscreenCanvas): Promise<void> {
+  async saveScreenshot(canvas: OffscreenCanvas): Promise<void> {
     const url = this.inspectedURL();
-    let baseName = '';
+    let fileName = '';
     if (url) {
-      const parsedURL = Common.ParsedURL.ParsedURL.fromString(url);
-      if (parsedURL) {
-        const host = parsedURL.host;
-        const path = parsedURL.path.replace(/^\/+/, '').replace(/\/+$/, '');
-        baseName = host;
-        if (path) {
-          baseName += '-' + path.replaceAll('/', '-');
-        }
-        baseName = baseName.replace(/[^a-z0-9._-]/gi, '_');
-      }
-    }
-
-    if (!baseName) {
-      baseName = 'screenshot';
+      const withoutFragment = Platform.StringUtilities.removeURLFragment(url);
+      fileName = Platform.StringUtilities.trimURL(withoutFragment);
     }
 
-    let suffix = '';
     const device = this.device();
     if (device && this.type() === Type.Device) {
-      suffix += `(${device.title})`;
+      fileName += `(${device.title})`;
     }
-    suffix += '.png';
-
-    // The Windows save dialog / Chrome wrapper limits the suggested filename
-    // to 63 characters (due to a 64-byte null-terminated buffer).
-    // Capping the total filename length at 63 avoids truncation of the extension.
-    const maxBaseNameLength = Math.max(0, 63 - suffix.length);
-    baseName = Platform.StringUtilities.truncateToCodeUnitLength(baseName, maxBaseNameLength);
+    this.#revokeLastScreenshotBlobUrl();
+    /* eslint-disable-next-line @devtools/no-imperative-dom-api */
+    const link = document.createElement('a');
+    link.download = fileName + '.png';
+    const blob = await canvas.convertToBlob({type: 'image/png'});
+    const blobUrl = URL.createObjectURL(blob);
+    this.#lastScreenshotBlobUrl = blobUrl;
+    link.href = blobUrl;
+    link.click();
+  }
 
-    let fileName = baseName + suffix;
-    if (fileName.length > 63) {
-      fileName = Platform.StringUtilities.truncateToCodeUnitLength(fileName, 59) + '.png';
+  #revokeLastScreenshotBlobUrl(): void {
+    if (this.#lastScreenshotBlobUrl) {
+      URL.revokeObjectURL(this.#lastScreenshotBlobUrl);
+      this.#lastScreenshotBlobUrl = null;
     }
-    const blob = await canvas.convertToBlob({type: 'image/png'});
-    const dataUrl = await new Promise<string>((resolve, reject) => {
-      const reader = new FileReader();
-      reader.onloadend = () => resolve(reader.result as string);
-      reader.onerror = reject;
-      reader.readAsDataURL(blob);
-    });
-    const base64 = dataUrl.slice(dataUrl.indexOf(',') + 1);
-    const contentData = new TextUtils.ContentData.ContentData(base64, /* isBase64=*/ true, 'image/png');
-    await this.#fileManager.save(fileName as Platform.DevToolsPath.RawPathString, contentData, /* forceSaveAs=*/ true);
-    this.#fileManager.close(fileName as Platform.DevToolsPath.RawPathString);
   }
 
   private applyTouch(touchEnabled: boolean, mobile: boolean): void {

package/front_end/models/javascript_metadata/NativeFunctions.ts

@@ -6662,7 +6662,7 @@ export const NativeFunctions: readonly NativeFunctionValue[] = [
   },
   {
     name: "WebSocket",
-    signatures: [["url","?protocols"]]
+    signatures: [["url","?protocolsOrOptions"]]
   },
   {
     name: "WebSocketError",
@@ -6812,6 +6812,10 @@ export const NativeFunctions: readonly NativeFunctionValue[] = [
     name: "provokingVertexWEBGL",
     signatures: [["provokeMode"]]
   },
+  {
+    name: "drawingBufferToneMapping",
+    signatures: [["?toneMapping"]]
+  },
   {
     name: "texElementImage2D",
     signatures: [["target","internalformat","element","?config"]]
@@ -8734,6 +8738,10 @@ export const NativeFunctions: readonly NativeFunctionValue[] = [
     name: "CanvasPaintEvent",
     signatures: [["type","?eventInitDict"]]
   },
+  {
+    name: "ElementGeometryUpdateEvent",
+    signatures: [["type","?eventInitDict"]]
+  },
   {
     name: "captureElementImage",
     signatures: [["element"]]

package/front_end/models/live-metrics/web-vitals-injected/README.md

@@ -2,4 +2,4 @@
 
 [`web-vitals`](https://github.com/GoogleChrome/web-vitals) is a Google-maintained library that measures CWV metrics using their canonical definition. We use it to ensure we are using consistent implementations for measuring CWV across Google. It can also measure performance metrics of the current page *after* the they happen (See [`PerformanceObserver` buffered setting](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver/observe#buffered)). See [go/cpq:rpp-metric-observations](http://go/cpq:rpp-metric-observations) for more information.
 
-The web-vitals library needs to be run in the target page (although it can be used in an isolated execution context). We therefore need to create a JS binary that can be injected via `Page.evaluate`/`Page.addScriptToEvaluateOnNewDocument`. See `BUILD.gn` and `rollup.config.mjs` for how we bundle the JS binary.
+The web-vitals library needs to be run in the target page (although it can be used in an isolated execution context). We therefore need to create a JS binary that can be injected via `Page.evaluate`/`Page.addScriptToEvaluateOnNewDocument`. See `BUILD.gn` for how we bundle the JS binary.

package/front_end/models/source_map_scopes/NamesResolver.ts

@@ -385,11 +385,12 @@ export const resolveScopeChain =
           //    2) We have a chrome feature flag.
 
           if (callFrame.script.isWasm()) {
-            return callFrame.scopeChain();
+            return callFrame.scopeChain().filter(scope => !scope.empty());
           }
           const thisObject = await resolveThisObject(callFrame, debuggerWorkspaceBinding);
-          return callFrame.scopeChain().map(
-              scope => new ScopeWithSourceMappedVariables(scope, thisObject, debuggerWorkspaceBinding));
+          const scopes = callFrame.scopeChain().filter(scope => !scope.empty() ||
+                                                           scope.type() === Protocol.Debugger.ScopeType.Local);
+          return scopes.map(scope => new ScopeWithSourceMappedVariables(scope, thisObject, debuggerWorkspaceBinding));
         };
 
 /**
@@ -411,7 +412,7 @@ export const allVariablesInCallFrame = async(
         return cachedMap;
       }
 
-      const scopeChain = callFrame.scopeChain();
+      const scopeChain = callFrame.scopeChain().filter(scope => !scope.empty());
       const nameMappings =
           await Promise.all(scopeChain.map(scope => resolveDebuggerScope(scope, debuggerWorkspaceBinding)));
       const reverseMapping = new Map<string, string|null>();
@@ -485,12 +486,13 @@ export const resolveThisObject = async(
     callFrame: SDK.DebuggerModel.CallFrame,
     debuggerWorkspaceBinding:
         Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding): Promise<SDK.RemoteObject.RemoteObject|null> => {
-  const scopeChain = callFrame.scopeChain();
-  if (scopeChain.length === 0) {
+  const innermostScope =
+      callFrame.scopeChain().find(scope => !scope.empty() || scope.type() === Protocol.Debugger.ScopeType.Local);
+  if (!innermostScope) {
     return callFrame.thisObject();
   }
 
-  const {thisMapping} = await resolveDebuggerScope(scopeChain[0], debuggerWorkspaceBinding);
+  const {thisMapping} = await resolveDebuggerScope(innermostScope, debuggerWorkspaceBinding);
   if (!thisMapping) {
     return callFrame.thisObject();
   }

package/front_end/models/trace/ModelImpl.ts

@@ -110,6 +110,8 @@ export class Model extends EventTarget {
       }
       const file = this.#storeAndCreateParsedTraceFile(
           syntheticEventsManager, traceEvents, metadata, this.#processor.data, this.#processor.insights);
+      // Reclaim memory used by the temporary event-to-index lookup map now that trace parsing is complete.
+      syntheticEventsManager.clearRegistrationIndex();
       // We only push the file onto this.#traces here once we know it's valid
       // and there's been no errors in the parsing.
       this.#traces.push(file);

package/front_end/models/trace/Processor.ts

@@ -208,7 +208,7 @@ export class TraceProcessor extends EventTarget {
     // Handle each event.
     for (let i = 0; i < traceEvents.length; ++i) {
       // Every so often we take a break just to render.
-      if (i % eventsPerChunk === 0 && i) {
+      if (options.yieldToMain !== false && i % eventsPerChunk === 0 && i) {
         // Take the opportunity to provide status update events.
         const percent = calculateProgress(i / traceEvents.length, ProgressPhase.HANDLE_EVENT);
         this.dispatchEvent(new TraceParseProgressEvent({percent}));
@@ -233,9 +233,11 @@ export class TraceProcessor extends EventTarget {
       const [name, handler] = sortedHandlers[i];
       if (handler.finalize) {
         options.logger?.start(`parse:${name}:finalize`);
-        // Yield to the UI because finalize() calls can be expensive
-        // TODO(jacktfranklin): consider using `scheduler.yield()` or `scheduler.postTask(() => {}, {priority: 'user-blocking'})`
-        await new Promise(resolve => setTimeout(resolve, 0));
+        if (options.yieldToMain !== false) {
+          // Yield to the UI because finalize() calls can be expensive
+          // TODO(jacktfranklin): consider using `scheduler.yield()` or `scheduler.postTask(() => {}, {priority: 'user-blocking'})`
+          await new Promise(resolve => setTimeout(resolve, 0));
+        }
         await handler.finalize(finalizeOptions);
         options.logger?.end(`parse:${name}:finalize`);
       }

package/front_end/models/trace/handlers/LayerTreeHandler.ts

@@ -62,9 +62,9 @@ export async function finalize(): Promise<void> {
       updateLayerEvents.push(event);
     } else if (Types.Events.isPaint(event)) {
       if (!event.args.data.layerId) {
-        // Note that this check purposefully includes excluding an event with a layerId of 0.
-        // 0 indicates that this paint was for a subframe - we do not want these
-        // as we only care about paints for top level frames.
+        // A layerId of 0 means that this event cannot be associated with a
+        // compositor layer. This includes modern Paint duration events and
+        // older Paint events for subframes.
         continue;
       }
       paintEvents.push(event);

package/front_end/models/trace/handlers/LayoutShiftsHandler.ts

@@ -37,7 +37,7 @@ import type {HandlerName} from './types.js';
 // score for the given recording, and almost certainly not the
 // navigation-to-unload CLS score.
 
-interface LayoutShiftsData {
+export interface LayoutShiftsData {
   clusters: readonly Types.Events.SyntheticLayoutShiftCluster[];
   sessionMaxScore: number;
   // The session window which contains the SessionMaxScore

package/front_end/models/trace/helpers/SyntheticEvents.ts

@@ -54,13 +54,35 @@ export class SyntheticEventsManager {
     this.#rawTraceEvents = rawEvents;
   }
 
+  #rawEventIndexes: Map<Types.Events.Event, number>|null = null;
+
+  #getRawEventIndex(event: Types.Events.Event): number {
+    if (!this.#rawEventIndexes) {
+      this.#rawEventIndexes = new Map();
+      for (let i = 0; i < this.#rawTraceEvents.length; i++) {
+        this.#rawEventIndexes.set(this.#rawTraceEvents[i], i);
+      }
+    }
+    return this.#rawEventIndexes.get(event) ?? -1;
+  }
+
+  /**
+   * Clears the transient raw event index map.
+   * During trace parsing, this map provides O(1) lookups for registering synthetic events.
+   * Once parsing is complete, queries look up synthetic events exclusively by index in
+   * `#syntheticTraces`, so this map is discarded to reclaim memory.
+   */
+  clearRegistrationIndex(): void {
+    this.#rawEventIndexes = null;
+  }
+
   /**
    * Registers and returns a branded synthetic event. Synthetic events need to
    * be created with this method to ensure they are registered and made
    * available to load events using serialized keys.
    */
   #registerSyntheticEvent<T extends Types.Events.SyntheticBased>(syntheticEvent: Omit<T, '_tag'>): T {
-    const rawIndex = this.#rawTraceEvents.indexOf(syntheticEvent.rawSourceEvent);
+    const rawIndex = this.#getRawEventIndex(syntheticEvent.rawSourceEvent);
     if (rawIndex < 0) {
       throw new Error('Attempted to register a synthetic event paired to an unknown raw event.');
     }

package/front_end/models/trace/types/Configuration.ts

@@ -73,6 +73,13 @@ export interface ParseOptions {
    * @default false
    */
   isFreshRecording?: boolean;
+  /**
+   * Whether the processor should yield to the main thread during parsing to keep the UI responsive.
+   * This should always remain enabled in production to prevent blocking the UI, but can be disabled
+   * in unit tests to speed up test execution.
+   * @default true
+   */
+  yieldToMain?: boolean;
   /**
    * If the trace is a CPU Profile rather than a Chrome tracing trace.
    * @default false

package/front_end/models/trace/types/TraceEvents.ts

@@ -2628,8 +2628,8 @@ export function isUpdateLayer(event: Event): event is UpdateLayer {
   return event.name === Name.UPDATE_LAYER;
 }
 
-export interface DisplayItemListSnapshot extends Event {
-  name: Name.DISPLAY_ITEM_LIST_SNAPSHOT;
+export interface LegacyDisplayItemListSnapshot extends Event {
+  name: Name.LEGACY_DISPLAY_ITEM_LIST_SNAPSHOT;
   ph: Phase.OBJECT_SNAPSHOT;
   id2: {
     local?: string,
@@ -2638,14 +2638,29 @@ export interface DisplayItemListSnapshot extends Event {
     snapshot: {
       skp64: string,
       params?: {
+        layer_rect: [number, number, number, number],
+      },
+    },
+  };
+}
 
+export interface InstantDisplayItemListSnapshot extends Instant {
+  name: Name.DISPLAY_ITEM_LIST_SNAPSHOT;
+  args: Args&{
+    snapshot: {
+      skp64: string,
+      params?: {
         layer_rect: [number, number, number, number],
       },
     },
   };
 }
+
+export type DisplayItemListSnapshot = LegacyDisplayItemListSnapshot|InstantDisplayItemListSnapshot;
+
 export function isDisplayListItemListSnapshot(event: Event): event is DisplayItemListSnapshot {
-  return event.name === Name.DISPLAY_ITEM_LIST_SNAPSHOT;
+  return (event.name === Name.LEGACY_DISPLAY_ITEM_LIST_SNAPSHOT && event.ph === Phase.OBJECT_SNAPSHOT) ||
+      (event.name === Name.DISPLAY_ITEM_LIST_SNAPSHOT && event.ph === Phase.INSTANT);
 }
 
 export interface LayerTreeHostImplSnapshot extends Event {
@@ -3246,7 +3261,8 @@ export const enum Name {
   LAZY_PIXEL_REF = 'LazyPixelRef',
   LAYER_TREE_HOST_IMPL_SNAPSHOT = 'cc::LayerTreeHostImpl',
   PICTURE_SNAPSHOT = 'cc::Picture',
-  DISPLAY_ITEM_LIST_SNAPSHOT = 'cc::DisplayItemList',
+  LEGACY_DISPLAY_ITEM_LIST_SNAPSHOT = 'cc::DisplayItemList',
+  DISPLAY_ITEM_LIST_SNAPSHOT = 'cc::DisplayItemList:snapshot',
   INPUT_LATENCY_MOUSE_MOVE = 'InputLatency::MouseMove',
   INPUT_LATENCY_MOUSE_WHEEL = 'InputLatency::MouseWheel',
   IMPL_SIDE_FLING = 'InputHandlerProxy::HandleGestureFling::started',

package/front_end/panels/accessibility/ARIAAttributesView.ts

@@ -36,6 +36,7 @@ interface ViewInput {
   attributeBeingEdited: SDK.DOMModel.Attribute|null;
   attributes: SDK.DOMModel.Attribute[];
   backendNodeId?: number;
+  targetId?: string;
 }
 
 type View = (input: ViewInput, output: object, target: HTMLElement|DocumentFragment) => void;
@@ -99,6 +100,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
           attributes: {
             jslog: `${VisualLogging.section('aria-attributes')}`,
             ...(input.backendNodeId ? {'data-backend-node-id': `${input.backendNodeId}`} : {}),
+            ...(input.targetId ? {'data-target-id': `${input.targetId}`} : {}),
           },
         },
       });
@@ -159,6 +161,7 @@ export class ARIAAttributesPane extends AccessibilitySubPane<ShadowRoot> {
       onCancelEditing,
       propertyCompletions,
       backendNodeId: this.node()?.backendNodeId(),
+      targetId: this.node()?.domModel().target().id(),
     };
     this.#view(input, {}, this.contentElement);
   }

package/front_end/panels/accessibility/AccessibilityAnnouncementRecordingListView.ts

@@ -0,0 +1,177 @@
+// 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 '../../ui/legacy/components/data_grid/data_grid.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';
+
+import accessibilityAnnouncementRecordingListViewStyles from './accessibilityAnnouncementRecordingListView.css.js';
+import {
+  type A11yAnnouncement,
+  AnnouncementApi,
+} from './AccessibilityAnnouncementRecordingView.js';
+
+const {html, render} = Lit;
+
+const UIStrings = {
+  /**
+   * @description Column header for the announcement timestamp.
+   */
+  time: 'Time',
+  /**
+   * @description Column header for the API type (DOM aria-live vs JS ariaNotify).
+   */
+  api: 'API',
+  /**
+   * @description Column header for the politeness level (e.g. polite, assertive).
+   */
+  politeness: 'Politeness',
+  /**
+   * @description Column header for the announcement message text.
+   */
+  message: 'Message',
+  /**
+   * @description Value for DOM aria-live announcements in the API column.
+   */
+  ariaLive: 'ARIA live',
+  /**
+   * @description Value for JS ariaNotify announcements in the API column.
+   */
+  jsTriggered: 'JS-triggered',
+  /**
+   * @description Accessible title for the announcements data grid.
+   */
+  ariaLiveRecordingList: 'Accessibility Announcements',
+} as const;
+const str_ =
+    i18n.i18n.registerUIStrings('panels/accessibility/AccessibilityAnnouncementRecordingListView.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export interface ViewInput {
+  items: readonly A11yAnnouncement[];
+  selectedItem: A11yAnnouncement|null;
+  onSelect: (item: A11yAnnouncement) => void;
+  onDeselect: () => void;
+}
+
+export type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, _output, target) => {
+  // clang-format off
+  render(html`
+    <style>${accessibilityAnnouncementRecordingListViewStyles}</style>
+    <devtools-data-grid
+      name=${i18nString(UIStrings.ariaLiveRecordingList)}
+      striped
+      class="flex-auto"
+      @deselect=${input.onDeselect}>
+      <table>
+        <tr>
+          <th id="time" sortable fixed width="110px" align="right">
+            ${i18nString(UIStrings.time)}
+          </th>
+          <th id="api" sortable fixed width="110px">
+            ${i18nString(UIStrings.api)}
+          </th>
+          <th id="politeness" sortable fixed width="90px">
+            ${i18nString(UIStrings.politeness)}
+          </th>
+          <th id="message" sortable width="300px">
+            ${i18nString(UIStrings.message)}
+          </th>
+        </tr>
+        ${input.items.map(item => {
+          const timeString = new Date(item.time).toLocaleTimeString(i18n.DevToolsLocale.DevToolsLocale.instance().locale);
+          const apiDisplay = item.api === AnnouncementApi.JS_TRIGGERED ?
+              i18nString(UIStrings.jsTriggered) :
+              i18nString(UIStrings.ariaLive);
+
+          return html`
+            <tr
+              ?selected=${item === input.selectedItem}
+              @select=${() => input.onSelect(item)}>
+              <td data-value=${item.time}>
+                <span>${timeString}</span>
+              </td>
+              <td>${apiDisplay}</td>
+              <td>${item.politeness}</td>
+              <td title=${item.message}>
+                ${item.message}
+              </td>
+            </tr>`;
+        })}
+      </table>
+    </devtools-data-grid>`,
+    target);
+  // clang-format on
+};
+
+export class AccessibilityAnnouncementRecordingListView extends UI.Widget.VBox {
+  #items: readonly A11yAnnouncement[] = [];
+  #selectedItem: A11yAnnouncement|null = null;
+  #onSelect: ((item: A11yAnnouncement|null) => void)|null = null;
+  readonly #view: View;
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
+  }
+
+  override wasShown(): void {
+    super.wasShown();
+    this.requestUpdate();
+  }
+
+  set items(items: readonly A11yAnnouncement[]) {
+    if (this.#items === items) {
+      return;
+    }
+    this.#items = items;
+    this.requestUpdate();
+  }
+
+  get items(): readonly A11yAnnouncement[] {
+    return this.#items;
+  }
+
+  set selectedItem(item: A11yAnnouncement|null) {
+    if (this.#selectedItem === item) {
+      return;
+    }
+    this.#selectedItem = item;
+    this.requestUpdate();
+  }
+
+  get selectedItem(): A11yAnnouncement|null {
+    return this.#selectedItem;
+  }
+
+  set onSelect(onSelect: (item: A11yAnnouncement|null) => void) {
+    this.#onSelect = onSelect;
+  }
+
+  reset(): void {
+    this.#items = [];
+    this.#selectedItem = null;
+    this.requestUpdate();
+  }
+
+  override performUpdate(): void {
+    const input: ViewInput = {
+      items: this.#items,
+      selectedItem: this.#selectedItem,
+      onSelect: (item: A11yAnnouncement) => {
+        this.selectedItem = item;
+        this.#onSelect?.(item);
+      },
+      onDeselect: () => {
+        this.selectedItem = null;
+        this.#onSelect?.(null);
+      },
+    };
+    this.#view(input, undefined, this.contentElement);
+  }
+}

package/front_end/panels/accessibility/accessibility.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as AccessibilityAnnouncementRecordingListView from './AccessibilityAnnouncementRecordingListView.js';
 import * as AccessibilityAnnouncementRecordingView from './AccessibilityAnnouncementRecordingView.js';
 import * as AccessibilityNodeView from './AccessibilityNodeView.js';
 import * as AccessibilitySidebarView from './AccessibilitySidebarView.js';
@@ -11,6 +12,7 @@ import * as ARIAAttributesView from './ARIAAttributesView.js';
 import * as ARIAMetadata from './ARIAMetadata.js';
 
 export {
+  AccessibilityAnnouncementRecordingListView,
   AccessibilityAnnouncementRecordingView,
   AccessibilityNodeView,
   AccessibilitySidebarView,

package/front_end/panels/accessibility/accessibilityAnnouncementRecordingListView.css

@@ -0,0 +1,33 @@
+/*
+ * 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.
+ */
+
+:host {
+  font-family: inherit;
+  display: flex;
+  flex-direction: column;
+  flex: auto;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+}
+
+@scope to (devtools-widget > *) {
+  :scope {
+    font-family: inherit;
+    display: flex;
+    flex-direction: column;
+    flex: auto;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  devtools-data-grid {
+    font-family: inherit;
+    flex: auto;
+    height: 100%;
+    border: none;
+  }
+}