chrome-devtools-frontend 1.0.1642845 → 1.0.1643099

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';
@@ -13,7 +14,9 @@ import * as NetworkTimeCalculator from '../../network_time_calculator/network_ti
 import type * as Trace from '../../trace/trace.js';
 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 {
@@ -26,7 +29,7 @@ import {
 import {FileContext} from './FileAgent.js';
 import {RequestContext} from './NetworkAgent.js';
 import {PerformanceTraceContext} from './PerformanceAgent.js';
-import {NodeContext} from './StylingAgent.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,6 +144,7 @@ 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);
           /**
@@ -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,
+            },
+          }],
         };
       },
     });
@@ -469,7 +480,7 @@ export class ContextSelectionAgent extends AiAgent<never> {
         const node = await this.#onInspectElement();
         if (node) {
           return {
-            context: new NodeContext(node),
+            context: new DOMNodeContext(node),
             description: 'User selected an element',
           };
         }
@@ -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

@@ -28,6 +28,8 @@ export interface ExecuteJsAgentOptions extends BaseAgentOptions {
   execJs?: typeof executeJsCode;
 }
 
+// TODO(crbug.com/510206549): De-duplicate this function by migrating AccessibilityAgent to use
+// the registry-based ExecuteJavaScriptTool in tools/ExecuteJavaScript.ts.
 export function executeJavaScriptFunction(executor: JavascriptExecutor): FunctionDeclaration<
     {
       title: string,

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

@@ -239,7 +239,6 @@ export class PerformanceTraceContext extends ConversationContext<AgentFocus> {
   }
 
   #focus: AgentFocus;
-  external = false;
 
   constructor(focus: AgentFocus) {
     super();
@@ -456,7 +455,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
    * so we can show it in the disclosure UI. This is cleared and then populated
    * on each prompt.
    */
-  #additionalSelectionsForQuery: string[] = [];
+  #additionalSelectionsForDisclosure: string[] = [];
 
   get clientFeature(): Host.AidaClient.ClientFeature {
     return Host.AidaClient.ClientFeature.CHROME_PERFORMANCE_FULL_AGENT;
@@ -490,7 +489,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
       }
       contextDisclosure.push(fact.text);
     }
-    contextDisclosure.push(...this.#additionalSelectionsForQuery);
+    contextDisclosure.push(...this.#additionalSelectionsForDisclosure);
 
     const focus = context.getItem();
     const widgets = this.#getWidgetsForFocus(focus);
@@ -705,12 +704,13 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
       }
     }
 
-    this.#additionalSelectionsForQuery = selected;
     if (!selected.length) {
+      this.#additionalSelectionsForDisclosure = [];
       return query;
     }
 
     selected.push(`# User query\n\n${query}`);
+    this.#additionalSelectionsForDisclosure = [...selected];
     return selected.join('');
   }
 
@@ -818,9 +818,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
   async #addFacts(context: PerformanceTraceContext): Promise<void> {
     const focus = context.getItem();
 
