chrome-devtools-frontend 1.0.1550444 → 1.0.1553956

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

@@ -8,6 +8,7 @@ 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 * as Protocol from '../../../generated/protocol.js';
+import * as Annotations from '../../../ui/components/annotations/annotations.js';
 import {ChangeManager} from '../ChangeManager.js';
 import {debugLog} from '../debug.js';
 import {EvaluateAction, formatError, SideEffectError} from '../EvaluateAction.js';
@@ -410,6 +411,37 @@ const data = {
         return await this.executeAction(params.code, options);
       },
     });
+
+    if (Annotations.AnnotationRepository.annotationsEnabled()) {
+      this.declareFunction<{
+        elementId: string,
+        annotationMessage: string,
+      }>('addElementAnnotation', {
+        description: 'Adds a visual annotation in the Elements panel, attached to a node with ' +
+            'the specific UID provided. Use it to highlight nodes in the Elements panel ' +
+            'and provide contextual suggestions to the user related to their queries.',
+        parameters: {
+          type: Host.AidaClient.ParametersTypes.OBJECT,
+          description: '',
+          nullable: false,
+          properties: {
+            elementId: {
+              type: Host.AidaClient.ParametersTypes.STRING,
+              description: 'The UID of the element to annotate.',
+              nullable: false,
+            },
+            annotationMessage: {
+              type: Host.AidaClient.ParametersTypes.STRING,
+              description: 'The message the annotation should show to the user.',
+              nullable: false,
+            },
+          },
+        },
+        handler: async params => {
+          return await this.addElementAnnotation(params.elementId, params.annotationMessage);
+        },
+      });
+    }
   }
 
   async generateObservation(
@@ -681,6 +713,36 @@ const data = {
     }
   }
 
+  async addElementAnnotation(elementId: string, annotationMessage: string):
+      Promise<FunctionCallHandlerResult<unknown>> {
+    if (!Annotations.AnnotationRepository.annotationsEnabled()) {
+      console.warn('Received agent request to add annotation with annotations disabled');
+      return {error: 'Annotations are not currently enabled'};
+    }
+
+    // eslint-disable-next-line no-console
+    console.log(
+        `AI AGENT EVENT: Styling Agent adding annotation for element ${elementId} with message '${annotationMessage}'`);
+    const selectedNode = this.#getSelectedNode();
+    if (!selectedNode) {
+      return {error: 'Error: Unable to find currently selected element.'};
+    }
+    const domModel = selectedNode.domModel();
+    const backendNodeId = Number(elementId) as Protocol.DOM.BackendNodeId;
+    const nodeMap = await domModel.pushNodesByBackendIdsToFrontend(new Set([backendNodeId]));
+    const node = nodeMap?.get(backendNodeId);
+
+    if (!node) {
+      return {error: `Error: Could not find the element with backendNodeId=${elementId}`};
+    }
+
+    Annotations.AnnotationRepository.instance().addElementsAnnotation(annotationMessage, node);
+
+    return {
+      result: `Annotation added for element ${elementId}: ${annotationMessage}`,
+    };
+  }
+
   override async *
       handleContextDetails(selectedElement: ConversationContext<SDK.DOMModel.DOMNode>|null):
           AsyncGenerator<ContextResponse, void, void> {

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

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import type * as SDK from '../../../core/sdk/sdk.js';
+import * as Annotations from '../../../ui/components/annotations/annotations.js';
 import * as Logs from '../../logs/logs.js';
 import * as NetworkTimeCalculator from '../../network_time_calculator/network_time_calculator.js';
 import * as TextUtils from '../../text_utils/text_utils.js';
@@ -105,7 +106,7 @@ export class NetworkRequestFormatter {
     }
 
     return `Request: ${this.#request.url()}
-
+${Annotations.AnnotationRepository.annotationsEnabled() ? `\nRequest ID: ${this.#request.requestId()}\n` : ''}
 ${this.formatRequestHeaders()}
 
 ${this.formatResponseHeaders()}${responseBody}

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

@@ -123,12 +123,6 @@ export class PerformanceInsightFormatter {
   }
 
   insightIsSupported(): boolean {
-    // Although our types don't show it, Insights can end up as Errors if there
-    // is an issue in the processing stage. In this case we should gracefully
-    // ignore this error.
-    if (this.#insight instanceof Error) {
-      return false;
-    }
     return this.#description().length > 0;
   }
 
@@ -206,7 +200,7 @@ export class PerformanceInsightFormatter {
           {title: 'How can I reduce the amount of legacy JavaScript on my page?'},
         ];
       default:
-        throw new Error('Unknown insight key');
+        throw new Error(`Unknown insight key '${this.#insight.insightKey}'`);
     }
   }
 

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

