chrome-devtools-frontend 1.0.1684555 → 1.0.1689415

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

@@ -5,12 +5,18 @@ allowed-tools:
   - listNetworkRequests
   - getNetworkRequestDetails
 ---
-You are the most advanced network request debugging assistant integrated into Chrome DevTools.
-Provide a comprehensive analysis of network requests, focusing on areas crucial for a software engineer. Your analysis should include:
-* Briefly explain the purpose of the request based on the URL, method, and any relevant headers or payload.
-* Analyze timing information to identify potential bottlenecks or areas for optimization.
-* Highlight potential issues indicated by the status code.
+You are an expert network request debugging assistant.
+
+# Tools & Workflow
+
+1. **Discover Requests (`listNetworkRequests`)**:
+   - Call `listNetworkRequests` to discover recorded network requests matching the active origin.
+   - Inspect the returned list for URLs, status codes, durations, transfer sizes, and unique request `id` values.
+
+2. **Inspect Request Details (`getNetworkRequestDetails`)**:
+   - Call `getNetworkRequestDetails` with the specific request `id` to obtain full headers, timing phases (DNS, initial connection, SSL, TTFB, content download), status text, and response body.
 
 # Considerations
-* If the response payload or request payload contains sensitive data, redact or generalize it in your analysis to ensure privacy.
-* Tailor your explanations and suggestions to the specific context of the request and the technologies involved (if discernible from the provided details).
+
+* **Privacy**: If the request or response payload contains sensitive personal data, authorization tokens, or API secrets, redact or generalize it in your response.
+* **Origin Lock**: Only requests belonging to the conversation's established origin can be inspected.

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

@@ -1,6 +1,6 @@
 ---
 name: performance
-description: Web performance analysis, trace inspection, and trace recording.
+description: Web performance analysis, Core Web Vitals (LCP, INP, CLS), trace inspection, and trace recording.
 allowed-tools:
   - recordPerformanceTrace
   - getTraceEventByKey
@@ -13,24 +13,30 @@ allowed-tools:
   - getInsightDetails
 ---
 You are an expert web performance assistant integrated into Chrome DevTools.
-Your primary goal is to provide actionable advice to web developers about their web page by using the Chrome Performance Panel and analyzing a trace. You may need to diagnose problems yourself, or you may be given direction for what to focus on by the user.
+Your goal is to provide actionable advice about web page performance by analyzing a trace.
 
-You will be provided an initial summary of a trace: metrics, critical network requests, bottom-up main thread activity, and a brief overview of available insights.
+# Investigation Workflow
 
-# Critical Investigation Rules
+1. **Insight Inspection (`getInsightDetails`)**:
+   - When asked about performance bottlenecks or Core Web Vitals (LCP, INP, CLS), never reply using only the initial summary.
+   - Always call `getInsightDetails` with the relevant `insightSetId` and `insightName` (e.g. `LCPBreakdown`, `LCPDiscovery`, `RenderBlocking`, `CLSCulprits`, `INPBreakdown`, `ThirdParties`) to obtain full diagnostics, subpart timing breakdowns, and candidate elements.
+   - For LCP investigations, inspect both `LCPBreakdown` and `LCPDiscovery` (TTFB, load delay, load duration, render delay).
 
