chrome-devtools-frontend 1.0.1711155 → 1.0.1713292

package/front_end/panels/accessibility/AccessibilityAnnouncementRecordingView.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type * as Common from '../../core/common/common.js';
+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';
@@ -109,6 +109,8 @@ export interface BlockedTargetInfo {
   reason: string;
 }
 
+export type RevealTargetPanel = 'elements'|'accessibility';
+
 export interface ViewInput {
   isRecording: boolean;
   onToggleRecording: () => void;
@@ -121,6 +123,10 @@ export interface ViewInput {
   onTextFilterChange: (text: string) => void;
   blockedTargets: BlockedTargetInfo[];
   announcements: readonly A11yAnnouncement[];
+  selectedAnnouncement: A11yAnnouncement|null;
+  onSelectAnnouncement: (item: A11yAnnouncement|null) => void;
+  onRevealInElements: (item: A11yAnnouncement) => void;
+  onRevealInA11yTree: (item: A11yAnnouncement) => void;
 }
 
 export type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
@@ -200,7 +206,15 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
         </div>
       ` : Lit.nothing}
       <div class="announcements-main-pane">
-        ${widget(AccessibilityAnnouncementRecordingListView, {items: input.announcements})}
+        <devtools-widget
+          ${widget(AccessibilityAnnouncementRecordingListView, {
+            items: input.announcements,
+            selectedItem: input.selectedAnnouncement,
+          })}
+          @announcement-selected=${(e: CustomEvent<A11yAnnouncement|null>) => input.onSelectAnnouncement(e.detail)}
+          @reveal-in-elements=${(e: CustomEvent<A11yAnnouncement>) => input.onRevealInElements(e.detail)}
+          @reveal-in-a11y-tree=${(e: CustomEvent<A11yAnnouncement>) => input.onRevealInA11yTree(e.detail)}>
+        </devtools-widget>
       </div>
     </div>`,
     target);
@@ -215,6 +229,8 @@ declare global {
     __announcementsRecorderBinding_loaded?: boolean;
     // eslint-disable-next-line @typescript-eslint/naming-convention
     __announcementsRecorderBinding_cleanup?: () => void;
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    __announcementsRecorderGetElement?: (id: string) => Element | undefined;
   }
 }
 
@@ -237,6 +253,12 @@ export function injectedScript(ariaLiveApi: string, jsTriggeredApi: string): voi
 
   // Assigns a unique tracking identifier using an in-memory WeakMap (does not mutate DOM elements).
   const elementIdMap = new WeakMap<Element, string>();
+  const elementRegistry = new Map<string, WeakRef<Element>>();
+  const registryCleanup = typeof FinalizationRegistry !== 'undefined' ?
+      new FinalizationRegistry<string>((id: string) => {
+        elementRegistry.delete(id);
+      }) :
+      null;
   let recordIdCounter = 0;
   function getOrCreateRecordId(element: Element|null|undefined): string {
     if (!element || element.nodeType !== Node.ELEMENT_NODE) {
@@ -247,10 +269,16 @@ export function injectedScript(ariaLiveApi: string, jsTriggeredApi: string): voi
       recordIdCounter++;
       id = String(recordIdCounter);
       elementIdMap.set(element, id);
+      elementRegistry.set(id, new WeakRef(element));
+      registryCleanup?.register(element, id);
     }
     return id;
   }
 
+  window.__announcementsRecorderGetElement = function(id: string): Element|undefined {
+    return elementRegistry.get(id)?.deref();
+  };
+
   // Traverses to parent element or across shadow root boundary to host element.
   function getParentOrHost(node: Node|null|undefined): Element|null {
     if (!node) {
@@ -642,6 +670,8 @@ export function injectedScript(ariaLiveApi: string, jsTriggeredApi: string): voi
     }
     delete window.__announcementsRecorderBinding_loaded;
     delete window.__announcementsRecorderBinding_cleanup;
+    elementRegistry.clear();
+    delete window.__announcementsRecorderGetElement;
   };
 }
 
