chrome-devtools-frontend 1.0.1605219 → 1.0.1605390

package/front_end/Images/src/dots-circle.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_367_65863)">
+<path d="M5.2 8.875C5.44306 8.875 5.64722 8.79236 5.8125 8.62708C5.9875 8.45208 6.075 8.24306 6.075 8C6.075 7.75694 5.9875 7.55278 5.8125 7.3875C5.64722 7.2125 5.44306 7.125 5.2 7.125C4.95694 7.125 4.74792 7.2125 4.57292 7.3875C4.40764 7.55278 4.325 7.75694 4.325 8C4.325 8.24306 4.40764 8.45208 4.57292 8.62708C4.74792 8.79236 4.95694 8.875 5.2 8.875ZM8 8.875C8.24306 8.875 8.44722 8.79236 8.6125 8.62708C8.7875 8.45208 8.875 8.24306 8.875 8C8.875 7.75694 8.7875 7.55278 8.6125 7.3875C8.44722 7.2125 8.24306 7.125 8 7.125C7.75694 7.125 7.54792 7.2125 7.37292 7.3875C7.20764 7.55278 7.125 7.75694 7.125 8C7.125 8.24306 7.20764 8.45208 7.37292 8.62708C7.54792 8.79236 7.75694 8.875 8 8.875ZM10.8 8.875C11.0431 8.875 11.2472 8.79236 11.4125 8.62708C11.5875 8.45208 11.675 8.24306 11.675 8C11.675 7.75694 11.5875 7.55278 11.4125 7.3875C11.2472 7.2125 11.0431 7.125 10.8 7.125C10.5569 7.125 10.3479 7.2125 10.1729 7.3875C10.0076 7.55278 9.925 7.75694 9.925 8C9.925 8.24306 10.0076 8.45208 10.1729 8.62708C10.3479 8.79236 10.5569 8.875 10.8 8.875ZM8 13.6C7.23194 13.6 6.50764 13.4542 5.82708 13.1625C5.14653 12.8708 4.54861 12.4722 4.03333 11.9667C3.52778 11.4514 3.12917 10.8535 2.8375 10.1729C2.54583 9.49236 2.4 8.76806 2.4 8C2.4 7.22222 2.54583 6.49792 2.8375 5.82708C3.12917 5.14653 3.52778 4.55347 4.03333 4.04792C4.54861 3.53264 5.14653 3.12917 5.82708 2.8375C6.50764 2.54583 7.23194 2.4 8 2.4C8.77778 2.4 9.50208 2.54583 10.1729 2.8375C10.8535 3.12917 11.4465 3.53264 11.9521 4.04792C12.4674 4.55347 12.8708 5.14653 13.1625 5.82708C13.4542 6.49792 13.6 7.22222 13.6 8C13.6 8.76806 13.4542 9.49236 13.1625 10.1729C12.8708 10.8535 12.4674 11.4514 11.9521 11.9667C11.4465 12.4722 10.8535 12.8708 10.1729 13.1625C9.50208 13.4542 8.77778 13.6 8 13.6ZM8 12.55C9.26389 12.55 10.3382 12.1076 11.2229 11.2229C12.1076 10.3382 12.55 9.26389 12.55 8C12.55 6.73611 12.1076 5.66181 11.2229 4.77708C10.3382 3.89236 9.26389 3.45 8 3.45C6.73611 3.45 5.66181 3.89236 4.77708 4.77708C3.89236 5.66181 3.45 6.73611 3.45 8C3.45 9.26389 3.89236 10.3382 4.77708 11.2229C5.66181 12.1076 6.73611 12.55 8 12.55Z" fill="#474747"/>
+</g>
+<defs>
+<clipPath id="clip0_367_65863">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/front_end/core/sdk/WebMCPModel.ts

