chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

package/front_end/panels/timeline/components/SidebarInsightsTab.ts

@@ -2,18 +2,41 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import './SidebarSingleInsightSet.js';
+
+import * as Host from '../../../core/host/host.js';
+import * as i18n from '../../../core/i18n/i18n.js';
+import type * as Platform from '../../../core/platform/platform.js';
 import * as Trace from '../../../models/trace/trace.js';
+import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
-import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
+import * as Utils from '../utils/utils.js';
 
 import * as Insights from './insights/insights.js';
-import {type ActiveInsight} from './Sidebar.js';
+import type {ActiveInsight} from './Sidebar.js';
 import styles from './sidebarInsightsTab.css.js';
-import {SidebarSingleInsightSet, type SidebarSingleInsightSetData} from './SidebarSingleInsightSet.js';
+import type {SidebarSingleInsightSetData} from './SidebarSingleInsightSet.js';
+
+const {html} = LitHtml;
+
+const FEEDBACK_URL = 'https://crbug.com/371170842' as Platform.DevToolsPath.UrlString;
+
+const UIStrings = {
+  /**
+   *@description text show in feedback button
+   */
+  feedbackButton: 'Feedback',
+  /**
+   *@description text show in feedback tooltip
+   */
+  feedbackTooltip: 'Insights is an experimental feature. Your feedback will help us improve it.',
+};
+
+const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/SidebarInsightsTab.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class SidebarInsightsTab extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-performance-sidebar-insights`;
   readonly #boundRender = this.#render.bind(this);
   readonly #shadow = this.attachShadow({mode: 'open'});
 
@@ -33,6 +56,8 @@ export class SidebarInsightsTab extends HTMLElement {
     this.#shadow.adoptedStyleSheets = [styles];
   }
 
+  // TODO(paulirish): add back a disconnectedCallback() to avoid memory leaks that doesn't cause b/372943062
+
   set parsedTrace(data: Trace.Handlers.Types.ParsedTrace|null) {
     if (data === this.#parsedTrace) {
       return;
@@ -73,22 +98,24 @@ export class SidebarInsightsTab extends HTMLElement {
       return;
     }
     this.#activeInsight = active;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
-  }
 
-  #onCategoryDropdownChange(event: Event): void {
-    const target = event.target as HTMLOptionElement;
-    const value = target.value as Insights.Types.Category;
-    this.#selectedCategory = value;
+    // Only update the insightSetKey if there is an active insight. Otherwise, closing an insight
+    // would also collapse the insight set. Usually the proper insight set is already set because
+    // the user has it open already in order for this setter to be called, but insights can also
+    // be activated by clicking on a insight chip in the Summary panel, which may require opening
+    // a different insight set.
+    if (this.#activeInsight) {
+      this.#insightSetKey = this.#activeInsight.insightSetKey;
+    }
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
   }
 
-  #insightSetClicked(id: string): void {
+  #insightSetToggled(id: string): void {
+    this.#insightSetKey = this.#insightSetKey === id ? null : id;
     // Update the active insight set.
-    if (id !== this.#activeInsight?.insightSetKey) {
+    if (this.#insightSetKey !== this.#activeInsight?.insightSetKey) {
       this.dispatchEvent(new Insights.SidebarInsight.InsightDeactivated());
     }
-    this.#insightSetKey = id;
     void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
   }
 
@@ -101,7 +128,10 @@ export class SidebarInsightsTab extends HTMLElement {
     this.dispatchEvent(new Insights.SidebarInsight.InsightSetHovered());
   }
 
-  // TODO(crbug.com/368170718): use a shorter label for each insight set/url when possible.
+  #onFeedbackClick(): void {
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(FEEDBACK_URL);
+  }
+
   #render(): void {
     if (!this.#parsedTrace || !this.#insights) {
       LitHtml.render(LitHtml.nothing, this.#shadow, {host: this});
@@ -109,24 +139,13 @@ export class SidebarInsightsTab extends HTMLElement {
     }
 
     const hasMultipleInsightSets = this.#insights.size > 1;
+    const labels = Utils.Helpers.createUrlLabels([...this.#insights.values()].map(({url}) => url));
 
-    // clang-format off
-    const html = LitHtml.html`
-      <select class="chrome-select insights-category-select"
-        @change=${this.#onCategoryDropdownChange}
-        jslog=${VisualLogging.dropDown('timeline.sidebar-insights-category-select').track({click: true})}
-      >
-        ${Object.values(Insights.Types.Category).map(insightsCategory => {
-          return LitHtml.html`
-            <option value=${insightsCategory}>
-              ${insightsCategory}
-            </option>
-          `;
-        })}
-      </select>
-
+    const contents =
+        // clang-format off
+     html`
       <div class="insight-sets-wrapper">
-        ${[...this.#insights.values()].map(({id, label}) => {
+        ${[...this.#insights.values()].map(({id, url}, index) => {
           const data = {
             parsedTrace: this.#parsedTrace,
             insights: this.#insights,
@@ -135,21 +154,22 @@ export class SidebarInsightsTab extends HTMLElement {
             activeInsight: this.#activeInsight,
           };
 
-          const contents = LitHtml.html`
-            <${SidebarSingleInsightSet.litTagName}
+          const contents = html`
+            <devtools-performance-sidebar-single-navigation
               .data=${data as SidebarSingleInsightSetData}>
-            </${SidebarSingleInsightSet.litTagName}>
+            </devtools-performance-sidebar-single-navigation>
           `;
 
           if (hasMultipleInsightSets) {
-            return LitHtml.html`<details
+            return html`<details
               ?open=${id === this.#insightSetKey}
             >
               <summary
-                @click=${() => this.#insightSetClicked(id)}
+                @click=${() => this.#insightSetToggled(id)}
                 @mouseenter=${() => this.#insightSetHovered(id)}
                 @mouseleave=${() => this.#insightSetUnhovered()}
-                >${label}</summary>
+                title=${url.href}
+                >${labels[index]}</summary>
               ${contents}
             </details>`;
           }
@@ -157,9 +177,22 @@ export class SidebarInsightsTab extends HTMLElement {
           return contents;
         })}
       </div>
+
+      <div class="feedback-wrapper">
+        <devtools-button .variant=${Buttons.Button.Variant.OUTLINED} .iconName=${'experiment'} @click=${this.#onFeedbackClick}>
+          ${i18nString(UIStrings.feedbackButton)}
+        </devtools-button>
+
+        <p class="tooltip">${i18nString(UIStrings.feedbackTooltip)}</p>
+      </div>
     `;
     // clang-format on
-    LitHtml.render(LitHtml.html`${html}`, this.#shadow, {host: this});
+
+    // Insight components contain state, so to prevent insights from previous trace loads breaking things we use the parsedTrace
+    // as a render key.
+    // Note: newer Lit has `keyed`, but we don't have that, so we do it manually. https://lit.dev/docs/templates/directives/#keyed
+    const result = LitHtml.Directives.repeat([contents], () => this.#parsedTrace, template => template);
+    LitHtml.render(result, this.#shadow, {host: this});
   }
 }
 

package/front_end/panels/timeline/components/SidebarSingleInsightSet.test.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Root from '../../../core/root/root.js';
 import {getCleanTextContentFromElements, renderElementIntoDOM} from '../../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
 import {TraceLoader} from '../../../testing/TraceLoader.js';
@@ -9,6 +10,7 @@ import * as Coordinator from '../../../ui/components/render_coordinator/render_c
 
 import * as Components from './components.js';
 import * as InsightComponents from './insights/insights.js';
+
 const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 function getUserVisibleInsights(component: Components.SidebarSingleInsightSet.SidebarSingleInsightSet):
@@ -63,7 +65,7 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
     await coordinator.done();
 
     const userVisibleTitles = getUserVisibleInsights(component).flatMap(component => {
-      return getCleanTextContentFromElements(component.shadowRoot!, 'header');
+      return getCleanTextContentFromElements(component.shadowRoot!, '.insight-title');
     });
     assert.deepEqual(userVisibleTitles, [
       'LCP by phase',
@@ -74,6 +76,62 @@ describeWithEnvironment('SidebarSingleInsightSet', () => {
     ]);
   });
 
+  it('does not render experimental insights by default', async function() {
+    const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'font-display.json.gz');
+    const component = new Components.SidebarSingleInsightSet.SidebarSingleInsightSet();
+    renderElementIntoDOM(component);
+    const firstNavigation = parsedTrace.Meta.mainFrameNavigations.at(0)?.args.data?.navigationId;
+    assert.isOk(firstNavigation);
+    component.data = {
+      parsedTrace,
+      insights,
+      insightSetKey: firstNavigation,
+      activeCategory: InsightComponents.Types.Category.ALL,
+      activeInsight: null,
+    };
+    await coordinator.done();
+    const userVisibleTitles = getUserVisibleInsights(component).flatMap(component => {
+      return getCleanTextContentFromElements(component.shadowRoot!, '.insight-title');
+    });
+    // Does not include "font display", which is experimental.
+    assert.deepEqual(userVisibleTitles, [
+      'LCP by phase',
+      'Layout shift culprits',
+      'Document request latency',
+      'Third parties',
+    ]);
+  });
+
+  it('renders experimental insights if the experiment is turned on', async function() {
+    const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'font-display.json.gz');
+    const component = new Components.SidebarSingleInsightSet.SidebarSingleInsightSet();
+    Root.Runtime.experiments.enableForTest(
+        Root.Runtime.ExperimentName.TIMELINE_EXPERIMENTAL_INSIGHTS,
+    );
+    renderElementIntoDOM(component);
+    const firstNavigation = parsedTrace.Meta.mainFrameNavigations.at(0)?.args.data?.navigationId;
+    assert.isOk(firstNavigation);
+    component.data = {
+      parsedTrace,
+      insights,
+      insightSetKey: firstNavigation,
+      activeCategory: InsightComponents.Types.Category.ALL,
+      activeInsight: null,
+    };
+    await coordinator.done();
+    const userVisibleTitles = getUserVisibleInsights(component).flatMap(component => {
+      return getCleanTextContentFromElements(component.shadowRoot!, '.insight-title');
+    });
+    // Does not include "font display", which is experimental.
+    assert.deepEqual(userVisibleTitles, [
+      'LCP by phase',
+      'Layout shift culprits',
+      'Document request latency',
+      'Font display',
+      'Third parties',
+    ]);
+  });
+
   it('will render the active insight fully', async function() {
     const {parsedTrace, insights} = await TraceLoader.traceEngine(this, 'web-dev-with-commit.json.gz');
 

package/front_end/panels/timeline/components/SidebarSingleInsightSet.ts

@@ -3,24 +3,66 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../../core/i18n/i18n.js';
+import * as Root from '../../../core/root/root.js';
 import * as Trace from '../../../models/trace/trace.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
 import * as Insights from './insights/insights.js';
-import {type ActiveInsight} from './Sidebar.js';
+import type {ActiveInsight} from './Sidebar.js';
 import styles from './sidebarSingleInsightSet.css.js';
+import {NumberWithUnit, type NumberWithUnitString} from './Utils.js';
+
+const {html} = LitHtml;
+
+const UIStrings = {
+  /**
+   *@description title used for a metric value to tell the user about its score classification
+   *@example {INP} PH1
+   *@example {1.2s} PH2
+   *@example {poor} PH3
+   */
+  metricScore: '{PH1}: {PH2} {PH3} score',
+};
+const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/SidebarSingleInsightSet.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export interface SidebarSingleInsightSetData {
   parsedTrace: Trace.Handlers.Types.ParsedTrace|null;
   insights: Trace.Insights.Types.TraceInsightSets|null;
-  insightSetKey: string|null;
+  insightSetKey: Trace.Types.Events.NavigationId|null;
   activeCategory: Insights.Types.Category;
   activeInsight: ActiveInsight|null;
 }
 
+/**
+ * These are WIP Insights that are only shown if the user has turned on the
+ * "enable experimental performance insights" experiment. This is used to enable
+ * us to ship incrementally without turning insights on by default for all
+ * users. */
+const EXPERIMENTAL_INSIGHTS: ReadonlySet<typeof Insights.Helpers.BaseInsight> = new Set([
+  Insights.FontDisplay.FontDisplay,
+]);
+
+/**
+ * Every insight (INCLUDING experimental ones)
+ * The order of this array is the order the insights will be shown in the sidebar.
+ * TODO(crbug.com/368135130): sort this in a smart way!
+ */
+const ALL_INSIGHTS: typeof Insights.Helpers.BaseInsight[] = [
+  Insights.InteractionToNextPaint.InteractionToNextPaint,
+  Insights.LCPPhases.LCPPhases,
+  Insights.LCPDiscovery.LCPDiscovery,
+  Insights.CLSCulprits.CLSCulprits,
+  Insights.RenderBlocking.RenderBlockingRequests,
+  Insights.DocumentLatency.DocumentLatency,
+  Insights.FontDisplay.FontDisplay,
+  Insights.Viewport.Viewport,
+  Insights.ThirdParties.ThirdParties,
+  Insights.SlowCSSSelector.SlowCSSSelector,
+] as const;
+
 export class SidebarSingleInsightSet extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-performance-sidebar-single-navigation`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #renderBound = this.#render.bind(this);
 
@@ -49,19 +91,33 @@ export class SidebarSingleInsightSet extends HTMLElement {
   }
 
   #onClickMetric(traceEvent: Trace.Types.Events.Event): void {
-    this.dispatchEvent(new Insights.Helpers.EventReferenceClick(traceEvent));
+    this.dispatchEvent(new Insights.EventRef.EventReferenceClick(traceEvent));
   }
 
   #renderMetricValue(
-      label: 'LCP'|'CLS'|'INP', value: string,
+      label: 'LCP'|'CLS'|'INP', value: string|NumberWithUnitString,
       classification: Trace.Handlers.ModelHandlers.PageLoadMetrics.ScoreClassification,
       eventToSelectOnClick: Trace.Types.Events.Event|null): LitHtml.LitTemplate {
+    const valueText = typeof value === 'string' ? value : value.text;
+    const valueDisplay = typeof value === 'string' ? value : value.element;
+
+    // NOTE: it is deliberate to use the same value for the title and
+    // aria-label; the aria-label is used to give more context to
+    // screen-readers, and the title is to aid users who may not know what
+    // the red/orange/green classification is, or those who are unable to
+    // easily distinguish the visual colour differences.
     // clang-format off
-    return this.#metricIsVisible(label) ? LitHtml.html`
-      <div class="metric" @click=${eventToSelectOnClick ? this.#onClickMetric.bind(this, eventToSelectOnClick) : null}>
-        <div class="metric-value metric-value-${classification}">${value}</div>
+    const title = i18nString(UIStrings.metricScore, {PH1: label, PH2: valueText, PH3: classification});
+
+    return this.#metricIsVisible(label) ? html`
+      <button class="metric"
+        @click=${eventToSelectOnClick ? this.#onClickMetric.bind(this, eventToSelectOnClick) : null}
+        title=${title}
+        aria-label=${title}
+      >
+        <div class="metric-value metric-value-${classification}">${valueDisplay}</div>
         <div class="metric-label">${label}</div>
-      </div>
+      </button>
     ` : LitHtml.nothing;
     // clang-format on
   }
@@ -114,50 +170,50 @@ export class SidebarSingleInsightSet extends HTMLElement {
     const cls = this.#getCLS(insightSetKey);
     const inp = this.#getINP(insightSetKey);
 
-    return LitHtml.html`
+    return html`
     <div class="metrics-row">
     ${
         lcp ? this.#renderMetricValue(
-                  'LCP', i18n.TimeUtilities.formatMicroSecondsAsSeconds(lcp.value),
+                  'LCP', NumberWithUnit.formatMicroSecondsAsSeconds(lcp.value),
                   Trace.Handlers.ModelHandlers.PageLoadMetrics.scoreClassificationForLargestContentfulPaint(lcp.value),
                   lcp.event ?? null) :
               LitHtml.nothing}
-    ${
-        this.#renderMetricValue(
-            'CLS', cls.value.toFixed(2),
-            Trace.Handlers.ModelHandlers.LayoutShifts.scoreClassificationForLayoutShift(cls.value),
-            cls.worstShiftEvent)}
     ${
         inp ? this.#renderMetricValue(
-                  'INP', i18n.TimeUtilities.formatMicroSecondsAsMillisFixed(inp.value),
+                  'INP', NumberWithUnit.formatMicroSecondsAsMillisFixed(inp.value),
                   Trace.Handlers.ModelHandlers.UserInteractions.scoreClassificationForInteractionToNextPaint(inp.value),
                   inp.event) :
               LitHtml.nothing}
+    ${
+        this.#renderMetricValue(
+            'CLS', cls.value ? cls.value.toFixed(2) : '0',
+            Trace.Handlers.ModelHandlers.LayoutShifts.scoreClassificationForLayoutShift(cls.value),
+            cls.worstShiftEvent)}
     </div>
     `;
   }
 
+  #insightsForRendering(): typeof Insights.Helpers.BaseInsight[] {
+    const includeExperimental = Root.Runtime.experiments.isEnabled(
+        Root.Runtime.ExperimentName.TIMELINE_EXPERIMENTAL_INSIGHTS,
+    );
+
+    if (includeExperimental) {
+      return ALL_INSIGHTS;
+    }
+
+    return ALL_INSIGHTS.filter(insight => !EXPERIMENTAL_INSIGHTS.has(insight));
+  }
+
   #renderInsights(
       insights: Trace.Insights.Types.TraceInsightSets|null,
       parsedTrace: Trace.Handlers.Types.ParsedTrace|null,
       insightSetKey: string,
       ): LitHtml.TemplateResult {
-    // TODO(crbug.com/368135130): sort this in a smart way!
-    const insightComponents = [
-      Insights.InteractionToNextPaint.InteractionToNextPaint,
-      Insights.LCPPhases.LCPPhases,
-      Insights.LCPDiscovery.LCPDiscovery,
-      Insights.CLSCulprits.CLSCulprits,
-      Insights.RenderBlocking.RenderBlockingRequests,
-      Insights.DocumentLatency.DocumentLatency,
-      Insights.FontDisplay.FontDisplay,
-      Insights.Viewport.Viewport,
-      Insights.ThirdParties.ThirdParties,
-      Insights.SlowCSSSelector.SlowCSSSelector,
-    ];
+    const insightComponents = this.#insightsForRendering();
     // clang-format off
-    return LitHtml.html`${insightComponents.map(component => {
-      return LitHtml.html`<div data-single-insight-wrapper>
+    return html`${insightComponents.map(component => {
+      return html`<div data-single-insight-wrapper>
         <${component.litTagName}
           .insights=${insights}
           .parsedTrace=${parsedTrace}
@@ -177,12 +233,12 @@ export class SidebarSingleInsightSet extends HTMLElement {
       insightSetKey,
     } = this.#data;
     if (!parsedTrace || !insights || !insightSetKey) {
-      LitHtml.render(LitHtml.html``, this.#shadow, {host: this});
+      LitHtml.render(html``, this.#shadow, {host: this});
       return;
     }
 
     // clang-format off
-    LitHtml.render(LitHtml.html`
+    LitHtml.render(html`
       <div class="navigation">
         ${this.#renderMetrics(insightSetKey)}
         ${this.#renderInsights(insights, parsedTrace, insightSetKey)}

package/front_end/panels/timeline/components/Utils.test.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 type * as Trace from '../../../models/trace/trace.js';
+import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
+
+import * as Utils from './Utils.js';
+
+describeWithEnvironment('Utils', () => {
+  describe('NumberWithUnit', () => {
+    const {NumberWithUnit} = Utils;
+
+    it('renders number with unit (formatMicroSecondsAsSeconds)', () => {
+      const result = NumberWithUnit.formatMicroSecondsAsSeconds(100_000 as Trace.Types.Timing.MicroSeconds);
+      assert.strictEqual(result.text, '0.10s');
+      assert.strictEqual(result.element.textContent, '0.10s');
+      assert.strictEqual(result.element.querySelector('.unit')?.textContent, 's');
+    });
+
+    it('renders number with unit (formatMicroSecondsAsMillisFixed)', () => {
+      const result = NumberWithUnit.formatMicroSecondsAsMillisFixed(100_000 as Trace.Types.Timing.MicroSeconds);
+      assert.strictEqual(result.text, '100ms');
+      assert.strictEqual(result.element.textContent, '100ms');
+      assert.strictEqual(result.element.querySelector('.unit')?.textContent, 'ms');
+    });
+
+    it('parse', () => {
+      // en
+      assert.deepStrictEqual(NumberWithUnit.parse('100[s]()'), {firstPart: '100', unitPart: 's', lastPart: ''});
+      assert.deepStrictEqual(NumberWithUnit.parse('100 [s]()'), {firstPart: '100 ', unitPart: 's', lastPart: ''});
+
+      // Decimal separators
+      assert.deepStrictEqual(
+          NumberWithUnit.parse('100.123[ms]()'), {firstPart: '100.123', unitPart: 'ms', lastPart: ''});
+      assert.deepStrictEqual(NumberWithUnit.parse('100,2[s]()'), {firstPart: '100,2', unitPart: 's', lastPart: ''});
+
+      // zh
+      assert.deepStrictEqual(NumberWithUnit.parse('100[毫秒]()'), {firstPart: '100', unitPart: '毫秒', lastPart: ''});
+      // zh-Hans-CN-u-nu-hanidec
+      assert.deepStrictEqual(
+          NumberWithUnit.parse('一〇〇[毫秒]()'), {firstPart: '一〇〇', unitPart: '毫秒', lastPart: ''});
+
+      // ar-SA (RTL language, but the UIString still places the number first in the string)
+      assert.deepStrictEqual(
+          NumberWithUnit.parse('١٠٠[ملي ثانية]()'), {firstPart: '١٠٠', unitPart: 'ملي ثانية', lastPart: ''});
+
+      // ar
+      assert.deepStrictEqual(
+          NumberWithUnit.parse('100[ملي ثانية]()'), {firstPart: '100', unitPart: 'ملي ثانية', lastPart: ''});
+
+      // sw (only one that places unit first)
+      assert.deepStrictEqual(NumberWithUnit.parse('[Sek]()100'), {firstPart: '', unitPart: 'Sek', lastPart: '100'});
+      assert.deepStrictEqual(NumberWithUnit.parse('[Sek]() 100'), {firstPart: '', unitPart: 'Sek', lastPart: ' 100'});
+
+      // error cases
+      assert.deepStrictEqual(NumberWithUnit.parse(''), null);
+      assert.deepStrictEqual(NumberWithUnit.parse('100s'), null);
+      assert.deepStrictEqual(NumberWithUnit.parse('100[s]('), null);
+      assert.deepStrictEqual(NumberWithUnit.parse('100[s]'), null);
+      assert.deepStrictEqual(NumberWithUnit.parse('100[s'), null);
+      assert.deepStrictEqual(NumberWithUnit.parse('100 s]('), null);
+    });
+  });
+});

package/front_end/panels/timeline/components/Utils.ts

@@ -2,10 +2,32 @@
 // 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 type * as Trace from '../../../models/trace/trace.js';
 import * as ThemeSupport from '../../../ui/legacy/theme_support/theme_support.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
+const UIStrings = {
+  /**
+   *@description ms is the short form of milli-seconds and the placeholder is a decimal number.
+   * The shortest form or abbreviation of milliseconds 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]()',
+};
+
+const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/Utils.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
 export enum NetworkCategory {
   DOC = 'Doc',
   CSS = 'CSS',
@@ -136,3 +158,98 @@ export function renderMetricValue(
 
   return metricValueEl;
 }
+
+export type NumberWithUnitString = {
+  element: HTMLElement,
+  text: string,
+};
+
+/**
+ * These methods format numbers with units in a way that allows the unit portion to be styled specifically.
+ * They return a text string (the usual string resulting from formatting a number), and an HTMLSpanElement.
+ * The element contains the formatted number, with a nested span element for the unit portion: `.unit`.
+ *
+ * This formatting is locale-aware. This is accomplished by utilizing the fact that UIStrings passthru
+ * markdown link syntax: `[text that will be translated](not translated)`. The result
+ * is a translated string like this: `[t̂éx̂t́ t̂h́ât́ ŵíl̂ĺ b̂é t̂ŕâńŝĺât́êd́](not translated)`. This is used within
+ * insight components to localize markdown content. But here, we utilize it to parse a localized string.
+ *
+ * If the parsing fails, we fallback to i18n.TimeUtilities, and there will be no `.unit` element.
+ *
+ * As of this writing, our only locale where the unit comes before the number is `sw`, ex: `Sek {PH1}`.
+ *
+    new Intl.NumberFormat('sw', {
+      style: 'unit',
+      unit: 'millisecond',
+      unitDisplay: 'narrow'
+    }).format(10); // 'ms 10'
+ *
+ */
+export namespace NumberWithUnit {
+  export function parse(text: string): {firstPart: string, unitPart: string, lastPart: string}|null {
+    const startBracket = text.indexOf('[');
+    const endBracket = startBracket !== -1 && text.indexOf(']', startBracket);
+    const startParen = endBracket && text.indexOf('(', endBracket);
+    const endParen = startParen && text.indexOf(')', startParen);
+    if (!endParen || endParen === -1) {
+      return null;
+    }
+
+    const firstPart = text.substring(0, startBracket);
+    const unitPart = text.substring(startBracket + 1, endBracket);
+    const lastPart = text.substring(endParen + 1);  // skips `]()`
+    return {firstPart, unitPart, lastPart};
+  }
+
+  export function formatMicroSecondsAsSeconds(time: Platform.Timing.MicroSeconds): NumberWithUnitString {
+    const element = document.createElement('span');
+    element.classList.add('number-with-unit');
+    const milliseconds = Platform.Timing.microSecondsToMilliSeconds(time);
+    const seconds = Platform.Timing.milliSecondsToSeconds(milliseconds);
+    const text = i18nString(UIStrings.fs, {PH1: (seconds).toFixed(2)});
+
+    const result = parse(text);
+    if (!result) {
+      // Some sort of problem with parsing, so fallback to not marking up the unit.
+      element.textContent = i18n.TimeUtilities.formatMicroSecondsAsSeconds(time);
+      return {text, element};
+    }
+
+    const {firstPart, unitPart, lastPart} = result;
+    if (firstPart) {
+      element.append(firstPart);
+    }
+    element.createChild('span', 'unit').textContent = unitPart;
+    if (lastPart) {
+      element.append(lastPart);
+    }
+
+    return {text: element.textContent ?? '', element};
+  }
+
+  export function formatMicroSecondsAsMillisFixed(time: Platform.Timing.MicroSeconds, fractionDigits = 0):
+      NumberWithUnitString {
+    const element = document.createElement('span');
+    element.classList.add('number-with-unit');
+    const milliseconds = Platform.Timing.microSecondsToMilliSeconds(time);
+    const text = i18nString(UIStrings.fms, {PH1: (milliseconds).toFixed(fractionDigits)});
+
+    const result = parse(text);
+    if (!result) {
+      // Some sort of problem with parsing, so fallback to not marking up the unit.
+      element.textContent = i18n.TimeUtilities.formatMicroSecondsAsMillisFixed(time);
+      return {text, element};
+    }
+
+    const {firstPart, unitPart, lastPart} = result;
+    if (firstPart) {
+      element.append(firstPart);
+    }
+    element.createChild('span', 'unit').textContent = unitPart;
+    if (lastPart) {
+      element.append(lastPart);
+    }
+
+    return {text: element.textContent ?? '', element};
+  }
+}