chrome-devtools-frontend 1.0.1519267 → 1.0.1520535

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) is an image fetched from `https://creativetouchrotherham.co.uk/images/creative-touch-home/creative_touch_rotherham_homehero/creative_touch_rotherham_homehero_700.webp`.
+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`.
+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`.
+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).
+  - 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).
+  - 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).
+  - 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,105 @@ 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
+
+Title: PerformanceInsightFormatter CLS serializes correctly when there are no layout shifts
+Content:
+## Insight Title: Layout shift culprits
+
+## Insight Summary:
+Cumulative Layout Shifts (CLS) is a measure of the largest burst of layout shifts for every unexpected layout shift that occurs during the lifecycle of a page. This is a Core Web Vital and the thresholds for categorizing a score are:
+- Good: 0.1 or less
+- Needs improvement: more than 0.1 and less than or equal to 0.25
+- Bad: over 0.25
+
+## Detailed analysis:
+No layout shifts were found.
+
+## Estimated savings: none
+
+## External resources:
+- https://web.dev/articles/cls
+- https://web.dev/articles/optimize-cls
+=== end content
+
+Title: PerformanceInsightFormatter CLS outputs information on non-composited animations
+Content:
+## Insight Title: Layout shift culprits
+
+## Insight Summary:
+Cumulative Layout Shifts (CLS) is a measure of the largest burst of layout shifts for every unexpected layout shift that occurs during the lifecycle of a page. This is a Core Web Vital and the thresholds for categorizing a score are:
+- Good: 0.1 or less
+- Needs improvement: more than 0.1 and less than or equal to 0.25
+- Bad: over 0.25
+
+## Detailed analysis:
+The worst layout shift cluster was the cluster that started at 60 ms and ended at 1,243 ms, with a duration of 1,183 ms.
+The score for this cluster is 0.0140.
+
+Layout shifts in this cluster:
+### Layout shift 1:
+- Start time: 60 ms
+- Score: 0.0012
+- No potential root causes identified
+### Layout shift 2:
+- Start time: 76 ms
+- Score: 0.0012
+- No potential root causes identified
+### Layout shift 3:
+- Start time: 93 ms
+- Score: 0.0012
+- No potential root causes identified
+### Layout shift 4:
+- Start time: 110 ms
+- Score: 0.0012
+- No potential root causes identified
+### Layout shift 5:
+- Start time: 126 ms
+- Score: 0.0012
+- No potential root causes identified
+### Layout shift 6:
+- Start time: 143 ms
+- Score: 0.0012
+- No potential root causes identified
+### Layout shift 7:
+- Start time: 160 ms
+- Score: 0.0012
+- No potential root causes identified
+### Layout shift 8:
+- Start time: 176 ms
+- Score: 0.0012
+- No potential root causes identified
+### Layout shift 9:
+- Start time: 193 ms
+- Score: 0.0012
+- No potential root causes identified
+### Layout shift 10:
+- Start time: 210 ms
+- Score: 0.0012
+- No potential root causes identified
+### Layout shift 11:
+- Start time: 226 ms
+- Score: 0.0012
+- No potential root causes identified
+### Layout shift 12:
+- Start time: 243 ms
+- Score: 0.0012
+- Potential root causes:
+  - A non-composited animation:
+- non-composited animation: `change-height`
+    Animation name: change-height
+    Unsupported CSS properties:
+    - height
+    Failure reasons:
+      - TARGET_HAS_INVALID_COMPOSITING_STATE, UNSUPPORTED_CSS_PROPERTY
+
+## Estimated savings: none
+
+## External resources:
+- https://web.dev/articles/cls
 - https://web.dev/articles/optimize-cls
 === end content
 
@@ -589,16 +687,16 @@ Total legacy JavaScript: 8 files.
 
 Legacy JavaScript by file:
 
-- Script: https://s.yimg.com/aaq/benji/benji-2.2.99.js - 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 - 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 - 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
@@ -607,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 - 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 - 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 - 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/ - 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
@@ -629,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 - 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
@@ -669,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, Property 'font-display' set to: 'auto', Wasted time: 20 ms.
- - Font name: SlGVmQWMvZQIdix7AFxXkHNSbRYXags.woff2, URL: https://fonts.gstatic.com/s/droidsans/v18/SlGVmQWMvZQIdix7AFxXkHNSbRYXags.woff2, 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, Property 'font-display' set to: 'auto', Wasted time: 15 ms.
- - Font name: SlGWmQWMvZQIdix7AFxXmMh3eDs1ZyHKpWg.woff2, URL: https://fonts.gstatic.com/s/droidsans/v18/SlGWmQWMvZQIdix7AFxXmMh3eDs1ZyHKpWg.woff2, 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, Property 'font-display' set to: 'auto', Wasted time: 15 ms.
- - Font name: S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2, URL: https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2, 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).
 