@@ -13,15 +13,32 @@ import {Capability, type Target} from './Target.js';
 export const enum Events {
   TOOLS_ADDED = 'ToolsAdded',
   TOOLS_REMOVED = 'ToolsRemoved',
+  TOOL_INVOKED = 'ToolInvoked',
+  TOOL_RESPONDED = 'ToolResponded',
+}
+
+export interface Call {
+  invocationId: string;
+  input: string;
+  tool: Protocol.WebMCP.Tool;
+  result?: {
+    status: Protocol.WebMCP.InvocationStatus,
+    output?: unknown,
+    errorText?: string,
+    exception?: Protocol.Runtime.RemoteObject,
+  };
 }
 
 export interface EventTypes {
   [Events.TOOLS_ADDED]: ReadonlyArray<Readonly<Protocol.WebMCP.Tool>>;
   [Events.TOOLS_REMOVED]: ReadonlyArray<Readonly<Protocol.WebMCP.Tool>>;
+  [Events.TOOL_INVOKED]: Call;
+  [Events.TOOL_RESPONDED]: Call;
 }
 
 export class WebMCPModel extends SDKModel<EventTypes> {
   readonly #tools = new Map<Protocol.Page.FrameId, Map<string, Protocol.WebMCP.Tool>>();
+  readonly #calls = new Map<string, Call>();
   readonly agent: ProtocolProxyApi.WebMCPApi;
   #enabled = false;
 
@@ -43,6 +60,14 @@ export class WebMCPModel extends SDKModel<EventTypes> {
     return this.#tools.values().flatMap(toolMap => toolMap.values());
   }
 
+  get toolCalls(): Call[] {
+    return [...this.#calls.values()];
+  }
+
+  clearCalls(): void {
+    this.#calls.clear();
+  }
+
   async enable(): Promise<void> {
     if (this.#enabled) {
       return;
@@ -78,6 +103,34 @@ export class WebMCPModel extends SDKModel<EventTypes> {
     }
     this.dispatchEventToListeners(Events.TOOLS_ADDED, tools);
   }
+
+  toolInvoked(params: Protocol.WebMCP.ToolInvokedEvent): void {
+    const tool = this.#tools.get(params.frameId)?.get(params.toolName);
+    if (!tool) {
+      return;
+    }
+    const call: Call = {
+      invocationId: params.invocationId,
+      input: params.input,
+      tool,
+    };
+    this.#calls.set(params.invocationId, call);
+    this.dispatchEventToListeners(Events.TOOL_INVOKED, call);
+  }
+
+  toolResponded(params: Protocol.WebMCP.ToolRespondedEvent): void {
+    const call = this.#calls.get(params.invocationId);
+    if (!call) {
+      return;
+    }
+    call.result = {
+      status: params.status,
+      output: params.output,
+      errorText: params.errorText,
+      exception: params.exception,
+    };
+    this.dispatchEventToListeners(Events.TOOL_RESPONDED, call);
+  }
 }
 
 class WebMCPDispatcher implements ProtocolProxyApi.WebMCPDispatcher {
@@ -94,10 +147,12 @@ class WebMCPDispatcher implements ProtocolProxyApi.WebMCPDispatcher {
     this.#model.onToolsRemoved(params.tools);
   }
 
-  toolInvoked(): void {
+  toolInvoked(params: Protocol.WebMCP.ToolInvokedEvent): void {
+    this.#model.toolInvoked(params);
   }
 
-  toolResponded(): void {
+  toolResponded(params: Protocol.WebMCP.ToolRespondedEvent): void {
+    this.#model.toolResponded(params);
   }
 }
 

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

@@ -290,9 +290,17 @@ export interface TimelineRangeSummaryAiWidget {
   };
 }
 
+export interface BottomUpTreeAiWidget {
+  name: 'BOTTOM_UP_TREE';
+  data: {
+    bounds: Trace.Types.Timing.TraceWindowMicro,
+    parsedTrace: Trace.TraceModel.ParsedTrace,
+  };
+}
+
 // This type will grow as we add more widgets.
 export type AiWidget = ComputedStyleAiWidget|CoreVitalsAiWidget|StylePropertiesAiWidget|DomTreeAiWidget|
-    PerformanceTraceAiWidget|LcpBreakdownAiWidget|TimelineRangeSummaryAiWidget;
+    PerformanceTraceAiWidget|LcpBreakdownAiWidget|TimelineRangeSummaryAiWidget|BottomUpTreeAiWidget;
 
 export type FunctionCallHandlerResult<Result> = {
   requiresApproval: true,

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

@@ -8,30 +8,31 @@ import * as Root from '../../../core/root/root.js';
 import {AiAgent, type ContextResponse, ConversationContext, type RequestOptions, ResponseType} from './AiAgent.js';
 
 const preamble = `### Role
-You are a Performance Expert. Your task is to extract a diagnostic narrative from raw DevTools logs and present it as a self-contained, actionable Markdown summary. You provide high-density technical analysis without conversational fluff.
+You are a Conversation Summarizer. Your task is to take a transcript of a conversation between a user and a DevTools AI agent and produce a succinct, actionable Markdown summary. This summary will be used to help apply fixes in an IDE, so it must capture all relevant technical details, findings, and proposed code changes without any conversational fluff.
 
 ### Critical Constraints
 - **Persona:** Do not mention that you are an AI or refer to yourself in the third person.
 - **Domain Scope:** Do not provide answers on non-web-development topics (e.g., legal, financial, medical, or personal advice).
-- **Sensitive Topics:** If the conversation history touches on sensitive topics (religion, race, politics, sexuality, gender, etc.), respond only with: "My expertise is limited to website performance analysis. I cannot provide information on that topic."
-- **Data Portability:** The recipient of this summary does NOT have access to the raw logs.
+- **Sensitive Topics:** If the conversation history touches on sensitive topics (religion, race, politics, sexuality, gender, etc.), respond only with: "My expertise is limited to summarizing DevTools AI conversations. I cannot provide information on that topic."
+- **Data Portability:** The recipient of this summary does NOT have access to the raw logs or the full conversation transcript.
     - **No UIDs/Internal IDs:** Never refer to elements by internal IDs (e.g., \`uid=123\`).
     - **Standard Selectors:** Identify elements using HTML tags, classes, or IDs (e.g., \`button.submit-form\`).
     - **No Metadata:** Remove internal constants like \`NAVIGATION_0\` or \`INSIGHT_0\`.
-- **No Process Narration:** Do not describe internal "thinking" or API calls. Skip phrases like "The agent investigated..." or "The user then asked...". Jump straight to the findings.
+- **No Process Narration:** Do not describe internal "thinking" or API calls. Skip phrases like "The agent investigated..." or "The user then asked...". Jump straight to the findings and their technical context.
+- **Suggest, Don't Prescribe:** When summarizing code changes made during the session (e.g., CSS edits), frame them as technical guidance rather than definitive instructions. Since DevTools operates on the live page, the summary must acknowledge that these fixes may need to be adapted for the actual source code.
 
 ### Objectives
 1. **Identify Intent:** Define the core technical goal of the session.
-2. **Value-Only Diagnostics:** List only the technical data points discovered. Omit steps that didn't yield a result.
-3. **Focus on Code Intent:** When code is executed in the logs, summarize the **purpose** and the **result**. Do not include the raw JavaScript unless it is a specific fix for the user to implement.
-4. **Actionable Recommendations:** Provide specific code/strategy fixes based on the findings.
+2. **Value-Only Diagnostics:** List only the technical data points and findings discovered during the conversation. Omit steps that didn't yield a result.
+3. **Summarize Code Changes:** When code is executed or suggested in the logs, summarize the **purpose** and the **result**. Include specific code snippets if they are a specific fix for the user to implement.
+4. **Actionable Recommendations:** Provide specific code/strategy fixes based on the findings as guidance for the user's source code.
 
 ### Formatting Rules
 - **Header:** Use ## [Brief Topic Title]
-- **Context:** Describe the target element/page and the core metric being analyzed.
+- **Context:** Describe the target element/page and the core issue or technical goal being analyzed.
 - **Diagnostics:** A bulleted list of technical findings.
 - **Tabular Data:** Use a **Markdown Table** for any lists of URLs, metrics, or comparison data.
-- **Code Fixes:** Use fenced code blocks for suggested CSS/JS optimizations.
+- **Code Fixes:** Use fenced code blocks for suggested code optimizations. Use language that frames them as illustrative examples or context (e.g., "The following changes were identified as a potential fix for the live page...") rather than strict instructions.
 
 ---
 

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

@@ -0,0 +1,301 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Host from '../../../core/host/host.js';
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as Platform from '../../../core/platform/platform.js';
+import * as Root from '../../../core/root/root.js';
+import * as SDK from '../../../core/sdk/sdk.js';
+import type {ChangeManager} from '../ChangeManager.js';
+import {debugLog} from '../debug.js';
+import {EvaluateAction, formatError, SideEffectError} from '../EvaluateAction.js';
+import {FREESTYLER_WORLD_NAME} from '../injected.js';
+
+import type {FunctionCallHandlerResult, FunctionDeclaration, FunctionHandlerOptions} from './AiAgent.js';
+
+const lockedString = i18n.i18n.lockedString;
+
+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}):
+    Promise<string> {
+  if (!contextNode) {
+    throw new Error('Cannot execute JavaScript because of missing context node');
+  }
+  const target = contextNode.domModel().target();
+
+  if (!target) {
+    throw new Error('Target is not found for executing code');
+  }
+
+  const resourceTreeModel = target.model(SDK.ResourceTreeModel.ResourceTreeModel);
+  const frameId = contextNode.frameId() ?? resourceTreeModel?.mainFrame?.id;
+
+  if (!frameId) {
+    throw new Error('Main frame is not found for executing code');
+  }
+
+  const runtimeModel = target.model(SDK.RuntimeModel.RuntimeModel);
+  const pageAgent = target.pageAgent();
+
+  // This returns previously created world if it exists for the frame.
+  const {executionContextId} = await pageAgent.invoke_createIsolatedWorld({frameId, worldName: FREESTYLER_WORLD_NAME});
+  const executionContext = runtimeModel?.executionContext(executionContextId);
+  if (!executionContext) {
+    throw new Error('Execution context is not found for executing code');
+  }
+
+  if (executionContext.debuggerModel.selectedCallFrame()) {
+    return formatError('Cannot evaluate JavaScript because the execution is paused on a breakpoint.');
+  }
+
+  const remoteObject = await contextNode.resolveToObject(undefined, executionContextId);
+  if (!remoteObject) {
+    throw new Error('Cannot execute JavaScript because remote object cannot be resolved');
+  }
+
+  return await EvaluateAction.execute(functionDeclaration, [remoteObject], executionContext, {throwOnSideEffect});
+}
+
+const MAX_OBSERVATION_BYTE_LENGTH = 25_000;
+const OBSERVATION_TIMEOUT = 5_000;
+
+export interface JavascriptExecutorOptions {
+  readonly executionMode: Root.Runtime.HostConfigFreestylerExecutionMode;
+  readonly getContextNode: () => SDK.DOMModel.DOMNode | null;
+  readonly createExtensionScope: (changes: ChangeManager) => {
+    install(): Promise<void>, uninstall(): Promise<void>,
+  };
+  readonly changes: ChangeManager;
+}
+
+export class JavascriptExecutor {
+  #options: JavascriptExecutorOptions;
+  #execJs: typeof executeJsCode;
+
+  constructor(options: JavascriptExecutorOptions, execJs: typeof executeJsCode = executeJsCode) {
+    this.#options = options;
+    this.#execJs = execJs;
+  }
+
+  async executeAction(action: string, options?: FunctionHandlerOptions): Promise<FunctionCallHandlerResult<unknown>> {
+    debugLog(`Action to execute: ${action}`);
+
+    if (options?.approved === false) {
+      return {
+        error: 'Error: User denied code execution with side effects.',
+      };
+    }
+
+    if (this.#options.executionMode === Root.Runtime.HostConfigFreestylerExecutionMode.NO_SCRIPTS) {
+      return {
+        error: 'Error: JavaScript execution is currently disabled.',
+      };
+    }
+
+    const selectedNode = this.#options.getContextNode();
+    if (!selectedNode) {
+      return {error: 'Error: no selected node found.'};
+    }
+    const target = selectedNode.domModel().target();
+    if (target.model(SDK.DebuggerModel.DebuggerModel)?.selectedCallFrame()) {
+      return {
+        error: 'Error: Cannot evaluate JavaScript because the execution is paused on a breakpoint.',
+      };
+    }
+
+    const scope = this.#options.createExtensionScope(this.#options.changes);
+    await scope.install();
+    try {
+      let throwOnSideEffect = true;
+      if (options?.approved) {
+        throwOnSideEffect = false;
+      }
+
+      const result = await this.generateObservation(action, {throwOnSideEffect});
+      debugLog(`Action result: ${JSON.stringify(result)}`);
+      if (result.sideEffect) {
+        if (this.#options.executionMode ===
+            Root.Runtime.HostConfigFreestylerExecutionMode.SIDE_EFFECT_FREE_SCRIPTS_ONLY) {
+          return {
+            error: 'Error: JavaScript execution that modifies the page is currently disabled.',
+          };
+        }
+
+        if (options?.signal?.aborted) {
+          return {
+            error: 'Error: evaluation has been cancelled',
+          };
+        }
+
+        return {
+          requiresApproval: true,
+          description: lockedString('This code may modify page content. Continue?'),
+        };
+      }
+      if (result.canceled) {
+        return {
+          error: result.observation,
+        };
+      }
+
+      return {
+        result: result.observation,
+      };
+    } finally {
+      await scope.uninstall();
+    }
+  }
+
+  async generateObservation(
+      action: string,
+      {
+        throwOnSideEffect,
+      }: {
+        throwOnSideEffect: boolean,
+      },
+      ): Promise<{
+    observation: string,
+    sideEffect: boolean,
+    canceled: boolean,
+  }> {
+    const functionDeclaration = `async function ($0) {
+  try {
+    ${action}
+    ;
+    return ((typeof data !== "undefined") ? data : undefined);
+  } catch (error) {
+    return error;
+  }
+}`;
+    try {
+      const result = await Promise.race([
+        this.#execJs(
+            functionDeclaration,
+            {
+              throwOnSideEffect,
+              contextNode: this.#options.getContextNode(),
+            },
+            ),
+        new Promise<never>((_, reject) => {
+          setTimeout(
+              () => reject(new Error('Script execution exceeded the maximum allowed time.')), OBSERVATION_TIMEOUT);
+        }),
+      ]);
+      const byteCount = Platform.StringUtilities.countWtf8Bytes(result);
+      Host.userMetrics.freestylerEvalResponseSize(byteCount);
+      if (byteCount > MAX_OBSERVATION_BYTE_LENGTH) {
+        throw new Error('Output exceeded the maximum allowed length.');
+      }
+      return {
+        observation: result,
+        sideEffect: false,
+        canceled: false,
+      };
+    } catch (error) {
+      if (error instanceof SideEffectError) {
+        return {
+          observation: error.message,
+          sideEffect: true,
+          canceled: false,
+        };
+      }
+
+      return {
+        observation: `Error: ${error.message}`,
+        sideEffect: false,
+        canceled: false,
+      };
+    }
+  }
+}

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

@@ -967,16 +967,27 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
 
         const key = `getMainThreadTrackSummary({min: ${bounds.min}, max: ${bounds.max}})`;
         this.#cacheFunctionResult(focus, key, summary);
+        const widgets: AiWidget[] = [];
+        widgets.push({
+          name: 'TIMELINE_RANGE_SUMMARY',
+          data: {
+            parsedTrace,
+            bounds,
+            track: 'main',
+          },
+        });
+
+        widgets.push({
+          name: 'BOTTOM_UP_TREE',
+          data: {
+            bounds,
+            parsedTrace,
+          },
+        });
+
         return {
           result: {summary},
-          widgets: [{
-            name: 'TIMELINE_RANGE_SUMMARY',
-            data: {
-              parsedTrace,
-              bounds,
-              track: 'main',
-            },
-          }],
+          widgets,
         };
       },