[RPP] Replace adhoc number formatting with i18n module

Additionally:

* Modify the progress status dialog for recording a trace to update
  every 0.1s instead of 1000s, and display the time in "x.x s" format
* For the same progress status dialog, use `tabular-nums` font variant
  to prevent seconds text from jumping around

Fixed: 372723536
Change-Id: I4798d81b4335ef60265e352f02e0dec92a4c16c8
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6039734
Reviewed-by: Paul Irish <[email protected]>
Commit-Queue: Connor Clark <[email protected]>
Auto-Submit: Connor Clark <[email protected]>

Author: Connor Clark

front_end/core/i18n/time-utilities.ts

@@ -160,6 +160,23 @@ export function preciseMillisToString(ms: number, precision = 0): string {
   return formatter.format(ms);
 }
 
+const preciseSecondsToStringFormattersCache = new Map<number, NumberFormatter>();
+
+export function preciseSecondsToString(ms: number, precision = 0): string {
+  let formatter = preciseSecondsToStringFormattersCache.get(precision);
+  if (!formatter) {
+    formatter = defineFormatter({
+      style: 'unit',
+      unit: 'second',
+      unitDisplay: 'narrow',
+      minimumFractionDigits: precision,
+      maximumFractionDigits: precision,
+    });
+    preciseSecondsToStringFormattersCache.set(precision, formatter);
+  }
+  return formatter.format(ms);
+}
+
 export function secondsToString(seconds: number, higherResolution?: boolean): string {
   if (!isFinite(seconds)) {
     return '-';

front_end/panels/timeline/EventsTimelineTreeView.ts

@@ -25,11 +25,6 @@ const UIStrings = {
    *@description Screen reader label for a select box that filters the Performance panel Event Log by duration.
    */
   durationFilter: 'Duration filter',
-  /**
-   *@description Text in Events Timeline Tree View of the Performance panel
-   *@example {2} PH1
-   */
-  Dms: '{PH1} ms',
   /**
    *@description Text for everything
    */
@@ -170,7 +165,7 @@ export class Filters extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
         durationFilterChanged.bind(this), i18nString(UIStrings.durationFilter), undefined, 'duration');
     for (const durationMs of Filters.durationFilterPresetsMs) {
       durationFilterUI.addOption(durationFilterUI.createOption(
-          durationMs ? `≥ ${i18nString(UIStrings.Dms, {PH1: durationMs})}` : i18nString(UIStrings.all),
+          durationMs ? `≥ ${i18n.TimeUtilities.millisToString(durationMs)}` : i18nString(UIStrings.all),
           String(durationMs)));
     }
     toolbar.appendToolbarItem(durationFilterUI);

front_end/panels/timeline/TimelinePanel.ts

@@ -257,11 +257,6 @@ const UIStrings = {
    *@description Text of an item that stops the running task
    */
   stop: 'Stop',
-  /**
-   *@description Time text content in Timeline Panel of the Performance panel
-   *@example {2.12} PH1
-   */
-  ssec: '{PH1} sec',
   /**
    *
    * @description Text for exporting basic traces
@@ -2635,7 +2630,7 @@ export class StatusPane extends UI.Widget.VBox {
 
   startTimer(): void {
     this.startTime = Date.now();
-    this.timeUpdateTimer = window.setInterval(this.updateTimer.bind(this), 1000);
+    this.timeUpdateTimer = window.setInterval(this.updateTimer.bind(this), 100);
     this.updateTimer();
   }
 
@@ -2653,8 +2648,9 @@ export class StatusPane extends UI.Widget.VBox {
     if (!this.timeUpdateTimer || !this.time) {
       return;
     }
-    const elapsed = (Date.now() - this.startTime) / 1000;
-    this.time.textContent = i18nString(UIStrings.ssec, {PH1: Math.round(elapsed)});
+
+    const seconds = (Date.now() - this.startTime) / 1000;
+    this.time.textContent = i18n.TimeUtilities.preciseSecondsToString(seconds, 1);
   }
 
   private arrangeDialog(parent: Element): void {

front_end/panels/timeline/TimelineTreeView.ts

@@ -43,11 +43,6 @@ const UIStrings = {
    *@description Text of a DOM element in Timeline Tree View of the Performance panel
    */
   selectItemForDetails: 'Select item for details.',
-  /**
-   *@description Time in miliseconds
-   *@example {30.1} PH1
-   */
-  fms: '{PH1} ms',
   /**
    *@description Number followed by percent sign
    *@example {20} PH1
@@ -743,9 +738,9 @@ export class GridNode extends DataGrid.SortableDataGrid.SortableDataGridNode<Gri
     }
     const cell = this.createTD(columnId);
     cell.className = 'numeric-column';
-    cell.setAttribute('title', i18nString(UIStrings.fms, {PH1: value.toFixed(4)}));
+    cell.setAttribute('title', i18n.TimeUtilities.preciseMillisToString(value, 4));
     const textDiv = cell.createChild('div');
-    textDiv.createChild('span').textContent = i18nString(UIStrings.fms, {PH1: value.toFixed(1)});
+    textDiv.createChild('span').textContent = i18n.TimeUtilities.preciseMillisToString(value, 1);
 
     if (showPercents && this.treeView.exposePercentages()) {
       textDiv.createChild('span', 'percent-column').textContent =

front_end/panels/timeline/timelineStatusDialog.css

@@ -20,6 +20,7 @@
   min-height: auto;
   display: flex;
   align-items: baseline;
+  font-variant-numeric: tabular-nums;
 }
 
 .status-dialog-line .label {