chrome-devtools-frontend 1.0.1684555 → 1.0.1689415

package/front_end/models/ai_assistance/AiHistoryStorage.ts

@@ -37,7 +37,7 @@ export interface SerializedImage {
 const DEFAULT_MAX_STORAGE_SIZE = 50 * 1024 * 1024;
 export const MAX_RECENT_PROMPTS_COUNT = 20;
 export const MAX_CONVERSATIONS_COUNT = 50;
-export const RECENT_PROMPTS_SIZE_LIMIT = 100 * 1024;
+export const RECENT_PROMPTS_SIZE_LIMIT: number = 100 * 1024;
 
 export const enum Events {
   HISTORY_DELETED = 'AiHistoryDeleted',
@@ -57,7 +57,7 @@ export class AiHistoryStorage extends Common.ObjectWrapper.ObjectWrapper<EventTy
   constructor(
       // eslint-disable-next-line @devtools/no-instance-of-migrated-singletons
       settings: Common.Settings.Settings = Common.Settings.Settings.instance(),
-      maxStorageSize = DEFAULT_MAX_STORAGE_SIZE,
+      maxStorageSize: number = DEFAULT_MAX_STORAGE_SIZE,
   ) {
     super();
     this.#historySetting = settings.createSetting('ai-assistance-history-entries', []);

package/front_end/models/ai_assistance/AiUtils.ts

@@ -123,6 +123,22 @@ export function isGeminiBranding(): boolean {
   return !!Root.Runtime.hostConfig.devToolsGeminiRebranding?.enabled;
 }
 
+/**
+ * Returns true if context selection / dynamic context switching is enabled.
+ *
+ * In the legacy V1 architecture, this corresponds to the `ContextSelectionAgent`,
+ * which dynamically routes conversations and allows changing the active context.
+ * In the unified V2 architecture (`AiAgent2`), dynamic context selection is natively
+ * supported across the single agent instance.
+ *
+ * This bridge function checks either flag during the transition phase and can be
+ * removed in the future when V2 ships permanently and the V1 architecture is removed.
+ */
+export function isContextSelectionEnabled(): boolean {
+  return Boolean(Root.Runtime.hostConfig.devToolsAiAssistanceContextSelectionAgent?.enabled) ||
+      Boolean(Root.Runtime.hostConfig.devToolsAiV2Architecture?.enabled);
+}
+
 /**
  * Preconditions determined entirely on the DevTools frontend side (e.g. Incognito
  * mode or age restrictions) that prevent AI assistance features from running.

package/front_end/models/ai_assistance/EvaluateAction.ts

@@ -108,7 +108,7 @@ export class EvaluateAction {
       returnByValue: false,
       allowUnsafeEvalBlockedByCSP: false,
       throwOnSideEffect,
-      userGesture: true,
+      userGesture: false,
       awaitPromise: true,
       arguments: args.map(remoteObject => {
         return {objectId: remoteObject.objectId};

package/front_end/models/ai_assistance/README.md

@@ -127,7 +127,7 @@ npm start -- --browser=canary
 or
 
 ```
-/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --custom-devtools-frontend=file://$(realpath out/Fast/gen/front_end)
+/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --custom-devtools-frontend=file://$(realpath out/Default/gen/front_end)
 ```
 
 ### Enable debug logs

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

@@ -85,8 +85,8 @@ If the user asks a question that requires an investigation of a problem, use thi
  * instance for a new conversation.
  */
 export class AccessibilityAgent extends AiAgent<LHModel.ReporterTypes.ReportJSON> {
-  readonly preamble = preamble;
-  readonly clientFeature = Host.AidaClient.ClientFeature.CHROME_ACCESSIBILITY_AGENT;
+  readonly preamble: string = preamble;
+  readonly clientFeature: Host.AidaClient.ClientFeature = Host.AidaClient.ClientFeature.CHROME_ACCESSIBILITY_AGENT;
   readonly #lighthouseRecording?:
       (overrides?: LHModel.RunTypes.RunOverrides) => Promise<LHModel.ReporterTypes.ReportJSON|null>;
 
@@ -253,7 +253,6 @@ export class AccessibilityAgent extends AiAgent<LHModel.ReporterTypes.ReportJSON
         return await executeJsTool.handler(
             args,
             {
-              conversationContext: this.context ?? null,
               changeManager: this.#changes,
               createExtensionScope: this.#createExtensionScope.bind(this),
               execJs: this.#execJs,

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

@@ -205,7 +205,7 @@ export abstract class ConversationContext<T> {
     return true;
   }
 
-  getOrigin(): string {
+  getOrigin(): string|SDK.SecurityOrigin.SecurityOrigin {
     return extractContextOrigin(this.getURL());
   }
 
@@ -221,15 +221,31 @@ export abstract class ConversationContext<T> {
    * @param establishedOrigin The origin that the current conversation is locked to.
    * If undefined, the conversation has not yet been locked to an origin.
    */
-  isOriginAllowed(establishedOrigin: string|undefined): boolean {
+  isOriginAllowed(establishedOrigin: string|SDK.SecurityOrigin.SecurityOrigin|undefined): boolean {
     const origin = this.getOrigin();
+
+    if (origin instanceof SDK.SecurityOrigin.SecurityOrigin) {
+      if (origin.isOpaque()) {
+        return false;
+      }
+      if (!establishedOrigin) {
+        return true;
+      }
+      const established = establishedOrigin instanceof SDK.SecurityOrigin.SecurityOrigin ?
+          establishedOrigin :
+          SDK.SecurityOrigin.SecurityOrigin.create(establishedOrigin);
+      return origin.isSameOriginWith(established);
+    }
+
     // If no origin is established yet, this context will be the one to lock the conversation.
     // Opaque origins are never allowed to be used as context.
     if (!establishedOrigin) {
       return !isOpaqueOrigin(origin);
     }
     // Only allow data that matches the origin the conversation is already locked to.
-    return areOriginsEquivalent(origin, establishedOrigin);
+    const establishedString =
+        establishedOrigin instanceof SDK.SecurityOrigin.SecurityOrigin ? establishedOrigin.siteId() : establishedOrigin;
+    return areOriginsEquivalent(origin, establishedString);
   }
 
   /**
@@ -1035,9 +1051,11 @@ export abstract class AiAgent<T> {
         sideEffectConfirmationPromiseWithResolvers.resolve(false);
       }
 
-      options?.signal?.addEventListener('abort', () => {
+      const onAbort = (): void => {
         sideEffectConfirmationPromiseWithResolvers.resolve(false);
-      }, {once: true});
+      };
+
+      options?.signal?.addEventListener('abort', onAbort, {once: true});
 
       yield {
         type: ResponseType.SIDE_EFFECT,
@@ -1045,7 +1063,12 @@ export abstract class AiAgent<T> {
         description: result.description,
       };
 
-      const approvedRun = await sideEffectConfirmationPromiseWithResolvers.promise;
+      let approvedRun = false;
+      try {
+        approvedRun = await sideEffectConfirmationPromiseWithResolvers.promise;
+      } finally {
+        options?.signal?.removeEventListener('abort', onAbort);
+      }
       if (!approvedRun) {
         yield {
           type: ResponseType.ACTION,

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

@@ -88,8 +88,8 @@ export interface ContextSelectionAgentOptions extends AgentOptions {
  * instance for a new conversation.
  */
 export class ContextSelectionAgent extends AiAgent<never> {
-  readonly preamble = preamble;
-  readonly clientFeature = Host.AidaClient.ClientFeature.CHROME_CONTEXT_SELECTION_AGENT;
+  readonly preamble: string = preamble;
+  readonly clientFeature: Host.AidaClient.ClientFeature = Host.AidaClient.ClientFeature.CHROME_CONTEXT_SELECTION_AGENT;
   get userTier(): string|undefined {
     // TODO: Make this depend on variable.
     return Root.Runtime.hostConfig.devToolsFreestyler?.userTier;
@@ -550,7 +550,8 @@ export class ContextSelectionAgent extends AiAgent<never> {
   }
 
   static lastSourceId = 0;
-  static uiSourceCodeId = new WeakMap<Workspace.UISourceCode.UISourceCode, number>();
+  static uiSourceCodeId: WeakMap<Workspace.UISourceCode.UISourceCode, number> =
+      new WeakMap<Workspace.UISourceCode.UISourceCode, number>();
   /**
    * This is a heuristic algorithm that gets all the source files coming from the
    * network and assigns unique ids to be linked from the LLM Markdown response.

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

@@ -78,8 +78,8 @@ MDN Web Docs: JavaScript Functions: https://developer.mozilla.org/en-US/docs/Web
  * instance for a new conversation.
  */
 export class FileAgent extends AiAgent<Workspace.UISourceCode.UISourceCode> {
-  readonly preamble = preamble;
-  readonly clientFeature = Host.AidaClient.ClientFeature.CHROME_FILE_AGENT;
+  readonly preamble: string = preamble;
+  readonly clientFeature: Host.AidaClient.ClientFeature = Host.AidaClient.ClientFeature.CHROME_FILE_AGENT;
   get userTier(): string|undefined {
     return Root.Runtime.hostConfig.devToolsAiAssistanceFileAgent?.userTier;
   }

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

@@ -71,8 +71,8 @@ This request aims to retrieve a list of products matching the search query "lapt
  * instance for a new conversation.
  */
 export class NetworkAgent extends AiAgent<SDK.NetworkRequest.NetworkRequest> {
-  readonly preamble = preamble;
-  readonly clientFeature = Host.AidaClient.ClientFeature.CHROME_NETWORK_AGENT;
+  readonly preamble: string = preamble;
+  readonly clientFeature: Host.AidaClient.ClientFeature = Host.AidaClient.ClientFeature.CHROME_NETWORK_AGENT;
   get userTier(): string|undefined {
     return Root.Runtime.hostConfig.devToolsAiAssistanceNetworkAgent?.userTier;
   }

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

@@ -209,7 +209,7 @@ export interface PerformanceAgentOptions extends AgentOptions {
  * instance for a new conversation.
  */
 export class PerformanceAgent extends AiAgent<AgentFocus> {
-  readonly preamble = preamble;
+  readonly preamble: string = preamble;
   readonly #tracker: Tracing.FreshRecording.Tracker;
   readonly #networkLog: Logs.NetworkLog.NetworkLog;
 

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

@@ -79,7 +79,9 @@ const MAX_TARGET_ORIGINS = 100;
 
 function resolveTargetOrigins(context?: ConversationContext<StorageItem>, origins?: string[]): string[] {
   const primaryOrigin = context?.getOrigin();
-  const rawList = (origins && origins.length > 0) ? origins : (primaryOrigin ? [primaryOrigin] : []);
+  const primaryString =
+      primaryOrigin instanceof SDK.SecurityOrigin.SecurityOrigin ? primaryOrigin.siteId() : primaryOrigin;
+  const rawList = (origins && origins.length > 0) ? origins : (primaryString ? [primaryString] : []);
   const uniqueOrigins = Array.from(new Set(rawList));
   return uniqueOrigins.slice(0, MAX_TARGET_ORIGINS);
 }
@@ -102,8 +104,8 @@ interface CookieDetails {
 }
 
 export class StorageAgent extends AiAgent<StorageItem> {
-  readonly preamble = preamble;
-  readonly clientFeature = Host.AidaClient.ClientFeature.CHROME_STORAGE_AGENT;
+  readonly preamble: string = preamble;
+  readonly clientFeature: Host.AidaClient.ClientFeature = Host.AidaClient.ClientFeature.CHROME_STORAGE_AGENT;
 
   get userTier(): string|undefined {
     return Root.Runtime.hostConfig.devToolsFreestyler?.userTier;
@@ -660,8 +662,8 @@ export class StorageAgent extends AiAgent<StorageItem> {
  * @param storageKey Optional. If specified, resolves only the partition exactly matching this unique key, bypassing origin comparison.
  */
 
-export async function getCookiesForDomain(
-    target: SDK.Target.Target, origin: string): Promise<SDK.Cookie.Cookie[]|null> {
+export async function getCookiesForDomain(target: SDK.Target.Target,
+                                          origin: string): Promise<SDK.Cookie.Cookie[]|null> {
   const cookieModel = target.model(SDK.CookieModel.CookieModel);
   if (!cookieModel) {
     return null;

package/front_end/models/ai_assistance/agents/StylingAgent.snapshot.txt

@@ -31,7 +31,7 @@ Content:
   "function_declarations": [
     {
       "name": "getStyles",
-      "description": "Get computed and source styles for one or multiple elements on the inspected page for multiple elements at once by uid.\n\n**CRITICAL** An element uid is a number, not a selector.\n**CRITICAL** Use selectors to refer to elements in the text output. Do not use uids.\n**CRITICAL** Always provide the explanation argument to explain what and why you query.\n**CRITICAL** You MUST provide a specific list of CSS property names. Do not use generic values like \"all\" or \"*\".",
+      "description": "Retrieves computed and authored CSS styles for one or more elements by their backend node IDs (uids).\n\n**CRITICAL** An element uid is a number, not a selector.\n**CRITICAL** Use selectors to refer to elements in the text output. Do not use uids.\n**CRITICAL** Always provide the explanation argument to explain what and why you query.\n**CRITICAL** You MUST provide a specific list of CSS property names. Do not use generic values like \"all\" or \"*\".",
       "parameters": {
         "type": 6,
         "description": "",
@@ -78,7 +78,7 @@ Content:
         "properties": {
           "code": {
             "type": 1,
-            "description": "JavaScript code snippet to run on the inspected page. Make sure the code is formatted for readability.\n\n# Instructions\n\n* To return data, define a top-level `data` variable and populate it with data you want to get. Only JSON-serializable objects can be assigned to `data`.\n* If you modify styles on an element, ALWAYS call the pre-defined global `async setElementStyles(el: Element, styles: object)` function. This function is an internal mechanism for you and should never be presented as a command/advice to the user.\n* **CRITICAL** Only get styles that might be relevant to the user request.\n* **CRITICAL** Never assume a selector for the elements unless you verified your knowledge.\n* **CRITICAL** Consider that `data` variable from the previous function calls are not available in a new function call.\n* **CRITICAL** Keep code concise (max 40 lines and 2,500 characters). Split complex logic into multiple steps.\n* **CRITICAL** Network requests (e.g., fetch, XMLHttpRequest) are disabled and cannot be made.\n\nFor example, the code to change element styles:\n\n```\nawait setElementStyles($0, {\n  color: 'blue',\n});\n```\n\nFor example, the code to get overlapping elements:\n\n```\nconst data = {\n  overlappingElements: Array.from(document.querySelectorAll('*'))\n    .filter(el => {\n      const rect = el.getBoundingClientRect();\n      const popupRect = $0.getBoundingClientRect();\n      return (\n        el !== $0 &&\n        rect.left < popupRect.right &&\n        rect.right > popupRect.left &&\n        rect.top < popupRect.bottom &&\n        rect.bottom > popupRect.top\n      );\n    })\n    .map(el => ({\n      tagName: el.tagName,\n      id: el.id,\n      className: el.className,\n      zIndex: window.getComputedStyle(el)['z-index']\n    }))\n};\n```\n"
+            "description": "JavaScript code snippet to run on the inspected page. Make sure the code is formatted for readability.\n\n# Instructions\n\n* To return data, define a top-level `data` variable and populate it with data you want to get. Only JSON-serializable objects can be assigned to `data`.\n* $0 refers to the currently selected DOM node (or document body if none selected).\n* **CRITICAL** Never assume a selector for the elements unless you verified your knowledge.\n* **CRITICAL** Variables from previous function calls are not available in subsequent calls.\n* **CRITICAL** Keep code concise (max 40 lines and 2,500 characters). Split complex logic into multiple steps.\n* **CRITICAL** Network requests (e.g., fetch, XMLHttpRequest) are disabled and cannot be made.\n\nFor example, to query DOM elements:\n\n```\nconst data = {\n  title: document.title,\n  elementText: $0?.textContent?.trim(),\n  childCount: $0?.children.length,\n};\n```\n"
           },
           "explanation": {
             "type": 1,

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

@@ -4,7 +4,7 @@
 
 import * as Host from '../../../core/host/host.js';
 import * as Root from '../../../core/root/root.js';
-import type * as SDK from '../../../core/sdk/sdk.js';
+import * as SDK from '../../../core/sdk/sdk.js';
 import {ChangeManager} from '../ChangeManager.js';
 import {ExtensionScope} from '../ExtensionScope.js';
 import {AI_ASSISTANCE_CSS_CLASS_NAME} from '../injected.js';
@@ -94,15 +94,16 @@ const MULTIMODAL_ENHANCEMENT_PROMPTS: Record<MultimodalInputType, string> = {
   [MultimodalInputType.UPLOADED_IMAGE]: promptForUploadedImage + considerationsForMultimodalInputEvaluation,
 };
 
-export const AI_ASSISTANCE_FILTER_REGEX = `\\.${AI_ASSISTANCE_CSS_CLASS_NAME}-.*&`;
+// eslint-disable-next-line @typescript-eslint/no-inferrable-types
+export const AI_ASSISTANCE_FILTER_REGEX: string = `\\.${AI_ASSISTANCE_CSS_CLASS_NAME}-.*&`;
 
 /**
  * One agent instance handles one conversation. Create a new agent
  * instance for a new conversation.
  */
 export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
-  readonly preamble = preamble;
-  readonly clientFeature = Host.AidaClient.ClientFeature.CHROME_STYLING_AGENT;
+  readonly preamble: string = preamble;
+  readonly clientFeature: Host.AidaClient.ClientFeature = Host.AidaClient.ClientFeature.CHROME_STYLING_AGENT;
   get userTier(): string|undefined {
     return Root.Runtime.hostConfig.devToolsFreestyler?.userTier;
   }
@@ -153,9 +154,11 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
           return {error: 'Error: Could not find the currently selected element.'};
         }
         return await getStylesTool.handler(args, {
-          conversationContext: context,
           getTarget: () => this.targetManager.primaryPageTarget() ?? context.getItem().domModel().target(),
-          getEstablishedOrigin: () => context.getOrigin(),
+          getEstablishedOrigin: () => {
+            const origin = context.getOrigin();
+            return origin instanceof SDK.SecurityOrigin.SecurityOrigin ? origin.siteId() : origin;
+          },
         });
       },
     });
@@ -171,7 +174,6 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
       handler: (args, options) => executeJsTool.handler(
           args,
           {
-            conversationContext: this.context ?? null,
             changeManager: this.#changes,
             createExtensionScope: this.#createExtensionScope.bind(this),
             execJs: this.#execJs,

package/front_end/models/ai_assistance/ai_assistance.ts

@@ -41,8 +41,10 @@ import * as PerformanceAnnotations from './PerformanceAnnotations.js';
 import * as Skill from './skills/Skill.js';
 import * as SkillRegistry from './skills/SkillRegistry.js';
 import * as StorageItem from './StorageItem.js';
+import * as CookieUtils from './tools/CookieUtils.js';
 import * as DOMStorageUtils from './tools/DOMStorageUtils.js';
 import * as ExecuteJavaScript from './tools/ExecuteJavaScript.js';
+import * as GetCookieValues from './tools/GetCookieValues.js';
 import * as GetDetailedCallTree from './tools/GetDetailedCallTree.js';
 import * as GetElementAccessibilityDetails from './tools/GetElementAccessibilityDetails.js';
 import * as GetFunctionCode from './tools/GetFunctionCode.js';
@@ -51,11 +53,13 @@ import * as GetLighthouseAudits from './tools/GetLighthouseAudits.js';
 import * as GetNetworkRequestDetails from './tools/GetNetworkRequestDetails.js';
 import * as GetResourceContent from './tools/GetResourceContent.js';
 import * as GetSourceContent from './tools/GetSourceContent.js';
+import * as GetStorageBreakdown from './tools/GetStorageBreakdown.js';
 import * as GetStorageValues from './tools/GetStorageValues.js';
 import * as GetStyles from './tools/GetStyles.js';
 import * as GetTraceEventByKey from './tools/GetTraceEventByKey.js';
 import * as GetTraceMainThreadSummary from './tools/GetTraceMainThreadSummary.js';
 import * as GetTraceNetworkSummary from './tools/GetTraceNetworkSummary.js';
+import * as ListCookies from './tools/ListCookies.js';
 import * as ListNetworkRequests from './tools/ListNetworkRequests.js';
 import * as ListPageOrigins from './tools/ListPageOrigins.js';
 import * as ListSources from './tools/ListSources.js';
@@ -84,6 +88,7 @@ export {
   ChangeManager,
   ContextSelectionAgent,
   ConversationSummary,
+  CookieUtils,
   Debug,
   DOMNodeContext,
   DOMStorageUtils,
@@ -93,6 +98,7 @@ export {
   FileAgent,
   FileContext,
   FileFormatter,
+  GetCookieValues,
   GetDetailedCallTree,
   GetElementAccessibilityDetails,
   GetFunctionCode,
@@ -101,6 +107,7 @@ export {
   GetNetworkRequestDetails,
   GetResourceContent,
   GetSourceContent,
+  GetStorageBreakdown,
   GetStorageValues,
   GetStyles,
   GetTraceEventByKey,
@@ -108,6 +115,7 @@ export {
   GetTraceNetworkSummary,
   Injected,
   LighthouseFormatter,
+  ListCookies,
   ListNetworkRequests,
   ListPageOrigins,
   ListSources,

package/front_end/models/ai_assistance/contexts/AccessibilityContext.ts

@@ -3,7 +3,11 @@
 // found in the LICENSE file.
 
 import type * as LHModel from '../../lighthouse/lighthouse.js';
-import {type ContextDetail, ConversationContext} from '../agents/AiAgent.js';
+import {
+  type AiWidget,
+  type ContextDetail,
+  ConversationContext,
+} from '../agents/AiAgent.js';
 import {LighthouseFormatter} from '../data_formatters/LighthouseFormatter.js';
 
 export class AccessibilityContext extends ConversationContext<LHModel.ReporterTypes.ReportJSON> {
@@ -60,4 +64,15 @@ export class AccessibilityContext extends ConversationContext<LHModel.ReporterTy
       },
     ];
   }
+
+  override async getWidgets(): Promise<AiWidget[]> {
+    return [
+      {
+        name: 'LIGHTHOUSE_REPORT',
+        data: {
+          report: this.#lh,
+        },
+      },
+    ];
+  }
 }

package/front_end/models/ai_assistance/contexts/FileContext.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 type * as SDK from '../../../core/sdk/sdk.js';
 import type * as Bindings from '../../bindings/bindings.js';
 import type * as Workspace from '../../workspace/workspace.js';
 import {type ContextDetail, ConversationContext} from '../agents/AiAgent.js';
@@ -18,6 +19,11 @@ export class FileContext extends ConversationContext<Workspace.UISourceCode.UISo
     this.#debuggerWorkspaceBinding = debuggerWorkspaceBinding;
   }
 
+  override getOrigin(): string|SDK.SecurityOrigin.SecurityOrigin {
+    const fallbackOrigin = super.getOrigin();
+    return this.#file.project()?.securityOrigin?.() ?? fallbackOrigin;
+  }
+
   override getURL(): string {
     return this.#file.url();
   }