chrome-devtools-frontend 1.0.1650232 → 1.0.1650677

package/.agents/skills/version-control/SKILL.md

@@ -1,10 +1,14 @@
 ---
 name: devtools-version-control
-description: Use when managing branches, creating and uploading CLs, or handling stacked changes in the DevTools Gerrit-based workflow.
+description: Use when starting a new task, creating a branch, switching branches, managing branches, creating and uploading CLs, or handling stacked changes in the DevTools Gerrit-based workflow. ALWAYS use this instead of running standard git checkout/switch commands for branch creation.
 ---
 
 # DevTools Version Control
 
+> [!IMPORTANT]
+> **DO NOT use standard Git commands like `git checkout -b` or `git switch -c` to create branches.**
+> In Chrome DevTools, you MUST always use `git new-branch <branch-name>` (or `git new-branch --upstream_current <branch-name>` for stacked CLs). Standard commands fail to configure the correct upstream tracking branch required by `depot_tools` and Gerrit.
+
 ## Overview
 Chrome DevTools uses Gerrit for code review. The standard workflow is **one branch per Change List (CL)** and **one commit per branch**. Instead of multiple commits, you amend your single commit locally.
 

package/config/typescript/tsconfig.base.json

@@ -18,6 +18,7 @@
     "noFallthroughCasesInSwitch": true,
 
     "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
 
     "composite": true,
     "declaration": true,

package/front_end/core/host/InspectorFrontendHostAPI.ts

@@ -556,6 +556,5 @@ export const enum EnumeratedHistogram {
   LighthouseCategoryUsed = 'DevTools.LighthouseCategoryUsed',
   SwatchActivated = 'DevTools.SwatchActivated',
   BuiltInAiAvailability = 'DevTools.BuiltInAiAvailability',
-  ExtensionEvalTarget = 'DevTools.ExtensionEvalTarget',
   // LINT.ThenChange(/front_end/devtools_compatibility.js:EnumeratedHistogram)
 }

package/front_end/core/host/UserMetrics.ts

@@ -254,10 +254,6 @@ export class UserMetrics {
         'DevTools.Insights.ShortTeaserGenerationTime', timeInMilliseconds);
   }
 
