chrome-devtools-frontend 1.0.1697998 → 1.0.1699061

package/front_end/models/issues_manager/WebInstallIssue.ts

@@ -0,0 +1,63 @@
+// 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 type * as SDK from '../../core/sdk/sdk.js';
+import * as Protocol from '../../generated/protocol.js';
+
+import {Issue, IssueCategory, IssueKind} from './Issue.js';
+import type {MarkdownIssueDescription} from './MarkdownIssueDescription.js';
+
+export class WebInstallIssue extends Issue<Protocol.Audits.WebInstallIssueDetails> {
+  constructor(issueDetails: Protocol.Audits.WebInstallIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel|null) {
+    super(`${Protocol.Audits.InspectorIssueCode.WebInstallIssue}::${issueDetails.reason}`, issueDetails, issuesModel);
+  }
+
+  override requests(): Protocol.Audits.AffectedRequest[] {
+    const {manifestUrl, reason} = this.details();
+    if (reason === Protocol.Audits.WebInstallIssueReason.NoManifest || !manifestUrl) {
+      return [];
+    }
+    return [{url: manifestUrl}];
+  }
+
+  getCategory(): IssueCategory {
+    return IssueCategory.OTHER;
+  }
+
+  getDescription(): MarkdownIssueDescription|null {
+    switch (this.details().reason) {
+      case Protocol.Audits.WebInstallIssueReason.ManifestParsingOrNetworkError:
+        return {file: 'webInstallManifestParsingOrNetworkError.md', links: []};
+      case Protocol.Audits.WebInstallIssueReason.StartUrlInvalid:
+        return {file: 'webInstallStartUrlInvalid.md', links: []};
+      case Protocol.Audits.WebInstallIssueReason.ManifestMissingNameOrShortName:
+        return {file: 'webInstallManifestMissingNameOrShortName.md', links: []};
+      case Protocol.Audits.WebInstallIssueReason.ManifestMissingId:
+        return {file: 'webInstallManifestMissingId.md', links: []};
+      case Protocol.Audits.WebInstallIssueReason.NoManifest:
+        return {file: 'webInstallNoManifest.md', links: []};
+      default:
+        console.warn('Unknown WebInstallIssueReason:', this.details().reason);
+        return null;
+    }
+  }
+
+  getKind(): IssueKind {
+    return IssueKind.PAGE_ERROR;
+  }
+
+  primaryKey(): string {
+    return JSON.stringify(this.details());
+  }
+
+  static fromInspectorIssue(issuesModel: SDK.IssuesModel.IssuesModel|null,
+                            inspectorIssue: Protocol.Audits.InspectorIssue): WebInstallIssue[] {
+    const details = inspectorIssue.details.webInstallIssueDetails;
+    if (!details) {
+      console.warn('Web install issue without details received.');
+      return [];
+    }
+    return [new WebInstallIssue(details, issuesModel)];
+  }
+}

package/front_end/models/issues_manager/descriptions/webInstallManifestMissingId.md

@@ -0,0 +1,3 @@
+# Manifest does not contain an `id` field
+
+Add an `id` to the manifest. Alternatively, for installs using an explicit manifest URL, provide the computed manifest ID as `manifestId` alongside the manifest URL.

package/front_end/models/issues_manager/descriptions/webInstallManifestMissingNameOrShortName.md

@@ -0,0 +1,3 @@
+# Manifest does not contain a 'name' or 'short_name' field
+
+Add a `name` or `short_name` field to the manifest.

package/front_end/models/issues_manager/descriptions/webInstallManifestParsingOrNetworkError.md

@@ -0,0 +1,3 @@
+# Manifest could not be fetched, is empty, or could not be parsed
+
+Check that the web app manifest can be fetched and that it contains valid, non-empty JSON.

package/front_end/models/issues_manager/descriptions/webInstallNoManifest.md

@@ -0,0 +1,3 @@
+# No manifest detected
+
+Provide a web app manifest for this page.

package/front_end/models/issues_manager/descriptions/webInstallStartUrlInvalid.md

@@ -0,0 +1,3 @@
+# Manifest 'start_url' is not valid
+
+Provide a valid `start_url` in the manifest.

package/front_end/models/issues_manager/issues_manager.ts

@@ -36,6 +36,7 @@ import * as SourceFrameIssuesManager from './SourceFrameIssuesManager.js';
 import * as SRIMessageSignatureIssue from './SRIMessageSignatureIssue.js';
 import * as StylesheetLoadingIssue from './StylesheetLoadingIssue.js';
 import * as UnencodedDigestIssue from './UnencodedDigestIssue.js';