@@ -765,6 +795,7 @@ export function buildCsvContent(announcements: readonly A11yAnnouncement[]): str
 export class AccessibilityAnnouncementRecordingView extends AccessibilitySubPane implements SDK.TargetManager.Observer {
   #announcements: A11yAnnouncement[] = [];
   #filteredAnnouncements: readonly A11yAnnouncement[]|null = null;
+  #selectedAnnouncement: A11yAnnouncement|null = null;
   #isRecording = false;
   #blockedTargets = new Map<SDK.Target.Target, string>();
   #scriptIdentifiers = new Map<SDK.Target.Target, Protocol.Page.ScriptIdentifier>();
@@ -951,6 +982,7 @@ export class AccessibilityAnnouncementRecordingView extends AccessibilitySubPane
   clearAnnouncements(): void {
     this.#announcements = [];
     this.#filteredAnnouncements = [];
+    this.#selectedAnnouncement = null;
     this.requestUpdate();
   }
 
@@ -1040,6 +1072,72 @@ export class AccessibilityAnnouncementRecordingView extends AccessibilitySubPane
     return this.#buildCsvContent();
   }
 
+  #onSelectAnnouncement = (item: A11yAnnouncement|null): void => {
+    this.#selectedAnnouncement = item;
+    this.requestUpdate();
+  };
+
+  async #revealElement(item: A11yAnnouncement, targetPanel: RevealTargetPanel): Promise<void> {
+    const target = item.target ?? SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    if (!target) {
+      return;
+    }
+    const runtimeModel = target.model(SDK.RuntimeModel.RuntimeModel);
+    const domModel = target.model(SDK.DOMModel.DOMModel);
+    if (!runtimeModel || !domModel) {
+      return;
+    }
+
+    // Live DOM elements cannot cross the CDP binding string boundary directly,
+    // so elementId acts as an in-memory registry lookup key to fetch the node on
+    // demand. An announcement may lack a valid elementId in several scenarios:
+    // - Document-level announcements: When Document.prototype.ariaNotify is called
+    //   directly without a specific element node.
+    // - Detached or non-element nodes: If an announcement was recorded on a node
+    //   that lacked an element context when getOrCreateRecordId evaluated.
+    // - Older or synthetic payloads: Payloads constructed in unit tests or external
+    //   fixtures where elementId was omitted or passed as "".
+    if (!item.elementId) {
+      return;
+    }
+
+    try {
+      const response = await target.runtimeAgent().invoke_evaluate({
+        expression: `window.__announcementsRecorderGetElement?.(${JSON.stringify(item.elementId)})`,
+        objectGroup: 'reveal-node',
+      });
+      if (response.result && response.result.type === 'object' && response.result.subtype !== 'null') {
+        const remoteObject = runtimeModel.createRemoteObject(response.result);
+        const domNode = await domModel.pushObjectAsNodeToFrontend(remoteObject);
+        if (domNode) {
+          const toggleAction = UI.ActionRegistry.ActionRegistry.instance().hasAction('elements.toggle-a11y-tree') ?
+              UI.ActionRegistry.ActionRegistry.instance().getAction('elements.toggle-a11y-tree') :
+              null;
+          if (targetPanel === 'accessibility') {
+            if (toggleAction && !toggleAction.toggled()) {
+              await toggleAction.execute();
+            }
+          } else if (targetPanel === 'elements') {
+            if (toggleAction && toggleAction.toggled()) {
+              await toggleAction.execute();
+            }
+          }
+          await Common.Revealer.reveal(domNode);
+        }
+      }
+    } finally {
+      runtimeModel.releaseObjectGroup('reveal-node');
+    }
+  }
+
+  revealElementForTest(item: A11yAnnouncement, targetPanel: RevealTargetPanel): Promise<void> {
+    return this.#revealElement(item, targetPanel);
+  }
+
+  selectedAnnouncementForTest(): A11yAnnouncement|null {
+    return this.#selectedAnnouncement;
+  }
+
   override performUpdate(): void {
     const blockedTargets: BlockedTargetInfo[] = [];
     for (const [target, reason] of this.#blockedTargets) {
@@ -1074,6 +1172,14 @@ export class AccessibilityAnnouncementRecordingView extends AccessibilitySubPane
       },
       blockedTargets,
       announcements: filteredAnnouncements,
+      selectedAnnouncement: this.#selectedAnnouncement,
+      onSelectAnnouncement: this.#onSelectAnnouncement,
+      onRevealInElements: (item: A11yAnnouncement) => {
+        void this.#revealElement(item, 'elements');
+      },
+      onRevealInA11yTree: (item: A11yAnnouncement) => {
+        void this.#revealElement(item, 'accessibility');
+      },
     };
     this.#view(input, undefined, this.contentElement);
   }