-    if (!context.external) {
-      this.addFact(this.#notExternalExtraPreambleFact);
-    }
+    this.addFact(this.#notExternalExtraPreambleFact);
 
     const annotationsEnabled = Annotations.AnnotationRepository.annotationsEnabled();
     if (annotationsEnabled) {
@@ -847,7 +845,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
       this.#formatter = new PerformanceTraceFormatter(focus);
       this.#formatter.resolveFunctionCode =
           async (url: Platform.DevToolsPath.UrlString, line: number, column: number) => {
-        if (!target) {
+        if (!target || !isFresh) {
           return null;
         }
 
@@ -932,6 +930,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
   #declareFunctions(context: PerformanceTraceContext): void {
     const focus = context.getItem();
     const {parsedTrace} = focus;
+    const isFresh = Tracing.FreshRecording.Tracker.instance().recordingIsFresh(parsedTrace);
 
     this.declareFunction<{insightSetId: string, insightName: string}, {details: string}>('getInsightDetails', {
       description:
@@ -1070,35 +1069,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
         }
 
         // TODO(b/425270067): Format in the same way that "Summary" detail tab does.
-        let details;
-        if (Trace.Types.Events.isSyntheticNetworkRequest(event)) {
-          const eventToSerialize = {
-            ...event,
-            args: {
-              ...event.args,
-              data: {
-                ...event.args.data,
-                responseHeaders: event.args.data.responseHeaders ? sanitizeHeaders(event.args.data.responseHeaders) :
-                                                                   null,
-              },
-            },
-          };
-          details = JSON.stringify(eventToSerialize);
-        } else if (Trace.Types.Events.isResourceReceiveResponse(event)) {
-          const eventToSerialize = {
-            ...event,
-            args: {
-              ...event.args,
-              data: {
-                ...event.args.data,
-                headers: event.args.data.headers ? sanitizeHeaders(event.args.data.headers) : undefined,
-              },
-            },
-          };
-          details = JSON.stringify(eventToSerialize);
-        } else {
-          details = JSON.stringify(event);
-        }
+        const details = formatEventForAI(event);
 
         const key = `getEventByKey('${params.eventKey}')`;
         this.#cacheFunctionResult(focus, key, details);
@@ -1393,6 +1364,11 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
       },
       handler: async args => {
         debugLog('Function call: getFunctionCode');
+        if (!isFresh) {
+          return {
+            error: 'Cannot use this tool on an imported file.',
+          };
+        }
 
         if (args.line === undefined) {
           return {error: 'Missing arg: line'};
@@ -1436,7 +1412,6 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
       },
     });
 
-    const isFresh = Tracing.FreshRecording.Tracker.instance().recordingIsFresh(parsedTrace);
     const isTraceApp = Root.Runtime.Runtime.isTraceApp();
 
     this.declareFunction<{url: UrlString}, {content: string}>('getResourceContent', {
@@ -1502,48 +1477,46 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
       },
     });
 
-    if (!context.external) {
-      this.declareFunction<{eventKey: string}, {success: boolean}>('selectEventByKey', {
-        description:
-            'Selects the event in the flamechart for the user. If the user asks to show them something, it\'s likely a good idea to call this function.',
-        parameters: {
-          type: Host.AidaClient.ParametersTypes.OBJECT,
-          description: '',
-          nullable: false,
-          properties: {
-            eventKey: {
-              type: Host.AidaClient.ParametersTypes.STRING,
-              description: 'The key for the event.',
-              nullable: false,
-            }
-          },
-          required: ['eventKey']
-        },
-        displayInfoFromArgs: params => {
-          return {title: lockedString('Selecting event'), action: `selectEventByKey('${params.eventKey}')`};
-        },
-        handler: async params => {
-          debugLog('Function call: selectEventByKey', params);
-          const event = focus.lookupEvent(params.eventKey);
-          if (!event) {
-            return {error: 'Invalid eventKey'};
+    this.declareFunction<{eventKey: string}, {success: boolean}>('selectEventByKey', {
+      description:
+          'Selects the event in the flamechart for the user. If the user asks to show them something, it\'s likely a good idea to call this function.',
+      parameters: {
+        type: Host.AidaClient.ParametersTypes.OBJECT,
+        description: '',
+        nullable: false,
+        properties: {
+          eventKey: {
+            type: Host.AidaClient.ParametersTypes.STRING,
+            description: 'The key for the event.',
+            nullable: false,
           }
-
-          const revealable = new SDK.TraceObject.RevealableEvent(event);
-          await Common.Revealer.reveal(revealable);
-          return {
-            result: {success: true},
-            widgets: [{
-              name: 'TIMELINE_EVENT_SUMMARY',
-              data: {
-                event,
-                parsedTrace,
-              },
-            }],
-          };
         },
-      });
-    }
+        required: ['eventKey']
+      },
+      displayInfoFromArgs: params => {
+        return {title: lockedString('Selecting event'), action: `selectEventByKey('${params.eventKey}')`};
+      },
+      handler: async params => {
+        debugLog('Function call: selectEventByKey', params);
+        const event = focus.lookupEvent(params.eventKey);
+        if (!event) {
+          return {error: 'Invalid eventKey'};
+        }
+
+        const revealable = new SDK.TraceObject.RevealableEvent(event);
+        await Common.Revealer.reveal(revealable);
+        return {
+          result: {success: true},
+          widgets: [{
+            name: 'TIMELINE_EVENT_SUMMARY',
+            data: {
+              event,
+              parsedTrace,
+            },
+          }],
+        };
+      },
+    });
   }
 
   #getBoundsForLabel(label: MainThreadSectionLabel, focus: AgentFocus): Trace.Types.Timing.TraceWindowMicro|null {
@@ -1669,3 +1642,71 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     return undefined;
   }
 }
+
+/**
+ * Serializes a trace event to a JSON string for AI consumption,
+ * ensuring sensitive data (like headers and raw script source code)
+ * is sanitized or redacted.
+ */
+function formatEventForAI(event: Trace.Types.Events.Event): string {
+  if (Trace.Types.Events.isSyntheticNetworkRequest(event)) {
+    return JSON.stringify({
+      ...event,
+      args: {
+        ...event.args,
+        data: {
+          ...event.args.data,
+          responseHeaders: event.args.data.responseHeaders ? sanitizeHeaders(event.args.data.responseHeaders) : null,
+        },
+      },
+    });
+  }
+
+  if (Trace.Types.Events.isResourceReceiveResponse(event)) {
+    return JSON.stringify({
+      ...event,
+      args: {
+        ...event.args,
+        data: {
+          ...event.args.data,
+          headers: event.args.data.headers ? sanitizeHeaders(event.args.data.headers) : undefined,
+        },
+      },
+    });
+  }
+
+  if (Trace.Types.Events.isRundownScriptSource(event)) {
+    // Redact sensitive cross-origin script source text.
+    const safeData: Omit<Trace.Types.Events.RundownScriptSource['args']['data'], 'sourceText'> = {
+      isolate: event.args.data.isolate,
+      scriptId: event.args.data.scriptId,
+      length: event.args.data.length,
+    };
+    return JSON.stringify({
+      ...event,
+      args: {
+        ...event.args,
+        data: safeData,
+      },
+    });
+  }
+
+  if (Trace.Types.Events.isRundownScriptSourceLarge(event)) {
+    // Redact sensitive cross-origin script source text.
+    const safeData: Omit<Trace.Types.Events.RundownScriptSourceLarge['args']['data'], 'sourceText'> = {
+      isolate: event.args.data.isolate,
+      scriptId: event.args.data.scriptId,
+      splitIndex: event.args.data.splitIndex,
+      splitCount: event.args.data.splitCount,
+    };
+    return JSON.stringify({
+      ...event,
+      args: {
+        ...event.args,
+        data: safeData,
+      },
+    });
+  }
+
+  return JSON.stringify(event);
+}

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

@@ -173,18 +173,17 @@ export class StorageAgent extends AiAgent<StorageItem> {
       },
     });
 