+import * as WebInstallIssue from './WebInstallIssue.js';
 
 export {
   ClientHintIssue,
@@ -72,4 +73,5 @@ export {
   SRIMessageSignatureIssue,
   StylesheetLoadingIssue,
   UnencodedDigestIssue,
+  WebInstallIssue,
 };

package/front_end/models/source_map_scopes/NamesResolver.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 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';
@@ -380,9 +381,16 @@ export const resolveScopeChain =
             return scopeChain;
           }
 
-          // TODO(crbug.com/465968290): Re-enable creating the scope chain from the source map once:
-          //    1) We have a flag indicating whether the source map contained variable/binding information.
-          //    2) We have a chrome feature flag.
+          if (Root.Runtime.hostConfig.devToolsSourceMapScopesInSourcesPanel?.enabled) {
+            let sourceMap = callFrame.script.sourceMap();
+            if (!sourceMap && callFrame.debuggerModel?.sourceMapManager) {
+              sourceMap = await callFrame.debuggerModel.sourceMapManager().sourceMapForClientPromise(callFrame.script);
+            }
+            const mappedScopeChain = sourceMap?.resolveScopeChain(callFrame);
+            if (mappedScopeChain) {
+              return mappedScopeChain;
+            }
+          }
 
           if (callFrame.script.isWasm()) {
             return callFrame.scopeChain().filter(scope => !scope.empty());

package/front_end/models/source_map_scopes/ScopeChainModel.ts

@@ -35,8 +35,10 @@ export class ScopeChainModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.#debuggerWorkspaceBinding = debuggerWorkspaceBinding;
     this.#callFrame.debuggerModel.addEventListener(
         SDK.DebuggerModel.Events.DebugInfoAttached, this.#debugInfoAttached, this);
-    this.#callFrame.debuggerModel.sourceMapManager().addEventListener(
-        SDK.SourceMapManager.Events.SourceMapAttached, this.#sourceMapAttached, 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);
 
     void this.#throttler.schedule(this.#boundUpdate);
   }
@@ -44,8 +46,10 @@ export class ScopeChainModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   dispose(): void {
     this.#callFrame.debuggerModel.removeEventListener(
         SDK.DebuggerModel.Events.DebugInfoAttached, this.#debugInfoAttached, this);
-    this.#callFrame.debuggerModel.sourceMapManager().removeEventListener(
-        SDK.SourceMapManager.Events.SourceMapAttached, this.#sourceMapAttached, 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.listeners?.clear();
   }
 
@@ -60,8 +64,8 @@ export class ScopeChainModel extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     }
   }
 
