chrome-devtools-frontend 1.0.1376716 → 1.0.1380117

package/config/gni/devtools_grd_files.gni

@@ -36,6 +36,7 @@ grd_files_release_sources = [
   "front_end/Images/align-self-end.svg",
   "front_end/Images/align-self-start.svg",
   "front_end/Images/align-self-stretch.svg",
+  "front_end/Images/animation.svg",
   "front_end/Images/arrow-back.svg",
   "front_end/Images/arrow-down.svg",
   "front_end/Images/arrow-drop-down-dark.svg",
@@ -54,6 +55,7 @@ grd_files_release_sources = [
   "front_end/Images/breakpoint-circle.svg",
   "front_end/Images/breakpoint-crossed-filled.svg",
   "front_end/Images/breakpoint-crossed.svg",
+  "front_end/Images/brush-2.svg",
   "front_end/Images/brush-filled.svg",
   "front_end/Images/brush.svg",
   "front_end/Images/bug.svg",
@@ -777,7 +779,9 @@ grd_files_debug_sources = [
   "front_end/core/host/Platform.js",
   "front_end/core/host/ResourceLoader.js",
   "front_end/core/host/UserMetrics.js",
+  "front_end/core/i18n/ByteUtilities.js",
   "front_end/core/i18n/DevToolsLocale.js",
+  "front_end/core/i18n/NumberFormatter.js",
   "front_end/core/i18n/i18nImpl.js",
   "front_end/core/i18n/i18nTypes.js",
   "front_end/core/i18n/locales.js",
@@ -1025,9 +1029,6 @@ grd_files_debug_sources = [
   "front_end/models/text_utils/TextRange.js",
   "front_end/models/text_utils/TextUtils.js",
   "front_end/models/text_utils/WasmDisassembly.js",
-  "front_end/models/timeline_model/TimelineJSProfile.js",
-  "front_end/models/timeline_model/TimelineModelFilter.js",
-  "front_end/models/timeline_model/TimelineProfileTree.js",
   "front_end/models/timeline_model/TracingLayerTree.js",
   "front_end/models/trace/LanternComputationData.js",
   "front_end/models/trace/ModelImpl.js",
@@ -1038,6 +1039,9 @@ grd_files_debug_sources = [
   "front_end/models/trace/extras/MainThreadActivity.js",
   "front_end/models/trace/extras/Metadata.js",
   "front_end/models/trace/extras/ThirdParties.js",
+  "front_end/models/trace/extras/TimelineJSProfile.js",
+  "front_end/models/trace/extras/TraceFilter.js",
+  "front_end/models/trace/extras/TraceTree.js",
   "front_end/models/trace/extras/URLForEntry.js",
   "front_end/models/trace/handlers/AnimationHandler.js",
   "front_end/models/trace/handlers/AuctionWorkletsHandler.js",
@@ -1075,16 +1079,17 @@ grd_files_debug_sources = [
   "front_end/models/trace/helpers/Timing.js",
   "front_end/models/trace/helpers/Trace.js",
   "front_end/models/trace/helpers/TreeHelpers.js",
+  "front_end/models/trace/insights/CLSCulprits.js",
   "front_end/models/trace/insights/Common.js",
-  "front_end/models/trace/insights/CumulativeLayoutShift.js",
   "front_end/models/trace/insights/DocumentLatency.js",
   "front_end/models/trace/insights/FontDisplay.js",
-  "front_end/models/trace/insights/InsightRunners.js",
   "front_end/models/trace/insights/InteractionToNextPaint.js",
-  "front_end/models/trace/insights/LargestContentfulPaint.js",
+  "front_end/models/trace/insights/LCPDiscovery.js",
+  "front_end/models/trace/insights/LCPPhases.js",
+  "front_end/models/trace/insights/Models.js",
   "front_end/models/trace/insights/RenderBlocking.js",
   "front_end/models/trace/insights/SlowCSSSelector.js",
-  "front_end/models/trace/insights/ThirdPartyWeb.js",
+  "front_end/models/trace/insights/ThirdParties.js",
   "front_end/models/trace/insights/Viewport.js",
   "front_end/models/trace/insights/types.js",
   "front_end/models/trace/lantern/core/LanternError.js",
@@ -1670,11 +1675,13 @@ grd_files_debug_sources = [
   "front_end/panels/search/searchResultsPane.css.js",
   "front_end/panels/search/searchView.css.js",
   "front_end/panels/security/CookieReportTreeElement.js",
+  "front_end/panels/security/CookieReportView.js",
   "front_end/panels/security/OriginTreeElement.js",
   "front_end/panels/security/SecurityModel.js",
   "front_end/panels/security/SecurityPanel.js",
   "front_end/panels/security/SecurityPanelSidebar.js",
   "front_end/panels/security/SecurityPanelSidebarTreeElement.js",
+  "front_end/panels/security/cookieReportView.css.js",
   "front_end/panels/security/lockIcon.css.js",
   "front_end/panels/security/mainView.css.js",
   "front_end/panels/security/originView.css.js",
@@ -2089,6 +2096,7 @@ grd_files_debug_sources = [
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/util/decorators.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/util/disposable.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/util/encoding.js",
+  "front_end/third_party/puppeteer/package/lib/esm/puppeteer/util/incremental-id-generator.js",
   "front_end/third_party/puppeteer/package/lib/esm/puppeteer/util/util.js",
   "front_end/third_party/puppeteer/package/lib/esm/third_party/mitt/mitt.js",
   "front_end/third_party/puppeteer/package/lib/esm/third_party/parsel-js/parsel-js.js",

package/config/gni/devtools_image_files.gni

@@ -43,6 +43,7 @@ devtools_svg_sources = [
   "align-self-end.svg",
   "align-self-start.svg",
   "align-self-stretch.svg",
+  "animation.svg",
   "arrow-back.svg",
   "arrow-down.svg",
   "arrow-drop-down-dark.svg",
@@ -61,6 +62,7 @@ devtools_svg_sources = [
   "breakpoint-circle.svg",
   "breakpoint-crossed-filled.svg",
   "breakpoint-crossed.svg",
+  "brush-2.svg",
   "brush-filled.svg",
   "brush.svg",
   "bug.svg",

package/front_end/Images/src/animation.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.5 18C6.75 18 6.04514 17.8646 5.38542 17.5938C4.72569 17.3229 4.13194 16.9236 3.60417 16.3958C3.07639 15.8681 2.67708 15.2743 2.40625 14.6146C2.13542 13.9549 2 13.25 2 12.5C2 11.4444 2.27083 10.4757 2.8125 9.59375C3.35417 8.71181 4.10417 8.03472 5.0625 7.5625C5.29861 7.04861 5.63542 6.57292 6.07292 6.13542C6.51042 5.69792 7.00694 5.34028 7.5625 5.0625C8.03472 4.11806 8.71181 3.37153 9.59375 2.82292C10.4757 2.27431 11.4444 2 12.5 2C13.25 2 13.9549 2.13542 14.6146 2.40625C15.2743 2.67708 15.8681 3.07639 16.3958 3.60417C16.9236 4.13194 17.3229 4.72569 17.5938 5.38542C17.8646 6.04514 18 6.75 18 7.5C18 8.56944 17.7326 9.53819 17.1979 10.4063C16.6632 11.2743 15.9097 11.9514 14.9375 12.4375C14.6736 12.9931 14.3229 13.4861 13.8854 13.9167C13.4479 14.3472 12.9653 14.6875 12.4375 14.9375C11.9514 15.8819 11.2674 16.6285 10.3854 17.1771C9.50347 17.7257 8.54167 18 7.5 18ZM7.5 16.5C7.95833 16.5 8.42014 16.4132 8.88542 16.2396C9.35069 16.066 9.76389 15.8194 10.125 15.5C9.36111 15.5278 8.63542 15.3993 7.94792 15.1146C7.26042 14.8299 6.64583 14.4167 6.10417 13.875C5.5625 13.3333 5.15278 12.7222 4.875 12.0417C4.59722 11.3611 4.47222 10.6389 4.5 9.875C4.18056 10.2361 3.93403 10.6493 3.76042 11.1146C3.58681 11.5799 3.5 12.0417 3.5 12.5C3.5 13.0417 3.59722 13.5486 3.79167 14.0208C3.98611 14.4931 4.27778 14.9236 4.66667 15.3125C5.05556 15.7014 5.48958 15.9965 5.96875 16.1979C6.44792 16.3993 6.95833 16.5 7.5 16.5ZM10 14C10.4722 14 10.9375 13.9132 11.3958 13.7396C11.8542 13.566 12.2708 13.3194 12.6458 13C11.8958 13.0278 11.1736 12.9028 10.4792 12.625C9.78472 12.3472 9.15972 11.9306 8.60417 11.375C8.04861 10.8194 7.63542 10.2049 7.36458 9.53125C7.09375 8.85764 6.97222 8.13889 7 7.375C6.68056 7.73611 6.43403 8.14236 6.26042 8.59375C6.08681 9.04514 6 9.51389 6 10C6 10.5417 6.09722 11.0486 6.29167 11.5208C6.48611 11.9931 6.77778 12.4236 7.16667 12.8125C7.55556 13.2014 7.98958 13.4965 8.46875 13.6979C8.94792 13.8993 9.45833 14 10 14ZM12.4375 11.4792C12.6736 11.4792 12.9063 11.4618 13.1354 11.4271C13.3646 11.3924 13.5764 11.3403 13.7708 11.2708C14.0208 10.5347 14.0625 9.80208 13.8958 9.07292C13.7292 8.34375 13.375 7.70833 12.8333 7.16667C12.2917 6.625 11.6563 6.27083 10.9271 6.10417C10.1979 5.9375 9.46528 5.97917 8.72917 6.22917C8.65972 6.42361 8.60764 6.63542 8.57292 6.86458C8.53819 7.09375 8.52083 7.32639 8.52083 7.5625C8.52083 8.07639 8.62153 8.56944 8.82292 9.04167C9.02431 9.51389 9.30556 9.93056 9.66667 10.2917C10.0417 10.6667 10.4722 10.9583 10.9583 11.1667C11.4444 11.375 11.9375 11.4792 12.4375 11.4792ZM15.5 10.125C15.8194 9.77778 16.066 9.375 16.2396 8.91667C16.4132 8.45833 16.5 7.98611 16.5 7.5C16.5 6.97222 16.3993 6.46528 16.1979 5.97917C15.9965 5.49306 15.7014 5.05556 15.3125 4.66667C14.9236 4.27778 14.4931 3.98611 14.0208 3.79167C13.5486 3.59722 13.0417 3.5 12.5 3.5C12.0278 3.5 11.566 3.58681 11.1146 3.76042C10.6632 3.93403 10.25 4.18056 9.875 4.5C10.6667 4.47222 11.3958 4.59375 12.0625 4.86458C12.7292 5.13542 13.3403 5.54861 13.8958 6.10417C14.4514 6.65972 14.8646 7.27083 15.1354 7.9375C15.4063 8.60417 15.5278 9.33333 15.5 10.125Z" fill="black"/>
+</svg>

package/front_end/Images/src/brush-2.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.14583 17.1042C4.52083 17.1042 3.93403 16.9618 3.38542 16.6771C2.83681 16.3924 2.375 16.0069 2 15.5208C2.43056 15.4931 2.79861 15.3333 3.10417 15.0417C3.40972 14.75 3.5625 14.3889 3.5625 13.9583C3.5625 13.2917 3.79271 12.7326 4.25312 12.2812C4.7134 11.8299 5.27243 11.6042 5.93021 11.6042C6.58785 11.6042 7.14236 11.8331 7.59375 12.2908C8.04514 12.7486 8.27083 13.3044 8.27083 13.9583C8.27083 14.8333 7.96875 15.5764 7.36458 16.1875C6.76042 16.7986 6.02083 17.1042 5.14583 17.1042ZM5.14583 15.7083C5.62708 15.7083 6.0391 15.5369 6.38187 15.1942C6.72451 14.8515 6.89583 14.4396 6.89583 13.9583C6.89583 13.6944 6.80208 13.4687 6.61458 13.2812C6.42708 13.0937 6.20139 13 5.9375 13C5.67361 13 5.44792 13.0937 5.26042 13.2812C5.07292 13.4687 4.97917 13.6944 4.97917 13.9583C4.97917 14.2639 4.94444 14.559 4.875 14.8437C4.80556 15.1285 4.67361 15.3819 4.47917 15.6042C4.59028 15.6319 4.70139 15.6562 4.8125 15.6771C4.92361 15.6979 5.03472 15.7083 5.14583 15.7083ZM10.0625 12.1667L7.9375 10.0417L14.5833 3.39583C14.7778 3.20139 15.0139 3.10416 15.2917 3.10416C15.5694 3.10416 15.8056 3.20139 16 3.39583L16.7083 4.10416C16.9028 4.30486 17 4.53909 17 4.80687C17 5.07451 16.9028 5.30555 16.7083 5.5L10.0625 12.1667Z" fill="black"/>
+</svg>

package/front_end/core/common/SettingRegistration.ts

@@ -302,7 +302,7 @@ export interface SettingRegistration {
  */
 export interface LearnMore {
   tooltip: () => Platform.UIString.LocalizedString;
-  url: Platform.DevToolsPath.UrlString;
+  url?: Platform.DevToolsPath.UrlString;
 }
 
 interface LocalizedSettingExtensionOption {

package/front_end/core/host/AidaClient.ts

@@ -16,6 +16,7 @@ export enum Entity {
 }
 
 export const enum Rating {
+  SENTIMENT_UNSPECIFIED = 'SENTIMENT_UNSPECIFIED',
   POSITIVE = 'POSITIVE',
   NEGATIVE = 'NEGATIVE',
 }

package/front_end/core/host/InspectorFrontendHost.ts

@@ -429,6 +429,10 @@ export class InspectorFrontendHostStub implements InspectorFrontendHostAPI {
       devToolsPrivacyUI: {
         enabled: false,
       },
+      devToolsEnableOriginBoundCookies: {
+        portBindingEnabled: false,
+        schemeBindingEnabled: false,
+      },
       isOffTheRecord: false,
     };
     if ('hostConfigForTesting' in globalThis) {

package/front_end/core/i18n/ByteUtilities.test.ts

@@ -0,0 +1,34 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {describeWithLocale} from '../../testing/EnvironmentHelpers.js';
+
+import * as i18n from './i18n.js';
+
+describeWithLocale('ByteUtilities', () => {
+  describe('bytesToString', () => {
+    it('formats for < 1000 bytes', () => {
+      assert.deepEqual(i18n.ByteUtilities.bytesToString(50), '50\xA0B');
+    });
+
+    it('formats for < 100 kilobytes', () => {
+      assert.deepEqual(i18n.ByteUtilities.bytesToString(5 * 1000), '5.0\xA0kB');
+    });
+
+    it('formats for < 1000 kilobytes', () => {
+      assert.deepEqual(i18n.ByteUtilities.bytesToString(500 * 1000), '500\xA0kB');
+    });
+
+    it('formats for < 100 megabytes', () => {
+      const oneAndAHalfMegabytes = 1500 * 1000;
+      assert.deepEqual(i18n.ByteUtilities.bytesToString(oneAndAHalfMegabytes), '1.5\xA0MB');
+    });
+
+    it('formats for > 100 megabytes', () => {
+      const oneMegabyte = 1000 * 1000;
+      const twoHundredAndTenMegabytes = oneMegabyte * 210;
+      assert.deepEqual(i18n.ByteUtilities.bytesToString(twoHundredAndTenMegabytes), '210\xA0MB');
+    });
+  });
+});

package/front_end/core/i18n/ByteUtilities.ts

@@ -0,0 +1,65 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {defineFormatter} from './NumberFormatter.js';
+
+const narrowBytes = defineFormatter({
+  style: 'unit',
+  unit: 'byte',
+  unitDisplay: 'narrow',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const narrowKilobytesDecimal = defineFormatter({
+  style: 'unit',
+  unit: 'kilobyte',
+  unitDisplay: 'narrow',
+  minimumFractionDigits: 1,
+  maximumFractionDigits: 1,
+});
+
+const narrowKilobytesInteger = defineFormatter({
+  style: 'unit',
+  unit: 'kilobyte',
+  unitDisplay: 'narrow',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const narrowMegabytesDecimal = defineFormatter({
+  style: 'unit',
+  unit: 'megabyte',
+  unitDisplay: 'narrow',
+  minimumFractionDigits: 1,
+  maximumFractionDigits: 1,
+});
+
+const narrowMegabytesInteger = defineFormatter({
+  style: 'unit',
+  unit: 'megabyte',
+  unitDisplay: 'narrow',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+export const bytesToString = (bytes: number): string => {
+  if (bytes < 1000) {
+    return narrowBytes.format(bytes);
+  }
+
+  const kilobytes = bytes / 1000;
+  if (kilobytes < 100) {
+    return narrowKilobytesDecimal.format(kilobytes);
+  }
+  if (kilobytes < 1000) {
+    return narrowKilobytesInteger.format(kilobytes);
+  }
+
+  const megabytes = kilobytes / 1000;
+  if (megabytes < 100) {
+    return narrowMegabytesDecimal.format(megabytes);
+  }
+  return narrowMegabytesInteger.format(megabytes);
+};

package/front_end/core/i18n/NumberFormatter.ts

@@ -0,0 +1,75 @@
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {DevToolsLocale} from './DevToolsLocale.js';
+
+export interface NumberFormatter {
+  format(value: number): string;
+  formatToParts(value: number): Intl.NumberFormatPart[];
+}
+
+/**
+ * Creates an instance of NumberFormatter.
+ *
+ * Safe to call in top-level of a module, since the creation of Intl.NumberFormat is deferred
+ * until first usage.
+ */
+export function defineFormatter(options: Intl.NumberFormatOptions): NumberFormatter {
+  let intlNumberFormat: Intl.NumberFormat;
+
+  return {
+    format(value) {
+      if (!intlNumberFormat) {
+        intlNumberFormat = new Intl.NumberFormat(DevToolsLocale.instance().locale, options);
+      }
+      return formatAndEnsureSpace(intlNumberFormat, value);
+    },
+    formatToParts(value) {
+      if (!intlNumberFormat) {
+        intlNumberFormat = new Intl.NumberFormat(DevToolsLocale.instance().locale, options);
+      }
+      return intlNumberFormat.formatToParts(value);
+    },
+  };
+}
+
+/**
+ * When using 'narrow' unitDisplay, many locales exclude the space between the literal and the unit.
+ * We don't like that, so when there is no space literal we inject an nbsp manually.
+ */
+function formatAndEnsureSpace(formatter: Intl.NumberFormat, value: number): string {
+  const parts = formatter.formatToParts(value);
+
+  let hasSpace = false;
+  for (const part of parts) {
+    if (part.type === 'literal') {
+      if (part.value === ' ') {
+        hasSpace = true;
+        part.value = '\xA0';
+      } else if (part.value === '\xA0') {
+        hasSpace = true;
+      }
+    }
+  }
+
+  if (hasSpace) {
+    return parts.map(part => part.value).join('');
+  }
+
+  const unitIndex = parts.findIndex(part => part.type === 'unit');
+
+  // Unexpected for there to be no unit, but just in case, handle that.
+  if (unitIndex === -1) {
+    return parts.map(part => part.value).join('');
+  }
+
+  // For locales where the unit comes first (sw), the space has to come after the unit.
+  if (unitIndex === 0) {
+    return parts[0].value + '\xA0' + parts.slice(1).map(part => part.value).join('');
+  }
+
+  // Otherwise, it comes before.
+  return parts.slice(0, unitIndex).map(part => part.value).join('') + '\xA0' +
+      parts.slice(unitIndex).map(part => part.value).join('');
+}

package/front_end/core/i18n/i18n.ts

@@ -2,12 +2,16 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as ByteUtilities from './ByteUtilities.js';
 import * as DevToolsLocale from './DevToolsLocale.js';
 import * as i18n from './i18nImpl.js';
+import * as NumberFormatter from './NumberFormatter.js';
 import * as TimeUtilities from './time-utilities.js';
 
 export {
+  ByteUtilities,
   DevToolsLocale,
   i18n,
+  NumberFormatter,
   TimeUtilities,
 };

package/front_end/core/i18n/time-utilities.test.ts

@@ -14,12 +14,30 @@ describeWithLocale('preciseMillisToString', () => {
     assert.strictEqual(outputString, '8\xA0ms');
   });
 
-  it('formats without a given precision', () => {
+  it('formats big number without a given precision', () => {
+    const inputNumber = 723123;
+    const outputString = i18n.TimeUtilities.preciseMillisToString(inputNumber);
+    assert.strictEqual(outputString, '723,123\xA0ms');
+  });
+
+  it('formats with a given precision', () => {
     const inputNumber = 7.84;
     const precision = 2;
     const outputString = i18n.TimeUtilities.preciseMillisToString(inputNumber, precision);
     assert.strictEqual(outputString, '7.84\xA0ms');
   });
+
+  it('formats with a given precision, rounding as expected', () => {
+    assert.strictEqual(i18n.TimeUtilities.preciseMillisToString(5.55555, 2), '5.56\xA0ms');
+    assert.strictEqual(i18n.TimeUtilities.preciseMillisToString(-5.55555, 2), '-5.56\xA0ms');
+    assert.strictEqual(i18n.TimeUtilities.preciseMillisToString(5.555, 2), '5.56\xA0ms');
+    assert.strictEqual(i18n.TimeUtilities.preciseMillisToString(-5.55, 2), '-5.55\xA0ms');  // ties break towards zero!
+    assert.strictEqual(i18n.TimeUtilities.preciseMillisToString(9.99999, 1), '10.0\xA0ms');
+    assert.strictEqual(i18n.TimeUtilities.preciseMillisToString(9.95, 1), '10.0\xA0ms');
+    assert.strictEqual(i18n.TimeUtilities.preciseMillisToString(9.94, 1), '9.9\xA0ms');
+    assert.strictEqual(i18n.TimeUtilities.preciseMillisToString(1.001, 1), '1.0\xA0ms');
+    assert.strictEqual(i18n.TimeUtilities.preciseMillisToString(1.001, 0), '1\xA0ms');
+  });
 });
 
 describeWithLocale('formatMicroSecondsTime', () => {
@@ -121,7 +139,7 @@ describeWithLocale('millisToString', () => {
   it('formats less than 24 hours', () => {
     const inputNumber = 20000000;
     const outputString = i18n.TimeUtilities.millisToString(inputNumber);
-    assert.strictEqual(outputString, '5.6\xA0hrs');
+    assert.strictEqual(outputString, '5.6\xA0hr');
   });
 
   it('formats days', () => {

package/front_end/core/i18n/time-utilities.ts

@@ -2,128 +2,167 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+/**
+ * @fileoverview Uses Intl.NumberFormat.
+ * @see go/cpq:i18n-units-design
+ */
+
 import * as Platform from '../platform/platform.js';
 
-import {getLocalizedString, registerUIStrings} from './i18nImpl.js';
-
-const UIStrings = {
-  /**
-   *@description μs is the short form of micro-seconds and the placeholder is a number
-   * The shortest form or abbreviation of micro-seconds should be used, as there is
-   * limited room in this UI.
-   *@example {2} PH1
-   */
-  fmms: '{PH1} μs',
-  /**
-   *@description ms is the short form of milli-seconds and the placeholder is a decimal number
-   * The shortest form or abbreviation of milli-seconds should be used, as there is
-   * limited room in this UI.
-   *@example {2.14} PH1
-   */
-  fms: '{PH1} ms',
-  /**
-   *@description s is short for seconds and the placeholder is a decimal number
-   * The shortest form or abbreviation of seconds should be used, as there is
-   * limited room in this UI.
-   *@example {2.14} PH1
-   */
-  fs: '{PH1} s',
-  /**
-   *@description min is short for minutes and the placeholder is a decimal number
-   *@example {2.2} PH1
-   */
-  fmin: '{PH1} min',
-  /**
-   *@description hrs is short for hours and the placeholder is a decimal number
-   *@example {2.2} PH1
-   */
-  fhrs: '{PH1} hrs',
-  /**
-   *@description days formatting and the placeholder is a decimal number
-   *@example {2.2} PH1
-   */
-  fdays: '{PH1} days',
-
-  /**
-   *@description describes a number of milliseconds (the unit should not abbreviated)
-   *@example {2.14} PH1
-   */
-  fmsExpanded: '{PH1} milliseconds',
-};
-
-const str_ = registerUIStrings('core/i18n/time-utilities.ts', UIStrings);
-const i18nString = getLocalizedString.bind(undefined, str_);
-
-export const preciseMillisToString = function(ms: number, precision?: number): string {
-  precision = precision || 0;
-  return i18nString(UIStrings.fms, {PH1: ms.toFixed(precision)});
-};
-
-export function formatMicroSecondsTime(
-    time: Platform.Timing.MicroSeconds,
-    ): string {
+import {defineFormatter, type NumberFormatter} from './NumberFormatter.js';
+
+const narrowMillisecondsInteger = defineFormatter({
+  style: 'unit',
+  unit: 'millisecond',
+  unitDisplay: 'narrow',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const longMilliseconds = defineFormatter({
+  style: 'unit',
+  unit: 'millisecond',
+  unitDisplay: 'long',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const narrowMicrosecondsInteger = defineFormatter({
+  style: 'unit',
+  unit: 'microsecond',
+  unitDisplay: 'narrow',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 0,
+});
+
+const narrowMillisecondsDecimal = defineFormatter({
+  style: 'unit',
+  unit: 'millisecond',
+  unitDisplay: 'narrow',
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+});
+
+const narrowSecondsDecimal = defineFormatter({
+  style: 'unit',
+  unit: 'second',
+  unitDisplay: 'narrow',
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+});
+
+const shortMinutesDecimal = defineFormatter({
+  style: 'unit',
+  unit: 'minute',
+  unitDisplay: 'short',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 1,
+});
+
+const shortHoursDecimal = defineFormatter({
+  style: 'unit',
+  unit: 'hour',
+  unitDisplay: 'short',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 1,
+});
+
+const longDaysDecimal = defineFormatter({
+  style: 'unit',
+  unit: 'day',
+  unitDisplay: 'long',
+  minimumFractionDigits: 0,
+  maximumFractionDigits: 1,
+});
+
+export function formatMicroSecondsTime(time: Platform.Timing.MicroSeconds): string {
   return millisToString(Platform.Timing.microSecondsToMilliSeconds(time), true);
 }
 
-export function formatMicroSecondsAsMillisFixed(time: Platform.Timing.MicroSeconds, fractionDigits = 0): string {
-  const milliseconds = Platform.Timing.microSecondsToMilliSeconds(
-      time,
-  );
-  return i18nString(UIStrings.fms, {PH1: milliseconds.toFixed(fractionDigits)});
-}
-export function formatMicroSecondsAsMillisFixedExpanded(
-    time: Platform.Timing.MicroSeconds, fractionDigits = 0): string {
-  const milliseconds = Platform.Timing.microSecondsToMilliSeconds(
-      time,
-  );
-  return i18nString(UIStrings.fmsExpanded, {PH1: milliseconds.toFixed(fractionDigits)});
+export function formatMicroSecondsAsSeconds(time: Platform.Timing.MicroSeconds): string {
+  const milliseconds = Platform.Timing.microSecondsToMilliSeconds(time);
+  const seconds = Platform.Timing.milliSecondsToSeconds(milliseconds);
+  return narrowSecondsDecimal.format(seconds);
 }
 
-export function formatMicroSecondsAsSeconds(time: Platform.Timing.MicroSeconds): string {
-  const milliseconds = Platform.Timing.microSecondsToMilliSeconds(
-      time,
-  );
+export function formatPartsMicroSecondsAsSeconds(time: Platform.Timing.MicroSeconds): Intl.NumberFormatPart[] {
+  const milliseconds = Platform.Timing.microSecondsToMilliSeconds(time);
   const seconds = Platform.Timing.milliSecondsToSeconds(milliseconds);
-  return i18nString(UIStrings.fs, {PH1: (seconds).toFixed(2)});
+  return narrowSecondsDecimal.formatToParts(seconds);
+}
+
+export function formatMicroSecondsAsMillisFixed(time: Platform.Timing.MicroSeconds): string {
+  const milliseconds = Platform.Timing.microSecondsToMilliSeconds(time);
+  return narrowMillisecondsInteger.format(milliseconds);
+}
+
+export function formatPartsMicroSecondsAsMillisFixed(time: Platform.Timing.MicroSeconds): Intl.NumberFormatPart[] {
+  const milliseconds = Platform.Timing.microSecondsToMilliSeconds(time);
+  return narrowMillisecondsInteger.formatToParts(milliseconds);
+}
+
+export function formatMicroSecondsAsMillisFixedExpanded(time: Platform.Timing.MicroSeconds): string {
+  const milliseconds = Platform.Timing.microSecondsToMilliSeconds(time);
+  return longMilliseconds.format(milliseconds);
 }
 
-export const millisToString = function(ms: number, higherResolution?: boolean): string {
+/**
+ * @param higherResolution if true, the output may show as microsends or as milliseconds with a fractional component
+ */
+export function millisToString(ms: number, higherResolution?: boolean): string {
   if (!isFinite(ms)) {
     return '-';
   }
 
   if (higherResolution && ms < 0.1) {
-    return i18nString(UIStrings.fmms, {PH1: (ms * 1000).toFixed(0)});
+    return narrowMicrosecondsInteger.format(ms * 1000);
   }
   if (higherResolution && ms < 1000) {
-    return i18nString(UIStrings.fms, {PH1: (ms).toFixed(2)});
+    return narrowMillisecondsDecimal.format(ms);
   }
   if (ms < 1000) {
-    return i18nString(UIStrings.fms, {PH1: (ms).toFixed(0)});
+    return narrowMillisecondsInteger.format(ms);
   }
 
   const seconds = ms / 1000;
   if (seconds < 60) {
-    return i18nString(UIStrings.fs, {PH1: (seconds).toFixed(2)});
+    return narrowSecondsDecimal.format(seconds);
   }
 
   const minutes = seconds / 60;
   if (minutes < 60) {
-    return i18nString(UIStrings.fmin, {PH1: (minutes).toFixed(1)});
+    return shortMinutesDecimal.format(minutes);
   }
 
   const hours = minutes / 60;
   if (hours < 24) {
-    return i18nString(UIStrings.fhrs, {PH1: (hours).toFixed(1)});
+    return shortHoursDecimal.format(hours);
   }
 
   const days = hours / 24;
-  return i18nString(UIStrings.fdays, {PH1: (days).toFixed(1)});
-};
+  return longDaysDecimal.format(days);
+}
 
-export const secondsToString = function(seconds: number, higherResolution?: boolean): string {
+const preciseMillisToStringFormattersCache = new Map<number, NumberFormatter>();
+
+export function preciseMillisToString(ms: number, precision = 0): string {
+  let formatter = preciseMillisToStringFormattersCache.get(precision);
+  if (!formatter) {
+    formatter = defineFormatter({
+      style: 'unit',
+      unit: 'millisecond',
+      unitDisplay: 'narrow',
+      minimumFractionDigits: precision,
+      maximumFractionDigits: precision,
+    });
+    preciseMillisToStringFormattersCache.set(precision, formatter);
+  }
+  return formatter.format(ms);
+}
+
+export function secondsToString(seconds: number, higherResolution?: boolean): string {
   if (!isFinite(seconds)) {
     return '-';
   }
   return millisToString(seconds * 1000, higherResolution);
-};
+}