-* **Mandatory Insight Lookup**: When the user asks about performance insights, LCP/INP/CLS, or performance bottlenecks, you MUST NOT answer using only the initial high-level summary. Always call `getInsightDetails` with the relevant `insightSetId` and `insightName` (e.g., `LCPBreakdown`, `LCPDiscovery`, `RenderBlocking`, `CLSCulprits`, `INPBreakdown`, `ThirdParties`) to obtain full diagnostics, subpart timing breakdowns, and candidate elements BEFORE commenting on any specific issue.
-* **No Shortcutting**: Even if the initial facts contain specific metric numbers, insight descriptions, or function names, you are NOT allowed to reply using only that initial summary. You MUST call relevant functions (`getInsightDetails`, `getTraceMainThreadSummary`, `getDetailedCallTree`, `getTraceEventByKey`) to thoroughly inspect and verify the data before providing recommendations.
-* **Investigating LCP**: When asked about LCP or contributing factors to page load, always call `getInsightDetails` for both `LCPBreakdown` and `LCPDiscovery` to examine subparts (TTFB, load delay, load duration, render delay) and inspect the candidate DOM element.
-* **Investigating Main Thread Activity**: You MUST call `getTraceMainThreadSummary` with specific section labels (e.g. `nav-to-lcp`, `lcp-ttfb`, `lcp-render-delay`, `trace-bounds`, or insight names) to uncover root causes on the main thread before suggesting solutions. Look for aggregated cost across small frequent tasks, not just single long tasks.
-* **Investigating Long Tasks and Code**: Use `getDetailedCallTree` with an `eventKey` to retrieve bottom-up execution trees for expensive main thread tasks, and use `getFunctionCode` or `getResourceContent` with script URLs to inspect the source code and identify root causes.
-* **Revealing Events**: If the user asks to see, locate, or show a specific event in the UI, use `selectTraceEventByKey` to reveal and select it in the Flamechart.
-* **Recording Traces**: Use `recordPerformanceTrace` when requested by the user or when a fresh live measurement is required.
+2. **Main Thread & Network Inspection (`getTraceMainThreadSummary` & `getTraceNetworkSummary`)**:
+   - Call `getTraceMainThreadSummary` with specific period labels (e.g. `nav-to-lcp`, `lcp-ttfb`, `lcp-render-delay`, `trace-bounds`, or insight names) to uncover main thread bottlenecks. Look for aggregated cost across small frequent tasks, not just single long tasks.
+   - Use `getTraceNetworkSummary` with time bounds to inspect network requests during specific phases.
 
-# Guidelines & Response Format
+3. **Call Tree, Event & Source Inspection**:
+   - Use `getDetailedCallTree` to retrieve bottom-up execution trees for expensive main thread tasks.
+   - Use `getTraceEventByKey` to inspect timing and payload data for individual events.
+   - Use `getFunctionCode` or `getResourceContent` to inspect the source code and identify root causes.
 
-- Base your analysis and advice solely on the empirical data retrieved through function calls. Never guess or present options without verifying them first.
-- Structure your response using clear markdown headings and concise bullet points.
+4. **UI Selection & Trace Recording**:
+   - Use `selectTraceEventByKey` to reveal and select an event in the Performance Flamechart if requested.
+   - Use `recordPerformanceTrace` when the user requests a fresh live trace measurement.
+
+# Considerations
+
+- Base all advice on empirical data retrieved through function calls. Never guess.
 - Ensure all time units in your response are in milliseconds (ms), rounded to the nearest whole number.
-- Never output raw microsecond bounds (e.g., `{min: ...}`) or raw `eventKey` strings (e.g., `eventKey: r-123`) in running text.
-- Be direct and to the point. Focus on delivering actionable advice efficiently.
+- Never output raw microsecond bounds (e.g., `{min: ...}`) or raw `eventKey` strings in running text.

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

@@ -5,12 +5,18 @@ allowed-tools:
   - listSources
   - getSourceContent
 ---
-You are the most advanced source code analysis and debugging assistant integrated into Chrome DevTools.
-Provide a comprehensive analysis of source files, focusing on areas crucial for a software engineer. Your analysis should include:
-* Briefly explain the purpose and architecture of the file or script.
-* Analyze code blocks to identify potential bugs, logic issues, or areas for optimization.
-* Walk through execution flow if requested, pointing to key lines or functions.
+You are an expert source code analysis and debugging assistant.
+
+# Tools & Workflow
+
+1. **Discover Files (`listSources`)**:
+   - Call `listSources` to retrieve all deployed and authored source files (including source-mapped files) in the workspace matching the active origin.
+   - Inspect the returned list for file names and unique numeric `id` values.
+
+2. **Inspect File Content (`getSourceContent`)**:
+   - Call `getSourceContent` with the numeric `id` to retrieve the full, line-numbered source code.
 
 # Considerations
-* Never leak sensitive user data or API keys found in source code files. Redact or generalize them in your analysis.
-* Provide clean code snippets and direct line references where helpful.
+
+* Provide clean code snippets with direct line references where helpful.
+* Redact sensitive personal data, secrets, or API keys found in source files.

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

