chrome-devtools-frontend 1.0.1539728 → 1.0.1541169

package/front_end/models/ai_assistance/EvaluateAction.ts

@@ -5,16 +5,25 @@
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 
+import {PAGE_EXPOSED_FUNCTIONS} from './injected.js';
+
 export function formatError(message: string): string {
   return `Error: ${message}`;
 }
 export class SideEffectError extends Error {}
 
+export interface GetErrorStackOutput {
+  message: string;
+  stack?: string;
+}
+
+/* istanbul ignore next */
+export function getErrorStackOnThePage(this: Error): GetErrorStackOutput {
+  return {stack: this.stack, message: this.message};
+}
+
 /* istanbul ignore next */
 export function stringifyObjectOnThePage(this: unknown): string {
-  if (this instanceof Error) {
-    return `Error: ${this.message}`;
-  }
   const seenBefore = new WeakMap();
   return JSON.stringify(this, function replacer(this: unknown, key: string, value: unknown) {
     if (typeof value === 'object' && value !== null) {
@@ -44,7 +53,8 @@ export function stringifyObjectOnThePage(this: unknown): string {
   });
 }
 
-export async function stringifyRemoteObject(object: SDK.RemoteObject.RemoteObject): Promise<string> {
+export async function stringifyRemoteObject(
+    object: SDK.RemoteObject.RemoteObject, functionDeclaration: string): Promise<string> {
   switch (object.type) {
     case Protocol.Runtime.RemoteObjectType.String:
       return `'${object.value}'`;
@@ -59,7 +69,17 @@ export async function stringifyRemoteObject(object: SDK.RemoteObject.RemoteObjec
     case Protocol.Runtime.RemoteObjectType.Function:
       return `${object.description}`;
     case Protocol.Runtime.RemoteObjectType.Object: {
+      if (object.subtype === 'error') {
+        const res = await object.callFunctionJSON(getErrorStackOnThePage, []);
+
+        if (!res) {
+          throw new Error('Could not stringify the object' + object);
+        }
+
+        return EvaluateAction.stringifyError(res, functionDeclaration);
+      }
       const res = await object.callFunction(stringifyObjectOnThePage);
+
       if (!res.object || res.object.type !== Protocol.Runtime.RemoteObjectType.String) {
         throw new Error('Could not stringify the object' + object);
       }
@@ -110,9 +130,72 @@ export class EvaluateAction {
         return formatError(exceptionDescription ?? 'JS exception');
       }
 
-      return await stringifyRemoteObject(response.object);
+      return await stringifyRemoteObject(response.object, functionDeclaration);
     } finally {
       executionContext.runtimeModel.releaseEvaluationResult(response);
     }
   }
+
+  static getExecutedLineFromStack(stack: string, pageExposedFunctions: string[]): number|null {
+    const lines = stack.split('\n');
+
+    const stackLines = lines.map(curr => curr.trim()).filter(trimmedLine => {
+      return trimmedLine.startsWith('at');
+    });
+
+    const selectedStack = stackLines.find(stackLine => {
+      const splittedStackLine = stackLine.split(' ');
+
+      if (splittedStackLine.length < 2) {
+        return false;
+      }
+
+      const signature = splittedStackLine[1] === 'async' ?
+          splittedStackLine[2] :  // if the stack line contains async the function name is the next element
+          splittedStackLine[1];
+
+      const lastDotIndex = signature.lastIndexOf('.');
+      const functionName = lastDotIndex !== -1 ? signature.substring(lastDotIndex + 1) : signature;
+
+      return !pageExposedFunctions.includes(functionName);
+    });
+
+    if (!selectedStack) {
+      return null;
+    }
+
+    const frameLocationRegex = /:(\d+)(?::\d+)?\)?$/;
+    const match = selectedStack.match(frameLocationRegex);
+
+    if (!match?.[1]) {
+      return null;
+    }
+
+    const lineNum = parseInt(match[1], 10);
+    if (isNaN(lineNum)) {
+      return null;
+    }
+
+    return lineNum - 1;
+  }
+
+  static stringifyError(result: GetErrorStackOutput, functionDeclaration: string): string {
+    if (!result.stack) {
+      return `Error: ${result.message}`;
+    }
+
+    const lineNum = EvaluateAction.getExecutedLineFromStack(result.stack, PAGE_EXPOSED_FUNCTIONS);
+    if (!lineNum) {
+      return `Error: ${result.message}`;
+    }
+
+    const functionLines = functionDeclaration.split('\n');
+
+    const errorLine = functionLines[lineNum];
+    if (!errorLine) {
+      return `Error: ${result.message}`;
+    }
+
+    return `Error: executing the line "${errorLine.trim()}" failed with the following error:\n${result.message}`;
+  }
 }

package/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.snapshot.txt

@@ -1,53 +1,3 @@
-Title: PerformanceTraceFormatter formatCriticalRequests
-Content:
-Critical network requests:
-
-Network requests data:
-
-
-
-allUrls = [0: http://localhost:8000/, 1: https://code.jquery.com/jquery-3.7.1.js, 2: http://localhost:8000/render-blocking-stylesheet.css, 3: http://localhost:8000/render-blocking-script.js]
-
-0;s-1803;2 ms;3 ms;576 ms;583 ms;582 ms;0.4 ms;7 ms;200;text/html;VeryHigh;VeryHigh;VeryHigh;f;http/1.0;f;;[];[Content-Length: <redacted>|Date: Fri, 07 Mar 2025 15:02:27 GMT|Content-type: text/html|Last-Modified: Fri, 07 Mar 2025 14:58:55 GMT|Server: SimpleHTTP/0.6 Python/3.9.6]
-1;s-1920;581 ms;585 ms;1,943 ms;1,944 ms;1,363 ms;776 ms;1 ms;200;application/javascript;High;High;High;t;h2;f;0;[];[content-encoding: gzip|etag: <redacted>|age: 3975412|x-cache: <redacted>|date: Fri, 07 Mar 2025 15:02:28 GMT|content-type: application/javascript; charset=utf-8|vary: Accept-Encoding|x-cache-hits: <redacted>|last-modified: Fri, 18 Oct 1991 12:00:00 GMT|x-served-by: <redacted>|cache-control: public, max-age=31536000, stale-while-revalidate=604800|x-timer: <redacted>|via: 1.1 varnish, 1.1 varnish|accept-ranges: bytes|access-control-allow-origin: *|content-length: <redacted>|server: nginx]
-2;s-1924;582 ms;583 ms;1,193 ms;1,193 ms;612 ms;0.2 ms;0.2 ms;200;text/css;VeryHigh;VeryHigh;VeryHigh;t;http/1.0;f;0;[];[Content-Length: <redacted>|Date: Fri, 07 Mar 2025 15:02:28 GMT|Content-type: text/css|Last-Modified: Fri, 07 Mar 2025 14:58:07 GMT|Server: SimpleHTTP/0.6 Python/3.9.6]
-3;s-1922;582 ms;583 ms;1,177 ms;1,178 ms;596 ms;0.4 ms;1 ms;200;text/javascript;High;High;High;t;http/1.0;f;0;[];[Content-Length: <redacted>|Date: Fri, 07 Mar 2025 15:02:28 GMT|Content-type: text/javascript|Last-Modified: Fri, 07 Mar 2025 15:00:28 GMT|Server: SimpleHTTP/0.6 Python/3.9.6]
-=== end content
-
-Title: PerformanceTraceFormatter formatLongestTasks
-Content:
-Longest 3 tasks:
-- total time: 11 ms, event: (eventKey: r-62, ts: 2297273193336)
-- total time: 3 ms, event: (eventKey: r-723, ts: 2297274436743)
-- total time: 2 ms, event: (eventKey: r-631, ts: 2297274234151)
-=== end content
-
-Title: PerformanceTraceFormatter formatMainThreadBottomUpSummary
-Content:
-This is the bottom-up summary for the entire trace. Only the top 10 activities (sorted by self time) are shown. An activity is all the aggregated time spent on the same type of work. For example, it can be all the time spent in a specific JavaScript function, or all the time spent in a specific browser rendering stage (like layout, v8 compile, parsing html). "Self time" represents the aggregated time spent directly in an activity, across all occurrences. "Total time" represents the aggregated time spent in an activity or any of its children.
-
-- self: 186 ms, total: 193 ms, source: Compile code
-- self: 98 ms, total: 993 ms, source: Task
-- self: 56 ms, total: 70 ms, source: Compile script
-- self: 52 ms, total: 64 ms, source: setTimeout
-- self: 38 ms, total: 40 ms, source: aC (url: https://s.yimg.com/aaq/f10d509c/d1irmdsmbztlvx.js, line: 0, column: 19068)
-- self: 35 ms, total: 35 ms, source: Recalculate style (url: https://news.yahoo.com/, line: 57, column: 187957)
-- self: 34 ms, total: 34 ms, source: Layout (url: https://news.yahoo.com/, line: 57, column: 187957)
-- self: 31 ms, total: 34 ms, source: clearTimeout
-- self: 30 ms, total: 53 ms, source: Parse HTML
-- self: 26 ms, total: 259 ms, source: Function call
-=== end content
-
-Title: PerformanceTraceFormatter formatThirdPartySummary
-Content:
-Third party summary:
-- name: Google/Doubleclick Ads, main thread time: 53 ms, network transfer size: 258.6 kB
-- name: Taboola, main thread time: 43 ms, network transfer size: 393.6 kB
-- name: Google Tag Manager, main thread time: 19 ms, network transfer size: 123.8 kB
-- name: AOL / Oath / Verizon Media, main thread time: 5 ms, network transfer size: 42.3 kB
-- name: ay.delivery, main thread time: 4 ms, network transfer size: 123 kB
-=== end content
-
 Title: PerformanceTraceFormatter formatMainThreadTrackSummary
 Content:
 # Top-down main thread summary
@@ -512,7 +462,7 @@ Network throttling: none
 
 The following is a list of insight sets. An insight set covers a specific part of the trace, split by navigations. The insights within each insight set are specific to that part of the trace. Be sure to consider the insight set id and bounds when calling functions. If no specific insight set or navigation is mentioned, assume the user is referring to the first one.
 
-## insight set id: 86EB5E5C401E3E17ECE461B3FC627867
+## insight set id: NAVIGATION_0
 
 URL: https://web.dev/cls/
 Bounds: {min: 1020034834921, max: 1020036087961}
@@ -554,7 +504,7 @@ Network throttling: none
 
 The following is a list of insight sets. An insight set covers a specific part of the trace, split by navigations. The insights within each insight set are specific to that part of the trace. Be sure to consider the insight set id and bounds when calling functions. If no specific insight set or navigation is mentioned, assume the user is referring to the first one.
 
-## insight set id: 513BDA1E9EC088611B53BFF7A859B5DD
+## insight set id: NAVIGATION_0
 
 URL: https://news.yahoo.com/
 Bounds: {min: 157423488682, max: 157427277166}
@@ -625,7 +575,7 @@ Network throttling: Fast 3G
 
 The following is a list of insight sets. An insight set covers a specific part of the trace, split by navigations. The insights within each insight set are specific to that part of the trace. Be sure to consider the insight set id and bounds when calling functions. If no specific insight set or navigation is mentioned, assume the user is referring to the first one.
 
-## insight set id: 8671F33ECE0C8DBAEFBC2F9A2D1D6107
+## insight set id: NAVIGATION_0
 
 URL: http://localhost:8080/render-blocking
 Bounds: {min: 171607579779, max: 171613750571}
@@ -649,7 +599,7 @@ Available insights:
     example question: Show me the most impactful render blocking requests that I should focus on
     example question: How can I reduce the number of render blocking requests?
 
-## insight set id: 1AE2016BBCC48AA090FDAE2CBBA01900
+## insight set id: NAVIGATION_1
 
 URL: http://localhost:8080/render-blocking
 Bounds: {min: 171613750571, max: 171616667355}
@@ -685,7 +635,7 @@ Network throttling: No throttling
 
 The following is a list of insight sets. An insight set covers a specific part of the trace, split by navigations. The insights within each insight set are specific to that part of the trace. Be sure to consider the insight set id and bounds when calling functions. If no specific insight set or navigation is mentioned, assume the user is referring to the first one.
 
-## insight set id: 9094E106056B51D078CE44F3356FE194
+## insight set id: NAVIGATION_0
 
 URL: http://localhost/image-delivery-cases.html
 Bounds: {min: 59728649746, max: 59734400108}
@@ -758,7 +708,7 @@ Network throttling: No throttling
 
 The following is a list of insight sets. An insight set covers a specific part of the trace, split by navigations. The insights within each insight set are specific to that part of the trace. Be sure to consider the insight set id and bounds when calling functions. If no specific insight set or navigation is mentioned, assume the user is referring to the first one.
 
-## insight set id: 9094E106056B51D078CE44F3356FE194
+## insight set id: NAVIGATION_0
 
 URL: http://localhost/image-delivery-cases.html
 Bounds: {min: 59728649746, max: 59734400108}
@@ -859,6 +809,121 @@ Available insights:
     example question: Which third parties are having the largest impact on my page performance?
 === end content
 
+Title: PerformanceTraceFormatter formatCriticalRequests render-blocking-requests.json.gz
+Content:
+# Critical network requests
+
+
+Network requests data:
+
+
+
+allUrls = [0: http://localhost:8000/, 1: https://code.jquery.com/jquery-3.7.1.js, 2: http://localhost:8000/render-blocking-stylesheet.css, 3: http://localhost:8000/render-blocking-script.js]
+
+0;s-1803;2 ms;3 ms;576 ms;583 ms;582 ms;0.4 ms;7 ms;200;text/html;VeryHigh;VeryHigh;VeryHigh;f;http/1.0;f;;[];[Content-Length: <redacted>|Date: Fri, 07 Mar 2025 15:02:27 GMT|Content-type: text/html|Last-Modified: Fri, 07 Mar 2025 14:58:55 GMT|Server: SimpleHTTP/0.6 Python/3.9.6]
+1;s-1920;581 ms;585 ms;1,943 ms;1,944 ms;1,363 ms;776 ms;1 ms;200;application/javascript;High;High;High;t;h2;f;0;[];[content-encoding: gzip|etag: <redacted>|age: 3975412|x-cache: <redacted>|date: Fri, 07 Mar 2025 15:02:28 GMT|content-type: application/javascript; charset=utf-8|vary: Accept-Encoding|x-cache-hits: <redacted>|last-modified: Fri, 18 Oct 1991 12:00:00 GMT|x-served-by: <redacted>|cache-control: public, max-age=31536000, stale-while-revalidate=604800|x-timer: <redacted>|via: 1.1 varnish, 1.1 varnish|accept-ranges: bytes|access-control-allow-origin: *|content-length: <redacted>|server: nginx]
+2;s-1924;582 ms;583 ms;1,193 ms;1,193 ms;612 ms;0.2 ms;0.2 ms;200;text/css;VeryHigh;VeryHigh;VeryHigh;t;http/1.0;f;0;[];[Content-Length: <redacted>|Date: Fri, 07 Mar 2025 15:02:28 GMT|Content-type: text/css|Last-Modified: Fri, 07 Mar 2025 14:58:07 GMT|Server: SimpleHTTP/0.6 Python/3.9.6]
+3;s-1922;582 ms;583 ms;1,177 ms;1,178 ms;596 ms;0.4 ms;1 ms;200;text/javascript;High;High;High;t;http/1.0;f;0;[];[Content-Length: <redacted>|Date: Fri, 07 Mar 2025 15:02:28 GMT|Content-type: text/javascript|Last-Modified: Fri, 07 Mar 2025 15:00:28 GMT|Server: SimpleHTTP/0.6 Python/3.9.6]
+=== end content
+
+Title: PerformanceTraceFormatter formatCriticalRequests multiple-navigations-render-blocking.json.gz
+Content:
+# Critical network requests
+
+## insight set id: NAVIGATION_0
+
+none
+
+## insight set id: NAVIGATION_1
+
+none
+=== end content
+
+Title: PerformanceTraceFormatter formatLongestTasks long-task-from-worker-thread.json.gz
+Content:
+# Longest tasks
+
+- total time: 11 ms, event: (eventKey: r-62, ts: 2297273193336)
+- total time: 3 ms, event: (eventKey: r-723, ts: 2297274436743)
+- total time: 2 ms, event: (eventKey: r-631, ts: 2297274234151)
+=== end content
+
+Title: PerformanceTraceFormatter formatLongestTasks multiple-navigations-render-blocking.json.gz
+Content:
+# Longest tasks
+
+## insight set id: NAVIGATION_0
+
+- total time: 8 ms, event: (eventKey: r-6426, ts: 171608877757)
+- total time: 7 ms, event: (eventKey: r-3609, ts: 171608164318)
+- total time: 2 ms, event: (eventKey: r-6501, ts: 171608885367)
+
+## insight set id: NAVIGATION_1
+
+- total time: 3 ms, event: (eventKey: r-12777, ts: 171614328028)
+- total time: 0.7 ms, event: (eventKey: r-15391, ts: 171615043591)
+- total time: 0.7 ms, event: (eventKey: r-15448, ts: 171615044306)
+=== end content
+
+Title: PerformanceTraceFormatter formatMainThreadBottomUpSummary yahoo-news.json.gz
+Content:
+# Main thread bottom-up summary
+
+This is the bottom-up summary for the entire trace. Only the top 10 activities (sorted by self time) are shown. An activity is all the aggregated time spent on the same type of work. For example, it can be all the time spent in a specific JavaScript function, or all the time spent in a specific browser rendering stage (like layout, v8 compile, parsing html). "Self time" represents the aggregated time spent directly in an activity, across all occurrences. "Total time" represents the aggregated time spent in an activity or any of its children.
+
+- self: 186 ms, total: 193 ms, source: Compile code
+- self: 98 ms, total: 990 ms, source: Task
+- self: 56 ms, total: 70 ms, source: Compile script
+- self: 52 ms, total: 64 ms, source: setTimeout
+- self: 38 ms, total: 40 ms, source: aC (url: https://s.yimg.com/aaq/f10d509c/d1irmdsmbztlvx.js, line: 0, column: 19068)
+- self: 35 ms, total: 35 ms, source: Recalculate style (url: https://news.yahoo.com/, line: 57, column: 187957)
+- self: 34 ms, total: 34 ms, source: Layout (url: https://news.yahoo.com/, line: 57, column: 187957)
+- self: 31 ms, total: 34 ms, source: clearTimeout
+- self: 30 ms, total: 53 ms, source: Parse HTML
+- self: 26 ms, total: 259 ms, source: Function call
+=== end content
+
+Title: PerformanceTraceFormatter formatMainThreadBottomUpSummary multiple-navigations-render-blocking.json.gz
+Content:
+# Main thread bottom-up summary
+
+This is the bottom-up summary for the entire trace. Only the top 10 activities (sorted by self time) are shown. An activity is all the aggregated time spent on the same type of work. For example, it can be all the time spent in a specific JavaScript function, or all the time spent in a specific browser rendering stage (like layout, v8 compile, parsing html). "Self time" represents the aggregated time spent directly in an activity, across all occurrences. "Total time" represents the aggregated time spent in an activity or any of its children.
+
+## insight set id: NAVIGATION_0
+
+- self: 10 ms, total: 21 ms, source: Task
+- self: 7 ms, total: 7 ms, source: Layout
+- self: 2 ms, total: 2 ms, source: Profiling overhead
+
+## insight set id: NAVIGATION_1
+
+- self: 6 ms, total: 7 ms, source: Task
+=== end content
+
+Title: PerformanceTraceFormatter formatThirdPartySummary yahoo-news.json.gz
+Content:
+# 3rd party summary
+
+- name: Yahoo!, main thread time: 270 ms, network transfer size: 2.4 MB
+- name: Google/Doubleclick Ads, main thread time: 53 ms, network transfer size: 258.6 kB
+- name: Taboola, main thread time: 43 ms, network transfer size: 393.6 kB
+- name: Google Tag Manager, main thread time: 19 ms, network transfer size: 123.8 kB
+- name: AOL / Oath / Verizon Media, main thread time: 5 ms, network transfer size: 42.3 kB
+=== end content
+
+Title: PerformanceTraceFormatter formatThirdPartySummary multiple-navigations-render-blocking.json.gz
+Content:
+# 3rd party summary
+
+## insight set id: NAVIGATION_0
+
+- name: localhost, main thread time: 0.8 ms, network transfer size: 22.9 kB
+
+## insight set id: NAVIGATION_1
+
+- name: localhost, main thread time: 0.3 ms, network transfer size: 22.9 kB
+=== end content
+
 Title: PerformanceTraceFormatter formatNetworkRequests formats network requests that have redirects
 Content:
 ## Network request: http://localhost:3000/redirect3

package/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.ts

@@ -17,6 +17,14 @@ export interface NetworkRequestFormatOptions {
   customTitle?: string;
 }
 
+interface FormatFactByInsightSetOptions {
+  insights: Trace.Insights.Types.TraceInsightSets|null;
+  title: string;
+  description?: string;
+  empty: string;
+  cb: (insightSet: Trace.Insights.Types.InsightSet) => string | null;
+}
+
 export class PerformanceTraceFormatter {
   #focus: AgentFocus;
   #parsedTrace: Trace.TraceModel.ParsedTrace;
@@ -214,21 +222,47 @@ export class PerformanceTraceFormatter {
     return parts.join('\n');
   }
 
-  formatCriticalRequests(): string {
-    const insightSet = this.#insightSet;
-    const criticalRequests: Trace.Types.Events.SyntheticNetworkRequest[] = [];
+  #formatFactByInsightSet(options: FormatFactByInsightSetOptions): string {
+    const {insights, title, description, empty, cb} = options;
+    const lines = [`# ${title}\n`];
 
-    const walkRequest = (node: Trace.Insights.Models.NetworkDependencyTree.CriticalRequestNode): void => {
-      criticalRequests.push(node.request);
-      node.children.forEach(walkRequest);
-    };
+    if (description) {
+      lines.push(`${description}\n`);
+    }
 
-    insightSet?.model.NetworkDependencyTree.rootNodes.forEach(walkRequest);
-    if (!criticalRequests.length) {
-      return '';
+    if (insights?.size) {
+      const multipleInsightSets = insights.size > 1;
+      for (const insightSet of insights.values()) {
+        if (multipleInsightSets) {
+          lines.push(`## insight set id: ${insightSet.id}\n`);
+        }
+        lines.push((cb(insightSet) ?? empty) + '\n');
+      }
+    } else {
+      lines.push(empty + '\n');
     }
 
-    return 'Critical network requests:\n' + this.formatNetworkRequests(criticalRequests, {verbose: false});
+    return lines.join('\n');
+  }
+
+  formatCriticalRequests(): string {
+    const parsedTrace = this.#parsedTrace;
+    return this.#formatFactByInsightSet({
+      insights: parsedTrace.insights,
+      title: 'Critical network requests',
+      empty: 'none',
+      cb: insightSet => {
+        const criticalRequests: Trace.Types.Events.SyntheticNetworkRequest[] = [];
+
+        const walkRequest = (node: Trace.Insights.Models.NetworkDependencyTree.CriticalRequestNode): void => {
+          criticalRequests.push(node.request);
+          node.children.forEach(walkRequest);
+        };
+        insightSet.model.NetworkDependencyTree.rootNodes.forEach(walkRequest);
+
+        return criticalRequests.length ? this.formatNetworkRequests(criticalRequests, {verbose: false}) : null;
+      },
+    });
   }
 
   #serializeBottomUpRootNode(rootNode: Trace.Extras.TraceTree.BottomUpRootNode, limit: number): string {
@@ -265,27 +299,31 @@ export class PerformanceTraceFormatter {
       return `- self: ${millis(node.selfTime)}, total: ${millis(node.totalTime)}, source: ${source}`;
     }
 
-    const listText = topNodes.map(node => nodeToText.call(this, node)).join('\n');
-    const format = `This is the bottom-up summary for the entire trace. Only the top ${
+    return topNodes.map(node => nodeToText.call(this, node)).join('\n');
+  }
+
+  #getSerializeBottomUpRootNodeFormat(limit: number): string {
+    return `This is the bottom-up summary for the entire trace. Only the top ${
         limit} activities (sorted by self time) are shown. An activity is all the aggregated time spent on the same type of work. For example, it can be all the time spent in a specific JavaScript function, or all the time spent in a specific browser rendering stage (like layout, v8 compile, parsing html). "Self time" represents the aggregated time spent directly in an activity, across all occurrences. "Total time" represents the aggregated time spent in an activity or any of its children.`;
-    return `${format}\n\n${listText}`;
   }
 
   formatMainThreadBottomUpSummary(): string {
     const parsedTrace = this.#parsedTrace;
-    const insightSet = this.#insightSet;
-
-    const bounds = parsedTrace.data.Meta.traceBounds;
-    const rootNode = AIQueries.mainThreadActivityBottomUp(
-        insightSet?.navigation?.args.data?.navigationId,
-        bounds,
-        parsedTrace,
-    );
-    if (!rootNode) {
-      return '';
-    }
-
-    return this.#serializeBottomUpRootNode(rootNode, 10);
+    const limit = 10;
+    return this.#formatFactByInsightSet({
+      insights: parsedTrace.insights,
+      title: 'Main thread bottom-up summary',
+      description: this.#getSerializeBottomUpRootNodeFormat(limit),
+      empty: 'no activity',
+      cb: insightSet => {
+        const rootNode = AIQueries.mainThreadActivityBottomUpSingleNavigation(
+            insightSet.navigation?.args.data?.navigationId,
+            insightSet.bounds,
+            parsedTrace,
+        );
+        return rootNode ? this.#serializeBottomUpRootNode(rootNode, limit) : null;
+      },
+    });
   }
 
   #formatThirdPartyEntitySummaries(summaries: Trace.Extras.ThirdParties.EntitySummary[]): string {
@@ -305,43 +343,40 @@ export class PerformanceTraceFormatter {
   }
 
   formatThirdPartySummary(): string {
-    const insightSet = this.#insightSet;
-    if (!insightSet) {
-      return '';
-    }
-
-    const thirdParties = insightSet.model.ThirdParties;
-    let summaries = thirdParties.entitySummaries ?? [];
-    if (thirdParties.firstPartyEntity) {
-      summaries = summaries.filter(s => s.entity !== thirdParties?.firstPartyEntity || null);
-    }
-
-    const listText = this.#formatThirdPartyEntitySummaries(summaries);
-    if (!listText) {
-      return '';
-    }
-
-    return `Third party summary:\n${listText}`;
+    const parsedTrace = this.#parsedTrace;
+    return this.#formatFactByInsightSet({
+      insights: parsedTrace.insights,
+      title: '3rd party summary',
+      empty: 'no 3rd parties',
+      cb: insightSet => {
+        const thirdPartySummaries =
+            Trace.Extras.ThirdParties.summarizeByThirdParty(parsedTrace.data, insightSet.bounds);
+        return thirdPartySummaries.length ? this.#formatThirdPartyEntitySummaries(thirdPartySummaries) : null;
+      },
+    });
   }
 
   formatLongestTasks(): string {
     const parsedTrace = this.#parsedTrace;
-    const insightSet = this.#insightSet;
-
-    const bounds = parsedTrace.data.Meta.traceBounds;
-    const longestTaskTrees =
-        AIQueries.longestTasks(insightSet?.navigation?.args.data?.navigationId, bounds, parsedTrace, 3);
-    if (!longestTaskTrees || longestTaskTrees.length === 0) {
-      return 'Longest tasks: none';
-    }
+    return this.#formatFactByInsightSet({
+      insights: parsedTrace.insights,
+      title: 'Longest tasks',
+      empty: 'none',
+      cb: insightSet => {
+        const longestTaskTrees =
+            AIQueries.longestTasks(insightSet.navigation?.args.data?.navigationId, insightSet.bounds, parsedTrace, 3);
+        if (!longestTaskTrees?.length) {
+          return null;
+        }
 
-    const listText = longestTaskTrees
-                         .map(tree => {
-                           const time = millis(tree.rootNode.totalTime);
-                           return `- total time: ${time}, event: ${this.serializeEvent(tree.rootNode.event)}`;
-                         })
-                         .join('\n');
-    return `Longest ${longestTaskTrees.length} tasks:\n${listText}`;
+        return longestTaskTrees
+            .map(tree => {
+              const time = millis(tree.rootNode.totalTime);
+              return `- total time: ${time}, event: ${this.serializeEvent(tree.rootNode.event)}`;
+            })
+            .join('\n');
+      },
+    });
   }
 
   #serializeRelatedInsightsForEvents(events: Trace.Types.Events.Event[]): string {
@@ -386,10 +421,16 @@ export class PerformanceTraceFormatter {
   }
 
   formatMainThreadTrackSummary(bounds: Trace.Types.Timing.TraceWindowMicro): string {
+    if (!this.#parsedTrace.insights) {
+      return 'No main thread activity found';
+    }
+
     const results = [];
 
+    const insightSet = this.#parsedTrace.insights?.values().find(
+        insightSet => Trace.Helpers.Timing.boundsIncludeTimeRange({bounds, timeRange: insightSet.bounds}));
     const topDownTree = AIQueries.mainThreadActivityTopDown(
-        this.#insightSet?.navigation?.args.data?.navigationId,
+        insightSet?.navigation?.args.data?.navigationId,
         bounds,
         this.#parsedTrace,
     );
@@ -399,13 +440,14 @@ export class PerformanceTraceFormatter {
     }
 
     const bottomUpRootNode = AIQueries.mainThreadActivityBottomUp(
-        this.#insightSet?.navigation?.args.data?.navigationId,
         bounds,
         this.#parsedTrace,
     );
     if (bottomUpRootNode) {
       results.push('# Bottom-up main thread summary');
-      results.push(this.#serializeBottomUpRootNode(bottomUpRootNode, 20));
+      const limit = 20;
+      results.push(this.#getSerializeBottomUpRootNodeFormat(limit));
+      results.push(this.#serializeBottomUpRootNode(bottomUpRootNode, limit));
     }
 
     const thirdPartySummaries = Trace.Extras.ThirdParties.summarizeByThirdParty(this.#parsedTrace.data, bounds);

package/front_end/models/ai_assistance/injected.ts

@@ -24,6 +24,7 @@ export interface FreestyleCallbackArgs {
   className: `${typeof AI_ASSISTANCE_CSS_CLASS_NAME}-${number}`;
   styles: Record<string, string>;
   element: Node;
+  error: Error;
 }
 
 interface FreestyleCallbackData {
@@ -31,6 +32,7 @@ interface FreestyleCallbackData {
   element: Node;
   resolve(value: string): void;
   reject(err?: Error): void;
+  error: Error;
 }
 interface FreestylerBinding {
   (args: FreestyleCallbackArgs): Promise<string>;
@@ -58,6 +60,7 @@ function freestylerBindingFunc(bindingName: string): void {
         element: args.element,
         resolve,
         reject,
+        error: args.error,
       });
       // @ts-expect-error this is binding added though CDP
       globalThis[bindingName](String(freestyler.id));
@@ -72,11 +75,16 @@ function freestylerBindingFunc(bindingName: string): void {
     freestyler.getArgs = (callbackId: number) => {
       return freestyler.callbacks.get(callbackId)?.args;
     };
-    freestyler.respond = (callbackId: number, styleChangesOrError: string) => {
+    freestyler.respond = (callbackId: number, styleChangesOrError: string|Error) => {
       if (typeof styleChangesOrError === 'string') {
         freestyler.callbacks.get(callbackId)?.resolve(styleChangesOrError);
       } else {
-        freestyler.callbacks.get(callbackId)?.reject(styleChangesOrError);
+        const callback = freestyler.callbacks.get(callbackId);
+
+        if (callback) {
+          callback.error.message = styleChangesOrError.message;
+          callback.reject(callback?.error);
+        }
       }
 
       freestyler.callbacks.delete(callbackId);
@@ -87,6 +95,8 @@ function freestylerBindingFunc(bindingName: string): void {
 
 export const freestylerBinding = `(${String(freestylerBindingFunc)})('${FREESTYLER_BINDING_NAME}')`;
 
+export const PAGE_EXPOSED_FUNCTIONS = ['setElementStyles'];
+
 /**
  * Please see fileoverview
  */
@@ -134,12 +144,15 @@ function setupSetElementStyles(prefix: typeof AI_ASSISTANCE_CSS_CLASS_NAME): voi
       el.style[key] = '';
     }
 
+    const bindingError = new Error();
+
     const result = await global.freestyler({
       method: 'setElementStyles',
       selector,
       className,
       styles,
       element: el,
+      error: bindingError,
     });
 
     const rootNode = el.getRootNode();