AI: define unit formatters in models/ai_assistance

So we can begin to not rely on the i18n module.

DISABLE_SPELLCHECKER=picking up errors in external dataset we do not control

Bug: 443038315, 442509324
Change-Id: I9230f2fedef456bd3fc6c205c5cc34a91ee61dd5
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6915541
Reviewed-by: Nikolay Vitkov <[email protected]>
Commit-Queue: Alex Rudenko <[email protected]>
Auto-Submit: Jack Franklin <[email protected]>
Reviewed-by: Mathias Bynens <[email protected]>

Author: jackfranklin

config/gni/devtools_grd_files.gni

@@ -1033,7 +1033,7 @@ grd_files_unbundled_sources = [
   "front_end/models/ai_assistance/data_formatters/NetworkRequestFormatter.js",
   "front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.js",
   "front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.js",
-  "front_end/models/ai_assistance/data_formatters/Types.js",
+  "front_end/models/ai_assistance/data_formatters/UnitFormatters.js",
   "front_end/models/ai_assistance/debug.js",
   "front_end/models/ai_assistance/injected.js",
   "front_end/models/ai_code_completion/AiCodeCompletion.js",

front_end/core/i18n/NumberFormatter.ts

@@ -39,6 +39,13 @@ export function defineFormatter(options: Intl.NumberFormatOptions): NumberFormat
  * We don't like that, so when there is no space literal we inject the provided separator manually.
  */
 function formatAndEnsureSpace(formatter: Intl.NumberFormat, value: number, separator = '\xA0'): string {
+  // TODO(crbug.com/443038315): this method is defined in
+  // models/ai_assistance in the UnitFormatters file. We can't currently
+  // re-use it because various models depend on i18n and that creates a
+  // circular build.
+  // We should move the unit formatters to their own model so it can be
+  // used across the codebase.
+
   const parts = formatter.formatToParts(value);
 
   let hasSpace = false;

front_end/models/ai_assistance/BUILD.gn

@@ -27,7 +27,7 @@ devtools_module("ai_assistance") {
     "data_formatters/NetworkRequestFormatter.ts",
     "data_formatters/PerformanceInsightFormatter.ts",
     "data_formatters/PerformanceTraceFormatter.ts",
-    "data_formatters/Types.ts",
+    "data_formatters/UnitFormatters.ts",
     "debug.ts",
     "injected.ts",
   ]
@@ -90,6 +90,7 @@ ts_library("unittests") {
     "data_formatters/NetworkRequestFormatter.test.ts",
     "data_formatters/PerformanceInsightFormatter.test.ts",
     "data_formatters/PerformanceTraceFormatter.test.ts",
+    "data_formatters/UnitFormatters.test.ts",
   ]
 
   deps = [

front_end/models/ai_assistance/ConversationHandler.test.ts

@@ -203,7 +203,7 @@ describeWithMockConnection('ConversationHandler', () => {
             },
             {
               text:
-                  'Queued at (timestamp): 0 μs\nStarted at (timestamp): 0 μs\nConnection start (stalled) (duration): -\nDuration (duration): -',
+                  'Queued at (timestamp): 0 s\nStarted at (timestamp): 0 s\nConnection start (stalled) (duration): -\nDuration (duration): -',
               title: 'Timing',
             },
             {

front_end/models/ai_assistance/agents/NetworkAgent.test.ts

@@ -160,7 +160,7 @@ describeWithMockConnection('NetworkAgent', () => {
             {
               title: 'Timing',
               text:
-                  'Queued at (timestamp): 0 μs\nStarted at (timestamp): 8.4 min\nQueueing (duration): 8.4 min\nConnection start (stalled) (duration): 800.00 ms\nRequest sent (duration): 100.00 ms\nDuration (duration): 8.4 min',
+                  'Queued at (timestamp): 0 s\nStarted at (timestamp): 501 s\nQueueing (duration): 501 s\nConnection start (stalled) (duration): 800 ms\nRequest sent (duration): 100 ms\nDuration (duration): 501 s',
             },
             {
               title: 'Request initiator chain',
@@ -197,12 +197,12 @@ x-forwarded-for: bar3
 
 Response status: 200 \n
 Request timing:
-Queued at (timestamp): 0 μs
-Started at (timestamp): 8.4 min
-Queueing (duration): 8.4 min
-Connection start (stalled) (duration): 800.00 ms
-Request sent (duration): 100.00 ms
-Duration (duration): 8.4 min
+Queued at (timestamp): 0 s
+Started at (timestamp): 501 s
+Queueing (duration): 501 s
+Connection start (stalled) (duration): 800 ms
+Request sent (duration): 100 ms
+Duration (duration): 501 s
 
 Request initiator chain:
 - URL: <redacted cross-origin initiator URL>

front_end/models/ai_assistance/agents/PerformanceAgent.test.ts

@@ -20,7 +20,6 @@ import * as Trace from '../../trace/trace.js';
 import {
   type ActionResponse,
   ConversationType,
-  PERF_AGENT_UNIT_FORMATTERS,
   PerformanceAgent,
   PerformanceTraceContext,
   PerformanceTraceFormatter,
@@ -353,8 +352,7 @@ code
       });
 
       const expectedDetailText =
-          new PerformanceTraceFormatter(
-              PERF_AGENT_UNIT_FORMATTERS, context.getItem(), new Trace.EventsSerializer.EventsSerializer())
+          new PerformanceTraceFormatter(context.getItem(), new Trace.EventsSerializer.EventsSerializer())
               .formatTraceSummary();
 
       const responses = await Array.fromAsync(agent.run('test', {selected: context}));
@@ -469,8 +467,7 @@ Help me understand?`;
         assert.isOk(match, `no request found for ${url}`);
       });
 
-      const formatter = new PerformanceTraceFormatter(
-          PERF_AGENT_UNIT_FORMATTERS, context.getItem(), new Trace.EventsSerializer.EventsSerializer());
+      const formatter = new PerformanceTraceFormatter(context.getItem(), new Trace.EventsSerializer.EventsSerializer());
       const expectedRequestsOutput = formatter.formatNetworkTrackSummary(bounds);
 
       const expectedBytesSize = Platform.StringUtilities.countWtf8Bytes(expectedRequestsOutput);
@@ -517,8 +514,7 @@ Help me understand?`;
       const action = responses.find(response => response.type === ResponseType.ACTION);
       assert.exists(action);
 
-      const formatter = new PerformanceTraceFormatter(
-          PERF_AGENT_UNIT_FORMATTERS, context.getItem(), new Trace.EventsSerializer.EventsSerializer());
+      const formatter = new PerformanceTraceFormatter(context.getItem(), new Trace.EventsSerializer.EventsSerializer());
       const summary = formatter.formatMainThreadTrackSummary(bounds);
       assert.isOk(summary);
 

front_end/models/ai_assistance/agents/PerformanceAgent.ts

@@ -18,7 +18,6 @@ import {
   TraceEventFormatter,
 } from '../data_formatters/PerformanceInsightFormatter.js';
 import {PerformanceTraceFormatter} from '../data_formatters/PerformanceTraceFormatter.js';
-import type {UnitFormatters} from '../data_formatters/Types.js';
 import {debugLog} from '../debug.js';
 
 import {
@@ -220,19 +219,6 @@ enum ScorePriority {
   DEFAULT = 1,
 }
 
-export const PERF_AGENT_UNIT_FORMATTERS: UnitFormatters = {
-  micros(x) {
-    const milli = Trace.Helpers.Timing.microToMilli(x as Trace.Types.Timing.Micro);
-    return PERF_AGENT_UNIT_FORMATTERS.millis(milli);
-  },
-  millis(x) {
-    return i18n.TimeUtilities.preciseMillisToString(x, 1, ' ');
-  },
-  bytes(x) {
-    return i18n.ByteUtilities.bytesToString(x);
-  },
-};
-
 export class PerformanceTraceContext extends ConversationContext<TimelineUtils.AIContext.AgentFocus> {
   static full(
       parsedTrace: Trace.Handlers.Types.ParsedTrace, insights: Trace.Insights.Types.TraceInsightSets,
@@ -330,8 +316,7 @@ export class PerformanceTraceContext extends ConversationContext<TimelineUtils.A
       return;
     }
 
-    return new PerformanceInsightFormatter(PERF_AGENT_UNIT_FORMATTERS, focus.parsedTrace, focus.insight)
-        .getSuggestions();
+    return new PerformanceInsightFormatter(focus.parsedTrace, focus.insight).getSuggestions();
   }
 }
 
@@ -672,7 +657,7 @@ export class PerformanceAgent extends AiAgent<TimelineUtils.AIContext.AgentFocus
     this.addFact(this.#networkDataDescriptionFact);
 
     if (!this.#traceFacts.length) {
-      this.#formatter = new PerformanceTraceFormatter(PERF_AGENT_UNIT_FORMATTERS, focus, this.#eventsSerializer);
+      this.#formatter = new PerformanceTraceFormatter(focus, this.#eventsSerializer);
       this.#createFactForTraceSummary(focus);
       this.#createFactForCriticalRequests();
       this.#createFactForMainThreadBottomUpSummary();
@@ -738,8 +723,7 @@ export class PerformanceAgent extends AiAgent<TimelineUtils.AIContext.AgentFocus
           return {error: 'No insight available'};
         }
 
-        const details =
-            new PerformanceInsightFormatter(PERF_AGENT_UNIT_FORMATTERS, parsedTrace, insight).formatInsight();
+        const details = new PerformanceInsightFormatter(parsedTrace, insight).formatInsight();
 
         const key = `getInsightDetails('${params.insightName}')`;
         this.#cacheFunctionResult(focus, key, details);

front_end/models/ai_assistance/ai_assistance.ts

@@ -20,6 +20,6 @@ export * from './data_formatters/FileFormatter.js';
 export * from './data_formatters/NetworkRequestFormatter.js';
 export * from './data_formatters/PerformanceInsightFormatter.js';
 export * from './data_formatters/PerformanceTraceFormatter.js';
-export * from './data_formatters/Types.js';
+export * from './data_formatters/UnitFormatters.js';
 export * from './ConversationHandler.js';
 export * from './injected.js';

front_end/models/ai_assistance/data_formatters/NetworkRequestFormatter.ts

@@ -2,11 +2,12 @@
 // 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 type * as SDK from '../../../core/sdk/sdk.js';
 import * as Logs from '../../logs/logs.js';
 import * as NetworkTimeCalculator from '../../network_time_calculator/network_time_calculator.js';
 
+import {seconds} from './UnitFormatters.js';
+
 const MAX_HEADERS_SIZE = 1000;
 
 /**
@@ -104,22 +105,22 @@ Request initiator chain:\n${this.formatRequestInitiatorChain()}`;
   formatNetworkRequestTiming(): string {
     const results = NetworkTimeCalculator.calculateRequestTimeRanges(this.#request, this.#calculator.minimumBoundary());
 
-    function getDuration(name: string): string|undefined {
+    const getDuration = (name: string): string|undefined => {
       const result = results.find(r => r.name === name);
       if (!result) {
         return;
       }
-      return i18n.TimeUtilities.secondsToString(result.end - result.start, true);
-    }
+      return seconds(result.end - result.start);
+    };
 
     const labels = [
       {
         label: 'Queued at (timestamp)',
-        value: this.#calculator.formatValue(this.#request.issueTime(), 2),
+        value: seconds(this.#request.issueTime() - this.#calculator.zeroTime()),
       },
       {
         label: 'Started at (timestamp)',
-        value: this.#calculator.formatValue(this.#request.startTime, 2),
+        value: seconds(this.#request.startTime - this.#calculator.zeroTime()),
       },
       {
         label: 'Queueing (duration)',