@@ -714,28 +812,28 @@ Total potential savings: 2 MB
 
 The following images could be optimized:
 
-### https://images.ctfassets.net/u275ja1nivmq/6T6z40ay5GFCUtwV7DONgh/0e23606ed1692d9721ab0f39a8d8a99e/yeti_cover.jpg
+### 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
+### 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
+### 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
+### 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
+### 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)
@@ -852,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 (5,006 ms) (longest chain)
-  - http://localhost:8787/lcp-iframes/app.js (5,015 ms) (longest chain)
-  - http://localhost:8787/lcp-iframes/app.css (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.
 
@@ -979,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
+- 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,14 +39,15 @@ 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;
 
   constructor(focus: AgentFocus, insight: Trace.Insights.Types.InsightModel) {
-    super(focus);
+    this.#traceFormatter = new PerformanceTraceFormatter(focus);
     this.#insight = insight;
-    this.#parsedTrace = focus.data.parsedTrace;
+    this.#parsedTrace = focus.parsedTrace;
   }
 
   #formatMilli(x?: number): string {
@@ -63,6 +64,27 @@ export class PerformanceInsightFormatter extends PerformanceTraceFormatter {
     return this.#formatMilli(Trace.Helpers.Timing.microToMilli(x as Trace.Types.Timing.Micro));
   }
 
+  #formatRequestUrl(request: Trace.Types.Events.SyntheticNetworkRequest): string {
+    return `${request.args.data.url} ${this.#traceFormatter.serializeEvent(request)}`;
+  }
+
+  #formatScriptUrl(script: Trace.Handlers.ModelHandlers.Scripts.Script): string {
+    if (script.request) {
+      return this.#formatRequestUrl(script.request);
+    }
+
+    return script.url ?? script.sourceUrl ?? script.scriptId;
+  }
+
+  #formatUrl(url: string): string {
+    const request = this.#parsedTrace.data.NetworkRequests.byTime.find(request => request.args.data.url === url);
+    if (request) {
+      return this.#formatRequestUrl(request);
+    }
+
+    return url;
+  }
+
   /**
    * Information about LCP which we pass to the LLM for all insights that relate to LCP.
    */
@@ -81,16 +103,17 @@ export class PerformanceInsightFormatter extends PerformanceTraceFormatter {
     }
 
     const {metricScore, lcpRequest, lcpEvent} = data;
