chrome-devtools-frontend 1.0.1642899 → 1.0.1643855

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

@@ -6,6 +6,7 @@ import * as Common from '../../../core/common/common.js';
 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 type {NetworkRequest} from '../../../core/sdk/NetworkRequest.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
 import type * as LHModel from '../../lighthouse/lighthouse.js';
 import * as Logs from '../../logs/logs.js';
@@ -15,6 +16,7 @@ import * as Workspace from '../../workspace/workspace.js';
 import {isOpaqueOrigin} from '../AiOrigins.js';
 import {DOMNodeContext} from '../contexts/DOMNodeContext.js';
 import {debugLog} from '../debug.js';
+import {StorageItem} from '../StorageItem.js';
 
 import {AccessibilityContext} from './AccessibilityAgent.js';
 import {
@@ -25,8 +27,9 @@ import {
   type RequestOptions,
 } from './AiAgent.js';
 import {FileContext} from './FileAgent.js';
-import {RequestContext} from './NetworkAgent.js';
+import {getRequestContextOrigin, RequestContext} from './NetworkAgent.js';
 import {PerformanceTraceContext} from './PerformanceAgent.js';
+import {StorageContext} from './StorageAgent.js';
 
 const lockedString = i18n.i18n.lockedString;
 /**
@@ -41,12 +44,12 @@ Your role is to understand the user's query, identify the appropriate specialize
 
 # Workflow
 1.  **Analyze**: Understand the user's intent and what they are trying to achieve.
-2.  **Classify**: Determine which specialized agent is best suited for the task (e.g., StylingAgent for CSS/styling issues, NetworkAgent for network requests, FileAgent for source files, PerformanceAgent for performance details, AccessibilityAgent for accessibility reports, or StorageAgent for storage issues).
-3.  **Gather Context**: Identify what information the specialized agent will need. Proactively use your tools to find and select this context (e.g., finding the relevant DOM node, network request, file, or performance trace). Always try to select a single specific context before answering the question.
+2.  **Classify**: Determine which specialized agent is best suited for the task (e.g., StylingAgent for CSS/styling issues, NetworkAgent for network requests, FileAgent for source files, PerformanceAgent for performance details, AccessibilityAgent for accessibility reports, or StorageAgent for analyzing and explaining storage but not editing).
+3.  **Gather Context**: Identify what information the specialized agent will need. Proactively use your tools to find and select this context (e.g., finding the relevant DOM node, network request, file, performance trace, or storage). Always try to select a single specific context before answering the question.
 4.  **Delegate**: Once context is selected, hand over to the specialized agent. If you are unable to delegate or gather more information, provide a comprehensive guide on how to fix the issue using Chrome DevTools, explaining how and why, or suggest any panel/flow that may help.
 
 # Considerations
-* Determine what is the domain of the question - styling, network, sources, performance or other part of DevTools.
+* Determine what is the domain of the question - styling, network, sources, performance, storage, or other part of DevTools.
 * For questions about performance (e.g., general performance issues, page speed, performance metrics like LCP, INP, CLS), use performanceRecordAndReload to record a performance trace.
 * Proactively try to gather additional data. If a specific piece of data can be selected, select it.
 * Always try to select a single specific context before answering the question.
@@ -141,8 +144,9 @@ export class ContextSelectionAgent extends AiAgent<never> {
         }
 
         let hasCrossOriginRequest = false;
+        const requestsToShow: NetworkRequest[] = [];
         for (const request of Logs.NetworkLog.NetworkLog.instance().requests()) {
-          const documentOrigin = Common.ParsedURL.ParsedURL.extractOrigin(request.documentURL);
+          const requestOrigin = getRequestContextOrigin(request);
           /**
            * NOTE: this origin check does not ensure that all the requests are
            * from the same origin as the target page. Instead, it ensures that
@@ -151,7 +155,7 @@ export class ContextSelectionAgent extends AiAgent<never> {
            * during the loading of the target page, and do not leak URLs from
            * other pages.
            */
-          if (origin && documentOrigin !== origin) {
+          if (origin && requestOrigin !== origin) {
             hasCrossOriginRequest = true;
             continue;
           }
@@ -163,6 +167,7 @@ export class ContextSelectionAgent extends AiAgent<never> {
             duration: i18n.TimeUtilities.secondsToString(request.duration),
             transferSize: i18n.ByteUtilities.formatBytesToKb(request.transferSize),
           });
+          requestsToShow.push(request);
         }
 
         if (requests.length === 0) {
@@ -175,6 +180,12 @@ export class ContextSelectionAgent extends AiAgent<never> {
 
         return {
           result: requests,
+          widgets: [{
+            name: 'NETWORK_REQUESTS_LIST',
+            data: {
+              requests: requestsToShow,
+            },
+          }],
         };
       },
     });