package/front_end/panels/accessibility/AccessibilityNodeView.ts

@@ -97,11 +97,11 @@ const UIStrings = {
   /**
    * @description Reason in the Accessibility tab in the Elements panel.
    */
-  elementIsNotRendered: 'Element is not rendered',
+  elementIsNotRendered: 'Element isn’t rendered',
   /**
    * @description Reason in the Accessibility tab in the Elements panel.
    */
-  elementIsNotVisible: 'Element is not visible',
+  elementIsNotVisible: 'Element isn’t visible',
   /**
    * @description Reason in the Accessibility tab in the Elements panel. Indicates the
    * ARIA role for this element, which will always have the format 'role=', but with different roles

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -199,7 +199,7 @@ const UIStringsNotTranslate = {
    * @description Disclaimer text right after the chat input when enterprise logging is off.
    */
   inputDisclaimerEnterpriseNoLogging:
-      'Chat messages, data accessible for this site via DevTools panels and Web APIs, and items you select such as network requests, files, and performance traces are sent to Google. The content submitted to and generated by this feature will not be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right.',
+      'Chat messages, data accessible for this site via DevTools panels and Web APIs, and items you select such as network requests, files, and performance traces are sent to Google. The content submitted to and generated by this feature won’t be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right.',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/ai_assistance/AiAssistancePanel.ts', UIStrings);

package/front_end/panels/ai_assistance/components/DisabledWidget.ts

@@ -51,7 +51,7 @@ const UIStrings = {
   /**
    * @description Text informing the user that AI assistance is not available in Incognito mode or Guest mode.
    */
-  notAvailableInIncognitoMode: 'AI assistance is not available in Incognito mode or Guest mode',
+  notAvailableInIncognitoMode: 'AI assistance isn’t available in Incognito mode or Guest mode',
 
 } as const;
 

package/front_end/panels/ai_assistance/components/OptInChangeDialog.ts

@@ -36,7 +36,7 @@ const UIStrings = {
    * @description Third point in the opt-in change dialog (disclaimer) for enterprise users with logging disabled.
    */
   privacyDisclaimerEnterpriseNoLogging:
-      'Chat messages, data accessible for this site via DevTools panels and Web APIs, and items you select such as network requests, files, and performance traces are sent to Google. The content submitted to and generated by this feature will not be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right.',
+      'Chat messages, data accessible for this site via DevTools panels and Web APIs, and items you select such as network requests, files, and performance traces are sent to Google. The content submitted to and generated by this feature won’t be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right.',
   /**
    * @description Button text for managing settings.
    */

package/front_end/panels/application/ServiceWorkerUpdateCycleView.ts

@@ -71,8 +71,9 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
                       resize: true,
                       keydown: 'ArrowLeft|ArrowRight|ArrowUp|ArrowDown|Enter|Space',
                     })}>
-          <td class="service-worker-update-timing-bar-clickable" tabindex="0" role="switch"
-              aria-checked=${expanded ? 'true' : 'false'}
+          <td class="service-worker-update-timing-bar-clickable" tabindex="0" role="button"
+              aria-expanded=${expanded ? 'true' : 'false'}
+              aria-label=${`#${range.id} ${phaseName}`}
               @focus=${input.onFocus}
               @keydown=${(e: Event) => input.onKeydown(e, key)}
               @click=${(e: Event) => input.onClick(e, key)}

