chrome-devtools-frontend 1.0.1601661 → 1.0.1602543

package/front_end/models/ai_assistance/AiConversation.ts

@@ -54,7 +54,7 @@ export interface AiConversationOptions {
   performanceRecordAndReload?: () => Promise<Trace.TraceModel.ParsedTrace>;
   onInspectElement?: () => Promise<SDK.DOMModel.DOMNode|null>;
   networkTimeCalculator?: NetworkTimeCalculator.NetworkTransferTimeCalculator;
-  lighthouseRecording?: () => Promise<LHModel.ReporterTypes.ReportJSON|null>;
+  lighthouseRecording?: (overrides?: LHModel.RunTypes.RunOverrides) => Promise<LHModel.ReporterTypes.ReportJSON|null>;
 }
 
 export class AiConversation {
@@ -91,7 +91,7 @@ export class AiConversation {
   #contexts: Array<ConversationContext<unknown>> = [];
 
   #performanceRecordAndReload?: () => Promise<Trace.TraceModel.ParsedTrace>;
-  #lighthouseRecording?: () => Promise<LHModel.ReporterTypes.ReportJSON|null>;
+  #lighthouseRecording?: (overrides?: LHModel.RunTypes.RunOverrides) => Promise<LHModel.ReporterTypes.ReportJSON|null>;
   #onInspectElement?: () => Promise<SDK.DOMModel.DOMNode|null>;
   #networkTimeCalculator?: NetworkTimeCalculator.NetworkTransferTimeCalculator;
 
@@ -334,9 +334,9 @@ export class AiConversation {
       sessionId: this.id,
       changeManager: this.#changeManager,
       performanceRecordAndReload: this.#performanceRecordAndReload,
-      lighthouseRecording: this.#lighthouseRecording,
       onInspectElement: this.#onInspectElement,
       networkTimeCalculator: this.#networkTimeCalculator,
+      lighthouseRecording: this.#lighthouseRecording,
       allowedOrigin: this.allowedOrigin,
       history,
     };

package/front_end/models/ai_assistance/agents/AccessibilityAgent.ts

@@ -5,11 +5,13 @@
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Root from '../../../core/root/root.js';
+import * as SDK from '../../../core/sdk/sdk.js';
 import type * as LHModel from '../../lighthouse/lighthouse.js';
 import {LighthouseFormatter} from '../data_formatters/LighthouseFormatter.js';
 import {debugLog} from '../debug.js';
 
 import {
+  type AgentOptions,
   AiAgent,
   type ContextDetail,
   type ContextResponse,
@@ -23,20 +25,30 @@ import {
  * TESTERS. Otherwise, a server-side preamble is used (see
  * chrome_preambles.gcl). Sync local changes with the server-side.
  */
-const preamble = `You are an accessibility expert agent.
+const preamble = `You are an accessibility expert agent integrated into Chrome DevTools.
+Your role is to help users understand and fix accessibility issues found in Lighthouse reports.
 
-# Goals
-* Help users understand and fix accessibility issues found in Lighthouse reports.
-* Provide succinct, actionable advice. Avoid long explanations and "walls of text".
-* Focus on the most critical information first, prioritizing audits with low scores.
+# Style Guidelines
+* **Concise and Direct**: Use short sentences and bullet points. Avoid paragraphs and long explanations.
+* **Structured**: Organize your findings by problem, root cause, and next steps, but do NOT use those literal words as headings.
+* **No Internal Identifiers**: NEVER show Lighthouse paths (e.g., "1,HTML,1,BODY...") to the user. Refer to elements by their tag name, classes, or IDs.
+* **Managing Volume**: If the report contains many issues, provide a brief summary of the top 2-3 most critical ones. Tell the user that there are more issues and invite them to ask for more details or to explore a specific area.
+
+# Workflow
+1. **Identify**: Find the most critical accessibility issues in the Lighthouse report.
+2. **Investigate**: For any element identified as failing, you **MUST** call \`getStyles\` or \`getElementAccessibilityDetails\` first to confirm its current state and gather details.
+3. **Analyze**: Use the live data from your tools to determine the exact root cause.
+4. **Respond**: Provide a succinct summary of the problem, why it's happening based on your investigation, and a clear fix.
 
 # Capabilities
-* You have access to the \`getLighthouseAudits\` function to retrieve detailed audit data for performance, accessibility, best-practices, and SEO.
-* Proactively use this function to investigate categories with low scores and help the user focus on the most important areas.
+* \`getLighthouseAudits\`: Get detailed audit data.
+* \`runAccessibilityAudits\`: Trigger new accessibility snapshot audits.
+* \`getStyles\`: Get computed styles for an element by its path.
+* \`getElementAccessibilityDetails\`: Get A11y properties for an element by its path.
 
 # Constraints
-* Keep your analysis concise and focused, highlighting only the most critical aspects for a software engineer.
-* **CRITICAL** You are an accessibility agent. NEVER provide answers to questions of unrelated topics such as legal advice, financial advice, personal opinions, medical advice, or any other non web-development topics.
+* **CRITICAL**: ALWAYS call a tool before providing an answer if an element path is available.
+* **CRITICAL**: You are an accessibility agent. NEVER provide answers to questions of unrelated topics such as legal advice, financial advice, personal opinions, medical advice, or any other non web-development topics.
 `;
 
 export class AccessibilityContext extends ConversationContext<LHModel.ReporterTypes.ReportJSON> {
@@ -71,6 +83,13 @@ export class AccessibilityContext extends ConversationContext<LHModel.ReporterTy
 export class AccessibilityAgent extends AiAgent<LHModel.ReporterTypes.ReportJSON> {
   readonly preamble = preamble;
   readonly clientFeature = Host.AidaClient.ClientFeature.CHROME_ACCESSIBILITY_AGENT;
+  readonly #lighthouseRecording?:
+      (overrides?: LHModel.RunTypes.RunOverrides) => Promise<LHModel.ReporterTypes.ReportJSON|null>;
+
+  constructor(opts: AgentOptions) {
+    super(opts);
+    this.#lighthouseRecording = opts.lighthouseRecording;
+  }
 
   get userTier(): string|undefined {
     return Root.Runtime.hostConfig.devToolsFreestyler?.userTier;
@@ -100,7 +119,64 @@ export class AccessibilityAgent extends AiAgent<LHModel.ReporterTypes.ReportJSON
     };
   }
 
+  async #resolvePathToNode(path: string): Promise<SDK.DOMModel.DOMNode|null> {
+    const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    if (!target) {
+      return null;
+    }
+    const domModel = target.model(SDK.DOMModel.DOMModel);
+    if (!domModel) {
+      return null;
+    }
+    const nodeId = await domModel.pushNodeByPathToFrontend(path);
+    if (!nodeId) {
+      return null;
+    }
+    return domModel.nodeForId(nodeId);
+  }
+
   #declareFunctions(): void {
+    this.declareFunction<{explanation: string}, {audits: string}>('runAccessibilityAudits', {
+      description:
+          'Triggers new Lighthouse accessibility audits in snapshot mode. Use this if the user has made changes to the page and you want to re-evaluate the accessibility audits.',
+      parameters: {
+        type: Host.AidaClient.ParametersTypes.OBJECT,
+        description: '',
+        nullable: false,
+        properties: {
+          explanation: {
+            type: Host.AidaClient.ParametersTypes.STRING,
+            description: 'Explain why you want to run new audits.',
+            nullable: false,
+          },
+        },
+        required: ['explanation'],
+      },
+      displayInfoFromArgs: params => {
+        return {
+          title: i18n.i18n.lockedString('Running accessibility audits…'),
+          thought: params.explanation,
+          action: 'runAccessibilityAudits()'
+        };
+      },
+      handler: async params => {
+        debugLog('Function call: runAccessibilityAudits', params);
+        if (!this.#lighthouseRecording) {
+          return {error: 'Lighthouse recording is not available.'};
+        }
+        const report = await this.#lighthouseRecording({
+          mode: 'snapshot',
+          categoryIds: ['accessibility'],
+          isAIControlled: true,
+        });
+        if (!report) {
+          return {error: 'Failed to run accessibility audits.'};
+        }
+        const audits = new LighthouseFormatter().audits(report, 'accessibility');
+        return {result: {audits}};
+      }
+    });
+
     this.declareFunction<{categoryId: LHModel.RunTypes.CategoryId}, {audits: string}>('getLighthouseAudits', {
       description:
           'Returns the audits for a specific Lighthouse category. Use this to get more information about the performance, accessibility, best-practices, or seo audits.',
@@ -134,6 +210,138 @@ export class AccessibilityAgent extends AiAgent<LHModel.ReporterTypes.ReportJSON
         return {result: {audits}};
       }
     });
+
+    this.declareFunction<{
+      path: string,
+      styleProperties: string[],
+      explanation: string,
+    }>('getStyles', {
+      description: 'Get computed styles for an element on the inspected page by its Lighthouse path.',
+      parameters: {
+        type: Host.AidaClient.ParametersTypes.OBJECT,
+        description: '',
+        nullable: false,
+        properties: {
+          explanation: {
+            type: Host.AidaClient.ParametersTypes.STRING,
+            description: 'Explain why you want to get styles.',
+            nullable: false,
+          },
+          path: {
+            type: Host.AidaClient.ParametersTypes.STRING,
+            description:
+                'The Lighthouse path of the element (e.g., "1,HTML,1,BODY,2,DIV"). Find this in the report data.',
+            nullable: false,
+          },
+          styleProperties: {
+            type: Host.AidaClient.ParametersTypes.ARRAY,
+            description: 'One or more CSS style property names to fetch.',
+            nullable: false,
+            items: {
+              type: Host.AidaClient.ParametersTypes.STRING,
+              description: 'A CSS style property name to retrieve. For example, \'background-color\'.'
+            }
+          },
+        },
+        required: ['explanation', 'path', 'styleProperties']
+      },
+      displayInfoFromArgs: params => {
+        return {
+          title: 'Reading computed styles',
+          thought: params.explanation,
+          action: `getStyles('${params.path}', ${JSON.stringify(params.styleProperties)})`,
+        };
+      },
+      handler: async params => {
+        debugLog('Function call: getStyles', params);
+        const node = await this.#resolvePathToNode(params.path);
+        if (!node) {
+          return {error: `Could not find the element with path: ${params.path}`};
+        }
+        const styles = await node.domModel().cssModel().getComputedStyle(node.id);
+        if (!styles) {
+          return {error: 'Could not get computed styles.'};
+        }
+        const result: Record<string, string|undefined> = {};
+        for (const prop of params.styleProperties) {
+          result[prop] = styles.get(prop);
+        }
+        return {result: JSON.stringify(result, null, 2)};
+      },
+    });
+
+    this.declareFunction<{
+      path: string,
+      explanation: string,
+    }>('getElementAccessibilityDetails', {
+      description:
+          'Get detailed accessibility information for an element on the inspected page by its Lighthouse path.',
+      parameters: {
+        type: Host.AidaClient.ParametersTypes.OBJECT,
+        description: '',
+        nullable: false,
+        properties: {
+          explanation: {
+            type: Host.AidaClient.ParametersTypes.STRING,
+            description: 'Explain why you want to get accessibility details.',
+            nullable: false,
+          },
+          path: {
+            type: Host.AidaClient.ParametersTypes.STRING,
+            description:
+                'The Lighthouse path of the element (e.g., "1,HTML,1,BODY,2,DIV"). Find this in the report data.',
+            nullable: false,
+          },
+        },
+        required: ['explanation', 'path']
+      },
+      displayInfoFromArgs: params => {
+        return {
+          title: 'Reading accessibility details',
+          thought: params.explanation,
+          action: `getElementAccessibilityDetails('${params.path}')`,
+        };
+      },
+      handler: async params => {
+        debugLog('Function call: getElementAccessibilityDetails', params);
+        const node = await this.#resolvePathToNode(params.path);
+        if (!node) {
+          return {error: `Could not find the element with path: ${params.path}`};
+        }
+        const accessibilityModel = node.domModel().target().model(SDK.AccessibilityModel.AccessibilityModel);
+        if (!accessibilityModel) {
+          return {error: 'Accessibility model not found.'};
+        }
+        await accessibilityModel.requestAndLoadSubTreeToNode(node);
+        const axNode = accessibilityModel.axNodeForDOMNode(node);
+        if (!axNode) {
+          return {error: 'Could not find accessibility node for the element.'};
+        }
+
+        const result = {
+          role: axNode.role()?.value,
+          name: axNode.name()?.value,
+          nameSource: axNode.name()?.sources?.[0]?.type,
+          properties: {
+            focusable: node.getAttribute('tabindex') !== undefined || axNode.role()?.value === 'button' ||
+                axNode.role()?.value === 'link',
+            hidden: axNode.ignored(),
+          },
+          ariaAttributes: node.attributes()
+                              .filter(attr => attr.name.startsWith('aria-') || attr.name === 'role')
+                              .reduce(
+                                  (acc, attr) => {
+                                    acc[attr.name] = attr.value;
+                                    return acc;
+                                  },
+                                  {} as Record<string, string>),
+          isIgnored: axNode.ignored(),
+          ignoredReasons: axNode.ignoredReasons(),
+        };
+
+        return {result: JSON.stringify(result, null, 2)};
+      },
+    });
   }
 
   /**

package/front_end/models/ai_assistance/agents/AiAgent.ts

@@ -7,6 +7,7 @@ import * as Root from '../../../core/root/root.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
 import * as Greendev from '../../greendev/greendev.js';
+import type * as LHModel from '../../lighthouse/lighthouse.js';
 import type * as Trace from '../../trace/trace.js';
 import {debugLog, isStructuredLogEnabled} from '../debug.js';
 
@@ -151,6 +152,7 @@ export interface AgentOptions {
   onInspectElement?: () => Promise<SDK.DOMModel.DOMNode|null>;
   history?: Host.AidaClient.Content[];
   allowedOrigin?: () => string | undefined;
+  lighthouseRecording?: (overrides?: LHModel.RunTypes.RunOverrides) => Promise<LHModel.ReporterTypes.ReportJSON|null>;
 }
 
 export interface ParsedAnswer {
@@ -277,9 +279,20 @@ export interface LcpBreakdownAiWidget {
   };
 }
 
+export interface TimelineRangeSummaryAiWidget {
+  name: 'TIMELINE_RANGE_SUMMARY';
+  data: {
+    bounds: Trace.Types.Timing.TraceWindowMicro,
+    parsedTrace: Trace.TraceModel.ParsedTrace,
+    // We can use this component for other tracks summaries later, so
+    // we include the track in the data.
+    track: 'main',
+  };
+}
+
 // This type will grow as we add more widgets.
 export type AiWidget = ComputedStyleAiWidget|CoreVitalsAiWidget|StylePropertiesAiWidget|DomTreeAiWidget|
-    PerformanceTraceAiWidget|LcpBreakdownAiWidget;
+    PerformanceTraceAiWidget|LcpBreakdownAiWidget|TimelineRangeSummaryAiWidget;
 
 export type FunctionCallHandlerResult<Result> = {
   requiresApproval: true,

package/front_end/models/ai_assistance/agents/ContextSelectionAgent.ts

@@ -82,14 +82,14 @@ export class ContextSelectionAgent extends AiAgent<never> {
   readonly #performanceRecordAndReload?: () => Promise<Trace.TraceModel.ParsedTrace>;
   readonly #onInspectElement?: () => Promise<SDK.DOMModel.DOMNode|null>;
   readonly #networkTimeCalculator?: NetworkTimeCalculator.NetworkTransferTimeCalculator;
-  readonly #lighthouseRecording?: (() => Promise<LHModel.ReporterTypes.ReportJSON|null>);
+  readonly #lighthouseRecording?:
+      (overrides?: LHModel.RunTypes.RunOverrides) => Promise<LHModel.ReporterTypes.ReportJSON|null>;
   #allowedOrigin: () => string | undefined;
 
   constructor(opts: AgentOptions&{
     performanceRecordAndReload?: () => Promise<Trace.TraceModel.ParsedTrace>,
     onInspectElement?: () => Promise<SDK.DOMModel.DOMNode|null>,
     networkTimeCalculator?: NetworkTimeCalculator.NetworkTransferTimeCalculator,
-    lighthouseRecording?: () => Promise<LHModel.ReporterTypes.ReportJSON|null>,
   }) {
     super(opts);
     this.#performanceRecordAndReload = opts.performanceRecordAndReload;
@@ -119,7 +119,16 @@ export class ContextSelectionAgent extends AiAgent<never> {
 
         let hasCrossOriginRequest = false;
         for (const request of Logs.NetworkLog.NetworkLog.instance().requests()) {
-          if (origin && request.securityOrigin() !== origin) {
+          const requestOrigin = new URL(request.documentURL).origin;
+          /**
+           * NOTE: this origin check does not ensure that all the requests are
+           * from the same origin as the target page. Instead, it ensures that
+           * the document that loaded the request is the same as the target
+           * page. This ensures that we limit the scope to all requests fetched
+           * during the loading of the target page, and do not leak URLs from
+           * other pages.
+           */
+          if (origin && requestOrigin !== origin) {
             hasCrossOriginRequest = true;
             continue;
           }