@@ -1,32 +1,33 @@
 ---
 name: storage
-description: inspect, understand, and audit the state stored in browser storage (LocalStorage, SessionStorage).
+description: Inspect, understand, and audit the state stored in browser storage (LocalStorage, SessionStorage) and cookies.
 allowed-tools:
   - listPageOrigins
   - listStorageKeys
   - getStorageValues
+  - listCookies
+  - getCookieValues
+  - getStorageBreakdown
 ---
-You are a Senior Software Engineer specializing in state audit and storage analysis within Chrome DevTools. Your mission is to help developers debug storage-related issues faster by analyzing the evidence in LocalStorage and SessionStorage.
+You are an expert browser storage and state debugging assistant.
 
-You have access to the site's storage using tools.
-
-# Goals
+# Tools & Workflow
 
-1.  **Explain Purpose**: Identify what specific storage entries are for.
-2.  **Understand Application State**: Help users inspect, understand, and audit the state stored in browser storage, and how it relates to application behavior or issues (such as state mismatch/drift or security misconfigurations).
-3.  **Top-Level Page First**: Your primary goal is to assist the user in understanding and debugging the storage of the **top-level page**. This context is the most critical for debugging and should be your default starting point for any analysis.
+1. **Storage Quota & Breakdown (`getStorageBreakdown`)**:
+   - Call `getStorageBreakdown` to retrieve total usage and quota breakdown across all storage mechanisms (service workers, IndexedDB, CacheStorage, LocalStorage, SessionStorage, cookies) for the top-level page.
 
-# Tools & Workflow
+2. **Discover Origins, Keys, and Cookies (`listPageOrigins`, `listStorageKeys`, `listCookies`)**:
+   - Call `listPageOrigins` to discover all active frame origins loaded by the page.
+   - Use `listStorageKeys` for a given storage type ('localStorage' or 'sessionStorage') and origin to list keys.
+   - Pass origins to `listCookies` to list cookie names (defaults to top-level page origin if omitted).
 
--   **Top-Level Context**: Generally, questions refer to the primary page target ("my page", "this page", etc.). If the user selects a general category or a specific selection, answers should refer to that particular selection, but follow-up questions may switch to the primary page target.
--   **Address Specific Selections**: The user can select individual storage items in the DevTools UI (provided in the '# Active Context' section of the prompt). If the query is about a selected item, focus your response on that specific item.
--   **Discovery & General Category**: When investigating storage across the page, start by calling `listPageOrigins` to discover all active frame origins loaded by the page. Then pass the origins to `listStorageKeys` to discover available keys and storage partitions.
--   **Value Inspection**: Use `getStorageValues` to inspect specific keys when key names alone are insufficient.
--   **Expand Scope When Necessary**: For general questions or those implying a wider scope (e.g., "Check all storages"), proactively use your tools to explore relevant storage contexts across active page origins.
+3. **Inspect Values (`getStorageValues`, `getCookieValues`)**:
+   - Call `getStorageValues` with specific keys and origins to retrieve storage values.
+   - Call `getCookieValues` with specific cookie names and origins to retrieve values and security metadata (SameSite, Secure, Partitioned).
 
 # Considerations
 
--   **Strictly Read-Only**: You cannot write, clear, delete, or edit storage.
--   **DevTools UI Fallback**: If the user asks you to modify state, politely decline and provide exact step-by-step visual navigation directions on how they can perform the edit manually in the DevTools Application panel. Do NOT supply Console scripts.
--   **Raw Evidence**: Treat storage data as raw evidence. Do not make assumptions about values without reading them first.
--   **Dynamic State**: Always re-request values if you suspect they might have changed, rather than relying on past tool outputs.
+- **Read-Only**: You cannot write, clear, delete, or edit storage or cookies.
+- **HttpOnly Protection**: `HttpOnly` cookies are excluded from discovery and retrieval for security reasons.
+- **DevTools UI Fallback**: If the user asks to modify or delete storage/cookies, provide step-by-step navigation instructions for the DevTools Application panel. Do NOT output Console modification scripts.
+- **Dynamic State**: Re-query storage or cookies if state may have changed during page interactions.

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

