chrome-devtools-frontend 1.0.1520139 → 1.0.1521223

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

@@ -7,7 +7,7 @@ This insight is used to analyze the time spent that contributed to the final LCP
 
 ## Detailed analysis:
 The Largest Contentful Paint (LCP) time for this navigation was 240 ms.
-The LCP element (IMG, nodeId: 23) is an image fetched from https://creativetouchrotherham.co.uk/images/creative-touch-home/creative_touch_rotherham_homehero/creative_touch_rotherham_homehero_700.webp (eventKey: s-1418).
+The LCP element (IMG, nodeId: 23) is an image fetched from https://creativetouchrotherham.co.uk/images/creative-touch-home/creative_touch_rotherham_homehero/creative_touch_rotherham_homehero_700.webp (eventKey: s-1418, ts: 397824185142).
 ## LCP resource network request: https://creativetouchrotherham.co.uk/images/creative-touch-home/creative_touch_rotherham_homehero/creative_touch_rotherham_homehero_700.webp
 eventKey: s-1418
 Timings:
@@ -68,7 +68,7 @@ This insight is used to analyze the time spent that contributed to the final LCP
 
 ## Detailed analysis:
 The Largest Contentful Paint (LCP) time for this navigation was 129 ms.
-The LCP element is an image fetched from https://web-dev.imgix.net/image/kheDArv5csY6rvQUJDbWRscckLr1/4i7JstVZvgTFk9dxCe4a.svg (eventKey: s-1314).
+The LCP element is an image fetched from https://web-dev.imgix.net/image/kheDArv5csY6rvQUJDbWRscckLr1/4i7JstVZvgTFk9dxCe4a.svg (eventKey: s-1314, ts: 122411037986).
 ## LCP resource network request: https://web-dev.imgix.net/image/kheDArv5csY6rvQUJDbWRscckLr1/4i7JstVZvgTFk9dxCe4a.svg
 eventKey: s-1314
 Timings:
@@ -186,7 +186,7 @@ It is important that all of these checks pass to minimize the delay between the
 
 ## Detailed analysis:
 The Largest Contentful Paint (LCP) time for this navigation was 1,077 ms.
-The LCP element is an image fetched from http://localhost:8787/lcp-discovery-delay/lcp-image.jpg (eventKey: s-25281).
+The LCP element is an image fetched from http://localhost:8787/lcp-discovery-delay/lcp-image.jpg (eventKey: s-25281, ts: 197696859337).
 ## LCP resource network request: http://localhost:8787/lcp-discovery-delay/lcp-image.jpg
 eventKey: s-25281
 Timings:
@@ -310,7 +310,7 @@ Layout shifts in this cluster:
 - Start time: 472 ms
 - Score: 0.0003
 - Potential root causes:
-  - A font that was loaded over the network: https://fonts.gstatic.com/s/specialgothicexpandedone/v2/IurO6Zxk74-YaYk1r3HOet4g75ENmBxUmOK61tA0Iu5QmJF_.woff2 (eventKey: s-1158).
+  - A font that was loaded over the network: https://fonts.gstatic.com/s/specialgothicexpandedone/v2/IurO6Zxk74-YaYk1r3HOet4g75ENmBxUmOK61tA0Iu5QmJF_.woff2 (eventKey: s-1158, ts: 1355335690947).
 ### Layout shift 2:
 - Start time: 857 ms
 - Score: 0.0844
@@ -320,12 +320,12 @@ Layout shifts in this cluster:
 - Start time: 1,352 ms
 - Score: 0.0068
 - Potential root causes:
-  - An unsized image (IMG) (url: http://localhost:8000/unsized-image.png (eventKey: s-4487)).
+  - An unsized image (IMG) (url: http://localhost:8000/unsized-image.png (eventKey: s-4487, ts: 1355336697136)).
 ### Layout shift 4:
 - Start time: 1,537 ms
 - Score: 0.3344
 - Potential root causes:
-  - An unsized image (IMG) (url: http://localhost:8000/unsized-image.png (eventKey: s-4487)).
+  - An unsized image (IMG) (url: http://localhost:8000/unsized-image.png (eventKey: s-4487, ts: 1355336697136)).
 ### Layout shift 5:
 - Start time: 2,343 ms
 - Score: 0.3396
@@ -334,7 +334,7 @@ Layout shifts in this cluster:
 ## Estimated savings: none
 
 ## External resources:
-- https://wdeb.dev/articles/cls
+- https://web.dev/articles/cls
 - https://web.dev/articles/optimize-cls
 === end content
 
@@ -354,7 +354,7 @@ No layout shifts were found.
 ## Estimated savings: none
 
 ## External resources:
-- https://wdeb.dev/articles/cls
+- https://web.dev/articles/cls
 - https://web.dev/articles/optimize-cls
 === end content
 
@@ -432,7 +432,7 @@ Layout shifts in this cluster:
 ## Estimated savings: none
 
 ## External resources:
-- https://wdeb.dev/articles/cls
+- https://web.dev/articles/cls
 - https://web.dev/articles/optimize-cls
 === end content
 
@@ -687,16 +687,16 @@ Total legacy JavaScript: 8 files.
 
 Legacy JavaScript by file:
 
-- Script: https://s.yimg.com/aaq/benji/benji-2.2.99.js (eventKey: s-3387) - Wasted bytes: 37204 bytes
+- Script: https://s.yimg.com/aaq/benji/benji-2.2.99.js (eventKey: s-3387, ts: 157423742567) - Wasted bytes: 37204 bytes
 Matches:
 Line: 0, Column: 133, Name: Promise.allSettled
 
-- Script: https://s.yimg.com/aaq/c/25fa214.caas-news_web.min.js (eventKey: s-3412) - Wasted bytes: 36084 bytes
+- Script: https://s.yimg.com/aaq/c/25fa214.caas-news_web.min.js (eventKey: s-3412, ts: 157423743431) - Wasted bytes: 36084 bytes
 Matches:
 Line: 0, Column: 13310, Name: Array.from
 Line: 0, Column: 14623, Name: Object.assign
 
-- Script: https://s.yimg.com/du/ay/wnsrvbjmeprtfrnfx.js (eventKey: s-6273) - Wasted bytes: 12850 bytes
+- Script: https://s.yimg.com/du/ay/wnsrvbjmeprtfrnfx.js (eventKey: s-6273, ts: 157423760794) - Wasted bytes: 12850 bytes
 Matches:
 Line: 111, Column: 7829, Name: @babel/plugin-transform-spread
 Line: 111, Column: 1794, Name: Array.prototype.find
@@ -705,21 +705,21 @@ Line: 111, Column: 2748, Name: Object.values
 Line: 111, Column: 2473, Name: String.prototype.includes
 Line: 111, Column: 2627, Name: String.prototype.startsWith
 
-- Script: https://static.criteo.net/js/ld/publishertag.prebid.144.js (eventKey: s-257378) - Wasted bytes: 10751 bytes
+- Script: https://static.criteo.net/js/ld/publishertag.prebid.144.js (eventKey: s-257378, ts: 157426026656) - Wasted bytes: 10751 bytes
 Matches:
 Line: 1, Column: 74871, Name: Array.isArray
 Line: 1, Column: 75344, Name: Array.prototype.filter
 Line: 1, Column: 75013, Name: Array.prototype.indexOf
 
-- Script: https://s.yimg.com/oa/consent.js (eventKey: s-3384) - Wasted bytes: 8157 bytes
+- Script: https://s.yimg.com/oa/consent.js (eventKey: s-3384, ts: 157423742450) - Wasted bytes: 8157 bytes
 Matches:
 Line: 1, Column: 132267, Name: Array.prototype.includes
 
-- Script: https://pm-widget.taboola.com/yahooweb-network/pmk-20220605.1.js (eventKey: s-52229) - Wasted bytes: 7625 bytes
+- Script: https://pm-widget.taboola.com/yahooweb-network/pmk-20220605.1.js (eventKey: s-52229, ts: 157424128231) - Wasted bytes: 7625 bytes
 Matches:
 Line: 181, Column: 26, Name: Object.keys
 
-- Script: https://news.yahoo.com/ (eventKey: s-2116) - Wasted bytes: 7141 bytes
+- Script: https://news.yahoo.com/ (eventKey: s-2116, ts: 157423489126) - Wasted bytes: 7141 bytes
 Matches:
 Line: 0, Column: 8382, Name: @babel/plugin-transform-classes
 Line: 0, Column: 107712, Name: Array.prototype.filter
@@ -727,7 +727,7 @@ Line: 0, Column: 107393, Name: Array.prototype.forEach
 Line: 0, Column: 108005, Name: Array.prototype.map
 Line: 0, Column: 108358, Name: String.prototype.includes
 
-- Script: https://cdn.taboola.com/libtrc/yahooweb-network/loader.js (eventKey: s-6352) - Wasted bytes: 7061 bytes
+- Script: https://cdn.taboola.com/libtrc/yahooweb-network/loader.js (eventKey: s-6352, ts: 157423761978) - Wasted bytes: 7061 bytes
 Matches:
 Line: 0, Column: 390544, Name: Object.entries
 Line: 0, Column: 390688, Name: Object.values
@@ -767,12 +767,12 @@ This insight identifies font issues when a webpage uses custom fonts, for exampl
 ## Detailed analysis:
 The following font display issues were found:
 
- - Font name: jizaRExUiTo99u79D0KExcOPIDU.woff2, URL: https://fonts.gstatic.com/s/ptsans/v17/jizaRExUiTo99u79D0KExcOPIDU.woff2 (eventKey: s-5246), Property 'font-display' set to: 'auto', Wasted time: 20 ms.
- - Font name: SlGVmQWMvZQIdix7AFxXkHNSbRYXags.woff2, URL: https://fonts.gstatic.com/s/droidsans/v18/SlGVmQWMvZQIdix7AFxXkHNSbRYXags.woff2 (eventKey: s-5232), Property 'font-display' set to: 'auto', Wasted time: 15 ms.
- - Font name: jizfRExUiTo99u79B_mh0O6tLR8a8zI.woff2, URL: https://fonts.gstatic.com/s/ptsans/v17/jizfRExUiTo99u79B_mh0O6tLR8a8zI.woff2 (eventKey: s-5259), Property 'font-display' set to: 'auto', Wasted time: 15 ms.
- - Font name: SlGWmQWMvZQIdix7AFxXmMh3eDs1ZyHKpWg.woff2, URL: https://fonts.gstatic.com/s/droidsans/v18/SlGWmQWMvZQIdix7AFxXmMh3eDs1ZyHKpWg.woff2 (eventKey: s-5269), Property 'font-display' set to: 'auto', Wasted time: 15 ms.
- - Font name: EJRVQgYoZZY2vCFuvAFWzr-_dSb_.woff2, URL: https://fonts.gstatic.com/s/ptserif/v18/EJRVQgYoZZY2vCFuvAFWzr-_dSb_.woff2 (eventKey: s-5325), Property 'font-display' set to: 'auto', Wasted time: 15 ms.
- - Font name: S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2, URL: https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2 (eventKey: s-5238), Property 'font-display' set to: 'auto', Wasted time: 10 ms.
+ - Font name: jizaRExUiTo99u79D0KExcOPIDU.woff2, URL: https://fonts.gstatic.com/s/ptsans/v17/jizaRExUiTo99u79D0KExcOPIDU.woff2 (eventKey: s-5246, ts: 409057956748), Property 'font-display' set to: 'auto', Wasted time: 20 ms.
+ - Font name: SlGVmQWMvZQIdix7AFxXkHNSbRYXags.woff2, URL: https://fonts.gstatic.com/s/droidsans/v18/SlGVmQWMvZQIdix7AFxXkHNSbRYXags.woff2 (eventKey: s-5232, ts: 409057956250), Property 'font-display' set to: 'auto', Wasted time: 15 ms.
+ - Font name: jizfRExUiTo99u79B_mh0O6tLR8a8zI.woff2, URL: https://fonts.gstatic.com/s/ptsans/v17/jizfRExUiTo99u79B_mh0O6tLR8a8zI.woff2 (eventKey: s-5259, ts: 409057957711), Property 'font-display' set to: 'auto', Wasted time: 15 ms.
+ - Font name: SlGWmQWMvZQIdix7AFxXmMh3eDs1ZyHKpWg.woff2, URL: https://fonts.gstatic.com/s/droidsans/v18/SlGWmQWMvZQIdix7AFxXmMh3eDs1ZyHKpWg.woff2 (eventKey: s-5269, ts: 409057958585), Property 'font-display' set to: 'auto', Wasted time: 15 ms.
+ - Font name: EJRVQgYoZZY2vCFuvAFWzr-_dSb_.woff2, URL: https://fonts.gstatic.com/s/ptserif/v18/EJRVQgYoZZY2vCFuvAFWzr-_dSb_.woff2 (eventKey: s-5325, ts: 409057959655), Property 'font-display' set to: 'auto', Wasted time: 15 ms.
+ - Font name: S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2, URL: https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2 (eventKey: s-5238, ts: 409057956530), Property 'font-display' set to: 'auto', Wasted time: 10 ms.
 
 Consider setting [`font-display`](https://developer.chrome.com/blog/font-display) to `swap` or `optional` to ensure text is consistently visible. `swap` can be further optimized to mitigate layout shifts with [font metric overrides](https://developer.chrome.com/blog/font-fallbacks).
 
@@ -812,28 +812,28 @@ Total potential savings: 2 MB
 
 The following images could be optimized:
 
-### https://images.ctfassets.net/u275ja1nivmq/6T6z40ay5GFCUtwV7DONgh/0e23606ed1692d9721ab0f39a8d8a99e/yeti_cover.jpg (eventKey: s-1212)
+### https://images.ctfassets.net/u275ja1nivmq/6T6z40ay5GFCUtwV7DONgh/0e23606ed1692d9721ab0f39a8d8a99e/yeti_cover.jpg (eventKey: s-1212, ts: 59728701403)
 - Potential savings: 1.1 MB
 - Optimizations:
 Using a modern image format (WebP, AVIF) or increasing the image compression could improve this image's download size. (Est 1.1 MB)
 
-### https://raw.githubusercontent.com/GoogleChrome/lighthouse/refs/heads/main/cli/test/fixtures/dobetterweb/lighthouse-rotating.gif (eventKey: s-1216)
+### https://raw.githubusercontent.com/GoogleChrome/lighthouse/refs/heads/main/cli/test/fixtures/dobetterweb/lighthouse-rotating.gif (eventKey: s-1216, ts: 59728702014)
 - Potential savings: 682 kB
 - Optimizations:
 Using video formats instead of GIFs can improve the download size of animated content. (Est 682 kB)
 
-### https://onlinepngtools.com/images/examples-onlinepngtools/elephant-hd-quality.png (eventKey: s-1228)
+### https://onlinepngtools.com/images/examples-onlinepngtools/elephant-hd-quality.png (eventKey: s-1228, ts: 59728702737)
 - Potential savings: 176 kB
 - Optimizations:
 Using a modern image format (WebP, AVIF) or increasing the image compression could improve this image's download size. (Est 134.1 kB)
 This image file is larger than it needs to be (640x436) for its displayed dimensions (200x136). Use responsive images to reduce the image download size. (Est 162.9 kB)
 
-### https://images.ctfassets.net/u275ja1nivmq/6T6z40ay5GFCUtwV7DONgh/0e23606ed1692d9721ab0f39a8d8a99e/yeti_cover.jpg?fm=webp (eventKey: s-1224)
+### https://images.ctfassets.net/u275ja1nivmq/6T6z40ay5GFCUtwV7DONgh/0e23606ed1692d9721ab0f39a8d8a99e/yeti_cover.jpg?fm=webp (eventKey: s-1224, ts: 59728702313)
 - Potential savings: 49.8 kB
 - Optimizations:
 Increasing the image compression factor could improve this image's download size. (Est 49.8 kB)
 
-### https://raw.githubusercontent.com/GoogleChrome/lighthouse/refs/heads/main/cli/test/fixtures/byte-efficiency/lighthouse-2048x1356.webp (eventKey: s-1226)
+### https://raw.githubusercontent.com/GoogleChrome/lighthouse/refs/heads/main/cli/test/fixtures/byte-efficiency/lighthouse-2048x1356.webp (eventKey: s-1226, ts: 59728702539)
 - Potential savings: 41.4 kB
 - Optimizations:
 This image file is larger than it needs to be (2048x1356) for its displayed dimensions (200x132). Use responsive images to reduce the image download size. (Est 41.4 kB)
@@ -950,9 +950,9 @@ The network dependency tree checks found one or more problems.
 Max critical path latency is 5,015 ms
 
 The following is the critical request chain:
-- http://localhost:8787/lcp-iframes/index.html (eventKey: s-7103) (5,006 ms) (longest chain)
-  - http://localhost:8787/lcp-iframes/app.js (eventKey: s-7225) (5,015 ms) (longest chain)
-  - http://localhost:8787/lcp-iframes/app.css (eventKey: s-7213) (5,010 ms)
+- http://localhost:8787/lcp-iframes/index.html (eventKey: s-7103, ts: 566777570990) (5,006 ms) (longest chain)
+  - http://localhost:8787/lcp-iframes/app.js (eventKey: s-7225, ts: 566782574106) (5,015 ms) (longest chain)
+  - http://localhost:8787/lcp-iframes/app.css (eventKey: s-7213, ts: 566782573909) (5,010 ms)
 
 no origins were preconnected.
 
@@ -1077,7 +1077,7 @@ This insight identifies static resources that are not cached effectively by the
 ## Detailed analysis:
 The following resources were associated with ineffficient cache policies:
 
-- https://chromedevtools.github.io/performance-stories/lcp-large-image/app.css (eventKey: s-1106)
+- https://chromedevtools.github.io/performance-stories/lcp-large-image/app.css (eventKey: s-1106, ts: 658799777502)
   - Cache Time to Live (TTL): 600 seconds
   - Wasted bytes: 0 B
 

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

@@ -39,22 +39,13 @@ function getLCPData(parsedTrace: Trace.TraceModel.ParsedTrace, frameId: string,
   };
 }
 
-export class PerformanceInsightFormatter extends PerformanceTraceFormatter {
+export class PerformanceInsightFormatter {
+  #traceFormatter: PerformanceTraceFormatter;
   #insight: Trace.Insights.Types.InsightModel;
   #parsedTrace: Trace.TraceModel.ParsedTrace;
 
-  /**
-   * A utility method because we dependency inject this formatter into
-   * PerformanceTraceFormatter; this allows you to pass
-   * PerformanceInsightFormatter.create rather than an anonymous
-   * function that wraps the constructor.
-   */
-  static create(focus: AgentFocus, insight: Trace.Insights.Types.InsightModel): PerformanceInsightFormatter {
-    return new PerformanceInsightFormatter(focus, insight);
-  }
-
   constructor(focus: AgentFocus, insight: Trace.Insights.Types.InsightModel) {
-    super(focus, null);
+    this.#traceFormatter = new PerformanceTraceFormatter(focus);
     this.#insight = insight;
     this.#parsedTrace = focus.parsedTrace;
   }
@@ -74,8 +65,7 @@ export class PerformanceInsightFormatter extends PerformanceTraceFormatter {
   }
 
   #formatRequestUrl(request: Trace.Types.Events.SyntheticNetworkRequest): string {
-    const eventKey = this.eventsSerializer.keyForEvent(request);
-    return `${request.args.data.url} (eventKey: ${eventKey})`;
+    return `${request.args.data.url} ${this.#traceFormatter.serializeEvent(request)}`;
   }
 
   #formatScriptUrl(script: Trace.Handlers.ModelHandlers.Scripts.Script): string {
@@ -122,8 +112,8 @@ export class PerformanceInsightFormatter extends PerformanceTraceFormatter {
 
     if (lcpRequest) {
       parts.push(`${theLcpElement} is an image fetched from ${this.#formatRequestUrl(lcpRequest)}.`);
-      const request =
-          this.formatNetworkRequests([lcpRequest], {verbose: true, customTitle: 'LCP resource network request'});
+      const request = this.#traceFormatter.formatNetworkRequests(
+          [lcpRequest], {verbose: true, customTitle: 'LCP resource network request'});
       parts.push(request);
     } else {
       parts.push(`${theLcpElement} is text and was not fetched from the network.`);
@@ -356,7 +346,7 @@ ${shiftsFormatted.join('\n')}`;
 
     return `${this.#lcpMetricSharedContext()}
 
-${this.formatNetworkRequests([documentRequest], {
+${this.#traceFormatter.formatNetworkRequests([documentRequest], {
       verbose: true,
       customTitle: 'Document network request'
     })}
@@ -685,8 +675,8 @@ ${filesFormatted}`;
    */
   formatModernHttpInsight(insight: Trace.Insights.Models.ModernHTTP.ModernHTTPInsightModel): string {
     const requestSummary = (insight.http1Requests.length === 1) ?
-        this.formatNetworkRequests(insight.http1Requests, {verbose: true}) :
-        this.formatNetworkRequests(insight.http1Requests);
+        this.#traceFormatter.formatNetworkRequests(insight.http1Requests, {verbose: true}) :
+        this.#traceFormatter.formatNetworkRequests(insight.http1Requests);
 
     if (requestSummary.length === 0) {
       return 'There are no requests that were served over a legacy HTTP protocol.';
@@ -783,7 +773,7 @@ ${requestSummary}`;
    * @returns a string formatted for sending to Ask AI.
    */
   formatRenderBlockingInsight(insight: Trace.Insights.Models.RenderBlocking.RenderBlockingInsightModel): string {
-    const requestSummary = this.formatNetworkRequests(insight.renderBlockingRequests);
+    const requestSummary = this.#traceFormatter.formatNetworkRequests(insight.renderBlockingRequests);
 
     if (requestSummary.length === 0) {
       return 'There are no network requests that are render blocking.';
@@ -1021,7 +1011,7 @@ ${this.#links()}`;
   #links(): string {
     switch (this.#insight.insightKey) {
       case 'CLSCulprits':
-        return `- https://wdeb.dev/articles/cls
+        return `- https://web.dev/articles/cls
 - https://web.dev/articles/optimize-cls`;
       case 'DocumentLatency':
         return '- https://web.dev/articles/optimize-ttfb';

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

@@ -9,7 +9,7 @@ import type {AgentFocus} from '../performance/AIContext.js';
 import {AIQueries} from '../performance/AIQueries.js';
 
 import {NetworkRequestFormatter} from './NetworkRequestFormatter.js';
-import type {PerformanceInsightFormatter} from './PerformanceInsightFormatter.js';
+import {PerformanceInsightFormatter} from './PerformanceInsightFormatter.js';
 import {bytes, micros, millis} from './UnitFormatters.js';
 
 export interface NetworkRequestFormatOptions {
@@ -17,31 +17,21 @@ export interface NetworkRequestFormatOptions {
   customTitle?: string;
 }
 
-type GetInsightFormatter = (focus: AgentFocus, model: Trace.Insights.Types.InsightModel) => PerformanceInsightFormatter;
-
 export class PerformanceTraceFormatter {
   #focus: AgentFocus;
   #parsedTrace: Trace.TraceModel.ParsedTrace;
   #insightSet: Trace.Insights.Types.InsightSet|null;
-  #getInsightFormatter: GetInsightFormatter|null = null;
-  protected eventsSerializer: Trace.EventsSerializer.EventsSerializer;
+  #eventsSerializer: Trace.EventsSerializer.EventsSerializer;
 
-  /**
-   * We inject the insight formatter because otherwise we get a circular
-   * dependency between PerformanceInsightFormatter and
-   * PerformanceTraceFormatter. This is OK in the browser build, but breaks when
-   * we reuse this code in NodeJS for DevTools MCP.
-   */
-  constructor(focus: AgentFocus, getInsightFormatter: GetInsightFormatter|null) {
+  constructor(focus: AgentFocus) {
     this.#focus = focus;
     this.#parsedTrace = focus.parsedTrace;
     this.#insightSet = focus.insightSet;
-    this.eventsSerializer = focus.eventsSerializer;
-    this.#getInsightFormatter = getInsightFormatter;
+    this.#eventsSerializer = focus.eventsSerializer;
   }
 
   serializeEvent(event: Trace.Types.Events.Event): string {
-    const key = this.eventsSerializer.keyForEvent(event);
+    const key = this.#eventsSerializer.keyForEvent(event);
     return `(eventKey: ${key}, ts: ${event.ts})`;
   }
 
@@ -188,10 +178,7 @@ export class PerformanceTraceFormatter {
           continue;
         }
 
-        const formatter = this.#getInsightFormatter?.(this.#focus, model);
-        if (!formatter) {
-          continue;
-        }
+        const formatter = new PerformanceInsightFormatter(this.#focus, model);
         if (!formatter.insightIsSupported()) {
           continue;
         }
@@ -584,7 +571,7 @@ export class PerformanceTraceFormatter {
     const initiators = this.#getInitiatorChain(parsedTrace, request);
     const initiatorUrls = initiators.map(initiator => initiator.args.data.url);
 
-    const eventKey = this.eventsSerializer.keyForEvent(request);
+    const eventKey = this.#eventsSerializer.keyForEvent(request);
     const eventKeyLine = eventKey ? `eventKey: ${eventKey}\n` : '';
 
     return `${titlePrefix}: ${url}
@@ -639,6 +626,30 @@ Network requests data:
     return networkDataString + '\n\n' + urlsMapString + '\n\n' + allRequestsText;
   }
 
+  static callFrameDataFormatDescription = `Each call frame is presented in the following format:
+
+'id;eventKey;name;duration;selfTime;urlIndex;childRange;[S]'
+
+Key definitions:
+
+* id: A unique numerical identifier for the call frame. Never mention this id in the output to the user.
+* eventKey: String that uniquely identifies this event in the flame chart.
+* name: A concise string describing the call frame (e.g., 'Evaluate Script', 'render', 'fetchData').
+* duration: The total execution time of the call frame, including its children.
+* selfTime: The time spent directly within the call frame, excluding its children's execution.
+* urlIndex: Index referencing the "All URLs" list. Empty if no specific script URL is associated.
+* childRange: Specifies the direct children of this node using their IDs. If empty ('' or 'S' at the end), the node has no children. If a single number (e.g., '4'), the node has one child with that ID. If in the format 'firstId-lastId' (e.g., '4-5'), it indicates a consecutive range of child IDs from 'firstId' to 'lastId', inclusive.
+* S: _Optional_. The letter 'S' terminates the line if that call frame was selected by the user.
+
+Example Call Tree:
+
+1;r-123;main;500;100;;
+2;r-124;update;200;50;;3
+3;p-49575-15428179-2834-374;animate;150;20;0;4-5;S
+4;p-49575-15428179-3505-1162;calculatePosition;80;80;;
+5;p-49575-15428179-5391-2767;applyStyles;50;50;;
+`;
+
   /**
    * Network requests format description that is sent to the model as a fact.
    */
@@ -731,7 +742,7 @@ The order of headers corresponds to an internal fixed list. If a header is not p
 
     const parts = [
       urlIndex,
-      this.eventsSerializer.keyForEvent(request) ?? '',
+      this.#eventsSerializer.keyForEvent(request) ?? '',
       queuedTime,
       requestSentTime,
       downloadCompleteTime,

package/front_end/models/badges/UserBadges.ts

@@ -163,10 +163,11 @@ export class UserBadges extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
       return;
     }
 
-    const [gdpProfile, isEligibleToCreateProfile] = await Promise.all([
-      Host.GdpClient.GdpClient.instance().getProfile(),
-      Host.GdpClient.GdpClient.instance().isEligibleToCreateProfile(),
-    ]);
+    const gdpProfile = await Host.GdpClient.GdpClient.instance().getProfile();
+    let isEligibleToCreateProfile = Boolean(gdpProfile);
+    if (!gdpProfile) {
+      isEligibleToCreateProfile = await Host.GdpClient.GdpClient.instance().isEligibleToCreateProfile();
+    }
 
     // User does not have a GDP profile & not eligible to create one.
     // So, we don't activate any badges for them.

package/front_end/models/trace/handlers/ScriptsHandler.ts

@@ -58,7 +58,7 @@ export function handleEvent(event: Types.Events.Event): void {
     const scriptId = String(scriptIdAsNumber) as Protocol.Runtime.ScriptId;
     const key = `${isolate}.${scriptId}`;
     return Platform.MapUtilities.getWithDefault(
-        scriptById, key, () => ({isolate, scriptId, frame: '', ts: 0} as Script));
+        scriptById, key, () => ({isolate, scriptId, frame: '', ts: event.ts} as Script));
   };
 
   if (Types.Events.isRundownScriptCompiled(event) && event.args.data) {
@@ -74,6 +74,7 @@ export function handleEvent(event: Types.Events.Event): void {
     const {isolate, scriptId, url, sourceUrl, sourceMapUrl, sourceMapUrlElided} = event.args.data;
     const script = getOrMakeScript(isolate, scriptId);
     script.url = url;
+    script.ts = event.ts;
     if (sourceUrl) {
       script.sourceUrl = sourceUrl;
     }

package/front_end/models/trace/insights/LegacyJavaScript.ts

@@ -87,7 +87,8 @@ export function generateInsight(
       return false;
     }
 
-    return Helpers.Timing.timestampIsInBounds(context.bounds, script.ts);
+    return Helpers.Timing.timestampIsInBounds(context.bounds, script.ts) ||
+        (script.request && Helpers.Timing.eventIsInBounds(script.request, context.bounds));
   });
 
   const legacyJavaScriptResults: LegacyJavaScriptResults = new Map();

package/front_end/panels/ai_assistance/components/ChatView.ts

@@ -1530,7 +1530,7 @@ function renderAidaUnavailableContents(
 }
 
 function renderConsentViewContents(): Lit.TemplateResult {
-  const settingsLink = document.createElement('button');
+  const settingsLink = document.createElement('span');
   settingsLink.textContent = i18nString(UIStrings.settingsLink);
   settingsLink.classList.add('link');
   UI.ARIAUtils.markAsLink(settingsLink);

package/front_end/panels/ai_assistance/components/chatView.css

@@ -674,7 +674,7 @@ main {
   justify-content: center;
   font: var(--sys-typescale-headline4);
   gap: var(--sys-size-8);
-  padding: var(--sys-size-3);
+  padding: var(--sys-size-4);
   max-width: var(--sys-size-33);
 
   /* Prevents the container from jumping when the scrollbar is shown */

package/front_end/panels/coverage/CoverageListView.ts

@@ -141,15 +141,13 @@ export function coverageTypeToString(type: CoverageType): string {
 
 export class CoverageListView extends UI.Widget.VBox {
   private readonly nodeForUrl: Map<Platform.DevToolsPath.UrlString, GridNode>;
-  private readonly isVisibleFilter: (arg0: CoverageListItem) => boolean;
   private highlightRegExp: RegExp|null;
   private dataGrid: DataGrid.SortableDataGrid.SortableDataGrid<GridNode>;
 
-  constructor(isVisibleFilter: (arg0: CoverageListItem) => boolean) {
+  constructor() {
     super({useShadowDom: true});
     this.registerRequiredCSS(coverageListViewStyles);
     this.nodeForUrl = new Map();
-    this.isVisibleFilter = isVisibleFilter;
     this.highlightRegExp = null;
 
     const columns = [
@@ -209,30 +207,37 @@ export class CoverageListView extends UI.Widget.VBox {
     this.setDefaultFocusedChild(dataGridWidget);
   }
 
-  update(coverageInfo: CoverageListItem[] = []): void {
-    let hadUpdates = false;
+  update(coverageInfo: CoverageListItem[], highlightRegExp: RegExp|null): void {
+    this.highlightRegExp = highlightRegExp;
     const maxSize = coverageInfo.reduce((acc, entry) => Math.max(acc, entry.size), 0);
-    const rootNode = this.dataGrid.rootNode();
+
+    const coverageUrls = new Set(coverageInfo.map(info => info.url));
+    for (const [url, node] of this.nodeForUrl.entries()) {
+      if (!coverageUrls.has(url)) {
+        node.remove();
+        this.nodeForUrl.delete(url);
+      }
+    }
+
+    let hadUpdates = false;
     for (const entry of coverageInfo) {
       let node = this.nodeForUrl.get(entry.url);
       if (node) {
-        if (this.isVisibleFilter(node.coverageInfo)) {
-          hadUpdates = node.refreshIfNeeded(maxSize, entry) || hadUpdates;
-          if (entry.sources.length > 0) {
-            this.updateSourceNodes(entry.sources, maxSize, node);
-          }
+        hadUpdates = node.refreshIfNeeded(maxSize, entry) || hadUpdates;
+        if (entry.sources.length > 0) {
+          this.updateSourceNodes(entry.sources, maxSize, node);
         }
+        node.setHighlight(this.highlightRegExp);
         continue;
       }
       node = new GridNode(entry, maxSize);
       this.nodeForUrl.set(entry.url, node);
-      if (this.isVisibleFilter(node.coverageInfo)) {
-        rootNode.appendChild(node);
-        if (entry.sources.length > 0) {
-          void this.createSourceNodes(entry.sources, maxSize, node);
-        }
-        hadUpdates = true;
+      this.appendNodeByType(node);
+      if (entry.sources.length > 0) {
+        this.updateSourceNodes(entry.sources, maxSize, node);
       }
+      node.setHighlight(this.highlightRegExp);
+      hadUpdates = true;
     }
     if (hadUpdates) {
       this.dataGrid.dispatchEventToListeners(DataGrid.DataGrid.Events.SORTING_CHANGED);
@@ -240,27 +245,16 @@ export class CoverageListView extends UI.Widget.VBox {
   }
 
   updateSourceNodes(sources: CoverageListItem[], maxSize: number, node: GridNode): void {
-    let shouldCreateSourceNodes = false;
     for (const coverageInfo of sources) {
       const sourceNode = this.nodeForUrl.get(coverageInfo.url);
       if (sourceNode) {
         sourceNode.refreshIfNeeded(maxSize, coverageInfo);
       } else {
-        shouldCreateSourceNodes = true;
-        break;
+        const sourceNode = new GridNode(coverageInfo, maxSize);
+        node.appendChild(sourceNode);
+        this.nodeForUrl.set(coverageInfo.url, sourceNode);
       }
     }
-    if (shouldCreateSourceNodes) {
-      void this.createSourceNodes(sources, maxSize, node);
-    }
-  }
-
-  async createSourceNodes(sources: CoverageListItem[], maxSize: number, node: GridNode): Promise<void> {
-    for (const coverageInfo of sources) {
-      const sourceNode = new GridNode(coverageInfo, maxSize);
-      node.appendChild(sourceNode);
-      this.nodeForUrl.set(coverageInfo.url, sourceNode);
-    }
   }
 
   reset(): void {
@@ -268,30 +262,6 @@ export class CoverageListView extends UI.Widget.VBox {
     this.dataGrid.rootNode().removeChildren();
   }
 
-  updateFilterAndHighlight(highlightRegExp: RegExp|null): void {
-    this.highlightRegExp = highlightRegExp;
-    let hadTreeUpdates = false;
-    for (const node of this.nodeForUrl.values()) {
-      const shouldBeVisible = this.isVisibleFilter(node.coverageInfo);
-      const isVisible = Boolean(node.parent);
-      if (shouldBeVisible) {
-        node.setHighlight(this.highlightRegExp);
-      }
-      if (shouldBeVisible === isVisible) {
-        continue;
-      }
-      hadTreeUpdates = true;
-      if (!shouldBeVisible) {
-        node.remove();
-      } else {
-        this.appendNodeByType(node);
-      }
-    }
-    if (hadTreeUpdates) {
-      this.dataGrid.dispatchEventToListeners(DataGrid.DataGrid.Events.SORTING_CHANGED);
-    }
-  }
-
   private appendNodeByType(node: GridNode): void {
     if (node.coverageInfo.generatedUrl) {
       const parentNode = this.nodeForUrl.get(node.coverageInfo.generatedUrl);
@@ -381,6 +351,9 @@ export class GridNode extends DataGrid.SortableDataGrid.SortableDataGridNode<Gri
       return;
     }
     this.highlightRegExp = highlightRegExp;
+    for (const child of this.children) {
+      (child as GridNode).setHighlight(this.highlightRegExp);
+    }
     this.refresh();
   }
 

package/front_end/panels/coverage/CoverageView.ts

@@ -261,7 +261,7 @@ export class CoverageView extends UI.Widget.VBox {
     this.bfcacheReloadPromptPage = this.buildReloadPromptPage(i18nString(UIStrings.bfcacheNoCapture), 'bfcache-page');
     this.activationReloadPromptPage =
         this.buildReloadPromptPage(i18nString(UIStrings.activationNoCapture), 'prerender-page');
-    this.listView = new CoverageListView(this.isVisible.bind(this));
+    this.listView = new CoverageListView();
 
     this.statusToolbarElement = this.contentElement.createChild('div', 'coverage-toolbar-summary');
     this.statusMessageElement = this.statusToolbarElement.createChild('div', 'coverage-message');
@@ -442,7 +442,14 @@ export class CoverageView extends UI.Widget.VBox {
   }
 
   private updateListView(): void {
-    this.listView.update(this.model?.entries().map(this.toCoverageListItem, this) || []);
+    const entries =
+        (this.model?.entries() || [])
+            .map(entry => this.toCoverageListItem(entry))
+            .filter(info => this.isVisible(info))
+            .map(
+                (entry: CoverageListItem) =>
+                    ({...entry, sources: entry.sources.filter((entry: CoverageListItem) => this.isVisible(entry))}));
+    this.listView.update(entries, this.textFilterRegExp);
   }
 
   private toCoverageListItem(info: URLCoverageInfo): CoverageListItem {
@@ -536,7 +543,7 @@ export class CoverageView extends UI.Widget.VBox {
 
   private updateViews(updatedEntries: CoverageInfo[]): void {
     this.updateStats();
-    this.listView.update(this.model?.entries().map(this.toCoverageListItem, this) || []);
+    this.updateListView();
     this.exportAction.setEnabled(this.model !== null && this.model.entries().length > 0);
     this.decorationManager?.update(updatedEntries);
   }
@@ -588,7 +595,7 @@ export class CoverageView extends UI.Widget.VBox {
     }
     const text = this.filterInput.value();
     this.textFilterRegExp = text ? Platform.StringUtilities.createPlainTextSearchRegex(text, 'i') : null;
-    this.listView.updateFilterAndHighlight(this.textFilterRegExp);
+    this.updateListView();
     this.updateStats();
   }
 
@@ -602,7 +609,7 @@ export class CoverageView extends UI.Widget.VBox {
     const option = this.filterByTypeComboBox.selectedOption();
     const type = option?.value;
     this.typeFilterValue = parseInt(type || '', 10) || null;
-    this.listView.updateFilterAndHighlight(this.textFilterRegExp);
+    this.updateListView();
     this.updateStats();
   }