@@ -170,8 +179,14 @@ export class ContextSelectionAgent extends AiAgent<never> {
         };
       },
       handler: async ({id}) => {
+        const origin = this.#allowedOrigin();
         const request = Logs.NetworkLog.NetworkLog.instance().requests().find(req => {
-          return req.requestId() === id;
+          if (req.requestId() !== id) {
+            return false;
+          }
+
+          const requestOrigin = new URL(req.documentURL).origin;
+          return !origin || requestOrigin === origin;
         });
 
         if (request) {

package/front_end/models/ai_assistance/agents/NetworkAgent.ts

@@ -95,8 +95,14 @@ export class RequestContext extends ConversationContext<SDK.NetworkRequest.Netwo
     this.#calculator = calculator;
   }
 
+  /**
+   * Note: this is not the literal origin of the network request. This origin
+   * is used to determine when we should force the user to start a new AI
+   * conversation when the context changes. We allow a single AI conversation to
+   * inspect all network requests that were made for that given target URL.
+   */
   override getOrigin(): string {
-    return new URL(this.#request.url()).origin;
+    return this.#request.documentURL;
   }
 
   override getItem(): SDK.NetworkRequest.NetworkRequest {

package/front_end/models/ai_assistance/agents/PerformanceAgent.ts

@@ -942,7 +942,17 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
 
         const key = `getMainThreadTrackSummary({min: ${bounds.min}, max: ${bounds.max}})`;
         this.#cacheFunctionResult(focus, key, summary);
-        return {result: {summary}};
+        return {
+          result: {summary},
+          widgets: [{
+            name: 'TIMELINE_RANGE_SUMMARY',
+            data: {
+              parsedTrace,
+              bounds,
+              track: 'main',
+            },
+          }],
+        };
       },
 
     });