-  extensionEvalTarget(target: ExtensionEvalTarget): void {
-    InspectorFrontendHostInstance.recordEnumeratedHistogram(
-        EnumeratedHistogram.ExtensionEvalTarget, target, ExtensionEvalTarget.MAX_VALUE);
-  }
 }
 
 /**
@@ -1197,10 +1193,3 @@ export const enum BuiltInAiAvailability {
   DISABLED_NO_GPU = 9,
   MAX_VALUE = 10,
 }
-
-export const enum ExtensionEvalTarget {
-  WEB_PAGE = 0,
-  SAME_EXTENSION = 1,
-  OTHER_EXTENSION = 2,
-  MAX_VALUE = 3,
-}

package/front_end/devtools_compatibility.js

@@ -444,8 +444,7 @@
     TimelineNavigationSettingState: 'DevTools.TimelineNavigationSettingState',
     SyncSetting: 'DevTools.SyncSetting',
     SwatchActivated: 'DevTools.SwatchActivated',
-    BuiltInAiAvailability: 'DevTools.BuiltInAiAvailability',
-    ExtensionEvalTarget: 'DevTools.ExtensionEvalTarget'
+    BuiltInAiAvailability: 'DevTools.BuiltInAiAvailability'
     // LINT.ThenChange(/front_end/core/host/InspectorFrontendHostAPI.ts:EnumeratedHistogram)
   };
 

package/front_end/foundation/Universe.ts

@@ -14,6 +14,9 @@ export interface CreationOptions {
 }
 
 export class Universe {
+  // TODO(crbug.com/493763857): Once a singleton is no longer a singleton (i.e. it has no 'instance')
+  //                            static method, we can move it out of the `DevToolsContext` and store it
+  //                            directly on the `Universe`.
   readonly context: Root.DevToolsContext.DevToolsContext;
 
   constructor(options: CreationOptions) {
@@ -59,4 +62,8 @@ export class Universe {
         resourceMapping, targetManager, ignoreListManager, workspace);
     context.set(Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding, debuggerWorkspaceBinding);
   }
+
+  get pageResourceLoader(): SDK.PageResourceLoader.PageResourceLoader {
+    return this.context.get(SDK.PageResourceLoader.PageResourceLoader);
+  }
 }

package/front_end/models/ai_assistance/AiAgent2.ts

@@ -4,6 +4,7 @@
 
 import * as Host from '../../core/host/host.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import type * as LHModel from '../lighthouse/lighthouse.js';
 
 import {
   AiAgent,
@@ -27,6 +28,7 @@ import {ToolRegistry} from './tools/ToolRegistry.js';
 const SKILL_DISPLAY_NAMES: Record<SkillName, string> = {
   styling: 'CSS and styling',
   network: 'Network requests',
+  accessibility: 'Accessibility',
 };
 
 const preamble = `You are the most advanced unified AI assistant integrated into Chrome DevTools.
@@ -56,6 +58,10 @@ If the user asks a question that requires an investigation or debugging, use thi
 * **CRITICAL**: Do not write full Python programs or other scripts to interact with the environment. Only invoke the allowed tools.
 * **CRITICAL**: Do not expose raw, internal system identifiers (such as database IDs, internal node paths, or event keys) directly to the user. Use descriptive names instead.`;
 
+export interface AiAgent2Options extends ExecuteJsAgentOptions {
+  lighthouseRecording?: (overrides?: LHModel.RunTypes.RunOverrides) => Promise<LHModel.ReporterTypes.ReportJSON|null>;
+}
+
 export class AiAgent2 extends AiAgent<unknown> {
   // TODO: The static preamble is a placeholder and will eventually live server-side.
   readonly preamble = preamble;
@@ -65,6 +71,8 @@ export class AiAgent2 extends AiAgent<unknown> {
   #changes = new ChangeManager();
   #execJs: typeof executeJsCode;
   readonly #allowedOrigin?: () => AllowedOriginResult;
+  readonly #lighthouseRecording?:
+      (overrides?: LHModel.RunTypes.RunOverrides) => Promise<LHModel.ReporterTypes.ReportJSON|null>;
 
   get options(): RequestOptions {
     return {};
@@ -73,8 +81,9 @@ export class AiAgent2 extends AiAgent<unknown> {
   readonly #activeSkills = new Set<SkillName>();
   readonly #declaredTools = new Set<string>();
 
-  constructor(opts: ExecuteJsAgentOptions) {
+  constructor(opts: AiAgent2Options) {
     super(opts);
+    this.#lighthouseRecording = opts.lighthouseRecording;
     this.#execJs = opts.execJs ?? executeJsCode;
     this.#allowedOrigin = opts.allowedOrigin;
     this.#declaredTools.add('learnSkills');
@@ -224,6 +233,7 @@ User query: ${enhancedQuery}`;
           getExecutionContextNode: () => this.context instanceof DOMNodeContext ? this.context.getItem() : null,
           getTarget: () => SDK.TargetManager.TargetManager.instance().primaryPageTarget(),
           getEstablishedOrigin: () => this.#getConversationOrigin(),
+          lighthouseRecording: this.#lighthouseRecording,
         };
         return tool.handler(args, context, options);
       },

package/front_end/models/ai_assistance/README.md

@@ -105,6 +105,10 @@ To aid debugging, you can enable the AI Assistance logging. This setting is stor
 
 Now, when interacting with the AI and sending requests, you will see output logged to the console. You can use the `debugLog` helper to add your own logging as you are building out your feature.
 
+### Testing the Accessibility Skill
+
+The accessibility skill (`accessibility.md`) relies on an active Lighthouse report. Before interacting with the agent using this skill, ensure you have run a Lighthouse audit on the page you are inspecting so that the `getLighthouseAudits` tool can retrieve the report data.
+
 ## Security & Origin Isolation
 
 To prevent prompt injection attacks and cross-origin data leaks, the AI Assistance panel enforces strict origin-lock boundaries:

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

@@ -483,6 +483,8 @@ export class AccessibilityAgent extends AiAgent<LHModel.ReporterTypes.ReportJSON
           name: 'DOM_TREE',
           data: {
             root: snapshot,
+            title: i18n.i18n.lockedString('Element details'),
+            accessibleRevealLabel: i18n.i18n.lockedString('Reveal element'),
           },
         });
 

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

@@ -4,6 +4,7 @@
 
 import * as Host from '../../../core/host/host.js';
 import type {UrlString} from '../../../core/platform/DevToolsPath.js';
+import type * as Platform from '../../../core/platform/platform.js';
 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';
@@ -274,6 +275,8 @@ export interface DomTreeAiWidget {
   name: 'DOM_TREE';
   data: {
     root: SDK.DOMModel.DOMNodeSnapshot,
+    title: Platform.UIString.LocalizedString,
+    accessibleRevealLabel: Platform.UIString.LocalizedString,
     networkRequest?: {
       url: string,
       size: number,

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

@@ -1051,6 +1051,8 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
                     data: {
                       root: snapshot,
                       networkRequest,
+                      title: lockedString('LCP element'),
+                      accessibleRevealLabel: lockedString('Reveal LCP element'),
                     },
                   });
                 }

package/front_end/models/ai_assistance/ai_assistance.ts

@@ -43,9 +43,11 @@ import * as AIQueries from './performance/AIQueries.js';
 import * as PerformanceAnnotations from './PerformanceAnnotations.js';
 import * as StorageItem from './StorageItem.js';
 import * as ExecuteJavaScript from './tools/ExecuteJavaScript.js';
+import * as GetLighthouseAudits from './tools/GetLighthouseAudits.js';
 import * as GetNetworkRequestDetails from './tools/GetNetworkRequestDetails.js';
 import * as GetStyles from './tools/GetStyles.js';
 import * as ListNetworkRequests from './tools/ListNetworkRequests.js';
+import * as ResolveLighthousePath from './tools/ResolveLighthousePath.js';
 import * as Tool from './tools/Tool.js';
 import * as ToolRegistry from './tools/ToolRegistry.js';
 
@@ -74,6 +76,7 @@ export {
   FileAgent,
   FileContext,
   FileFormatter,
+  GetLighthouseAudits,
   GetNetworkRequestDetails,
   GetStyles,
   GreenDevAgent,
@@ -90,6 +93,7 @@ export {
   PerformanceInsightFormatter,
   PerformanceTraceFormatter,
   RequestContext,
+  ResolveLighthousePath,
   StorageAgent,
   StorageItem,
   StylingAgent,

package/front_end/models/ai_assistance/skills/Skill.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 // This will become a union type as we add more skills (e.g. 'styling' | 'network').
-export type SkillName = 'styling'|'network';
+export type SkillName = 'styling'|'network'|'accessibility';
 
 export interface Skill {
   name: SkillName;

package/front_end/models/ai_assistance/skills/SkillRegistry.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 {skill as accessibilitySkill} from './accessibility.skill.js';
 import {skill as networkSkill} from './network.skill.js';
 import type {Skill, SkillName} from './Skill.js';
 import {skill as stylingSkill} from './styling.skill.js';
@@ -9,4 +10,5 @@ import {skill as stylingSkill} from './styling.skill.js';
 export const SKILLS: Record<SkillName, Skill> = {
   styling: stylingSkill,
   network: networkSkill,
+  accessibility: accessibilitySkill,
 };

package/front_end/models/ai_assistance/skills/accessibility.md

@@ -0,0 +1,13 @@
+---
+name: accessibility
+description: Accessibility audits and report querying.
+allowed-tools:
+  - getLighthouseAudits
+  - resolveLighthousePath
+  - getStyles
+---
+You are an expert accessibility debugging assistant.
+Use getLighthouseAudits to query details from the active report.
+
+* ALWAYS use resolveLighthousePath to resolve failing element paths to backend node IDs.
+* Once resolved, use getStyles on the backend node ID to inspect layout and styling properties.

package/front_end/models/ai_assistance/tools/GetLighthouseAudits.ts

@@ -0,0 +1,54 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Host from '../../../core/host/host.js';
+import type * as LHModel from '../../lighthouse/lighthouse.js';
+import type {FunctionCallHandlerResult} from '../agents/AiAgent.js';
+import {AccessibilityContext} from '../contexts/AccessibilityContext.js';
+import {LighthouseFormatter} from '../data_formatters/LighthouseFormatter.js';
+
+import {type BaseToolCapability, type Tool, type ToolArgs, ToolName} from './Tool.js';
+
+export interface GetLighthouseAuditsArgs extends ToolArgs {
+  categoryId: LHModel.RunTypes.CategoryId;
+}
+
+export class GetLighthouseAuditsTool implements Tool<GetLighthouseAuditsArgs, {audits: string}, BaseToolCapability> {
+  readonly name = ToolName.GET_LIGHTHOUSE_AUDITS;
+  readonly description = 'Returns the audits for a specific Lighthouse category.';
+
+  readonly parameters: Host.AidaClient.FunctionObjectParam<keyof GetLighthouseAuditsArgs> = {
+    type: Host.AidaClient.ParametersTypes.OBJECT,
+    description: 'Arguments for retrieving Lighthouse category audits.',
+    nullable: false,
+    properties: {
+      categoryId: {
+        type: Host.AidaClient.ParametersTypes.STRING,
+        description: 'The category of audits to retrieve. E.g. "accessibility".',
+        nullable: false,
+      },
+    },
+    required: ['categoryId'],
+  };
+
+  displayInfoFromArgs(params: GetLighthouseAuditsArgs): {title: string, action: string} {
+    return {
+      title: `Getting Lighthouse audits for ${params.categoryId}`,
+      action: `getLighthouseAudits('${params.categoryId}')`,
+    };
+  }
+
+  async handler(params: GetLighthouseAuditsArgs,
+                context: BaseToolCapability): Promise<FunctionCallHandlerResult<{audits: string}>> {
+    if (!(context.conversationContext instanceof AccessibilityContext)) {
+      return {error: 'Error: Active context is not a Lighthouse report.'};
+    }
+    const report = context.conversationContext.getItem();
+    const audits = new LighthouseFormatter().audits(report, params.categoryId);
+    return {
+      result: {audits},
+      widgets: [{name: 'LIGHTHOUSE_REPORT', data: {report}}],
+    };
+  }
+}

package/front_end/models/ai_assistance/tools/ResolveLighthousePath.ts

@@ -0,0 +1,124 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Host from '../../../core/host/host.js';
+import * as SDK from '../../../core/sdk/sdk.js';
+import type {FunctionCallHandlerResult} from '../agents/AiAgent.js';
+import {DOMNodeContext} from '../contexts/DOMNodeContext.js';
+
+import {
+  type BaseToolCapability,
+  type OriginLockCapability,
+  type TargetCapability,
+  type Tool,
+  type ToolArgs,
+  ToolName,
+} from './Tool.js';
+
+/**
+ * Arguments for resolving a Lighthouse path to a backend node ID.
+ */
+export interface ResolveLighthousePathArgs extends ToolArgs {
+  /**
+   * A Lighthouse-style element path.
+   * This is typically a comma-separated list of child indices and tag names
+   * representing the path from the root to the target element (e.g., "1,HTML,1,BODY").
+   */
+  path: string;
+  explanation: string;
+}
+
+/**
+ * A tool that resolves a Lighthouse-style element path to a backend node ID.
+ *
+ * This is used by the AI assistant to identify specific DOM nodes referred to in
+ * Lighthouse reports. It ensures the resolved node belongs to the locked origin.
+ */
+export class ResolveLighthousePathTool implements
+    Tool<ResolveLighthousePathArgs, {backendNodeId: number}, BaseToolCapability&TargetCapability&OriginLockCapability> {
+  readonly name = ToolName.RESOLVE_LIGHTHOUSE_PATH;
+  readonly description = 'Resolves a Lighthouse path to a backend node ID.';
+
+  readonly parameters: Host.AidaClient.FunctionObjectParam<keyof ResolveLighthousePathArgs> = {
+    type: Host.AidaClient.ParametersTypes.OBJECT,
+    description: 'Arguments for resolving a Lighthouse path to a backend node ID.',
+    nullable: false,
+    properties: {
+      explanation: {
+        type: Host.AidaClient.ParametersTypes.STRING,
+        description: 'Reason for requesting this resolution.',
+        nullable: false,
+      },
+      path: {
+        type: Host.AidaClient.ParametersTypes.STRING,
+        description: 'Lighthouse path string.',
+        nullable: false,
+      },
+    },
+    required: ['explanation', 'path'],
+  };
+
+  displayInfoFromArgs(params: ResolveLighthousePathArgs): {
+    title: string,
+    thought: string,
+    action: string,
+  } {
+    return {
+      title: 'Resolving element path',
+      thought: params.explanation,
+      action: `resolveLighthousePath('${params.path}')`,
+    };
+  }
+
+  /**
+   * Handles the resolution request.
+   *
+   * It retrieves the node path using the target's DOMModel and verifies
+   * that the node's origin matches the established origin lock to prevent
+   * access to nodes from other origins.
+   */
+  async handler(
+      params: ResolveLighthousePathArgs,
+      context: BaseToolCapability&TargetCapability&OriginLockCapability,
+      ): Promise<FunctionCallHandlerResult<{backendNodeId: number}>> {
+    const establishedOrigin = context.getEstablishedOrigin();
+    if (!establishedOrigin) {
+      return {error: 'Error: Origin lock is not established.'};
+    }
+
+    const target = context.getTarget();
+    const domModel = target?.model(SDK.DOMModel.DOMModel);
+    if (!domModel) {
+      return {error: 'Error: Inspected target not found.'};
+    }
+
+    let nodeId;
+    try {
+      // Resolves the Lighthouse path (a representation of the path to a node)
+      // and ensures the node is loaded into the frontend DOM model, returning its ID.
+      nodeId = await domModel.pushNodeByPathToFrontend(params.path);
+    } catch {
+      return {error: 'Error: Could not find node by path.'};
+    }
+    if (!nodeId) {
+      return {error: 'Error: Could not find node by path.'};
+    }
+
+    const node = domModel.nodeForId(nodeId);
+    if (!node) {
+      return {error: 'Error: Could not retrieve resolved node.'};
+    }
+
+    const nodeContext = new DOMNodeContext(node);
+    // Security check: Ensure the resolved node belongs to the same origin
+    // that this AI assistance session is locked to, preventing cross-origin access.
+    if (!nodeContext.isOriginAllowed(establishedOrigin)) {
+      return {error: 'Error: Node does not belong to the locked origin.'};
+    }
+
+    return {
+      result: {backendNodeId: node.backendNodeId()},
+    };
+  }
+}

