chrome-devtools-frontend 1.0.1519267 → 1.0.1520139

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

@@ -43,10 +43,20 @@ export class PerformanceInsightFormatter extends 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);
+    super(focus, null);
     this.#insight = insight;
-    this.#parsedTrace = focus.data.parsedTrace;
+    this.#parsedTrace = focus.parsedTrace;
   }
 
   #formatMilli(x?: number): string {
@@ -63,6 +73,28 @@ 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 {
+    const eventKey = this.eventsSerializer.keyForEvent(request);
+    return `${request.args.data.url} (eventKey: ${eventKey})`;
+  }
+
+  #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,14 +113,15 @@ 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}\`.`);
+      parts.push(`${theLcpElement} is an image fetched from ${this.#formatRequestUrl(lcpRequest)}.`);
       const request =
           this.formatNetworkRequests([lcpRequest], {verbose: true, customTitle: 'LCP resource network request'});
       parts.push(request);
@@ -203,7 +236,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 +245,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 +304,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 +315,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 ${
@@ -384,8 +468,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 +554,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 +665,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');
@@ -631,7 +718,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`;
@@ -1065,45 +1152,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}`;
-  }
-}