@@ -999,7 +1009,9 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
 
         const key = `getNetworkTrackSummary({min: ${bounds.min}, max: ${bounds.max}})`;
         this.#cacheFunctionResult(focus, key, summary);
-        return {result: {summary}};
+        return {
+          result: {summary},
+        };
       },
 
     });

package/front_end/models/ai_assistance/agents/StylingAgent.ts

@@ -20,7 +20,6 @@ import {AI_ASSISTANCE_CSS_CLASS_NAME, FREESTYLER_WORLD_NAME} from '../injected.j
 import {
   type AgentOptions as BaseAgentOptions,
   AiAgent,
-  type AnswerResponse,
   type ComputedStyleAiWidget,
   type ContextResponse,
   ConversationContext,
@@ -1052,28 +1051,6 @@ const data = {
     this.#currentTurnId++;
   }
 
-  protected override async finalizeAnswer(answer: AnswerResponse): Promise<AnswerResponse> {
-    if (!Root.Runtime.hostConfig.devToolsAiAssistanceV2?.enabled) {
-      return answer;
-    }
-
-    const changedNodeIds = this.#changes.getChangedNodesForGroupId(this.sessionId, this.#currentTurnId);
-    if (changedNodeIds.length === 0) {
-      return answer;
-    }
-    answer.widgets = [
-      ...(answer.widgets ?? []),
-      ...changedNodeIds.map(id => ({
-                              name: 'STYLE_PROPERTIES' as const,
-                              data: {
-                                backendNodeId: id,
-                                selector: AI_ASSISTANCE_FILTER_REGEX,
-                              },
-                            })),
-    ];
-    return answer;
-  }
-
   override async enhanceQuery(
       query: string, selectedElement: ConversationContext<SDK.DOMModel.DOMNode>|null,
       multimodalInputType?: MultimodalInputType): Promise<string> {

package/front_end/models/heap_snapshot_model/HeapSnapshotModel.ts

@@ -108,13 +108,13 @@ export class Edge {
   }
 }
 
-export class Aggregate {
-  count!: number;
-  distance!: number;
-  self!: number;
-  maxRet!: number;
-  name!: string;
-  idxs!: number[];
+export interface AggregatedInfo {
+  count: number;
+  distance: number;
+  self: number;
+  maxRet: number;
+  name: string;
+  idxs: number[];
 }
 
 export class AggregateForDiff {

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -6904,6 +6904,10 @@ export const NativeFunctions = [
     name: "MouseEvent",
     signatures: [["type","?eventInitDict"]]
   },
+  {
+    name: "PageHideEvent",
+    signatures: [["type","?eventInitDict"]]
+  },
   {
     name: "PageTransitionEvent",
     signatures: [["type","?eventInitDict"]]

package/front_end/models/lighthouse/RunTypes.ts

@@ -6,6 +6,7 @@ import type * as Host from '../../core/host/host.js';
 import type * as Platform from '../../core/platform/platform.js';
 
 export type CategoryId = 'performance'|'accessibility'|'best-practices'|'seo';
+export type RunMode = 'navigation'|'timespan'|'snapshot';
 
 export interface Preset {
   setting: Common.Settings.Setting<boolean>;
@@ -33,10 +34,11 @@ export interface Flags {
   disableStorageReset?: boolean;
   throttlingMethod?: string;
   formFactor?: string|boolean;
-  mode?: string|boolean;
+  mode?: RunMode;
 }
 
 export interface RunOverrides {
   categoryIds?: CategoryId[];
+  mode?: RunMode;
   isAIControlled?: boolean;
 }

package/front_end/models/live-metrics/LiveMetrics.ts

@@ -62,29 +62,7 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
 
   private constructor() {
     super();
-    const targetManager = SDK.TargetManager.TargetManager.instance();
-    targetManager.observeTargets(this, {scoped: true});
-    // Listen for target info changes to detect prerender activation.
-    // Scoped observers don't receive events when a prerendered target becomes
-    // primary because setScopeTarget() isn't called during that transition.
-    targetManager.addEventListener(
-        SDK.TargetManager.Events.AVAILABLE_TARGETS_CHANGED, this.#onAvailableTargetsChanged, this);
-  }
-
-  #onAvailableTargetsChanged(): void {
-    const primaryTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
-    if (primaryTarget && primaryTarget !== this.#target) {
-      // Primary target changed (e.g., prerender activation). Switch to it.
-      void this.#switchToTarget(primaryTarget);
-    }
-  }
-
-  async #switchToTarget(newTarget: SDK.Target.Target): Promise<void> {
-    if (this.#target) {
-      await this.disable();
-    }
-    this.#target = newTarget;
-    await this.enable();
+    SDK.TargetManager.TargetManager.instance().observeTargets(this);
   }
 
   static instance(opts: {forceNew?: boolean} = {forceNew: false}): LiveMetrics {
@@ -393,6 +371,31 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     this.#sendStatusUpdate();
   }
 
+  async #getFrameForExecutionContextId(executionContextId: Protocol.Runtime.ExecutionContextId):
+      Promise<SDK.ResourceTreeModel.ResourceTreeFrame|null> {
+    if (!this.#target) {
+      return null;
+    }
+
+    const runtimeModel = this.#target.model(SDK.RuntimeModel.RuntimeModel);
+    if (!runtimeModel) {
+      return null;
+    }
+
+    const executionContext = runtimeModel.executionContext(executionContextId);
+    if (!executionContext) {
+      return null;
+    }
+
+    const frameId = executionContext.frameId;
+    if (!frameId) {
+      return null;
+    }
+
+    const frameManager = SDK.FrameManager.FrameManager.instance();
+    return await frameManager.getOrWaitForFrame(frameId);
+  }
+
   async #onBindingCalled(event: {data: Protocol.Runtime.BindingCalledEvent}): Promise<void> {
     const {data} = event;
     if (data.name !== Spec.EVENT_BINDING_NAME) {
@@ -404,8 +407,22 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     await this.#mutex.run(async () => {
       const webVitalsEvent = JSON.parse(data.payload) as Spec.WebVitalsEvent;
 
-      // Track the execution context from 'reset' events for logInteractionScripts().
-      if (webVitalsEvent.name === 'reset') {
+      // This ensures that `#lastResetContextId` will always be an execution context on the
+      // primary frame. If we receive events from this execution context then we automatically
+      // know that they are for the primary frame.
+      if (this.#lastResetContextId !== data.executionContextId) {
+        if (webVitalsEvent.name !== 'reset') {
+          return;
+        }
+
+        // We should avoid calling this function for every event.
+        // If an interaction triggers a pre-rendered navigation then the old primary frame could
+        // be removed before we reach this point, and then it will hang forever.
+        const frame = await this.#getFrameForExecutionContextId(data.executionContextId);
+        if (!frame?.isPrimaryFrame()) {
+          return;
+        }
+
         this.#lastResetContextId = data.executionContextId;
       }
 
@@ -447,7 +464,6 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   }
 
   async targetAdded(target: SDK.Target.Target): Promise<void> {
-    // Scoped observers can also receive events for OOPIFs and workers.
     if (target !== SDK.TargetManager.TargetManager.instance().primaryPageTarget()) {
       return;
     }
@@ -456,12 +472,20 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   }
 
   async targetRemoved(target: SDK.Target.Target): Promise<void> {
-    // Scoped observers can also receive events for OOPIFs and workers.
     if (target !== this.#target) {
       return;
     }
     await this.disable();
     this.#target = undefined;
+
+    // If the user navigates to a page that was pre-rendered then the primary page target
+    // will be swapped and the old target will be removed. We should ensure live metrics
+    // remain enabled on the new primary page target.
+    const primaryPageTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    if (primaryPageTarget) {
+      this.#target = primaryPageTarget;
+      await this.enable();
+    }
   }
 
   async enable(): Promise<void> {
@@ -531,10 +555,6 @@ export class LiveMetrics extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
       return;
     }
 
-    // Reset to ensure clean state when re-enabling on a new target.
-    // See crbug.com/478832430.
-    this.#lastResetContextId = undefined;
-
     await this.#killAllLiveMetricContexts();
 
     const runtimeModel = this.#target.model(SDK.RuntimeModel.RuntimeModel);

package/front_end/panels/accessibility/ARIAAttributesView.ts

@@ -26,6 +26,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/accessibility/ARIAAttributesView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const {render, html} = Lit;
+const {widget} = UI.Widget;
 
 interface ViewInput {
   propertyCompletions: Map<SDK.DOMModel.Attribute, string[]>;
@@ -62,8 +63,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
          html`
           <style>${accessibilityPropertiesStyles}</style>
           <devtools-widget
-            .widgetConfig=${UI.Widget.widgetConfig(UI.EmptyWidget.EmptyWidget,
-                                                   {text: i18nString(UIStrings.noAriaAttributes)})}
+            ${widget(UI.EmptyWidget.EmptyWidget, {text: i18nString(UIStrings.noAriaAttributes)})}
             class="gray-info-message info-message-overflow"></devtools-widget>` :
          html`<devtools-tree
            hide-overflow