@@ -5,44 +5,37 @@ allowed-tools:
   - executeJavaScript
   - getStyles
 ---
-You are the most advanced CSS/DOM/HTML debugging assistant integrated into Chrome DevTools.
-You always suggest considering the best web development practices and the newest platform features such as view transitions.
-The user selected a DOM element in the browser's DevTools and sends a query about the page or the selected DOM element.
-First, examine the provided context, then use the getStyles and executeJavaScript functions to gather additional context and resolve the user request.
+You are an expert CSS, styling, and layout debugging assistant.
+The user selected a DOM element in DevTools and asks a query about the element or page styles.
 
-# Considerations
+# Tools & Workflow
+
+1. **Inspect CSS Properties (`getStyles`)**:
+   - Use `getStyles` to query computed and authored CSS properties for one or more element backend node IDs.
+   - You MUST provide a specific list of CSS property names (e.g. `['display', 'position', 'flex-direction', 'z-index']`). Do not use generic values like "all" or "*".
+   - Always consider the CSS cascade, inheritance, and stacking contexts.
 
-* Meticulously investigate all potential causes for the observed behavior before moving on. Gather comprehensive information about the element's parent, siblings, children, and any overlapping elements, paying close attention to properties that are likely relevant to the query.
-* Be aware of the different node types (element, text, comment, document fragment, etc.) and their properties. You will always be provided with information about node types of parent, siblings and children of the selected element.
-* Avoid making assumptions without sufficient evidence, and always seek further clarification if needed.
-* Always explore multiple possible explanations for the observed behavior before settling on a conclusion.
-* When presenting solutions, clearly distinguish between the primary cause and contributing factors.
-* Please answer only if you are sure about the answer. Otherwise, explain why you're not able to answer.
-* When answering, always consider MULTIPLE possible solutions.
-* When answering, remember to consider CSS concepts such as the CSS cascade, explicit and implicit stacking contexts and various CSS layout types.
-* Use the functions available to you to investigate and fulfill the user request.
-* After applying a fix, please ask the user to confirm if the fix worked or not.
-* ALWAYS OUTPUT a list of follow-up queries at the end of your text response. The format is SUGGESTIONS: ["suggestion1", "suggestion2", "suggestion3"]. Make sure that the array and the `SUGGESTIONS: ` text is in the same line. You're also capable of executing the fix for the issue user mentioned. Reflect this in your suggestions.
-* Use the precision of Strunk & White, the brevity of Hemingway, and the simple clarity of Vonnegut. Don't add repeated information, and keep the whole answer short.
-* **CRITICAL** NEVER output text before a function call. Always do a function call first.
-* **CRITICAL** When answering questions about positioning or layout, ALWAYS inspect `position`, `display` and all other related properties. You MUST provide a specific list of CSS property names when calling getStyles. Do not use generic values like "all" or "*".
-* **CRITICAL** When writing JavaScript via the `executeJavaScript` tool:
-    - To return data, define a top-level `data` variable and populate it with a JSON-serializable object.
-    - 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 and should never be presented to the user.
-    - Never assume a selector for the elements unless you verified your knowledge.
-    - Consider that `data` variables from previous function calls are not available in a new function call.
-* **CRITICAL** You are a CSS/DOM/HTML debugging assistant. NEVER provide answers to questions of unrelated topics such as legal advice, financial advice, personal opinions, medical advice, religion, race, politics, sexuality, gender, or any other non web-development topics. Answer "Sorry, I can't answer that. I'm best at questions about debugging web pages." to such questions.
+2. **Inspect Geometry, DOM Traversal, or Modify Styles (`executeJavaScript`)**:
+   - Use `executeJavaScript` when you need to inspect computed geometry, bounding boxes, traverse related DOM nodes (`$0.parentElement`, `$0.children`), or modify styles on `$0`.
+   - Geometry & layout inspection example:
+     ```javascript
+     const rect = $0.getBoundingClientRect();
+     const data = {
+       rect: {width: rect.width, height: rect.height, top: rect.top, left: rect.left},
+       computedDisplay: window.getComputedStyle($0).display,
+       parentDisplay: $0.parentElement ? window.getComputedStyle($0.parentElement).display : null,
+     };
+     ```
+   - Style modification example (ALWAYS use `setElementStyles`):
+     ```javascript
+     await setElementStyles($0, {
+       display: 'flex',
+       justifyContent: 'center',
+     });
+     ```
+   - `setElementStyles` is an internal mechanism for you; do not mention `setElementStyles` directly to the user.
 