@@ -330,6 +330,37 @@ Content:
 
 IMPORTANT: Never show eventKey to the user.
 
+The following are markdown block(s) of code that ran in the page, each representing a separate function. <FUNCTION_START> and <FUNCTION_END> marks the exact function declaration, and everything outside that is provided for additional context. Comments at the end of each line indicate the runtime performance cost of that code. Do not show the user the function markers or the additional context.
+
+Here are 3 relevant functions:
+
+(anonymous) @ https://s.yimg.com/aaq/prebid/prebid-2.0.js:12:53984. With added context, chunk is from 9:0 to 18:0
+```
+// context ...
+
+() => { /* some code from https://s.yimg.com/aaq/prebid/prebid-2.0.js... */ }
+
+// context ...
+```
+
+(anonymous) @ https://s.yimg.com/aaq/f10d509c/d1irmdsmbztlvx.js:0:43042. With added context, chunk is from 0:0 to 6:0
+```
+// context ...
+
+() => { /* some code from https://s.yimg.com/aaq/f10d509c/d1irmdsmbztlvx.js... */ }
+
+// context ...
+```
+
+(anonymous) @ https://s.yimg.com/aaq/prebid/prebid-2.0.js:12:15854. With added context, chunk is from 9:0 to 18:0
+```
+// context ...
+
+() => { /* some code from https://s.yimg.com/aaq/prebid/prebid-2.0.js... */ }
+
+// context ...
+```
+
 # Bottom-up main thread summary
 
 This is the bottom-up summary for the entire trace. Only the top 20 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.
@@ -439,18 +470,6 @@ Here are all the insights that contain some related request from the given range
 - LegacyJavaScript: benji-2.2.99.js (s.yimg.com) (eventKey: s-3387, ts: 157423742567), 25fa214.caas-news_web.min.js (s.yimg.com) (eventKey: s-3412, ts: 157423743431), wnsrvbjmeprtfrnfx.js (s.yimg.com) (eventKey: s-6273, ts: 157423760794), consent.js (s.yimg.com) (eventKey: s-3384, ts: 157423742450), news.yahoo.com/ (news.yahoo.com) (eventKey: s-2116, ts: 157423489126)
 === end content
 
-Title: PerformanceTraceFormatter formatCallTree
-Content:
-# Call tree:
-
-1;r-62;Task;10.6;0.1;;2;;;S
-2;r-63;Evaluate script;10.5;1.5;;3-5;;
-3;r-75;Profiling overhead;8.8;8.8;;;;
-4;p-3728792-1-17-3;(anonymous);0.2;0.2;;;;
-
-IMPORTANT: Never show eventKey to the user.
-=== end content
-
 Title: PerformanceTraceFormatter formatTraceSummary web-dev.json.gz
 Content:
 URL: https://web.dev/cls/
@@ -924,6 +943,99 @@ Content:
 - name: localhost, main thread time: 0.3 ms, network transfer size: 22.9 kB
 === end content
 