-    const theLcpElement =
-        lcpEvent.args.data?.nodeName ? `The LCP element (${lcpEvent.args.data.nodeName})` : 'The LCP element';
+    const theLcpElement = lcpEvent.args.data?.nodeName ?
+        `The LCP element (${lcpEvent.args.data.nodeName}, nodeId: ${lcpEvent.args.data.nodeId})` :
+        'The LCP element';
     const parts: string[] = [
       `The Largest Contentful Paint (LCP) time for this navigation was ${this.#formatMicro(metricScore.timing)}.`,
     ];
 
     if (lcpRequest) {
-      parts.push(`${theLcpElement} is an image fetched from \`${lcpRequest.args.data.url}\`.`);
-      const request =
-          this.formatNetworkRequests([lcpRequest], {verbose: true, customTitle: 'LCP resource network request'});
+      parts.push(`${theLcpElement} is an image fetched from ${this.#formatRequestUrl(lcpRequest)}.`);
+      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.`);
@@ -203,7 +226,7 @@ export class PerformanceInsightFormatter extends PerformanceTraceFormatter {
     let output = 'The following resources were associated with ineffficient cache policies:\n';
 
     for (const entry of insight.requests) {
-      output += `\n- ${entry.request.args.data.url}`;
+      output += `\n- ${this.#formatRequestUrl(entry.request)}`;
       output += `\n  - Cache Time to Live (TTL): ${entry.ttl} seconds`;
       output += `\n  - Wasted bytes: ${bytes(entry.wastedBytes)}`;
     }
@@ -212,6 +235,57 @@ export class PerformanceInsightFormatter extends PerformanceTraceFormatter {
     return output;
   }
 
+  #formatLayoutShift(
+      shift: Trace.Types.Events.SyntheticLayoutShift, index: number,
+      rootCauses?: Trace.Insights.Models.CLSCulprits.LayoutShiftRootCausesData): string {
+    const baseTime = this.#parsedTrace.data.Meta.traceBounds.min;
+
+    const potentialRootCauses: string[] = [];
+    if (rootCauses) {
+      rootCauses.iframes.forEach(
+          iframe => potentialRootCauses.push(
+              `- An iframe (id: ${iframe.frame}, url: ${iframe.url ?? 'unknown'} was injected into the page)`));
+      rootCauses.webFonts.forEach(req => {
+        potentialRootCauses.push(`- A font that was loaded over the network: ${this.#formatRequestUrl(req)}.`);
+      });
+      rootCauses.nonCompositedAnimations.forEach(nonCompositedFailure => {
+        potentialRootCauses.push('- A non-composited animation:');
+
+        const animationInfoOutput = [];
+        potentialRootCauses.push(`- non-composited animation: \`${nonCompositedFailure.name || '(unnamed)'}\``);
+        if (nonCompositedFailure.name) {
+          animationInfoOutput.push(`Animation name: ${nonCompositedFailure.name}`);
+        }
+        if (nonCompositedFailure.unsupportedProperties) {
+          animationInfoOutput.push('Unsupported CSS properties:');
+          animationInfoOutput.push('- ' + nonCompositedFailure.unsupportedProperties.join(', '));
+        }
+        animationInfoOutput.push('Failure reasons:');
+        animationInfoOutput.push('  - ' + nonCompositedFailure.failureReasons.join(', '));
+
+        // Extra padding to the detail to not mess up the indentation.
+        potentialRootCauses.push(animationInfoOutput.map(l => ' '.repeat(4) + l).join('\n'));
+      });
+
+      rootCauses.unsizedImages.forEach(img => {
+        // TODO(b/413284569): if we store a nice human readable name for this
+        // image in the trace metadata, we can do something much nicer here.
+        const url = img.paintImageEvent.args.data.url;
+        const nodeName = img.paintImageEvent.args.data.nodeName;
+        const extraText = url ? `url: ${this.#formatUrl(url)}` : `id: ${img.backendNodeId}`;
+        potentialRootCauses.push(`- An unsized image (${nodeName}) (${extraText}).`);
+      });
+    }
+    const rootCauseText = potentialRootCauses.length ? `- Potential root causes:\n  ${potentialRootCauses.join('\n')}` :
+                                                       '- No potential root causes identified';
+
+    const startTime = Trace.Helpers.Timing.microToMilli(Trace.Types.Timing.Micro(shift.ts - baseTime));
+    return `### Layout shift ${index + 1}:
+- Start time: ${millis(startTime)}
+- Score: ${shift.args.data?.weighted_score_delta.toFixed(4)}
+${rootCauseText}`;
+  }
+
   /**
    * Create an AI prompt string out of the CLS Culprits Insight model to use with Ask AI.
    * @param insight The CLS Culprits Model to query.
@@ -220,7 +294,7 @@ export class PerformanceInsightFormatter extends PerformanceTraceFormatter {
   formatClsCulpritsInsight(insight: Trace.Insights.Models.CLSCulprits.CLSCulpritsInsightModel): string {
     const {worstCluster, shifts} = insight;
     if (!worstCluster) {
-      return '';
+      return 'No layout shifts were found.';
     }
 
     const baseTime = this.#parsedTrace.data.Meta.traceBounds.min;
@@ -231,7 +305,7 @@ export class PerformanceInsightFormatter extends PerformanceTraceFormatter {
     } as const;
 
     const shiftsFormatted = worstCluster.events.map((layoutShift, index) => {
-      return TraceEventFormatter.layoutShift(layoutShift, index, this.#parsedTrace, shifts.get(layoutShift));
+      return this.#formatLayoutShift(layoutShift, index, shifts.get(layoutShift));
     });
 
     return `The worst layout shift cluster was the cluster that started at ${
@@ -272,7 +346,7 @@ ${shiftsFormatted.join('\n')}`;
 
     return `${this.#lcpMetricSharedContext()}
 
-${this.formatNetworkRequests([documentRequest], {
+${this.#traceFormatter.formatNetworkRequests([documentRequest], {
       verbose: true,
       customTitle: 'Document network request'
     })}
@@ -384,8 +458,9 @@ Duplication grouped by Node modules: ${filesFormatted}`;
         const url = new Common.ParsedURL.ParsedURL(font.request.args.data.url);
         fontName = url.isValid ? url.lastPathComponent : '(not available)';
       }
-      output += `\n - Font name: ${fontName}, URL: ${font.request.args.data.url}, Property 'font-display' set to: '${
-          font.display}', Wasted time: ${this.#formatMilli(font.wastedTime)}.`;
+      output += `\n - Font name: ${fontName}, URL: ${
+          this.#formatRequestUrl(font.request)}, Property 'font-display' set to: '${font.display}', Wasted time: ${
+          this.#formatMilli(font.wastedTime)}.`;
     }
 
     output += '\n\n' + Trace.Insights.Models.FontDisplay.UIStrings.description;
@@ -469,7 +544,7 @@ Duplication grouped by Node modules: ${filesFormatted}`;
                                        })
                                        .join('\n');
 
-                               return `### ${image.request.args.data.url}
+                               return `### ${this.#formatRequestUrl(image.request)}
 - Potential savings: ${bytes(image.byteSavings)}
 - Optimizations:\n${optimizations}`;
                              })
@@ -580,7 +655,9 @@ ${checklistBulletPoints.map(point => `- ${point.name}: ${point.passed ? 'PASSED'
 
     const filesFormatted =
         Array.from(legacyJavaScriptResults)
-            .map(([script, result]) => `\n- Script: ${script.url} - Wasted bytes: ${result.estimatedByteSavings} bytes
+            .map(
+                ([script, result]) =>
+                    `\n- Script: ${this.#formatScriptUrl(script)} - Wasted bytes: ${result.estimatedByteSavings} bytes
 Matches:
 ${result.matches.map(match => `Line: ${match.line}, Column: ${match.column}, Name: ${match.name}`).join('\n')}`)
             .join('\n');
@@ -598,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.';
@@ -631,7 +708,7 @@ ${requestSummary}`;
       function formatNode(
           this: PerformanceInsightFormatter, node: Trace.Insights.Models.NetworkDependencyTree.CriticalRequestNode,
           indent: string): string {
-        const url = node.request.args.data.url;
+        const url = this.#formatRequestUrl(node.request);
         const time = this.#formatMicro(node.timeFromInitialRequest);
         const isLongest = node.isLongest ? ' (longest chain)' : '';
         let nodeString = `${indent}- ${url} (${time})${isLongest}\n`;
@@ -696,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.';
@@ -934,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';
@@ -1065,45 +1142,3 @@ Polyfills and transforms enable older browsers to use new JavaScript features. H
     }
   }
 }
-
-export class TraceEventFormatter {
-  static layoutShift(
-      shift: Trace.Types.Events.SyntheticLayoutShift, index: number, parsedTrace: Trace.TraceModel.ParsedTrace,
-      rootCauses?: Trace.Insights.Models.CLSCulprits.LayoutShiftRootCausesData): string {
-    const baseTime = parsedTrace.data.Meta.traceBounds.min;
-
-    const potentialRootCauses: string[] = [];
-    if (rootCauses) {
-      rootCauses.iframes.forEach(
-          iframe => potentialRootCauses.push(
-              `An iframe (id: ${iframe.frame}, url: ${iframe.url ?? 'unknown'} was injected into the page)`));
-      rootCauses.webFonts.forEach(req => {
-        potentialRootCauses.push(`A font that was loaded over the network (${req.args.data.url}).`);
-      });
-      // TODO(b/413285103): use the nice strings for non-composited animations.
-      // The code for this lives in TimelineUIUtils but that cannot be used
-      // within models. We should move it and then expose the animations info
-      // more nicely.
-      rootCauses.nonCompositedAnimations.forEach(_ => {
-        potentialRootCauses.push('A non composited animation.');
-      });
-      rootCauses.unsizedImages.forEach(img => {
-        // TODO(b/413284569): if we store a nice human readable name for this
-        // image in the trace metadata, we can do something much nicer here.
-        const url = img.paintImageEvent.args.data.url;
-        const nodeName = img.paintImageEvent.args.data.nodeName;
-        const extraText = url ? `url: ${url}` : `id: ${img.backendNodeId}`;
-        potentialRootCauses.push(`An unsized image (${nodeName}) (${extraText}).`);
-      });
-    }
-    const rootCauseText = potentialRootCauses.length ?
-        `- Potential root causes:\n  - ${potentialRootCauses.join('\n  - ')}` :
-        '- No potential root causes identified';
-
-    const startTime = Trace.Helpers.Timing.microToMilli(Trace.Types.Timing.Micro(shift.ts - baseTime));
-    return `### Layout shift ${index + 1}:
-- Start time: ${millis(startTime)}
-- Score: ${shift.args.data?.weighted_score_delta.toFixed(4)}
-${rootCauseText}`;
-  }
-}