package/front_end/models/ai_assistance/tools/Tool.ts

@@ -4,6 +4,7 @@
 
 import type * as Host from '../../../core/host/host.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
+import type * as LHModel from '../../lighthouse/lighthouse.js';
 import type {ConversationContext, FunctionCallHandlerResult, FunctionHandlerOptions} from '../agents/AiAgent.js';
 import type {executeJsCode} from '../agents/ExecuteJavascript.js';
 import type {ChangeManager} from '../ChangeManager.js';
@@ -72,12 +73,19 @@ export interface OriginLockCapability {
   getEstablishedOrigin(): string|undefined;
 }
 
+/**
+ * Capability for tools that need to run or query Lighthouse audits.
+ */
+export interface LighthouseCapability {
+  lighthouseRecording?: (overrides?: LHModel.RunTypes.RunOverrides) => Promise<LHModel.ReporterTypes.ReportJSON|null>;
+}
+
 /**
  * Unified context interface providing all capabilities available in the project.
  * Used by the agent to pass a complete context to any tool type-safely.
  */
-export type AllToolsContext =
-    BaseToolCapability&PageExecutionCapability&StyleMutationCapability&TargetCapability&OriginLockCapability;
+export type AllToolsContext = BaseToolCapability&PageExecutionCapability&StyleMutationCapability&TargetCapability&
+    OriginLockCapability&LighthouseCapability;
 
 /**
  * Base argument type for AI Tools.
@@ -89,6 +97,8 @@ export const enum ToolName {
   GET_STYLES = 'getStyles',
   LIST_NETWORK_REQUESTS = 'listNetworkRequests',
   GET_NETWORK_REQUEST_DETAILS = 'getNetworkRequestDetails',
+  GET_LIGHTHOUSE_AUDITS = 'getLighthouseAudits',
+  RESOLVE_LIGHTHOUSE_PATH = 'resolveLighthousePath',
 }
 
 /**

package/front_end/models/ai_assistance/tools/ToolRegistry.ts

@@ -3,9 +3,11 @@
 // found in the LICENSE file.
 
 import {ExecuteJavaScriptTool} from './ExecuteJavaScript.js';
+import {GetLighthouseAuditsTool} from './GetLighthouseAudits.js';
 import {GetNetworkRequestDetailsTool} from './GetNetworkRequestDetails.js';
 import {GetStylesTool} from './GetStyles.js';
 import {ListNetworkRequestsTool} from './ListNetworkRequests.js';
+import {ResolveLighthousePathTool} from './ResolveLighthousePath.js';
 import {type AllToolsContext, type Tool, type ToolArgs, ToolName} from './Tool.js';
 
 /**
@@ -21,6 +23,8 @@ export const TOOLS = {
   [ToolName.GET_STYLES]: new GetStylesTool(),
   [ToolName.LIST_NETWORK_REQUESTS]: new ListNetworkRequestsTool(),
   [ToolName.GET_NETWORK_REQUEST_DETAILS]: new GetNetworkRequestDetailsTool(),
+  [ToolName.GET_LIGHTHOUSE_AUDITS]: new GetLighthouseAuditsTool(),
+  [ToolName.RESOLVE_LIGHTHOUSE_PATH]: new ResolveLighthousePathTool(),
 };
 
 /**

package/front_end/models/persistence/NetworkPersistenceManager.ts

@@ -888,6 +888,10 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
   }
 
   handleHeaderInterception(interceptedRequest: SDK.NetworkManager.InterceptedRequest): Protocol.Fetch.HeaderEntry[] {
+    if (NetworkPersistenceManager.isForbiddenNetworkUrl(interceptedRequest.request.url as
+                                                        Platform.DevToolsPath.UrlString)) {
+      return [];
+    }
     let result: Protocol.Fetch.HeaderEntry[] = interceptedRequest.responseHeaders || [];
     // 'rawPathFromUrl()''s return value is already (singly-)encoded, so we can
     // treat it as an 'EncodedPathString' here.
@@ -914,8 +918,12 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
     if (!this.#active || (method === 'OPTIONS')) {
       return;
     }
+    const requestUrl = interceptedRequest.request.url as Platform.DevToolsPath.UrlString;
+    if (NetworkPersistenceManager.isForbiddenNetworkUrl(requestUrl)) {
+      return;
+    }
     const proj = this.#project as FileSystem;
-    const path = this.fileUrlFromNetworkUrl(interceptedRequest.request.url as Platform.DevToolsPath.UrlString);
+    const path = this.fileUrlFromNetworkUrl(requestUrl);
     const fileSystemUISourceCode = proj.uiSourceCodeForURL(path);
     let responseHeaders = this.handleHeaderInterception(interceptedRequest);
     if (!fileSystemUISourceCode && !responseHeaders.length) {

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

@@ -223,10 +223,6 @@ const UIStringsNotTranslate = {
    * @description Accessible label for the reveal button in the render-blocking requests widget.
    */
   revealRenderBlockingBreakdown: 'Reveal render-blocking requests',