+Title: PerformanceTraceFormatter formatCallTree long-task-from-worker-thread.json.gz
+Content:
+# Call tree:
+
+1;r-62;Task;10.6;0.1;;2;;;S
+2;r-63;Evaluate script;10.5;1.5;;3-5;;
+3;r-75;Profiling overhead;8.8;8.8;;;;
+4;p-3728792-1-17-3;(anonymous);0.2;0.2;;;;
+
+IMPORTANT: Never show eventKey to the user.
+=== end content
+
+Title: PerformanceTraceFormatter formatCallTree web-dev.json.gz
+Content:
+# All URLs:
+
+  * 0: https://www.gstatic.com/firebasejs/6.6.1/firebase-auth.js
+  * 1: https://www.gstatic.com/firebasejs/6.6.1/firebase-app.js
+
+# Call tree:
+
+1;r-4608;Task;7.2;;;2;;
+2;r-4619;Evaluate script;7.2;;0;3;;
+3;p-73704-775-2074-418;(anonymous);7.2;;0;4;0;0;S
+4;p-73704-775-2074-419;(anonymous);7.2;0.1;0;5;0;9
+5;p-73704-775-2075-420;(anonymous);7.1;;0;6;0;200
+6;p-73704-775-2075-421;(anonymous);7.1;2.6;0;7;0;231
+7;p-73704-775-2095-422;(anonymous);4.5;1.3;0;8-19;0;292
+8;p-73704-775-2095-423;(anonymous);0.5;0.1;0;19-21;0;756
+9;p-73704-775-2097-424;Et;0.1;0.1;0;;0;10766
+10;p-73704-775-2098-425;St;0.4;0.2;0;21;0;10904
+11;p-73704-775-2105-427;k;0.4;0.4;0;;0;5125
+12;p-73704-775-2108-428;Go;0.1;;0;22;0;68523
+13;p-73704-775-2109-430;Oi;0.4;0.2;0;23;0;38264
+14;p-73704-775-2115-432;tl;0.3;0.3;0;;0;154217
+15;p-73704-775-2118-433;ul;0.6;0.5;0;24;0;155034
+16;p-73704-775-2121-435;cl;0.1;0.1;0;;0;155107
+17;p-73704-775-2123-436;hl;0.1;;0;25;0;155309
+18;p-73704-775-2124-439;sl;0.1;0.1;0;;0;154927
+19;p-73704-775-2127-441;hl;0.1;0.1;0;;0;155309
+20;p-73704-775-2128-442;registerService;0.2;;1;26-28;0;9441
+21;p-73704-775-2099-426;vt;0.2;0.2;0;;0;10155
+22;p-73704-775-2108-429;Mo;0.1;0.1;0;;0;66493
+23;p-73704-775-2111-431;vi;0.1;0.1;0;;0;37138
+24;p-73704-775-2118-434;ll;0.1;0.1;0;;0;155345
+25;p-73704-775-2123-437;ll;0.1;;0;28;0;155345
+26;p-73704-775-2128-443;u;0.1;0.1;1;;0;10091
+27;p-73704-775-2129-444;d;0.1;0.1;1;;0;595
+28;p-73704-775-2123-438;get prototype;0.1;0.1;;;;
+
+IMPORTANT: Never show eventKey to the user.
+
+The following are markdown block(s) of code that ran in the page, each representing a separate function. <FUNCTION_START> and <FUNCTION_END> marks the exact function declaration, and everything outside that is provided for additional context. Comments at the end of each line indicate the runtime performance cost of that code. Do not show the user the function markers or the additional context.
+
+Here are 4 relevant functions:
+
+(anonymous) @ https://www.gstatic.com/firebasejs/6.6.1/firebase-auth.js:0:0. With added context, chunk is from 0:0 to 6:0
+```
+// context ...
+
+() => { /* some code from https://www.gstatic.com/firebasejs/6.6.1/firebase-auth.js... */ }
+
+// context ...
+```
+
+(anonymous) @ https://www.gstatic.com/firebasejs/6.6.1/firebase-auth.js:0:231. With added context, chunk is from 0:0 to 6:0
+```
+// context ...
+
+() => { /* some code from https://www.gstatic.com/firebasejs/6.6.1/firebase-auth.js... */ }
+
+// context ...
+```
+
+(anonymous) @ https://www.gstatic.com/firebasejs/6.6.1/firebase-auth.js:0:292. With added context, chunk is from 0:0 to 6:0
+```
+// context ...
+
+() => { /* some code from https://www.gstatic.com/firebasejs/6.6.1/firebase-auth.js... */ }
+
+// context ...
+```
+
+(anonymous) @ https://www.gstatic.com/firebasejs/6.6.1/firebase-auth.js:0:155034. With added context, chunk is from 0:0 to 6:0
+```
+// context ...
+
+() => { /* some code from https://www.gstatic.com/firebasejs/6.6.1/firebase-auth.js... */ }
+
+// context ...
+```
+=== 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

@@ -2,6 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import type * as Platform from '../../../core/platform/platform.js';
+import type * as Protocol from '../../../generated/protocol.js';
+import * as Annotations from '../../../ui/components/annotations/annotations.js';
 import * as CrUXManager from '../../crux-manager/crux-manager.js';
 import type * as SourceMapScopes from '../../source_map_scopes/source_map_scopes.js';
 import * as Trace from '../../trace/trace.js';