package/front_end/panels/application/WebMCPView.ts

@@ -187,9 +187,13 @@ const UIStrings = {
    */
   editAndRun: 'Edit and run',
   /**
-   * @description Tooltip text and button label for the paste button in the WebMCP view of the Application panel.
+   * @description Button label for the paste button in the WebMCP view of the Application panel.
    */
   paste: 'Paste',
+  /**
+   * @description Tooltip text for the paste button in the WebMCP view of the Application panel.
+   */
+  pasteTooltip: 'Paste tool parameters from clipboard as JSON',
   /**
    * @description Notice displayed when a tool has been unregistered in the WebMCP view of the Application panel.
    */
@@ -699,7 +703,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                 .size=${Buttons.Button.Size.SMALL}
                 .variant=${Buttons.Button.Variant.TEXT}
                 .jslogContext=${'paste'}
-                title=${i18nString(UIStrings.paste)}
+                title=${i18nString(UIStrings.pasteTooltip)}
                 @click=${input.onPaste}
               >${i18nString(UIStrings.paste)}</devtools-button>
             </div>

package/front_end/panels/application/components/AdsView.ts

@@ -31,11 +31,11 @@ const AD_DETECTION_DOC_URL = 'https://developer.chrome.com/docs/ads/detection';
 
 const UIStrings = {
   /**
-   * @description Title for the metrics table.
+   * @description Title for the metrics section in the ads view of the Application panel.
    */
   metrics: 'Metrics',
   /**
-   * @description Title for a metric showing the percentage of the viewport covered by ads.
+   * @description Title for a metric showing the percentage of the viewport covered by ads in the ads view of the Application panel.
    */
   viewportAdDensity: 'Viewport ad density',
   /**
@@ -43,7 +43,7 @@ const UIStrings = {
    */
   viewportAdDensityExplanation: 'Percentage of the viewport covered by ads',
   /**
-   * @description Title for a metric showing the number of ads in the viewport.
+   * @description Title for a metric showing the number of ads in the viewport in the ads view of the Application panel.
    */
   viewportAdCount: 'Viewport ad count',
   /**
@@ -51,7 +51,7 @@ const UIStrings = {
    */
   viewportAdCountExplanation: 'Number of ads in the viewport',
   /**
-   * @description Title for a metric showing the total CPU usage by ads.
+   * @description Title for a metric showing the total CPU usage by ads in the ads view of the Application panel.
    */
   totalCpuUsage: 'Total CPU usage by ads',
   /**
@@ -59,7 +59,7 @@ const UIStrings = {
    */
   totalCpuUsageExplanation: 'Total CPU time consumed by ads',
   /**
-   * @description Title for a metric showing the total network usage by ads.
+   * @description Title for a metric showing the total network usage by ads in the ads view of the Application panel.
    */
   totalNetworkUsage: 'Total network usage by ads',
   /**
@@ -67,99 +67,98 @@ const UIStrings = {
    */
   totalNetworkUsageExplanation: 'Total network data consumed by ads',
   /**
-   * @description Subtext showing the average value of a metric.
+   * @description Subtext showing the average value of a metric in the ads view of the Application panel.
    * @example {5.00%} PH1
    */
   average: '(Average: {PH1})',
   /**
-   * @description Title for the ad iframes table.
+   * @description Title for the ad iframes table in the ads view of the Application panel.
    * @example {3} PH1
    */
   adIframesTitle: 'Ad iframes (total {PH1})',
   /**
-   * @description Text to display when a value is not available.
+   * @description Text to display when a metric value is not available in the ads view of the Application panel.
    */
   notAvailable: 'N/A',
   /**
-   * @description Text to display when a frame has no name/id.
+   * @description Text to display when a frame has no name or ID in the ads view of the Application panel.
    */
   unnamed: '<unnamed>',
   /**
-   * @description Title for the Element Id column in the ad iframes table.
+   * @description Column header for the element ID in the ad iframes table in the ads view of the Application panel.
    */
   elementId: 'Element ID',
   /**
-   * @description Title for the Initial origin column in the ad iframes table.
+   * @description Column header for the initial origin in the ad iframes table in the ads view of the Application panel.
    */
   initialOrigin: 'Initial origin',
   /**
-   * @description Title for the CPU column in the ad iframes table.
+   * @description Column header for CPU usage in the ad iframes table in the ads view of the Application panel.
    */
   cpu: 'CPU',
   /**
-   * @description Title for the Network column in the ad iframes table.
+   * @description Column header for network usage in the ad iframes table in the ads view of the Application panel.
    */
   network: 'Network',
   /**
-   * @description Accessible name for the ad iframes table.
+   * @description Accessible name for the ad iframes table in the ads view of the Application panel.
    */
   adIframes: 'Ad iframes',
   /**
-   * @description Title for the ad scripts table.
+   * @description Title for the ad scripts table in the ads view of the Application panel.
    * @example {3} PH1
    */
   adScriptsTitle: 'Ad scripts (total {PH1})',
   /**
-   * @description Title for the URL column in the ad scripts table.
+   * @description Column header for the script URL in the ad scripts table in the ads view of the Application panel.
    */
   url: 'URL',
   /**
-   * @description Accessible name for the ad scripts table.
+   * @description Accessible name for the ad scripts table in the ads view of the Application panel.
    */
   adScripts: 'Ad scripts',
   /**
-   * @description Title for the ad provenance column in the ad scripts table.
+   * @description Column header for the ad provenance in the ad scripts table in the ads view of the Application panel.
    */
   adProvenance: 'Ad provenance',
   /**
-   * @description Text to display when a script has no provenance.
+   * @description Text to display when a script has no provenance in the ads view of the Application panel.
    */
   noProvenance: '<no provenance>',
   /**
-   * @description Text to display in the tooltip when a script has no provenance.
+   * @description Tooltip text when a script has no provenance in the ads view of the Application panel.
    */
   noProvenanceTooltip: 'No provenance data is available',
   /**
-   * @description Title for the filter list rule in the ad provenance tooltip.
+   * @description Title for the filter list rule in the ad provenance tooltip in the ads view of the Application panel.
    */
   filterListRule: 'Filter list rule',
   /**
-   * @description Title for the root script filter list rule in the ad provenance tooltip.
+   * @description Title for the root script filter list rule in the ad provenance tooltip in the ads view of the Application panel.
    */
   rootScriptFilterListRule: 'Root script filter list rule',
   /**
-   * @description Title for the creator ad script ancestry in the ad provenance tooltip.
+   * @description Title for the creator ad script ancestry in the ad provenance tooltip in the ads view of the Application panel.
    */
   creatorAdScriptAncestry: 'Creator ad script ancestry',
   /**
-   * @description Title for the settings section.
+   * @description Title for the settings section in the ads view of the Application panel.
    */
   settings: 'Settings',
   /**
-   * @description The name of a checkbox setting. This setting highlights the
-   * rendering elements for ad-related resources that are found on the page.
+   * @description Label for the checkbox setting to highlight ad-related resources on the page in the ads view of the Application panel.
    */
   highlightAdRelatedResources: 'Highlight ad-related resources',
   /**
-   * @description Explanation text for the 'Highlight ad-related resources' setting.
+   * @description Explanation text for the highlight ad-related resources setting in the ads view of the Application panel.
    */
   highlightsElementsRedDetectedToBeAdRelated: 'Highlights elements (red) detected to be ad-related',
   /**
-   * @description Text explaining that ad detection is not perfect.
+   * @description Informational notice explaining that ad detection in Chrome can make mistakes in the ads view of the Application panel.
    */
   adDetectionMistakes: 'Chrome’s ad detection can make mistakes',
   /**
-   * @description Link text for learning more about ad detection in Chrome.
+   * @description Link text to learn more about ad detection in Chrome in the ads view of the Application panel.
    */
   learnMore: 'Learn more',
 } as const;