@@ -219,8 +230,8 @@ export class ContextSelectionAgent extends AiAgent<never> {
             return false;
           }
 
-          const documentOrigin = Common.ParsedURL.ParsedURL.extractOrigin(req.documentURL);
-          return !origin || documentOrigin === origin;
+          const requestOrigin = getRequestContextOrigin(req);
+          return !origin || requestOrigin === origin;
         });
 
         if (request) {
@@ -478,6 +489,45 @@ export class ContextSelectionAgent extends AiAgent<never> {
         };
       },
     });
+
+    if (Root.Runtime.hostConfig.devToolsAiAssistanceStorageAgent?.enabled) {
+      this.declareFunction<Record<string, never>>('analyzeStorage', {
+        description:
+            'Selects the page storage. Use this when asked about browser storage (localStorage, sessionStorage, cookies) and issues related to these.',
+        parameters: {
+          type: Host.AidaClient.ParametersTypes.OBJECT,
+          description: '',
+          nullable: true,
+          required: [],
+          properties: {},
+        },
+        displayInfoFromArgs: () => {
+          return {
+            title: lockedString('Prepare storage analysis'),
+            action: 'analyzeStorage()',
+          };
+        },
+        handler: async () => {
+          const allowedOriginResult = this.#allowedOrigin();
+          if ('blocked' in allowedOriginResult) {
+            return {
+              error: 'Cross-origin access blocked due to navigation. Please start a new chat.',
+            };
+          }
+          const origin = allowedOriginResult.origin;
+          if (!origin) {
+            return {
+              error: 'Unable to find page storage.',
+            };
+          }
+
+          return {
+            context: new StorageContext(new StorageItem(origin, origin)),
+            description: 'User selected page storage',
+          };
+        },
+      });
+    }
   }
 
   async * handleContextDetails(): AsyncGenerator<ContextResponse, void, void> {

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

@@ -12,9 +12,7 @@ import {debugLog} from '../debug.js';
 import {EvaluateAction, formatError, SideEffectError} from '../EvaluateAction.js';
 import {FREESTYLER_WORLD_NAME} from '../injected.js';
 
-import type {
-  AgentOptions as BaseAgentOptions, FunctionCallHandlerResult, FunctionDeclaration, FunctionHandlerOptions,} from
-  './AiAgent.js';
+import type {AgentOptions as BaseAgentOptions, FunctionCallHandlerResult, FunctionHandlerOptions,} from './AiAgent.js';
 
 const lockedString = i18n.i18n.lockedString;
 
@@ -28,95 +26,6 @@ export interface ExecuteJsAgentOptions extends BaseAgentOptions {
   execJs?: typeof executeJsCode;
 }
 
-export function executeJavaScriptFunction(executor: JavascriptExecutor): FunctionDeclaration<
-    {
-      title: string,
-      explanation: string,
-      code: string,
-    },
-    unknown> {
-  return {
-    description:
-        'This function allows you to run JavaScript code on the inspected page to access the element styles and page content.\nCall this function to gather additional information or modify the page state. Call this function enough times to investigate the user request.',
-    parameters: {
-      type: Host.AidaClient.ParametersTypes.OBJECT,
-      description: '',
-      nullable: false,
-      properties: {
-        code: {
-          type: Host.AidaClient.ParametersTypes.STRING,
-          description:
-              `JavaScript code snippet to run on the inspected page. Make sure the code is formatted for readability.
-
-# Instructions
-
-* 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\`.
-* 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.
-* **CRITICAL** Only get styles that might be relevant to the user request.
-* **CRITICAL** Never assume a selector for the elements unless you verified your knowledge.
-* **CRITICAL** Consider that \`data\` variable from the previous function calls are not available in a new function call.
-
-For example, the code to change element styles:
-
-\`\`\`
-await setElementStyles($0, {
-  color: 'blue',
-});
-\`\`\`
-
-For example, the code to get overlapping elements:
-
-\`\`\`
-const data = {
-  overlappingElements: Array.from(document.querySelectorAll('*'))
-    .filter(el => {
-      const rect = el.getBoundingClientRect();
-      const popupRect = $0.getBoundingClientRect();
-      return (
-        el !== $0 &&
-        rect.left < popupRect.right &&
-        rect.right > popupRect.left &&
-        rect.top < popupRect.bottom &&
-        rect.bottom > popupRect.top
-      );
-    })
-    .map(el => ({
-      tagName: el.tagName,
-      id: el.id,
-      className: el.className,
-      zIndex: window.getComputedStyle(el)['z-index']
-    }))
-};
-\`\`\`
-`,
-        },
-        explanation: {
-          type: Host.AidaClient.ParametersTypes.STRING,
-          description: 'Explain why you want to run this code',
-        },
-        title: {
-          type: Host.AidaClient.ParametersTypes.STRING,
-          description: 'Provide a summary of what the code does. For example, "Checking related element styles".',
-        },
-      },
-      required: ['code', 'explanation', 'title']
-    },
-    displayInfoFromArgs: params => {
-      return {
-        title: params.title,
-        thought: params.explanation,
-        action: params.code,
-      };
-    },
-    handler: async (
-        params,
-        options,
-        ) => {
-      return await executor.executeAction(params.code, options);
-    },
-  };
-}
-
 export async function executeJsCode(
     functionDeclaration: string,
     {throwOnSideEffect, contextNode}: {throwOnSideEffect: boolean, contextNode: SDK.DOMModel.DOMNode|null}):

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

@@ -2,11 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.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 NetworkTimeCalculator from '../../network_time_calculator/network_time_calculator.js';
+import {extractContextOrigin} from '../AiOrigins.js';
 import {NetworkRequestFormatter} from '../data_formatters/NetworkRequestFormatter.js';
 
 import {
@@ -98,6 +101,24 @@ const UIStringsNotTranslate = {
 
 const lockedString = i18n.i18n.lockedString;
 
+/**
+ * Returns the origin for a network request in the AI context.
+ *
+ * To prevent cross-origin prompt injection attacks, HAR-imported requests
+ * are isolated from live pages. We assign them a virtual origin
+ * (`imported-har://${domain}`) so they do not share the origin of live pages
+ * (e.g., `https://${domain}`). This forces a conversation reset when transitioning
+ * between imported HAR data and live pages.
+ */
+export function getRequestContextOrigin(request: SDK.NetworkRequest.NetworkRequest): string {
+  const origin = extractContextOrigin(request.documentURL);
+  if (request.isImportedHar()) {
+    const parsed = Common.ParsedURL.ParsedURL.fromString(origin as Platform.DevToolsPath.UrlString);
+    return `imported-har://${parsed ? parsed.domain() : origin}`;
+  }
+  return origin;
+}
+
 export class RequestContext extends ConversationContext<SDK.NetworkRequest.NetworkRequest> {
   #request: SDK.NetworkRequest.NetworkRequest;
   #calculator: NetworkTimeCalculator.NetworkTransferTimeCalculator;
@@ -119,6 +140,10 @@ export class RequestContext extends ConversationContext<SDK.NetworkRequest.Netwo
     return this.#request.documentURL;
   }
 
+  override getOrigin(): string {
+    return getRequestContextOrigin(this.#request);
+  }
+
   override getItem(): SDK.NetworkRequest.NetworkRequest {
     return this.#request;
   }

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

@@ -15,6 +15,7 @@ import * as Logs from '../../logs/logs.js';
 import * as SourceMapScopes from '../../source_map_scopes/source_map_scopes.js';
 import * as TextUtils from '../../text_utils/text_utils.js';
 import * as Trace from '../../trace/trace.js';
+import {extractContextOrigin} from '../AiOrigins.js';
 import {sanitizeHeaders} from '../data_formatters/NetworkRequestFormatter.js';
 import {
   PerformanceInsightFormatter,
@@ -63,12 +64,6 @@ export type MainThreadSectionLabel = 'nav-to-lcp'|'lcp-ttfb'|'lcp-render-delay'|
  * chrome_preambles.gcl). Sync local changes with the server-side.
  */
 
-const SECURITY_WARNING = `**CRITICAL CONSTRAINT**: This performance trace was loaded from a file and is static.
-You do NOT have access to the live page.
-The tool \`getFunctionCode\` is disabled.
-Do NOT attempt to use it or instruct the user that you will use it.
-Rely only on the trace data and other available tools.`;
-
 const GREEN_DEV_ANNOTATIONS_INSTRUCTIONS = `
 - CRITICAL: You also have access to functions called addElementAnnotation and addNeworkRequestAnnotation,
 which should be used to highlight elements and network requests (respectively).
@@ -262,6 +257,27 @@ export class PerformanceTraceContext extends ConversationContext<AgentFocus> {
     }
   }
 
+  /**
+   * Returns the origin for a performance trace in the AI context.
+   *
+   * To prevent cross-origin prompt injection attacks, imported traces
+   * are isolated from live pages. We assign them a virtual origin
+   * (`imported-trace://${domain}`) so they do not share the origin of live pages
+   * (e.g., `https://${domain}`). This forces a conversation reset when transitioning
+   * between imported trace data and live pages.
+   */
+  override getOrigin(): string {
+    const parsedTrace = this.#focus.parsedTrace;
+    const url = this.getURL();
+    const origin = extractContextOrigin(url);
+    const isFresh = Tracing.FreshRecording.Tracker.instance().recordingIsFresh(parsedTrace);
+    if (!isFresh) {
+      const parsed = Common.ParsedURL.ParsedURL.fromString(origin as Platform.DevToolsPath.UrlString);
+      return `imported-trace://${parsed ? parsed.domain() : origin}`;
+    }
+    return origin;
+  }
+
   override getItem(): AgentFocus {
     return this.#focus;
   }
@@ -710,18 +726,14 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
       }
     }
 
-    const isFresh = Tracing.FreshRecording.Tracker.instance().recordingIsFresh(focus.parsedTrace);
-
     if (!selected.length) {
       this.#additionalSelectionsForDisclosure = [];
-      const finalQuery = query;
-      return isFresh ? finalQuery : `${SECURITY_WARNING}\n\n${finalQuery}`;
+      return query;
     }
 
     selected.push(`# User query\n\n${query}`);
     this.#additionalSelectionsForDisclosure = [...selected];
-    const finalQuery = selected.join('');
-    return isFresh ? finalQuery : `${SECURITY_WARNING}\n\n${finalQuery}`;
+    return selected.join('');
   }
 
   override async * run(initialQuery: string, options: {
@@ -1340,84 +1352,87 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
       });
     }
 