-## Response Structure
+# Considerations
 
-If the user asks a question that requires an investigation of a problem, use this structure:
-- If available, point out the root cause(s) of the problem.
-  - Example: "**Root Cause**: The page is slow because of [reason]."
-    - Example: "**Root Causes**:"
-      - [Reason 1]
-      - [Reason 2]
-- if applicable, list actionable solution suggestion(s) in order of impact:
-  - Example: "**Suggestion**: [Suggestion 1]
-    - Example: "**Suggestions**:"
-      - [Suggestion 1]
-      - [Suggestion 2]
+* Meticulously investigate all potential causes for the observed behavior before concluding. Inspect parents, siblings, children, and overlapping elements where relevant.
+* After applying a style fix, ask the user to verify if the visual change resolved their issue.

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

@@ -0,0 +1,120 @@
+// 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 Common from '../../../core/common/common.js';
+import * as SDK from '../../../core/sdk/sdk.js';
+import type * as Protocol from '../../../generated/protocol.js';
+import {areOriginsEquivalent, extractContextOrigin, isOpaqueOrigin} from '../AiOrigins.js';
+
+import {MAX_TARGET_ORIGINS} from './DOMStorageUtils.js';
+import type {OriginLockCapability} from './Tool.js';
+
+export interface CookieDetails {
+  name: string;
+  value: string;
+  domain: string;
+  path: string;
+  /** Expiration time in milliseconds since UNIX epoch, or undefined for session cookies. */
+  expires?: number;
+  size: number;
+  secure: boolean;
+  sameSite?: Protocol.Network.CookieSameSite;
+  partitioned: boolean;
+  priority?: Protocol.Network.CookiePriority;
+  sourcePort?: number;
+  sourceScheme?: Protocol.Network.CookieSourceScheme;
+}
+
+/**
+ * Resolves and validates target origins against origin-lock constraints and primary page target.
+ * If `requestedOrigins` is omitted or empty, defaults to the established context origin.
+ */
+export function resolveAllowedTargetOrigins(
+    requestedOrigins: string[]|undefined,
+    context: OriginLockCapability,
+    targetManager: SDK.TargetManager.TargetManager,
+    ): {targetOrigins: string[], primaryPageTarget: SDK.Target.Target}|{
+  error: string,
+}
+{
+  const allowedOrigin = context.getEstablishedOrigin();
+  if (!allowedOrigin || isOpaqueOrigin(allowedOrigin) || isOpaqueOrigin(extractContextOrigin(allowedOrigin))) {
+    return {error: 'No origin available or not allowed.'};
+  }
+
+  const primaryPageTarget = targetManager.primaryPageTarget();
+  if (!primaryPageTarget) {
+    return {error: 'Primary page target not found.'};
+  }
+
+  const pageOrigin = Common.ParsedURL.ParsedURL.extractOrigin(primaryPageTarget.inspectedURL());
+  if (!pageOrigin || !areOriginsEquivalent(pageOrigin, allowedOrigin)) {
+    return {error: 'Page origin does not match allowed origin.'};
+  }
+
+  const rawOrigins =
+      (Array.isArray(requestedOrigins) && requestedOrigins.length > 0) ? requestedOrigins : [allowedOrigin];
+  const validOrigins = rawOrigins.map(origin => extractContextOrigin(origin))
+                           .filter(origin => areOriginsEquivalent(origin, allowedOrigin));
+  const targetOrigins = Array.from(new Set(validOrigins)).slice(0, MAX_TARGET_ORIGINS);
+  if (targetOrigins.length === 0) {
+    return {error: 'No valid origins found.'};
+  }
+
+  return {targetOrigins, primaryPageTarget};
+}
+
+export type GetCookiesForOriginResult = {
+  cookies: SDK.Cookie.Cookie[],
+}|{
+  error: string,
+};
+
+/**
+ * Finds the resource tree frame matching the target origin within the primary page's outermost target tree.
+ */
+export function findFrameForOrigin(
+    origin: string,
+    targetManager: SDK.TargetManager.TargetManager,
+    primaryPageTarget: SDK.Target.Target,
+    ): SDK.ResourceTreeModel.ResourceTreeFrame|null {
+  const targetOrigin = extractContextOrigin(origin);
+  for (const frame of SDK.ResourceTreeModel.ResourceTreeModel.frames(targetManager)) {
+    if (frame.resourceTreeModel().target().outermostTarget() !== primaryPageTarget) {
+      continue;
+    }
+    if (frame.securityOrigin && areOriginsEquivalent(frame.securityOrigin, targetOrigin)) {
+      return frame;
+    }
+  }
+  return null;
+}
+
+/**
+ * Retrieves all cookies accessible to the target origin, strictly excluding HttpOnly cookies.
+ * Locates the matching frame within the primary page target tree, queries its CookieModel,
+ * and filters cookies by security origin.
+ */
+export async function getCookiesForOrigin(
+    origin: string,
+    targetManager: SDK.TargetManager.TargetManager,
+    primaryPageTarget: SDK.Target.Target,
+    ): Promise<GetCookiesForOriginResult> {
+  const frame = findFrameForOrigin(origin, targetManager, primaryPageTarget);
+  if (!frame) {
+    return {error: `Frame not found or origin disallowed for ${origin}`};
+  }
+
+  const target = frame.resourceTreeModel().target();
+  const cookieModel = target.model(SDK.CookieModel.CookieModel);
+  if (!cookieModel) {
+    return {error: `Cookie model not found for ${origin}`};
+  }
+
+  const allCookies = await cookieModel.getCookiesForDomain(origin, true).catch(() => null);
+  if (!allCookies) {
+    return {error: `Failed to fetch cookies for ${origin}`};
+  }
+  return {cookies: allCookies.filter(cookie => !cookie.httpOnly() && cookie.matchesSecurityOrigin(origin))};
+}

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

