chrome-devtools-frontend 1.0.1550444 → 1.0.1555174

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');
+  }
 }

package/front_end/models/ai_assistance/performance/AICallTree.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import type * as Protocol from '../../../generated/protocol.js';
 import * as Trace from '../../../models/trace/trace.js';
 import * as SourceMapsResolver from '../../../models/trace_source_maps_resolver/trace_source_maps_resolver.js';
 
@@ -375,6 +376,47 @@ export class AICallTree {
     return line;
   }
 
+  topCallFramesBySelfTime(limit: number): Protocol.Runtime.CallFrame[] {
+    const functionNodesByCallFrame = new Map<string, Trace.Extras.TraceTree.Node[]>();
+
+    this.breadthFirstWalk(this.rootNode.children().values(), node => {
+      if (Trace.Types.Events.isProfileCall(node.event)) {
+        const callFrame = node.event.callFrame;
+        const callFrameKey = `${callFrame.scriptId}:${callFrame.lineNumber}:${callFrame.columnNumber}`;
+        const array = functionNodesByCallFrame.get(callFrameKey) ?? [];
+        array.push(node);
+        functionNodesByCallFrame.set(callFrameKey, array);
+      }
+    });
+
+    return [...functionNodesByCallFrame.values()]
+        .map(nodes => {
+          return {
+            callFrame: (nodes[0].event as Trace.Types.Events.SyntheticProfileCall).callFrame,
+            selfTime: nodes.reduce((total, cur) => total + cur.selfTime, 0),
+          };
+        })
+        .sort((a, b) => b.selfTime - a.selfTime)
+        .slice(0, limit)
+        .map(({callFrame}) => callFrame);
+  }
+
+  topCallFrameByTotalTime(): Protocol.Runtime.CallFrame|null {
+    let topChild: Trace.Extras.TraceTree.Node|null = null;
+    let topProfileCallEvent: Trace.Types.Events.SyntheticProfileCall|null = null;
+
+    for (const child of this.rootNode.children().values()) {
+      if (Trace.Types.Events.isProfileCall(child.event)) {
+        if (!topChild || child.totalTime > topChild.totalTime) {
+          topChild = child;
+          topProfileCallEvent = child.event;
+        }
+      }
+    }
+
+    return topProfileCallEvent?.callFrame ?? null;
+  }
+
   // Only used for debugging.
   logDebug(): void {
     const str = this.serialize();

package/front_end/models/ai_code_generation/AiCodeGeneration.ts

@@ -150,4 +150,16 @@ export class AiCodeGeneration {
 
     return response;
   }
+
+  static isAiCodeGenerationEnabled(locale: string): boolean {
+    if (!locale.startsWith('en-')) {
+      return false;
+    }
+    const aidaAvailability = Root.Runtime.hostConfig.aidaAvailability;
+    if (!aidaAvailability || aidaAvailability.blockedByGeo || aidaAvailability.blockedByAge ||
+        aidaAvailability.blockedByEnterprisePolicy) {
+      return false;
+    }
+    return Boolean(aidaAvailability.enabled && Root.Runtime.hostConfig.devToolsAiCodeGeneration?.enabled);
+  }
 }

package/front_end/models/issues_manager/Issue.ts

@@ -51,6 +51,7 @@ export const enum IssueCategory {
   CORS = 'Cors',
   ATTRIBUTION_REPORTING = 'AttributionReporting',
   QUIRKS_MODE = 'QuirksMode',
+  PERMISSION_ELEMENT = 'PermissionElement',
   OTHER = 'Other',
 }
 

package/front_end/models/issues_manager/IssueAggregator.ts

@@ -21,6 +21,7 @@ import {LowTextContrastIssue} from './LowTextContrastIssue.js';
 import type {MarkdownIssueDescription} from './MarkdownIssueDescription.js';
 import {MixedContentIssue} from './MixedContentIssue.js';
 import {PartitioningBlobURLIssue} from './PartitioningBlobURLIssue.js';
+import {PermissionElementIssue} from './PermissionElementIssue.js';
 import {QuirksModeIssue} from './QuirksModeIssue.js';
 import {SharedArrayBufferIssue} from './SharedArrayBufferIssue.js';
 
@@ -67,6 +68,7 @@ export class AggregatedIssue extends Issue {
   #cookieDeprecationMetadataIssues = new Set<CookieDeprecationMetadataIssue>();
   #mixedContentIssues = new Set<MixedContentIssue>();
   #partitioningBlobURLIssues = new Set<PartitioningBlobURLIssue>();
+  #permissionElementIssues = new Set<PermissionElementIssue>();
   #sharedArrayBufferIssues = new Set<SharedArrayBufferIssue>();
   #quirksModeIssues = new Set<QuirksModeIssue>();
   #attributionReportingIssues = new Set<AttributionReportingIssue>();
@@ -190,6 +192,10 @@ export class AggregatedIssue extends Issue {
     return this.#partitioningBlobURLIssues;
   }
 
+  getPermissionElementIssues(): Iterable<PermissionElementIssue> {
+    return this.#permissionElementIssues;
+  }
+
   /**
    * Produces a primary key for a cookie. Use this instead of `JSON.stringify` in
    * case new fields are added to `AffectedCookie`.
@@ -282,6 +288,9 @@ export class AggregatedIssue extends Issue {
     if (issue instanceof PartitioningBlobURLIssue) {
       this.#partitioningBlobURLIssues.add(issue);
     }
+    if (issue instanceof PermissionElementIssue) {
+      this.#permissionElementIssues.add(issue);
+    }
   }
 
   getKind(): IssueKind {

package/front_end/models/issues_manager/IssuesManager.ts

@@ -25,6 +25,7 @@ import {Events} from './IssuesManagerEvents.js';
 import {LowTextContrastIssue} from './LowTextContrastIssue.js';
 import {MixedContentIssue} from './MixedContentIssue.js';
 import {PartitioningBlobURLIssue} from './PartitioningBlobURLIssue.js';
+import {PermissionElementIssue} from './PermissionElementIssue.js';
 import {PropertyRuleIssue} from './PropertyRuleIssue.js';
 import {QuirksModeIssue} from './QuirksModeIssue.js';
 import {SharedArrayBufferIssue} from './SharedArrayBufferIssue.js';
@@ -144,6 +145,10 @@ const issueCodeHandlers = new Map<
     Protocol.Audits.InspectorIssueCode.UnencodedDigestIssue,
     UnencodedDigestIssue.fromInspectorIssue,
   ],
+  [
+    Protocol.Audits.InspectorIssueCode.PermissionElementIssue,
+    PermissionElementIssue.fromInspectorIssue,
+  ],
 ]);
 
 /**