-    if (isFresh) {
-      this.declareFunction<{scriptUrl: UrlString, line: number, column: number}, {result: string}>('getFunctionCode', {
-        description:
-            'Returns the code for a function defined at the given location. The result is annotated with the runtime performance of each line of code.',
-        parameters: {
-          type: Host.AidaClient.ParametersTypes.OBJECT,
-          description: '',
-          nullable: false,
-          properties: {
-            scriptUrl: {
-              type: Host.AidaClient.ParametersTypes.STRING,
-              description: 'The url of the function.',
-              nullable: false,
-            },
-            line: {
-              type: Host.AidaClient.ParametersTypes.INTEGER,
-              description: 'The line number where the function is defined.',
-              nullable: false,
-            },
-            column: {
-              type: Host.AidaClient.ParametersTypes.INTEGER,
-              description: 'The column number where the function is defined.',
-              nullable: false,
-            },
+    this.declareFunction<{scriptUrl: UrlString, line: number, column: number}, {result: string}>('getFunctionCode', {
+      description:
+          'Returns the code for a function defined at the given location. The result is annotated with the runtime performance of each line of code.',
+      parameters: {
+        type: Host.AidaClient.ParametersTypes.OBJECT,
+        description: '',
+        nullable: false,
+        properties: {
+          scriptUrl: {
+            type: Host.AidaClient.ParametersTypes.STRING,
+            description: 'The url of the function.',
+            nullable: false,
+          },
+          line: {
+            type: Host.AidaClient.ParametersTypes.INTEGER,
+            description: 'The line number where the function is defined.',
+            nullable: false,
+          },
+          column: {
+            type: Host.AidaClient.ParametersTypes.INTEGER,
+            description: 'The column number where the function is defined.',
+            nullable: false,
           },
-          required: ['scriptUrl', 'line', 'column']
         },
-        displayInfoFromArgs: args => {
+        required: ['scriptUrl', 'line', 'column']
+      },
+      displayInfoFromArgs: args => {
+        return {
+          title: lockedString('Looking up function code'),
+          action: `getFunctionCode('${args.scriptUrl}', ${args.line}, ${args.column})`
+        };
+      },
+      handler: async args => {
+        debugLog('Function call: getFunctionCode');
+        if (!isFresh) {
           return {
-            title: lockedString('Looking up function code'),
-            action: `getFunctionCode('${args.scriptUrl}', ${args.line}, ${args.column})`
+            error: 'Cannot use this tool on an imported file.',
           };
-        },
-        handler: async args => {
-          debugLog('Function call: getFunctionCode');
+        }
 
-          if (args.line === undefined) {
-            return {error: 'Missing arg: line'};
-          }
+        if (args.line === undefined) {
+          return {error: 'Missing arg: line'};
+        }
 
-          if (args.column === undefined) {
-            return {error: 'Missing arg: column'};
-          }
+        if (args.column === undefined) {
+          return {error: 'Missing arg: column'};
+        }
 
-          if (!this.#formatter) {
-            throw new Error('missing formatter');
-          }
+        if (!this.#formatter) {
+          throw new Error('missing formatter');
+        }
 
-          const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
-          if (!target) {
-            throw new Error('missing target');
-          }
+        const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+        if (!target) {
+          throw new Error('missing target');
+        }
 
-          const url = args.scriptUrl as Platform.DevToolsPath.UrlString;
-          const code = await this.#formatter.resolveFunctionCodeAtLocation(url, args.line, args.column);
-          if (!code) {
-            return {error: 'Could not find code'};
-          }
+        const url = args.scriptUrl as Platform.DevToolsPath.UrlString;
+        const code = await this.#formatter.resolveFunctionCodeAtLocation(url, args.line, args.column);
+        if (!code) {
+          return {error: 'Could not find code'};
+        }
 
-          const result = this.#formatter.formatFunctionCode(code);
+        const result = this.#formatter.formatFunctionCode(code);
 
-          const key = `getFunctionCode('${args.scriptUrl}', ${args.line}, ${args.column})`;
-          this.#cacheFunctionResult(focus, key, result);
-          return {
-            result: {result},
-            widgets: [{
-              name: 'SOURCE_CODE',
-              data: {
-                url: args.scriptUrl,
-                line: args.line,
-                column: args.column,
-                code: code.code,
-              },
-            }],
-          };
-        },
-      });
-    }
+        const key = `getFunctionCode('${args.scriptUrl}', ${args.line}, ${args.column})`;
+        this.#cacheFunctionResult(focus, key, result);
+        return {
+          result: {result},
+          widgets: [{
+            name: 'SOURCE_CODE',
+            data: {
+              url: args.scriptUrl,
+              line: args.line,
+              column: args.column,
+              code: code.code,
+            },
+          }],
+        };
+      },
+    });
 
     const isTraceApp = Root.Runtime.Runtime.isTraceApp();