-  #sourceMapAttached(event: Common.EventTarget
-                         .EventTargetEvent<{client: SDK.Script.Script, sourceMap: SDK.SourceMap.SourceMap}>): void {
+  #sourceMapChanged(event: Common.EventTarget
+                        .EventTargetEvent<{client: SDK.Script.Script, sourceMap: SDK.SourceMap.SourceMap}>): void {
     if (event.data.client === this.#callFrame.script) {
       void this.#throttler.schedule(this.#boundUpdate);
     }

package/front_end/models/workspace/UISourceCode.ts

@@ -7,6 +7,7 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
+import * as SDK from '../../core/sdk/sdk.js';
 import * as TextUtils from '../../core/text_utils/text_utils.js';
 
 import {IgnoreListManager} from './IgnoreListManager.js';
@@ -29,6 +30,7 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     TextUtils.ContentProvider.ContentProvider {
   readonly #origin: Platform.DevToolsPath.UrlString;
   readonly #parentURL: Platform.DevToolsPath.UrlString;
+  #securityOrigin?: SDK.SecurityOrigin.SecurityOrigin;
   #project: Project;
   #url: Platform.DevToolsPath.UrlString;
   #name: string;
@@ -110,6 +112,23 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     return this.#origin;
   }
 
+  /**
+   * Returns the security origin for this source code.
+   * Prefers the project security origin if available. If the project does not
+   * define a security origin, derives it from the source code's URL and caches
+   * the result until the source code is renamed.
+   */
+  securityOrigin(): SDK.SecurityOrigin.SecurityOrigin {
+    const projectOrigin = this.#project.securityOrigin?.();
+    if (projectOrigin) {
+      return projectOrigin;
+    }
+    if (!this.#securityOrigin) {
+      this.#securityOrigin = SDK.SecurityOrigin.SecurityOrigin.create(this.#url);
+    }
+    return this.#securityOrigin;
+  }
+
   fullDisplayName(): string {
     return this.#project.fullDisplayName(this);
   }
@@ -150,6 +169,7 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   #updateName(
       name: Platform.DevToolsPath.RawPathString, url: Platform.DevToolsPath.UrlString,
       contentType?: Common.ResourceType.ResourceType): void {
+    this.#securityOrigin = undefined;
     const oldURL = this.#url;
     this.#name = name;
     if (url) {

package/front_end/panels/accessibility/AccessibilityAnnouncementRecordingView.ts

@@ -6,25 +6,192 @@ import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
+import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
+import {AccessibilityAnnouncementRecordingListView} from './AccessibilityAnnouncementRecordingListView.js';
+import accessibilityAnnouncementRecordingViewStyles from './accessibilityAnnouncementRecordingView.css.js';
 import {AccessibilitySubPane} from './AccessibilitySubPane.js';
 
+const {html, render} = Lit;
+const {widget} = UI.Widget;
+
 const UIStrings = {
   /**
    * @description Title for the ARIA-Live and JS announcements recording tool
    */
   ariaLiveRecording: 'Announcements recording',
+  /**
+   * @description Tooltip for the start recording button in the announcements tool.
+   */
+  startRecording: 'Start recording',
+  /**
+   * @description Tooltip for the stop recording button in the announcements tool.
+   */
+  stopRecording: 'Stop recording',
+  /**
+   * @description Tooltip for the clear announcements button in the announcements tool.
+   */
+  clearAnnouncements: 'Clear announcements',
+  /**
+   * @description Label/title for the dropdown filter to select which announcement types to record.
+   */
+  filterByType: 'Filter by type',
+  /**
+   * @description Option label to record and display both ARIA-live and JavaScript announcements.
+   */
+  recordBoth: 'Record both',
+  /**
+   * @description Option label to record and display only ARIA-live announcements.
+   */
+  ariaLiveOnly: 'ARIA-live only',
+  /**
+   * @description Option label to record and display only JavaScript-triggered announcements.
+   */
+  announcementsOnly: 'Announcements only',
+  /**
+   * @description Placeholder text for the filter input in the announcements tool.
+   */
+  filter: 'Filter',
+  /**
+   * @description Screen reader announcement when no events match the filter in the announcements tool.
+   */
+  noEventsMatch: 'No events match',
+  /**
+   * @description Screen reader announcement when exactly one event matches the filter in the announcements tool.
+   */
+  oneEventMatches: '1 event matches',
+  /**
+   * @description Screen reader announcement when multiple events match the filter in the announcements tool.
+   * @example {15} PH1
+   */
+  nEventsMatch: '{PH1} events match',
+  /**
+   * @description Warning banner title shown when recording could not be enabled in some frames.
+   */
+  recordingBlockedWarning: 'Recording was blocked for some frames:',
+  /**
+   * @description Warning item describing a specific frame and the reason recording was blocked.
+   * @example {iframe#main} PH1
+   * @example {Script evaluation failed} PH2
+   */
+  frameBlockedReason: '{PH1}: {PH2}',
+  /**
+   * @description Fallback reason shown when an unknown error occurs while blocking recording.
+   */
+  unknownError: 'Unknown error',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/accessibility/AccessibilityAnnouncementRecordingView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export const BINDING_NAME = '__announcementsRecorderBinding';
 
-export const enum AnnouncementApi {
+export enum AnnouncementApi {
   ARIA_LIVE = 'aria-live',
   JS_TRIGGERED = 'js-triggered',
 }
 
+export const enum RecordTypeFilter {
+  BOTH = 'both',
+  ARIA_LIVE = 'aria-live',
+  JS_TRIGGERED = 'js-triggered',
+}
+
+export interface BlockedTargetInfo {
+  targetName: string;
+  reason: string;
+}
+
+export interface ViewInput {
+  isRecording: boolean;
+  onToggleRecording: () => void;
+  onClear: () => void;
+  recordTypeFilter: RecordTypeFilter;
+  onRecordTypeFilterChange: (type: RecordTypeFilter) => void;
+  textFilter: string;
+  onTextFilterChange: (text: string) => void;
+  blockedTargets: BlockedTargetInfo[];
+  announcements: readonly A11yAnnouncement[];
+}
+
+export type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, _output, target) => {
+  // clang-format off
+  render(html`
+    <style>${accessibilityAnnouncementRecordingViewStyles}</style>
+    <div class="accessibility-announcement-recording-view">
+      <div class="announcements-toolbar-container">
+        <devtools-toolbar class="announcements-toolbar" jslog=${VisualLogging.toolbar()}>
+          <devtools-button
+            title=${input.isRecording ? i18nString(UIStrings.stopRecording) : i18nString(UIStrings.startRecording)}
+            aria-label=${input.isRecording ? i18nString(UIStrings.stopRecording) : i18nString(UIStrings.startRecording)}
+            .iconName=${'record-start'}
+            .toggledIconName=${'record-stop'}
+            .toggleType=${Buttons.Button.ToggleType.PRIMARY}
+            .toggled=${input.isRecording}
+            @click=${input.onToggleRecording}
+            .variant=${Buttons.Button.Variant.TOOLBAR}
+            .jslogContext=${'accessibility.toggle-recording'}>
+          </devtools-button>
+          <devtools-button
+            title=${i18nString(UIStrings.clearAnnouncements)}
+            aria-label=${i18nString(UIStrings.clearAnnouncements)}
+            .iconName=${'clear'}
+            @click=${input.onClear}
+            .variant=${Buttons.Button.Variant.TOOLBAR}
+            .jslogContext=${'accessibility.clear-announcements'}>
+          </devtools-button>
+          <div class="toolbar-divider" role="separator"></div>
+          <select
+            title=${i18nString(UIStrings.filterByType)}
+            aria-label=${i18nString(UIStrings.filterByType)}
+            @change=${(event: Event) => input.onRecordTypeFilterChange((event.target as HTMLSelectElement).value as RecordTypeFilter)}
+            .value=${input.recordTypeFilter}
+            jslog=${VisualLogging.dropDown('accessibility-announcements.filter-by-type').track({change: true})}>
+            <option value=${RecordTypeFilter.BOTH} .selected=${input.recordTypeFilter === RecordTypeFilter.BOTH}>
+              ${i18nString(UIStrings.recordBoth)}
+            </option>
+            <option value=${RecordTypeFilter.ARIA_LIVE} .selected=${input.recordTypeFilter === RecordTypeFilter.ARIA_LIVE}>
+              ${i18nString(UIStrings.ariaLiveOnly)}
+            </option>
+            <option value=${RecordTypeFilter.JS_TRIGGERED} .selected=${input.recordTypeFilter === RecordTypeFilter.JS_TRIGGERED}>
+              ${i18nString(UIStrings.announcementsOnly)}
+            </option>
+          </select>
+          <div class="toolbar-divider" role="separator"></div>
+          <devtools-toolbar-input
+            type="filter"
+            placeholder=${i18nString(UIStrings.filter)}
+            .value=${input.textFilter}
+            @change=${(event: CustomEvent<string>) => input.onTextFilterChange(event.detail)}
+            style="flex-grow: 1">
+          </devtools-toolbar-input>
+        </devtools-toolbar>
+      </div>
+      ${input.blockedTargets.length > 0 ? html`
+        <div class="announcements-blocked-banner" role="alert">
+          <div class="blocked-banner-header">
+            <devtools-icon name="warning-filled"></devtools-icon>
+            <span>${i18nString(UIStrings.recordingBlockedWarning)}</span>
+          </div>
+          <ul class="blocked-targets-list">
+            ${input.blockedTargets.map(targetInfo => html`
+              <li>${i18nString(UIStrings.frameBlockedReason, {PH1: targetInfo.targetName, PH2: targetInfo.reason || i18nString(UIStrings.unknownError)})}</li>
+            `)}
+          </ul>
+        </div>
+      ` : Lit.nothing}
+      <div class="announcements-main-pane">
+        ${widget(AccessibilityAnnouncementRecordingListView, {items: input.announcements})}
+      </div>
+    </div>`,
+    target);
+  // clang-format on
+};
+
 declare global {
   interface Window {
     // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -564,17 +731,23 @@ export function validateAndSanitizeAnnouncement(payload: unknown): A11yAnnouncem
 
 export class AccessibilityAnnouncementRecordingView extends AccessibilitySubPane implements SDK.TargetManager.Observer {
   #announcements: A11yAnnouncement[] = [];
+  #filteredAnnouncements: readonly A11yAnnouncement[]|null = null;
   #isRecording = false;
   #blockedTargets = new Map<SDK.Target.Target, string>();
   #scriptIdentifiers = new Map<SDK.Target.Target, Protocol.Page.ScriptIdentifier>();
   #targets = new Set<SDK.Target.Target>();
   #enabledTargets = new Set<SDK.Target.Target>();
+  #recordTypeFilter: RecordTypeFilter = RecordTypeFilter.BOTH;
+  #textFilter = '';
+  #regexFilter: RegExp|null = null;
+  readonly #view: View;
 
-  constructor() {
+  constructor(view: View = DEFAULT_VIEW) {
     super({
       title: i18nString(UIStrings.ariaLiveRecording),
       viewId: 'aria-live-recording',
     });
+    this.#view = view;
     SDK.TargetManager.TargetManager.instance().observeTargets(this, {scoped: true});
   }
 
@@ -595,8 +768,11 @@ export class AccessibilityAnnouncementRecordingView extends AccessibilitySubPane
 
   async targetRemoved(target: SDK.Target.Target): Promise<void> {
     this.#targets.delete(target);
-    this.#blockedTargets.delete(target);
+    const wasBlocked = this.#blockedTargets.delete(target);
     await this.#disableTarget(target);
+    if (wasBlocked) {
+      this.requestUpdate();
+    }
   }
 
   async #enableTarget(target: SDK.Target.Target): Promise<void> {
@@ -708,6 +884,11 @@ export class AccessibilityAnnouncementRecordingView extends AccessibilitySubPane
       return;
     }
     this.#announcements.push(announcement);
+    if (this.#filteredAnnouncements !== null) {
+      if (this.#matchesFilter(announcement)) {
+        this.#filteredAnnouncements = [...this.#filteredAnnouncements, announcement];
+      }
+    }
     this.requestUpdate();
   }
 
@@ -736,9 +917,106 @@ export class AccessibilityAnnouncementRecordingView extends AccessibilitySubPane
 
   clearAnnouncements(): void {
     this.#announcements = [];
+    this.#filteredAnnouncements = [];
+    this.requestUpdate();
+  }
+
+  #matchesFilter(announcement: A11yAnnouncement): boolean {
+    if (this.#recordTypeFilter === RecordTypeFilter.ARIA_LIVE && announcement.api !== AnnouncementApi.ARIA_LIVE) {
+      return false;
+    }
+    if (this.#recordTypeFilter === RecordTypeFilter.JS_TRIGGERED && announcement.api !== AnnouncementApi.JS_TRIGGERED) {
+      return false;
+    }
+    if (this.#regexFilter && !this.#regexFilter.test(announcement.message)) {
+      return false;
+    }
+    return true;
+  }
+
+  get filteredAnnouncements(): readonly A11yAnnouncement[] {
+    if (this.#filteredAnnouncements !== null) {
+      return this.#filteredAnnouncements;
+    }
+    this.#filteredAnnouncements = this.#announcements.filter(announcement => this.#matchesFilter(announcement));
+    return this.#filteredAnnouncements;
+  }
+
+  #announceFilterMatches(): void {
+    const count = this.filteredAnnouncements.length;
+    let message: string;
+    if (count === 0) {
+      message = i18nString(UIStrings.noEventsMatch);
+    } else if (count === 1) {
+      message = i18nString(UIStrings.oneEventMatches);
+    } else {
+      message = i18nString(UIStrings.nEventsMatch, {PH1: count});
+    }
+    UI.ARIAUtils.LiveAnnouncer.alert(message);
+  }
+
+  setRecordTypeFilter(type: RecordTypeFilter): void {
+    if (this.#recordTypeFilter === type) {
+      return;
+    }
+    this.#recordTypeFilter = type;
+    this.#filteredAnnouncements = null;
+    this.#announceFilterMatches();
     this.requestUpdate();
   }
 
+  setTextFilter(text: string): void {
+    if (this.#textFilter === text) {
+      return;
+    }
+    this.#textFilter = text;
+    if (!text) {
+      this.#regexFilter = null;
+    } else {
+      try {
+        this.#regexFilter = new RegExp(text, 'i');
+      } catch {
+        this.#regexFilter = new RegExp('(?!)', 'i');
+      }
+    }
+    this.#filteredAnnouncements = null;
+    this.#announceFilterMatches();
+    this.requestUpdate();
+  }
+
+  override performUpdate(): void {
+    const blockedTargets: BlockedTargetInfo[] = [];
+    for (const [target, reason] of this.#blockedTargets) {
+      const targetName = target.name() || target.inspectedURL() || target.id();
+      blockedTargets.push({targetName, reason});
+    }
+
+    const input: ViewInput = {
+      isRecording: this.#isRecording,
+      onToggleRecording: () => {
+        if (this.#isRecording) {
+          void this.stopRecording();
+        } else {
+          void this.startRecording();
+        }
+      },
+      onClear: () => {
+        this.clearAnnouncements();
+      },
+      recordTypeFilter: this.#recordTypeFilter,
+      onRecordTypeFilterChange: (type: RecordTypeFilter) => {
+        this.setRecordTypeFilter(type);
+      },
+      textFilter: this.#textFilter,
+      onTextFilterChange: (text: string) => {
+        this.setTextFilter(text);
+      },
+      blockedTargets,
+      announcements: this.filteredAnnouncements,
+    };
+    this.#view(input, undefined, this.contentElement);
+  }
+
   announcementsForTest(): A11yAnnouncement[] {
     return [...this.#announcements];
   }

package/front_end/panels/accessibility/accessibilityAnnouncementRecordingView.css

@@ -0,0 +1,85 @@
+/*
+ * 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.
+ */
+
+@scope to (devtools-widget > *) {
+  :scope {
+    font-family: inherit;
+    display: flex;
+    flex-direction: column;
+    flex: auto;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .accessibility-announcement-recording-view {
+    display: flex;
+    flex-direction: column;
+    flex: auto;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .announcements-toolbar-container {
+    display: flex;
+    flex: none;
+    background-color: var(--sys-color-cdt-base-container);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
+  }
+
+  .announcements-toolbar {
+    flex: auto;
+  }
+
+  .announcements-toolbar select {
+    background-color: transparent;
+    border: none;
+    color: var(--sys-color-on-surface);
+    font-size: var(--sys-typescale-body4-size);
+    padding: var(--sys-size-2) var(--sys-size-4);
+    height: 100%;
+    cursor: pointer;
+  }
+
+  .toolbar-divider {
+    background-color: var(--sys-color-divider);
+    width: var(--sys-size-1);
+    margin: 5px var(--sys-size-3);
+    height: var(--sys-size-8);
+  }
+
+  .announcements-blocked-banner {
+    display: flex;
+    flex-direction: column;
+    flex: none;
+    gap: var(--sys-size-3);
+    padding: var(--sys-size-5) var(--sys-size-8);
+    background-color: var(--sys-color-surface-yellow);
+    color: var(--sys-color-on-surface-yellow);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
+    font-size: var(--sys-typescale-body4-size);
+    line-height: var(--sys-typescale-body4-line-height);
+  }
+
+  .blocked-banner-header {
+    display: flex;
+    align-items: center;
+    gap: var(--sys-size-4);
+    font-weight: var(--ref-typeface-weight-medium);
+  }
+
+  .blocked-targets-list {
+    margin: 0;
+    padding-left: var(--sys-size-8);
+  }
+
+  .announcements-main-pane {
+    display: flex;
+    flex-direction: column;
+    flex: auto;
+    min-height: 0;
+    overflow: hidden;
+  }
+}

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -282,12 +282,10 @@ async function getEmptyStateSuggestions(conversation?: AiAssistanceModel.AiConve
   }
 }
 
-function createV2MarkdownRenderer(conversation?: AiAssistanceModel.AiConversation.AiConversation):
-    AIv2MarkdownRenderer {
-  const options: AIv2MarkdownRendererOptions = {};
-  if (conversation) {
-    options.getEstablishedOrigin = () => conversation.origin;
-  }
+function createV2MarkdownRenderer(conversation: AiAssistanceModel.AiConversation.AiConversation): AIv2MarkdownRenderer {
+  const options: AIv2MarkdownRendererOptions = {
+    getOriginLock: () => conversation.getOriginLock(),
+  };
   const primaryTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
   const domModel = primaryTarget?.model(SDK.DOMModel.DOMModel);
   const resourceTreeModel = primaryTarget?.model(SDK.ResourceTreeModel.ResourceTreeModel);
@@ -393,9 +391,8 @@ function toolbarView(input: ToolbarViewInput): Lit.LitTemplate {
           @click=${input.onNewChatClick}></devtools-button>
         <div class="toolbar-divider"></div>
         <devtools-menu-button
-          title=${i18nString(UIStrings.history)}
-          aria-label=${i18nString(UIStrings.history)}
           .iconName=${'history'}
+          .accessibleLabel=${i18nString(UIStrings.history)}
           .jslogContext=${'freestyler.history'}
           .populateMenuCall=${input.populateHistoryMenu}
         ></devtools-menu-button>`