chrome-devtools-frontend 1.0.1506453 → 1.0.1510180

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

@@ -2,28 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as i18n from '../../../core/i18n/i18n.js';
-import * as Platform from '../../../core/platform/platform.js';
 import * as Trace from '../../trace/trace.js';
 import type {ConversationSuggestion} from '../agents/AiAgent.js';
 
 import {
   NetworkRequestFormatter,
 } from './NetworkRequestFormatter.js';
-
-function formatMilli(x: number|undefined): string {
-  if (x === undefined) {
-    return '';
-  }
-  return i18n.TimeUtilities.preciseMillisToString(x, 2, /* separator */ ' ');
-}
-
-function formatMicroToMilli(x: number|undefined): string {
-  if (x === undefined) {
-    return '';
-  }
-  return formatMilli(Trace.Helpers.Timing.microToMilli(x as Trace.Types.Timing.Micro));
-}
+import type {UnitFormatters} from './Types.js';
 
 /**
  * For a given frame ID and navigation ID, returns the LCP Event and the LCP Request, if the resource was an image.
@@ -57,10 +42,28 @@ function getLCPData(parsedTrace: Trace.Handlers.Types.ParsedTrace, frameId: stri
 export class PerformanceInsightFormatter {
   #insight: Trace.Insights.Types.InsightModel;
   #parsedTrace: Trace.Handlers.Types.ParsedTrace;
+  #unitFormatters: UnitFormatters;
 
-  constructor(parsedTrace: Trace.Handlers.Types.ParsedTrace, insight: Trace.Insights.Types.InsightModel) {
+  constructor(
+      formatters: UnitFormatters, parsedTrace: Trace.Handlers.Types.ParsedTrace,
+      insight: Trace.Insights.Types.InsightModel) {
     this.#insight = insight;
     this.#parsedTrace = parsedTrace;
+    this.#unitFormatters = formatters;
+  }
+
+  #formatMilli(x?: number): string {
+    if (x === undefined) {
+      return '';
+    }
+    return this.#unitFormatters.millis(x);
+  }
+
+  #formatMicro(x?: number): string {
+    if (x === undefined) {
+      return '';
+    }
+    return this.#formatMilli(Trace.Helpers.Timing.microToMilli(x as Trace.Types.Timing.Micro));
   }
 
   /**
@@ -84,13 +87,14 @@ export class PerformanceInsightFormatter {
     const theLcpElement =
         lcpEvent.args.data?.nodeName ? `The LCP element (${lcpEvent.args.data.nodeName})` : 'The LCP element';
     const parts: string[] = [
-      `The Largest Contentful Paint (LCP) time for this navigation was ${formatMicroToMilli(metricScore.timing)}.`,
+      `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 = TraceEventFormatter.networkRequests(
-          [lcpRequest], this.#parsedTrace, {verbose: true, customTitle: 'LCP resource network request'});
+          this.#unitFormatters, [lcpRequest], this.#parsedTrace,
+          {verbose: true, customTitle: 'LCP resource network request'});
       parts.push(request);
     } else {
       parts.push(`${theLcpElement} is text and was not fetched from the network.`);
@@ -128,7 +132,8 @@ export class PerformanceInsightFormatter {
         ];
       case 'ForcedReflow':
         return [
-          {title: 'How can I avoid layout thrashing?'}, {title: 'What is forced reflow and why is it problematic?'}
+          {title: 'How can I avoid forced reflows and layout thrashing?'},
+          {title: 'What is forced reflow and why is it problematic?'}
         ];
       case 'ImageDelivery':
         return [
@@ -176,8 +181,189 @@ export class PerformanceInsightFormatter {
           {title: 'How can I reduce the amount of legacy JavaScript on my page?'},
         ];
       default:
-        Platform.assertNever(this.#insight.insightKey, 'Unknown insight key');
+        throw new Error('Unknown insight key');
+    }
+  }
+
+  /**
+   * Create an AI prompt string out of the Forced Reflow Insight model to use with Ask AI.
+   * Note: This function accesses the UIStrings within ForcedReflow model to help build the
+   * AI prompt, but does not (and should not) call i18nString to localize these strings. They
+   * should all be sent in English (at least for now).
+   * @param insight The ForcedReflow Insight Model to query.
+   * @returns a string formatted for sending to Ask AI.
+   */
+  formatForcedReflowInsight(insight: Trace.Insights.Models.ForcedReflow.ForcedReflowInsightModel): string {
+    let output = Trace.Insights.Models.ForcedReflow.UIStrings.description + '\n\n';
+
+    if (insight.topLevelFunctionCallData || insight.aggregatedBottomUpData.length > 0) {
+      output += 'The forced reflow checks revealed one or more problems.\n\n';
+    } else {
+      output += 'The forced reflow checks revealed no problems.';
+      return output;
+    }
+
+    function callFrameToString(frame: Trace.Types.Events.CallFrame|null): string {
+      if (frame === null) {
+        return Trace.Insights.Models.ForcedReflow.UIStrings.unattributed;
+      }
+
+      let result = `${frame.functionName || Trace.Insights.Models.ForcedReflow.UIStrings.anonymous}`;
+      if (frame.url) {
+        result += ` @ ${frame.url}:${frame.lineNumber}:${frame.columnNumber}`;
+      } else {
+        result += ' @ unknown location';
+      }
+      return result;
+    }
+
+    if (insight.topLevelFunctionCallData) {
+      output += 'The following is the top function call that caused forced reflow(s):\n\n';
+      output += ' - ' + callFrameToString(insight.topLevelFunctionCallData.topLevelFunctionCall);
+      output += `\n\n${Trace.Insights.Models.ForcedReflow.UIStrings.totalReflowTime}: ${
+          this.#formatMicro(insight.topLevelFunctionCallData.totalReflowTime)}\n`;
+    } else {
+      output += 'No top-level functions causing forced reflows were identified.\n';
+    }
+
+    if (insight.aggregatedBottomUpData.length > 0) {
+      output += '\n' + Trace.Insights.Models.ForcedReflow.UIStrings.relatedStackTrace + ' (including total time):\n';
+      for (const data of insight.aggregatedBottomUpData) {
+        output += `\n - ${this.#formatMicro(data.totalTime)} in ${callFrameToString(data.bottomUpData)}`;
+      }
+    } else {
+      output += '\nNo aggregated bottom-up causes of forced reflows were identified.';
+    }
+
+    return output;
+  }
+
+  /**
+   * Create an AI prompt string out of the NetworkDependencyTree Insight model to use with Ask AI.
+   * Note: This function accesses the UIStrings within NetworkDependencyTree to help build the
+   * AI prompt, but does not (and should not) call i18nString to localize these strings. They
+   * should all be sent in English (at least for now).
+   * @param insight The Network Dependency Tree Insight Model to query.
+   * @returns a string formatted for sending to Ask AI.
+   */
+  formatNetworkDependencyTreeInsight(
+      insight: Trace.Insights.Models.NetworkDependencyTree.NetworkDependencyTreeInsightModel): string {
+    let output = insight.fail ?
+        'The network dependency tree checks found one or more problems.\n\n' :
+        'The network dependency tree checks revealed no problems, but optimization suggestions may be available.\n\n';
+
+    const rootNodes = insight.rootNodes;
+    if (rootNodes.length > 0) {
+      output += `Max critical path latency is ${this.#formatMicro(insight.maxTime)}\n\n`;
+      output += 'The following is the critical request chain:\n';
+
+      function formatNode(
+          this: PerformanceInsightFormatter, node: Trace.Insights.Models.NetworkDependencyTree.CriticalRequestNode,
+          indent: string): string {
+        const url = node.request.args.data.url;
+        const time = this.#formatMicro(node.timeFromInitialRequest);
+        const isLongest = node.isLongest ? ' (longest chain)' : '';
+        let nodeString = `${indent}- ${url} (${time})${isLongest}\n`;
+        for (const child of node.children) {
+          nodeString += formatNode.call(this, child, indent + '  ');
+        }
+        return nodeString;
+      }
+
+      for (const rootNode of rootNodes) {
+        output += formatNode.call(this, rootNode, '');
+      }
+      output += '\n';
+    } else {
+      output += `${Trace.Insights.Models.NetworkDependencyTree.UIStrings.noNetworkDependencyTree}.\n\n`;
+    }
+
+    if (insight.preconnectedOrigins?.length > 0) {
+      output += `${Trace.Insights.Models.NetworkDependencyTree.UIStrings.preconnectOriginsTableTitle}:\n`;
+      output += `${Trace.Insights.Models.NetworkDependencyTree.UIStrings.preconnectOriginsTableDescription}\n`;
+      for (const origin of insight.preconnectedOrigins) {
+        const headerText = 'headerText' in origin ? `'${origin.headerText}'` : ``;
+        output += `
+  - ${origin.url}
+    - ${Trace.Insights.Models.NetworkDependencyTree.UIStrings.columnSource}: '${origin.source}'`;
+        if (headerText) {
+          output += `\n   - Header: ${headerText}`;
+        }
+        if (origin.unused) {
+          output += `\n   - Warning: ${Trace.Insights.Models.NetworkDependencyTree.UIStrings.unusedWarning}`;
+        }
+        if (origin.crossorigin) {
+          output += `\n   - Warning: ${Trace.Insights.Models.NetworkDependencyTree.UIStrings.crossoriginWarning}`;
+        }
+      }
+      if (insight.preconnectedOrigins.length >
+          Trace.Insights.Models.NetworkDependencyTree.TOO_MANY_PRECONNECTS_THRESHOLD) {
+        output +=
+            `\n\n**Warning**: ${Trace.Insights.Models.NetworkDependencyTree.UIStrings.tooManyPreconnectLinksWarning}`;
+      }
+    } else {
+      output += `${Trace.Insights.Models.NetworkDependencyTree.UIStrings.noPreconnectOrigins}.`;
+    }
+
+    if (insight.preconnectCandidates.length > 0 &&
+        insight.preconnectedOrigins.length <
+            Trace.Insights.Models.NetworkDependencyTree.TOO_MANY_PRECONNECTS_THRESHOLD) {
+      output += `\n\n${Trace.Insights.Models.NetworkDependencyTree.UIStrings.estSavingTableTitle}:\n${
+          Trace.Insights.Models.NetworkDependencyTree.UIStrings.estSavingTableDescription}\n`;
+      for (const candidate of insight.preconnectCandidates) {
+        output += `\nAdding [preconnect] to origin '${candidate.origin}' would save ${
+            this.#formatMilli(candidate.wastedMs)}.`;
+      }
+    }
+
+    return output;
+  }
+
+  /**
+   * Create an AI prompt string out of the ThirdParties Insight model to use with Ask AI.
+   * Note: This function accesses the UIStrings within ThirdParties to help build the
+   * AI prompt, but does not (and should not) call i18nString to localize these strings. They
+   * should all be sent in English (at least for now).
+   * @param insight The Third Parties Insight Model to query.
+   * @returns a string formatted for sending to Ask AI.
+   */
+  formatThirdPartiesInsight(insight: Trace.Insights.Models.ThirdParties.ThirdPartiesInsightModel): string {
+    let output = '';
+
+    const entitySummaries = insight.entitySummaries ?? [];
+    const firstPartyEntity = insight.firstPartyEntity;
+
+    const thirdPartyTransferSizeEntries =
+        entitySummaries.filter(s => s.entity !== firstPartyEntity).toSorted((a, b) => b.transferSize - a.transferSize);
+    const thirdPartyMainThreadTimeEntries = entitySummaries.filter(s => s.entity !== firstPartyEntity)
+                                                .toSorted((a, b) => b.mainThreadTime - a.mainThreadTime);
+
+    if (!thirdPartyTransferSizeEntries.length && !thirdPartyMainThreadTimeEntries.length) {
+      return `No 3rd party scripts were found on this page.`;
     }
+
+    if (thirdPartyTransferSizeEntries.length) {
+      output += `The following list contains the largest transfer sizes by a 3rd party script:\n\n`;
+      for (const entry of thirdPartyTransferSizeEntries) {
+        if (entry.transferSize > 0) {
+          output += `- ${entry.entity.name}: ${this.#unitFormatters.bytes(entry.transferSize)}\n`;
+        }
+      }
+      output += '\n';
+    }
+
+    if (thirdPartyMainThreadTimeEntries.length) {
+      output += `The following list contains the largest amount spent by a 3rd party script on the main thread:\n\n`;
+      for (const entry of thirdPartyMainThreadTimeEntries) {
+        if (entry.mainThreadTime > 0) {
+          output += `- ${entry.entity.name}: ${this.#formatMilli(entry.mainThreadTime)}\n`;
+        }
+      }
+      output += '\n';
+    }
+
+    output += Trace.Insights.Models.ThirdParties.UIStrings.description;
+    return output;
   }
 
   /**
@@ -210,26 +396,26 @@ ${this.#links()}`;
         return 'There are no unoptimized images on this page.';
       }
 
-      const imageDetails =
-          optimizableImages
-              .map(image => {
-                // List potential optimizations for the image
-                const optimizations =
-                    image.optimizations
-                        .map(optimization => {
-                          const message = Trace.Insights.Models.ImageDelivery.getOptimizationMessage(optimization);
-                          const byteSavings = i18n.ByteUtilities.bytesToString(optimization.byteSavings);
-                          return `${message} (Est ${byteSavings})`;
-                        })
-                        .join('\n');
-
-                return `### ${image.request.args.data.url}
-- Potential savings: ${i18n.ByteUtilities.bytesToString(image.byteSavings)}
+      const imageDetails = optimizableImages
+                               .map(image => {
+                                 // List potential optimizations for the image
+                                 const optimizations =
+                                     image.optimizations
+                                         .map(optimization => {
+                                           const message =
+                                               Trace.Insights.Models.ImageDelivery.getOptimizationMessage(optimization);
+                                           const byteSavings = this.#unitFormatters.bytes(optimization.byteSavings);
+                                           return `${message} (Est ${byteSavings})`;
+                                         })
+                                         .join('\n');
+
+                                 return `### ${image.request.args.data.url}
+- Potential savings: ${this.#unitFormatters.bytes(image.byteSavings)}
 - Optimizations:\n${optimizations}`;
-              })
-              .join('\n\n');
+                               })
+                               .join('\n\n');
 
-      return `Total potential savings: ${i18n.ByteUtilities.bytesToString(this.#insight.wastedBytes)}
+      return `Total potential savings: ${this.#unitFormatters.bytes(this.#insight.wastedBytes)}
 
 The following images could be optimized:\n\n${imageDetails}`;
     }
@@ -250,7 +436,7 @@ The following images could be optimized:\n\n${imageDetails}`;
       Object.values(subparts).forEach((subpart: Trace.Insights.Models.LCPBreakdown.Subpart) => {
         const phaseMilli = Trace.Helpers.Timing.microToMilli(subpart.range);
         const percentage = (phaseMilli / lcpMs * 100).toFixed(1);
-        phaseBulletPoints.push({name: subpart.label, value: formatMilli(phaseMilli), percentage});
+        phaseBulletPoints.push({name: subpart.label, value: this.#formatMilli(phaseMilli), percentage});
       });
 
       return `${this.#lcpMetricSharedContext()}
@@ -289,8 +475,8 @@ ${checklistBulletPoints.map(point => `- ${point.name}: ${point.passed ? 'PASSED'
     }
 
     if (Trace.Insights.Models.RenderBlocking.isRenderBlocking(this.#insight)) {
-      const requestSummary =
-          TraceEventFormatter.networkRequests(this.#insight.renderBlockingRequests, this.#parsedTrace);
+      const requestSummary = TraceEventFormatter.networkRequests(
+          this.#unitFormatters, this.#insight.renderBlockingRequests, this.#parsedTrace);
 
       if (requestSummary.length === 0) {
         return 'There are no network requests that are render blocking.';
@@ -325,7 +511,7 @@ ${requestSummary}`;
 
       return `${this.#lcpMetricSharedContext()}
 
-${TraceEventFormatter.networkRequests([documentRequest], this.#parsedTrace, {
+${TraceEventFormatter.networkRequests(this.#unitFormatters, [documentRequest], this.#parsedTrace, {
         verbose: true,
         customTitle: 'Document network request'
       })}
@@ -342,11 +528,11 @@ ${checklistBulletPoints.map(point => `- ${point.name}: ${point.passed ? 'PASSED'
 
       const inpInfoForEvent =
           `The longest interaction on the page was a \`${event.type}\` which had a total duration of \`${
-              formatMicroToMilli(event.dur)}\`. The timings of each of the three phases were:
+              this.#formatMicro(event.dur)}\`. The timings of each of the three phases were:
 
-1. Input delay: ${formatMicroToMilli(event.inputDelay)}
-2. Processing duration: ${formatMicroToMilli(event.mainThreadHandling)}
-3. Presentation delay: ${formatMicroToMilli(event.presentationDelay)}.`;
+1. Input delay: ${this.#formatMicro(event.inputDelay)}
+2. Processing duration: ${this.#formatMicro(event.mainThreadHandling)}
+3. Presentation delay: ${this.#formatMicro(event.presentationDelay)}.`;
 
       return inpInfoForEvent;
     }
@@ -365,12 +551,13 @@ ${checklistBulletPoints.map(point => `- ${point.name}: ${point.passed ? 'PASSED'
       } as const;
 
       const shiftsFormatted = worstCluster.events.map((layoutShift, index) => {
-        return TraceEventFormatter.layoutShift(layoutShift, index, this.#parsedTrace, shifts.get(layoutShift));
+        return TraceEventFormatter.layoutShift(
+            this.#unitFormatters, layoutShift, index, this.#parsedTrace, shifts.get(layoutShift));
       });
 
       return `The worst layout shift cluster was the cluster that started at ${
-          formatMicroToMilli(clusterTimes.start)} and ended at ${
-          formatMicroToMilli(clusterTimes.end)}, with a duration of ${formatMicroToMilli(worstCluster.dur)}.
+          this.#formatMicro(clusterTimes.start)} and ended at ${
+          this.#formatMicro(clusterTimes.end)}, with a duration of ${this.#formatMicro(worstCluster.dur)}.
 The score for this cluster is ${worstCluster.clusterCumulativeScore.toFixed(4)}.
 
 Layout shifts in this cluster:
@@ -379,8 +566,9 @@ ${shiftsFormatted.join('\n')}`;
 
     if (Trace.Insights.Models.ModernHTTP.isModernHTTP(this.#insight)) {
       const requestSummary = (this.#insight.http1Requests.length === 1) ?
-          TraceEventFormatter.networkRequests(this.#insight.http1Requests, this.#parsedTrace, {verbose: true}) :
-          TraceEventFormatter.networkRequests(this.#insight.http1Requests, this.#parsedTrace);
+          TraceEventFormatter.networkRequests(
+              this.#unitFormatters, this.#insight.http1Requests, this.#parsedTrace, {verbose: true}) :
+          TraceEventFormatter.networkRequests(this.#unitFormatters, this.#insight.http1Requests, this.#parsedTrace);
 
       if (requestSummary.length === 0) {
         return 'There are no requests that were served over a legacy HTTP protocol.';
@@ -430,6 +618,18 @@ Legacy JavaScript by file:
 ${filesFormatted}`;
     }
 
+    if (Trace.Insights.Models.ForcedReflow.isForcedReflowInsight(this.#insight)) {
+      return this.formatForcedReflowInsight(this.#insight);
+    }
+
+    if (Trace.Insights.Models.NetworkDependencyTree.isNetworkDependencyTree(this.#insight)) {
+      return this.formatNetworkDependencyTreeInsight(this.#insight);
+    }
+
+    if (Trace.Insights.Models.ThirdParties.isThirdPartyInsight(this.#insight)) {
+      return this.formatThirdPartiesInsight(this.#insight);
+    }
+
     return '';
   }
 
@@ -458,7 +658,7 @@ ${filesFormatted}`;
       case 'FontDisplay':
         return '';
       case 'ForcedReflow':
-        return '';
+        return '- https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts';
       case 'ImageDelivery':
         return '- https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/';
       case 'INPBreakdown':
@@ -473,14 +673,15 @@ ${filesFormatted}`;
         return `- https://web.dev/articles/lcp
 - https://web.dev/articles/optimize-lcp`;
       case 'NetworkDependencyTree':
-        return '';
+        return `- https://web.dev/learn/performance/understanding-the-critical-path
+- https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/`;
       case 'RenderBlocking':
         return `- https://web.dev/articles/lcp
 - https://web.dev/articles/optimize-lcp`;
       case 'SlowCSSSelector':
         return '';
       case 'ThirdParties':
-        return '';
+        return '- https://web.dev/articles/optimizing-content-efficiency-loading-third-party-javascript/';
       case 'Viewport':
         return '';
       case 'Cache':
@@ -513,7 +714,7 @@ ${filesFormatted}`;
       case 'FontDisplay':
         return '';
       case 'ForcedReflow':
-        return '';
+        return `This insight identifies forced synchronous layouts (also known as forced reflows) and layout thrashing caused by JavaScript accessing layout properties at suboptimal points in time.`;
       case 'ImageDelivery':
         return 'This insight identifies unoptimized images that are downloaded at a much higher resolution than they are displayed. Properly sizing and compressing these assets will decrease their download time, directly improving the perceived page load time and LCP';
       case 'INPBreakdown':
@@ -538,13 +739,19 @@ It is important that all of these checks pass to minimize the delay between the
       case 'LCPBreakdown':
         return 'This insight is used to analyze the time spent that contributed to the final LCP time and identify which of the 4 phases (or 2 if there was no LCP resource) are contributing most to the delay in rendering the LCP element.';
       case 'NetworkDependencyTree':
-        return '';
+        return `This insight analyzes the network dependency tree to identify:
+- The maximum critical path latency (the longest chain of network requests that the browser must download before it can render the page).
+- Whether current [preconnect] tags are appropriate, according to the following rules:
+   1. They should all be in use (no unnecessary preconnects).
+   2. All preconnects should specify cross-origin correctly.
+   3. The maximum of 4 preconnects should be respected.
+- Opportunities to add [preconnect] for a faster loading experience.`;
       case 'RenderBlocking':
         return 'This insight identifies network requests that were render blocking. Render blocking requests are impactful because they are deemed critical to the page and therefore the browser stops rendering the page until it has dealt with these resources. For this insight make sure you fully inspect the details of each render blocking network request and prioritize your suggestions to the user based on the impact of each render blocking request.';
       case 'SlowCSSSelector':
         return '';
       case 'ThirdParties':
-        return '';
+        return 'This insight analyzes the performance impact of resources loaded from third-party servers and aggregates the performance cost, in terms of download transfer sizes and total amount of time that third party scripts spent executing on the main thread.';
       case 'Viewport':
         return '';
       case 'Cache':
@@ -573,7 +780,8 @@ export interface NetworkRequestFormatOptions {
 
 export class TraceEventFormatter {
   static layoutShift(
-      shift: Trace.Types.Events.SyntheticLayoutShift, index: number, parsedTrace: Trace.Handlers.Types.ParsedTrace,
+      formatters: UnitFormatters, shift: Trace.Types.Events.SyntheticLayoutShift, index: number,
+      parsedTrace: Trace.Handlers.Types.ParsedTrace,
       rootCauses?: Trace.Insights.Models.CLSCulprits.LayoutShiftRootCausesData): string {
     const baseTime = parsedTrace.Meta.traceBounds.min;
 
@@ -605,16 +813,17 @@ export class TraceEventFormatter {
         `- 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: ${formatMicroToMilli(shift.ts - baseTime)}
+- Start time: ${formatters.millis(startTime)}
 - Score: ${shift.args.data?.weighted_score_delta.toFixed(4)}
 ${rootCauseText}`;
   }
 
   // Stringify network requests for the LLM model.
   static networkRequests(
-      requests: readonly Trace.Types.Events.SyntheticNetworkRequest[], parsedTrace: Trace.Handlers.Types.ParsedTrace,
-      options?: NetworkRequestFormatOptions): string {
+      formatters: UnitFormatters, requests: readonly Trace.Types.Events.SyntheticNetworkRequest[],
+      parsedTrace: Trace.Handlers.Types.ParsedTrace, options?: NetworkRequestFormatOptions): string {
     if (requests.length === 0) {
       return '';
     }
@@ -631,11 +840,12 @@ ${rootCauseText}`;
     // For a single request, use `formatRequestVerbosely`, which formats with all fields specified and does not require a
     // format description.
     if (verbose) {
-      return requests.map(request => this.#networkRequestVerbosely(request, parsedTrace, options?.customTitle))
+      return requests
+          .map(request => this.#networkRequestVerbosely(formatters, request, parsedTrace, options?.customTitle))
           .join('\n');
     }
 
-    return this.#networkRequestsArrayCompressed(requests, parsedTrace);
+    return this.#networkRequestsArrayCompressed(formatters, requests, parsedTrace);
   }
 
   /**
@@ -647,8 +857,8 @@ ${rootCauseText}`;
    * talk to jacktfranklin@.
    */
   static #networkRequestVerbosely(