@@ -23,7 +26,7 @@ interface FormatFactByInsightSetOptions {
   title: string;
   description?: string;
   empty: string;
-  cb: (insightSet: Trace.Insights.Types.InsightSet) => string | null;
+  cb: (insightSet: Trace.Insights.Types.InsightSet) => Promise<string|null>;
 }
 
 export class PerformanceTraceFormatter {
@@ -31,6 +34,10 @@ export class PerformanceTraceFormatter {
   #parsedTrace: Trace.TraceModel.ParsedTrace;
   #insightSet: Trace.Insights.Types.InsightSet|null;
   #eventsSerializer: Trace.EventsSerializer.EventsSerializer;
+  #formattedFunctionCodes = new Set<string>();
+  resolveFunctionCode?:
+      (url: Platform.DevToolsPath.UrlString, line: number,
+       column: number) => Promise<SourceMapScopes.FunctionCodeResolver.FunctionCode|null>;
 
   constructor(focus: AgentFocus) {
     this.#focus = focus;
@@ -140,9 +147,9 @@ export class PerformanceTraceFormatter {
         '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.');
 
     for (const insightSet of parsedTrace.insights?.values() ?? []) {
-      const lcp = insightSet ? Trace.Insights.Common.getLCP(insightSet) : null;
-      const cls = insightSet ? Trace.Insights.Common.getCLS(insightSet) : null;
-      const inp = insightSet ? Trace.Insights.Common.getINP(insightSet) : null;
+      const lcp = Trace.Insights.Common.getLCP(insightSet);
+      const cls = Trace.Insights.Common.getCLS(insightSet);
+      const inp = Trace.Insights.Common.getINP(insightSet);
 
       parts.push(`\n## insight set id: ${insightSet.id}\n`);
       parts.push(`URL: ${insightSet.url}`);
@@ -150,11 +157,11 @@ export class PerformanceTraceFormatter {
       if (lcp || cls || inp) {
         parts.push('Metrics (lab / observed):');
         if (lcp) {
-          const nodeId = insightSet?.model.LCPBreakdown.lcpEvent?.args.data?.nodeId;
+          const nodeId = insightSet.model.LCPBreakdown?.lcpEvent?.args.data?.nodeId;
           const nodeIdText = nodeId !== undefined ? `, nodeId: ${nodeId}` : '';
           parts.push(
               `  - LCP: ${Math.round(lcp.value / 1000)} ms, event: ${this.serializeEvent(lcp.event)}${nodeIdText}`);
-          const subparts = insightSet?.model.LCPBreakdown.subparts;
+          const subparts = insightSet.model.LCPBreakdown?.subparts;
           if (subparts) {
             const serializeSubpart = (subpart: Trace.Insights.Models.LCPBreakdown.Subpart): string => {
               return `${micros(subpart.range)}, bounds: ${this.serializeBounds(subpart)}`;
@@ -176,6 +183,16 @@ export class PerformanceTraceFormatter {
         if (cls) {
           const eventText = cls.worstClusterEvent ? `, event: ${this.serializeEvent(cls.worstClusterEvent)}` : '';
           parts.push(`  - CLS: ${cls.value.toFixed(2)}${eventText}`);
+
+          if (Annotations.AnnotationRepository.annotationsEnabled()) {
+            const worstClusterEvent = cls.worstClusterEvent as Trace.Types.Events.SyntheticLayoutShiftCluster;
+            const layoutShiftData =
+                worstClusterEvent?.worstShiftEvent?.args?.data as Trace.Types.Events.LayoutShiftData;
+            if (layoutShiftData?.impacted_nodes && layoutShiftData.impacted_nodes?.length > 0) {
+              Annotations.AnnotationRepository.instance().addElementsAnnotation(
+                  'This element is impacted by a layout shift', layoutShiftData.impacted_nodes[0].node_id.toString());
+            }
+          }
         }
       } else {
         parts.push('Metrics (lab / observed): n/a');
@@ -223,7 +240,7 @@ export class PerformanceTraceFormatter {
     return parts.join('\n');
   }
 
-  #formatFactByInsightSet(options: FormatFactByInsightSetOptions): string {
+  async #formatFactByInsightSet(options: FormatFactByInsightSetOptions): Promise<string> {
     const {insights, title, description, empty, cb} = options;
     const lines = [`# ${title}\n`];
 
@@ -237,7 +254,7 @@ export class PerformanceTraceFormatter {
         if (multipleInsightSets) {
           lines.push(`## insight set id: ${insightSet.id}\n`);
         }
-        lines.push((cb(insightSet) ?? empty) + '\n');
+        lines.push((await cb(insightSet) ?? empty) + '\n');
       }
     } else {
       lines.push(empty + '\n');
@@ -246,27 +263,27 @@ export class PerformanceTraceFormatter {
     return lines.join('\n');
   }
 
-  formatCriticalRequests(): string {
+  formatCriticalRequests(): Promise<string> {
     const parsedTrace = this.#parsedTrace;
     return this.#formatFactByInsightSet({
       insights: parsedTrace.insights,
       title: 'Critical network requests',
       empty: 'none',
-      cb: insightSet => {
+      cb: async 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);
+        insightSet.model.NetworkDependencyTree?.rootNodes.forEach(walkRequest);
 
         return criticalRequests.length ? this.formatNetworkRequests(criticalRequests, {verbose: false}) : null;
       },
     });
   }
 
-  #serializeBottomUpRootNode(rootNode: Trace.Extras.TraceTree.BottomUpRootNode, limit: number): string {
+  async #serializeBottomUpRootNode(rootNode: Trace.Extras.TraceTree.BottomUpRootNode, limit: number): Promise<string> {
     // Sorted by selfTime.
     // No nodes less than 1 ms.
     // Limit.
@@ -274,6 +291,7 @@ export class PerformanceTraceFormatter {
                          .filter(n => n.totalTime >= 1)
                          .sort((a, b) => b.selfTime - a.selfTime)
                          .slice(0, limit);
+    const callFrames: Protocol.Runtime.CallFrame[] = [];
 
     function nodeToText(this: PerformanceTraceFormatter, node: Trace.Extras.TraceTree.Node): string {
       const event = node.event;
@@ -281,10 +299,14 @@ export class PerformanceTraceFormatter {
       let frame;
       if (Trace.Types.Events.isProfileCall(event)) {
         frame = event.callFrame;
+        if (node.selfTime >= 100 && callFrames.length < 3) {
+          callFrames.push(frame);
+        }
       } else {
         frame = Trace.Helpers.Trace.getStackTraceTopCallFrameInEventPayload(event);
       }
 
+      // TODO(crbug.com/452333154): this is not source mapped.
       let source = Trace.Name.forEntry(event);
       if (frame?.url) {
         source += ` (url: ${frame.url}`;
@@ -300,7 +322,8 @@ export class PerformanceTraceFormatter {
       return `- self: ${millis(node.selfTime)}, total: ${millis(node.totalTime)}, source: ${source}`;
     }
 
-    return topNodes.map(node => nodeToText.call(this, node)).join('\n');
+    return topNodes.map(node => nodeToText.call(this, node)).join('\n') +
+        await this.#serializeRelevantFunctions(callFrames);
   }
 
   #getSerializeBottomUpRootNodeFormat(limit: number): string {
@@ -308,7 +331,7 @@ export class PerformanceTraceFormatter {
         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.`;
   }
 
-  formatMainThreadBottomUpSummary(): string {
+  formatMainThreadBottomUpSummary(): Promise<string> {
     const parsedTrace = this.#parsedTrace;
     const limit = 10;
     return this.#formatFactByInsightSet({
@@ -316,13 +339,13 @@ export class PerformanceTraceFormatter {
       title: 'Main thread bottom-up summary',
       description: this.#getSerializeBottomUpRootNodeFormat(limit),
       empty: 'no activity',
-      cb: insightSet => {
+      cb: async insightSet => {
         const rootNode = AIQueries.mainThreadActivityBottomUpSingleNavigation(
             insightSet.navigation?.args.data?.navigationId,
             insightSet.bounds,
             parsedTrace,
         );
-        return rootNode ? this.#serializeBottomUpRootNode(rootNode, limit) : null;
+        return rootNode ? await this.#serializeBottomUpRootNode(rootNode, limit) : null;
       },
     });
   }
@@ -343,13 +366,13 @@ export class PerformanceTraceFormatter {
     return listText;
   }
 
-  formatThirdPartySummary(): string {
+  formatThirdPartySummary(): Promise<string> {
     const parsedTrace = this.#parsedTrace;
     return this.#formatFactByInsightSet({
       insights: parsedTrace.insights,
       title: '3rd party summary',
       empty: 'no 3rd parties',
-      cb: insightSet => {
+      cb: async insightSet => {
         const thirdPartySummaries =
             Trace.Extras.ThirdParties.summarizeByThirdParty(parsedTrace.data, insightSet.bounds);
         return thirdPartySummaries.length ? this.#formatThirdPartyEntitySummaries(thirdPartySummaries) : null;
@@ -357,13 +380,13 @@ export class PerformanceTraceFormatter {
     });
   }
 
-  formatLongestTasks(): string {
+  formatLongestTasks(): Promise<string> {
     const parsedTrace = this.#parsedTrace;
     return this.#formatFactByInsightSet({
       insights: parsedTrace.insights,
       title: 'Longest tasks',
       empty: 'none',
-      cb: insightSet => {
+      cb: async insightSet => {
         const longestTaskTrees =
             AIQueries.longestTasks(insightSet.navigation?.args.data?.navigationId, insightSet.bounds, parsedTrace, 3);
         if (!longestTaskTrees?.length) {
@@ -421,12 +444,12 @@ export class PerformanceTraceFormatter {
     return results.join('\n');
   }
 
-  formatMainThreadTrackSummary(bounds: Trace.Types.Timing.TraceWindowMicro): string {
+  async formatMainThreadTrackSummary(bounds: Trace.Types.Timing.TraceWindowMicro): Promise<string> {
     if (!this.#parsedTrace.insights) {
       return 'No main thread activity found';
     }
 
-    const results = [];
+    const results: string[] = [];
 
     const insightSet = this.#parsedTrace.insights?.values().find(
         insightSet => Trace.Helpers.Timing.boundsIncludeTimeRange({bounds, timeRange: insightSet.bounds}));
@@ -437,7 +460,7 @@ export class PerformanceTraceFormatter {
     );
     if (topDownTree) {
       results.push('# Top-down main thread summary');
-      results.push(this.formatCallTree(topDownTree, 2 /* headerLevel */));
+      results.push(await this.formatCallTree(topDownTree, 2 /* headerLevel */));
     }
 
     const bottomUpRootNode = AIQueries.mainThreadActivityBottomUp(
@@ -448,7 +471,7 @@ export class PerformanceTraceFormatter {
       results.push('# Bottom-up main thread summary');
       const limit = 20;
       results.push(this.#getSerializeBottomUpRootNodeFormat(limit));
-      results.push(this.#serializeBottomUpRootNode(bottomUpRootNode, limit));
+      results.push(await this.#serializeBottomUpRootNode(bottomUpRootNode, limit));
     }
 
     const thirdPartySummaries = Trace.Extras.ThirdParties.summarizeByThirdParty(this.#parsedTrace.data, bounds);
@@ -492,8 +515,21 @@ export class PerformanceTraceFormatter {
     return results.join('\n\n');
   }
 
-  formatCallTree(tree: AICallTree, headerLevel = 1): string {
-    return `${tree.serialize(headerLevel)}\n\nIMPORTANT: Never show eventKey to the user.`;
+  async formatCallTree(tree: AICallTree, headerLevel = 1): Promise<string> {
+    let result = `${tree.serialize(headerLevel)}\n\nIMPORTANT: Never show eventKey to the user.\n`;
+
+    const relevantCallFrames = [];
+    if (tree.selectedNode && Trace.Types.Events.isProfileCall(tree.selectedNode.event)) {
+      relevantCallFrames.push(tree.selectedNode.event.callFrame);
+    }
+    const topCallFrameByTotalTime = tree.topCallFrameByTotalTime();
+    if (topCallFrameByTotalTime) {
+      relevantCallFrames.push(topCallFrameByTotalTime);
+    }
+    relevantCallFrames.push(...tree.topCallFramesBySelfTime(3));
+    result += await this.#serializeRelevantFunctions(relevantCallFrames);
+
+    return result;
   }
 
   formatNetworkRequests(
@@ -562,6 +598,7 @@ export class PerformanceTraceFormatter {
       string {
     const {
       url,
+      requestId,
       statusCode,
       initialPriority,
       priority,
@@ -622,7 +659,8 @@ export class PerformanceTraceFormatter {
     const eventKey = this.#eventsSerializer.keyForEvent(request);
     const eventKeyLine = eventKey ? `eventKey: ${eventKey}\n` : '';
 
-    return `${titlePrefix}: ${url}
+    return `${titlePrefix}: ${url}${
+        Annotations.AnnotationRepository.annotationsEnabled() ? `\nrequestId: ${requestId}` : ''}
 ${eventKeyLine}Timings:
 - Queued at: ${micros(startTimesForLifecycle.queuedAt)}
 - Request sent at: ${micros(startTimesForLifecycle.requestSentAt)}
@@ -815,7 +853,34 @@ The order of headers corresponds to an internal fixed list. If a header is not p
     return parts.join(';');
   }
 
+  resolveFunctionCodeAtLocation(url: Platform.DevToolsPath.UrlString, line: number, column: number):
+      Promise<SourceMapScopes.FunctionCodeResolver.FunctionCode|null> {
+    if (!this.resolveFunctionCode) {
+      throw new Error('missing resolveFunctionCode');
+    }
+
+    return this.resolveFunctionCode(url, line, column);
+  }
+
   formatFunctionCode(code: SourceMapScopes.FunctionCodeResolver.FunctionCode): string {
+    return this.#getFormattedFunctionCodeExplainer() + '\n\n' + this.#formatFunctionCode(code);
+  }
+
+  #getFormattedFunctionCodeExplainer(): string {
+    return 'The following are markdown block(s) of code that ran in the page, each representing a separate function. <FUNCTION_START> and <FUNCTION_END> marks the exact function declaration, and everything outside that is provided for additional context. Comments at the end of each line indicate the runtime performance cost of that code. Do not show the user the function markers or the additional context.';
+  }
+
+  #functionCodeToKey(code: SourceMapScopes.FunctionCodeResolver.FunctionCode): string {
+    return code.functionBounds.uiSourceCode.url() + ':' + code.functionBounds.range.toString();
+  }
+
+  #hasFormattedFunctionCode(code: SourceMapScopes.FunctionCodeResolver.FunctionCode): boolean {
+    return this.#formattedFunctionCodes.has(this.#functionCodeToKey(code));
+  }
+
+  #formatFunctionCode(code: SourceMapScopes.FunctionCodeResolver.FunctionCode): string {
+    this.#formattedFunctionCodes.add(this.#functionCodeToKey(code));
+
     const {startLine, startColumn} = code.range;
     const {
       startLine: contextStartLine,
@@ -823,18 +888,48 @@ The order of headers corresponds to an internal fixed list. If a header is not p
       endLine: contextEndLine,
       endColumn: contextEndColumn
     } = code.rangeWithContext;
-    const name = code.functionBounds.name;
+    const name = code.functionBounds.name || '(anonymous)';
     const url = code.functionBounds.uiSourceCode.url();
 
     const parts = [];
     parts.push(`${name} @ ${url}:${startLine}:${startColumn}. With added context, chunk is from ${contextStartLine}:${
         contextStartColumn} to ${contextEndLine}:${contextEndColumn}`);
-    parts.push(
-        '\nThe following is a markdown block of JavaScript. <FUNCTION_START> and <FUNCTION_END> marks the exact function declaration, and everything outside that is provided for additional context. Comments at the end of each line indicate the runtime performance cost of that code. Do not show the user the function markers or the additional context.\n');
     parts.push('```');
     parts.push(code.codeWithContext);
     parts.push('```');
 
     return parts.join('\n');
   }
+
+  /**
+   * Appends the code of each call frame's function, but only if the function was not
+   * serialized previously.
+   */
+  async #serializeRelevantFunctions(callFrames: Protocol.Runtime.CallFrame[]): Promise<string> {
+    const resolveFunctionCode = this.resolveFunctionCode;
+    if (!resolveFunctionCode) {
+      return '';
+    }
+
+    const functionCodeStrings = [];
+    const functionCodes = await Promise.all(callFrames.map(
+        frame =>
+            resolveFunctionCode(frame.url as Platform.DevToolsPath.UrlString, frame.lineNumber, frame.columnNumber)));
+    for (const code of functionCodes) {
+      if (code && !this.#hasFormattedFunctionCode(code)) {
+        functionCodeStrings.push(this.#formatFunctionCode(code));
+      }
+    }
+
+    if (!functionCodeStrings.length) {
+      return '';
+    }
+
+    return '\n' + [
+      this.#getFormattedFunctionCodeExplainer(),
+      functionCodeStrings.length > 1 ? `Here are ${functionCodeStrings.length} relevant functions:` :
+                                       `Here is a relevant function:`,
+      ...functionCodeStrings,
+    ].join('\n\n');
+  }
 }