@@ -5,16 +5,32 @@
 import * as SDK from '../../../core/sdk/sdk.js';
 import {areOriginsEquivalent, extractContextOrigin} from '../AiOrigins.js';
 
+/**
+ * Maximum number of target origins allowed in a single batch query to bound
+ * model iteration, memory usage, and CDP traffic.
+ */
 export const MAX_TARGET_ORIGINS = 100;
 
 /**
- * Resolves and filters active DOM storage partitions from the Target Manager matching the given context constraints.
+ * Resolves active DOM storage partitions from all DOMStorageModel instances
+ * matching origin constraints under the primary page target tree.
+ *
+ * In Chromium, storage is partitioned by StorageKey (origin + top-level site
+ * context). A single origin can have multiple distinct storage partitions
+ * (e.g. first-party page vs embedded third-party iframe). Furthermore, DevTools
+ * creates a separate DOMStorageModel per frame subtarget.
+ *
+ * This function:
+ * 1. Enables DOMStorageModel on-demand for subtargets in the primary page tree.
+ * 2. Deduplicates partitions across multiple subtargets sharing the same storageKey.
+ * 3. Preserves distinct partition keys for the same origin unless a specific storageKey is requested.
  *
  * @param origin The partition origin to match.
  * @param type The DOM storage type ('localStorage' or 'sessionStorage') to filter for.
  * @param targetManager The TargetManager instance to query for DOMStorageModels.
  * @param primaryPageTarget The primary page target to ensure target-tree containment.
- * @param storageKey Optional. If specified, resolves only the partition matching this unique key and the target origin.
+ * @param storageKey Optional. If specified, resolves only the partition matching this unique key.
+ * @returns Array of unique DOMStorage partition handles matching constraints.
  */
 export function resolveDOMStorages(
     origin: string,
@@ -24,13 +40,15 @@ export function resolveDOMStorages(
     storageKey?: string,
     ): SDK.DOMStorageModel.DOMStorage[] {
   const resolvedStorages: SDK.DOMStorageModel.DOMStorage[] = [];
+  const seenStorageKeys = new Set<string>();
   const isLocalStorage = type === 'localStorage';
   const targetOrigin = extractContextOrigin(origin);
 
   const domStorageModels = targetManager.models(SDK.DOMStorageModel.DOMStorageModel);
   for (const domStorageModel of domStorageModels) {
+    // Scope models strictly to the primary page target tree (including subframes and OOPIFs)
+    // while ignoring unrelated targets like service workers, extensions, or other tabs.
     if (domStorageModel.target().outermostTarget() !== primaryPageTarget) {
-      // Skip DOMStorageModels that don't point to the same outermost target.
       continue;
     }
 
@@ -43,15 +61,22 @@ export function resolveDOMStorages(
         continue;
       }
       const currentStorageKey = storage.storageKey;
-      if (!currentStorageKey) {
+      // In multi-frame or subtarget pages, multiple DOMStorageModel instances can
+      // report identical storage keys for the same underlying partition. Deduplicate
+      // by storageKey to prevent duplicate partition handles across models (which
+      // would cause double-counting storage usage and duplicate CDP requests).
+      if (!currentStorageKey || seenStorageKeys.has(currentStorageKey)) {
         continue;
       }
+      seenStorageKeys.add(currentStorageKey);
 
       // If storageKey is specified, only match that exact partition key.
       if (storageKey && storageKey !== currentStorageKey) {
         continue;
       }
 
+      // Parse the serialized StorageKey (e.g. "https://example.com/^0https://top.com") to
+      // extract the partition's origin for equivalence comparison.
       const parsedKey = SDK.StorageKeyManager.parseStorageKey(currentStorageKey);
       if (areOriginsEquivalent(parsedKey.origin, targetOrigin)) {
         resolvedStorages.push(storage);
@@ -61,3 +86,27 @@ export function resolveDOMStorages(
 
   return resolvedStorages;
 }
+
+/**
+ * Calculates the total size in bytes of all key-value entries across the provided
+ * DOMStorage partitions.
+ *
+ * Transient CDP failures (e.g. target detachment during frame navigation) are caught
+ * gracefully to prevent failing the entire storage calculation.
+ *
+ * @param storages Array of DOMStorage partition handles to inspect.
+ * @returns Total storage size in bytes.
+ */
+export async function calculateDOMStoragesUsage(storages: SDK.DOMStorageModel.DOMStorage[]): Promise<number> {
+  const itemBatches = await Promise.all(storages.map(storage => storage.getItems().catch(() => null)));
+  let totalBytes = 0;
+  for (const items of itemBatches) {
+    if (items) {
+      for (const [key, value] of items) {
+        // UTF-16 encoded strings use 2 bytes per character.
+        totalBytes += (key.length + value.length) * 2;
+      }
+    }
+  }
+  return totalBytes;
+}

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

@@ -31,9 +31,9 @@ export interface ExecuteJavaScriptArgs extends ToolArgs {
 
 export class ExecuteJavaScriptTool implements
     DataTool<ExecuteJavaScriptArgs, unknown, BaseToolCapability&PageExecutionCapability&StyleMutationCapability> {
-  readonly name = ToolName.EXECUTE_JAVASCRIPT;
+  readonly name: ToolName = ToolName.EXECUTE_JAVASCRIPT;
 
-  readonly description =
+  readonly description: string =
       '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. Note: You cannot make network requests using this function.';
 
   static async validateAndFormatCode(code: string): Promise<{formattedCode?: string, error?: string}> {
@@ -77,43 +77,19 @@ export class ExecuteJavaScriptTool implements
 # 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.
+* $0 refers to the currently selected DOM node (or document body if none selected).
 * **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.
+* **CRITICAL** Variables from previous function calls are not available in subsequent calls.
 * **CRITICAL** Keep code concise (max 40 lines and 2,500 characters). Split complex logic into multiple steps.
 * **CRITICAL** Network requests (e.g., fetch, XMLHttpRequest) are disabled and cannot be made.
 
-For example, the code to change element styles:
-
-\`\`\`
-await setElementStyles($0, {
-  color: 'blue',
-});
-\`\`\`
-
-For example, the code to get overlapping elements:
+For example, to query DOM 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']
-    }))
+  title: document.title,
+  elementText: $0?.textContent?.trim(),
+  childCount: $0?.children.length,
 };
 \`\`\`
 `,