-      request: Trace.Types.Events.SyntheticNetworkRequest, parsedTrace: Trace.Handlers.Types.ParsedTrace,
-      customTitle?: string): string {
+      formatters: UnitFormatters, request: Trace.Types.Events.SyntheticNetworkRequest,
+      parsedTrace: Trace.Handlers.Types.ParsedTrace, customTitle?: string): string {
     const {
       url,
       statusCode,
@@ -700,8 +910,8 @@ ${rootCauseText}`;
     const redirects = request.args.data.redirects.map((redirect, index) => {
       const startTime = redirect.ts - baseTime;
       return `#### Redirect ${index + 1}: ${redirect.url}
-- Start time: ${formatMicroToMilli(startTime)}
-- Duration: ${formatMicroToMilli(redirect.dur)}`;
+- Start time: ${formatters.micros(startTime)}
+- Duration: ${formatters.micros(redirect.dur)}`;
     });
 
     const initiators = this.#getInitiatorChain(parsedTrace, request);
@@ -709,14 +919,14 @@ ${rootCauseText}`;
 
     return `${titlePrefix}: ${url}
 Timings:
-- Queued at: ${formatMicroToMilli(startTimesForLifecycle.queuedAt)}
-- Request sent at: ${formatMicroToMilli(startTimesForLifecycle.requestSentAt)}
-- Download complete at: ${formatMicroToMilli(startTimesForLifecycle.downloadCompletedAt)}
-- Main thread processing completed at: ${formatMicroToMilli(startTimesForLifecycle.processingCompletedAt)}
+- Queued at: ${formatters.micros(startTimesForLifecycle.queuedAt)}
+- Request sent at: ${formatters.micros(startTimesForLifecycle.requestSentAt)}
+- Download complete at: ${formatters.micros(startTimesForLifecycle.downloadCompletedAt)}
+- Main thread processing completed at: ${formatters.micros(startTimesForLifecycle.processingCompletedAt)}
 Durations:
-- Download time: ${formatMicroToMilli(downloadTime)}
-- Main thread processing time: ${formatMicroToMilli(mainThreadProcessingDuration)}
-- Total duration: ${formatMicroToMilli(request.dur)}${initiator ? `\nInitiator: ${initiator.args.data.url}` : ''}
+- Download time: ${formatters.micros(downloadTime)}
+- Main thread processing time: ${formatters.micros(mainThreadProcessingDuration)}
+- Total duration: ${formatters.micros(request.dur)}${initiator ? `\nInitiator: ${initiator.args.data.url}` : ''}
 Redirects:${redirects.length ? '\n' + redirects.join('\n') : ' no redirects'}
 Status code: ${statusCode}
 MIME Type: ${mimeType}
@@ -746,21 +956,20 @@ ${NetworkRequestFormatter.formatHeaders('Response headers', responseHeaders ?? [
   // For a single request, use `formatRequestVerbosely`, which formats with all fields specified and does not require a
   // format description.
   static #networkRequestsArrayCompressed(
-      requests: readonly Trace.Types.Events.SyntheticNetworkRequest[],
+      formatters: UnitFormatters, requests: readonly Trace.Types.Events.SyntheticNetworkRequest[],
       parsedTrace: Trace.Handlers.Types.ParsedTrace): string {
     const networkDataString = `
 Network requests data:
 
 `;
     const urlIdToIndex = new Map<string, number>();
-    const allRequestsText = requests
-                                .map(request => {
-                                  const urlIndex =
-                                      TraceEventFormatter.#getOrAssignUrlIndex(urlIdToIndex, request.args.data.url);
-                                  return this.#networkRequestCompressedFormat(
-                                      urlIndex, request, parsedTrace, urlIdToIndex);
-                                })
-                                .join('\n');
+    const allRequestsText =
+        requests
+            .map(request => {
+              const urlIndex = TraceEventFormatter.#getOrAssignUrlIndex(urlIdToIndex, request.args.data.url);
+              return this.#networkRequestCompressedFormat(formatters, urlIndex, request, parsedTrace, urlIdToIndex);
+            })
+            .join('\n');
 
     const urlsMapString = 'allUrls = ' +
         `[${
@@ -814,7 +1023,7 @@ The order of headers corresponds to an internal fixed list. If a header is not p
    * See `networkDataFormatDescription` above for specifics.
    */
   static #networkRequestCompressedFormat(
-      urlIndex: number, request: Trace.Types.Events.SyntheticNetworkRequest,
+      formatters: UnitFormatters, urlIndex: number, request: Trace.Types.Events.SyntheticNetworkRequest,
       parsedTrace: Trace.Handlers.Types.ParsedTrace, urlIdToIndex: Map<string, number>): string {
     const {
       statusCode,
@@ -833,13 +1042,13 @@ The order of headers corresponds to an internal fixed list. If a header is not p
         parsedTrace.Meta.navigationsByFrameId,
     );
     const baseTime = navigationForEvent?.ts ?? parsedTrace.Meta.traceBounds.min;
-    const queuedTime = formatMicroToMilli(request.ts - baseTime);
-    const requestSentTime = formatMicroToMilli(syntheticData.sendStartTime - baseTime);
-    const downloadCompleteTime = formatMicroToMilli(syntheticData.finishTime - baseTime);
-    const processingCompleteTime = formatMicroToMilli(request.ts + request.dur - baseTime);
-    const totalDuration = formatMicroToMilli(request.dur);
-    const downloadDuration = formatMicroToMilli(syntheticData.finishTime - syntheticData.downloadStart);
-    const mainThreadProcessingDuration = formatMicroToMilli(request.ts + request.dur - syntheticData.finishTime);
+    const queuedTime = formatters.micros(request.ts - baseTime);
+    const requestSentTime = formatters.micros(syntheticData.sendStartTime - baseTime);
+    const downloadCompleteTime = formatters.micros(syntheticData.finishTime - baseTime);
+    const processingCompleteTime = formatters.micros(request.ts + request.dur - baseTime);
+    const totalDuration = formatters.micros(request.dur);
+    const downloadDuration = formatters.micros(syntheticData.finishTime - syntheticData.downloadStart);
+    const mainThreadProcessingDuration = formatters.micros(request.ts + request.dur - syntheticData.finishTime);
     const renderBlocking = Trace.Helpers.Network.isSyntheticNetworkRequestEventRenderBlocking(request) ? 't' : 'f';
     const finalPriority = priority;
     const headerValues = responseHeaders
@@ -852,8 +1061,8 @@ The order of headers corresponds to an internal fixed list. If a header is not p
     const redirects = request.args.data.redirects
                           .map(redirect => {
                             const urlIndex = TraceEventFormatter.#getOrAssignUrlIndex(urlIdToIndex, redirect.url);
-                            const redirectStartTime = formatMicroToMilli(redirect.ts - baseTime);
-                            const redirectDuration = formatMicroToMilli(redirect.dur);
+                            const redirectStartTime = formatters.micros(redirect.ts - baseTime);
+                            const redirectDuration = formatters.micros(redirect.dur);
                             return `[${urlIndex}|${redirectStartTime}|${redirectDuration}]`;
                           })
                           .join(',');