-  /**
-   * @description Accessible label for the reveal button in the LCP element widget.
-   */
-  revealLcpElement: 'Reveal LCP element',
   /**
    * @description Accessible label for the reveal button in the performance summary widget.
    */
@@ -291,10 +287,6 @@ const UIStringsNotTranslate = {
    * @description Title for the 3rd parties widget.
    */
   thirdParties: '3rd parties',
-  /**
-   * @description Title for the LCP element widget.
-   */
-  lcpElement: 'LCP element',
   /**
    * @description Title for the performance summary widget.
    */
@@ -987,7 +979,7 @@ interface WidgetMakerResponse {
   // Can be null if the widget is only used to add the Reveal CTA.
   title: Lit.LitTemplate|Platform.UIString.LocalizedString|null;
   jslogContext?: string;
-  accessibleRevealLabel: string;
+  accessibleRevealLabel: Platform.UIString.LocalizedString;
 }
 
 const nodeCache = new Map<Protocol.DOM.BackendNodeId, SDK.DOMModel.DOMNode>();
@@ -1620,8 +1612,8 @@ async function makeDomTreeWidget(widgetData: DomTreeAiWidget): Promise<WidgetMak
   return {
     renderedWidget,
     revealable: new SDK.DOMModel.DeferredDOMNode(root.domModel().target(), root.backendNodeId()),
-    accessibleRevealLabel: lockedString(UIStringsNotTranslate.revealLcpElement),
-    title: lockedString(UIStringsNotTranslate.lcpElement),
+    accessibleRevealLabel: widgetData.data.accessibleRevealLabel,
+    title: widgetData.data.title,
     jslogContext: 'dom-snapshot',
   };
 }