-    this.declareFunction<
-        {
-          type: 'localStorage' | 'sessionStorage',
-          origin: string,
-          storageKey?: string,
-        },
-        {
-          partitions: Array<{
-            storageKey: string,
-            keys: string[],
-          }>,
-        }>('listStorageKeys', {
+    this.declareFunction<{
+      type: 'localStorage' | 'sessionStorage',
+      origin: string,
+      storageKey?: string,
+    },
+                         {
+                           partitions: Array<{
+                             storageKey: string,
+                             keys: string[],
+                           }>,
+                         }>('listStorageKeys', {
       description:
           'Lists all keys for a given storage type for the requested origin. Returns keys grouped by storage partition.',
       parameters: {
@@ -218,6 +217,7 @@ export class StorageAgent extends AiAgent<StorageItem> {
       },
 
       handler: async args => {
+        this.disableServerSideLogging();
         if (!isSamePrimaryPageOrigin(this.context)) {
           return {error: 'No origin available or not allowed.'};
         }
@@ -244,19 +244,18 @@ export class StorageAgent extends AiAgent<StorageItem> {
       },
     });
 
-    this.declareFunction<
-        {
-          type: 'localStorage' | 'sessionStorage',
-          keys: string[],
-          origin: string,
-          storageKey?: string,
-        },
-        {
-          items: Array<{
-            storageKey: string,
-            values: Record<string, string>,
-          }>,
-        }>('getStorageValues', {
+    this.declareFunction<{
+      type: 'localStorage' | 'sessionStorage',
+      keys: string[],
+      origin: string,
+      storageKey?: string,
+    },
+                         {
+                           items: Array<{
+                             storageKey: string,
+                             values: Record<string, string>,
+                           }>,
+                         }>('getStorageValues', {
       description: 'Retrieve specific string values from storage partitions for requested keys.',
       parameters: {
         type: Host.AidaClient.ParametersTypes.OBJECT,
@@ -296,6 +295,7 @@ export class StorageAgent extends AiAgent<StorageItem> {
       },
 
       handler: async (args, options) => {
+        this.disableServerSideLogging();
         if (!isSamePrimaryPageOrigin(this.context)) {
           return {error: 'No origin available or not allowed.'};
         }
@@ -353,11 +353,10 @@ export class StorageAgent extends AiAgent<StorageItem> {
       },
     });
 
-    this.declareFunction<
-        {
-          origin: string,
-        },
-        {cookies: string[]}>('listCookies', {
+    this.declareFunction<{
+      origin: string,
+    },
+                         {cookies: string[]}>('listCookies', {
       description: 'Lists all cookies for the requested origin, strictly excluding their values.',
       parameters: {
         type: Host.AidaClient.ParametersTypes.OBJECT,
@@ -379,6 +378,7 @@ export class StorageAgent extends AiAgent<StorageItem> {
         };
       },
       handler: async args => {
+        this.disableServerSideLogging();
         if (!isSamePrimaryPageOrigin(this.context)) {
           return {error: 'No origin available or not allowed.'};
         }
@@ -396,14 +396,13 @@ export class StorageAgent extends AiAgent<StorageItem> {
       },
     });
 
-    this.declareFunction<
-        {
-          cookieNames: string[],
-          origin: string,
-        },
-        {
-          cookies: CookieDetails[],
-        }>('getCookieValues', {
+    this.declareFunction<{
+      cookieNames: string[],
+      origin: string,
+    },
+                         {
+                           cookies: CookieDetails[],
+                         }>('getCookieValues', {
       description: 'Retrieve the values and detailed metadata of specific cookies by their names.',
       parameters: {
         type: Host.AidaClient.ParametersTypes.OBJECT,
@@ -431,6 +430,7 @@ export class StorageAgent extends AiAgent<StorageItem> {
         };
       },
       handler: async (args, options) => {
+        this.disableServerSideLogging();
         if (!isSamePrimaryPageOrigin(this.context)) {
           return {error: 'No origin available or not allowed.'};
         }
@@ -498,6 +498,15 @@ export class StorageAgent extends AiAgent<StorageItem> {
     return primaryTargetOrigin;
   }
 
+  protected override async preRun(): Promise<void> {
+    const item = this.context?.getItem();
+    if (item instanceof CookieItem && Boolean(item.name)) {
+      this.disableServerSideLogging();
+    } else if (item instanceof DOMStorageItem && Boolean(item.key)) {
+      this.disableServerSideLogging();
+    }
+  }
+
   async *
       handleContextDetails(context: ConversationContext<StorageItem>|null):
           AsyncGenerator<ContextResponse, void, void> {

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

@@ -1,28 +1,3 @@
-Title: StylingAgent describeElement should describe an element with no children, siblings, or parent
-Content:
-* Element's uid is 99.
-* Its selector is `div#myElement`
-=== end content
-
-Title: StylingAgent describeElement should describe an element with child element and text nodes
-Content:
-* Element's uid is 99.
-* Its selector is `div#parentElement`
-* It has 2 child element nodes: `span.child1` (uid=undefined), `span.child2` (uid=undefined)
-* It only has 1 child text node
-=== end content
-
-Title: StylingAgent describeElement should describe an element with siblings and a parent
-Content:
-* Element's uid is 99.
-* Its selector is `div#parentElement`
-* It has a next sibling and it is an element (uid=undefined) node
-* It has a previous sibling and it is a non element node
-* Its parent's selector is `div#grandparentElement` (uid=undefined)
-* Its parent is a non element node
-* Its parent has only 1 child element node
-* Its parent has only 1 child text node
-=== end content
 
 Title: StylingAgent buildRequest structure matches the snapshot
 Content: