GoogleChrome · connorjclark · May 14, 2021 · Apr 30, 2021 · May 4, 2021 · May 4, 2021
diff --git a/build/build-treemap.js b/build/build-treemap.js
@@ -28,6 +28,8 @@ async function run() {
       fs.readFileSync(require.resolve('tabulator-tables/dist/js/modules/format.js'), 'utf8'),
       fs.readFileSync(require.resolve('tabulator-tables/dist/js/modules/resize_columns.js'), 'utf8'),
       /* eslint-enable max-len */
+      {path: '../../lighthouse-core/report/html/renderer/i18n.js'},
+      {path: '../../lighthouse-core/report/html/renderer/util.js'},
       {path: 'src/*'},
     ],
     assets: [

diff --git a/lighthouse-core/report/html/renderer/i18n.js b/lighthouse-core/report/html/renderer/i18n.js
@@ -50,6 +50,17 @@ class I18n {
     return `${kbs}${NBSP2}KiB`;
   }
 
+  /**
+   * @param {number} size
+   * @param {number=} granularity Controls how coarse the displayed value is, defaults to 0.1
+   * @return {string}
+   */
+  formatBytesToMiB(size, granularity = 0.1) {
+    const formatter = this._byteFormatterForGranularity(granularity);
+    const kbs = formatter.format(Math.round(size / 1024 ** 2 / granularity) * granularity);
+    return `${kbs}${NBSP2}MiB`;
+  }
+
   /**
    * @param {number} size
    * @param {number=} granularity Controls how coarse the displayed value is, defaults to 1

diff --git a/lighthouse-core/report/html/renderer/util.js b/lighthouse-core/report/html/renderer/util.js
@@ -617,6 +617,23 @@ Util.UIStrings = {
 
   /** Descriptive explanation for environment throttling that was provided by the runtime environment instead of provided by Lighthouse throttling. */
   throttlingProvided: 'Provided by environment',
+
+  /** Label for a button that alternates between showing or hiding a table. */
+  treemapToggleTable: 'Toggle Table',
+  /** Text for an option in a dropdown menu, when selected the current view of the app is set to all scripts. */
+  treemapAllScripts: 'All Scripts',
+  /** Label for a column where the values are URLs, JS module names, or arbitrary identifiers. For simplicity, just 'name' is used. */
+  treemapName: 'Name',
+  /** Label for a value associated with how many bytes a URL/file is, on-disk. */
+  treemapResourceBytes: 'Resource Bytes',
+  /** Label for a value associated with how many bytes a URL/file is, over-network. */
-  /** Label for a value associated with how many bytes a URL/file is, over-network. */
+  /** Label for a value stating how many bytes of a URL/file were not used. */
-  /** Label for a value associated with how many bytes a URL/file is, over-network. */
+  /** Label for a value stating how many bytes of a URL/file were not used. */
+  treemapUnusedBytes: 'Unused Bytes',
+  /** Label for a column where the values represent how much of a file is used bytes vs unused bytes (coverage). */
+  treemapCoverage: 'Coverage',
+  /** Label for a button that shows everything. */
+  treemapAll: 'All',
+  /** Label for a button that highlights information about duplicate modules (aka: files, javascript resources). */
+  treemapDuplicateModules: 'Duplicate Modules',
 };
 
 if (typeof module !== 'undefined' && module.exports) {

diff --git a/lighthouse-core/scripts/i18n/collect-strings.js b/lighthouse-core/scripts/i18n/collect-strings.js
@@ -636,7 +636,7 @@ if (require.main === module) {
 
   if (collisions > 0) {
     console.log(`MEANING COLLISION: ${collisions} string(s) have the same content.`);
-    assert.equal(collisions, 30, `The number of duplicate strings have changed, update this assertion if that is expected, or reword strings. Collisions: ${collisionStrings.join('\n')}`);
+    assert.equal(collisions, 32, `The number of duplicate strings have changed, update this assertion if that is expected, or reword strings. Collisions: ${collisionStrings.join('\n')}`);
   }
 
   writeStringsToCtcFiles('en-US', strings);

diff --git a/lighthouse-treemap/app/index.html b/lighthouse-treemap/app/index.html
@@ -59,7 +59,7 @@
 
           <span class="lh-header__inputs">
             <select class="bundle-selector"></select>
-            <button class="lh-button lh-button--active lh-button--toggle-table">Toggle Table</button>
+            <button data-i18n="treemapToggleTable" class="lh-button lh-button--active lh-button--toggle-table"></button>
           </span>
         </div>
 

diff --git a/lighthouse-treemap/app/src/main.js b/lighthouse-treemap/app/src/main.js
@@ -7,7 +7,7 @@
 
 /* eslint-env browser */
 
-/* globals webtreemap TreemapUtil Tabulator Cell Row */
+/* globals I18n webtreemap TreemapUtil Util Tabulator Cell Row */
 
 const UNUSED_BYTES_IGNORE_THRESHOLD = 20 * 1024;
 const UNUSED_BYTES_IGNORE_BUNDLE_SOURCE_RATIO = 0.5;
@@ -361,6 +361,20 @@ class TreemapViewer {
       });
     });
 
+    /** @param {'resourceBytes'|'unusedBytes'} field */
+    const makeBytesTooltip = (field) => {
+      /** @param {Tabulator.CellComponent} cell */
+      const fn = (cell) => {
+        /** @type {typeof data[number]} */
+        const dataRow = cell.getRow().getData();
+        const value = dataRow[field];
+        if (value === undefined) return '';
+
+        return Util.i18n.formatBytes(value);
+      };
+      return fn;
+    };
+
     /** @param {Tabulator.CellComponent} cell */
     const makeNameTooltip = (cell) => {
       /** @type {typeof data[number]} */
@@ -377,7 +391,7 @@ class TreemapViewer {
       if (!dataRow.unusedBytes) return '';
 
       const percent = Math.floor(100 * dataRow.unusedBytes / dataRow.resourceBytes);
-      return `${percent}% bytes unused`;
+      return `${Util.i18n.formatNumber(percent)}% bytes unused`;
     };
 
     const gridEl = document.createElement('div');
@@ -397,19 +411,21 @@ class TreemapViewer {
         {column: 'resourceBytes', dir: 'desc'},
       ],
       columns: [
-        {title: 'Name', field: 'name', widthGrow: 5, tooltip: makeNameTooltip},
-        {title: 'Size', field: 'resourceBytes', headerSortStartingDir: 'desc', formatter: cell => {
+        // eslint-disable-next-line max-len
+        {title: Util.i18n.strings.treemapName, field: 'name', widthGrow: 5, tooltip: makeNameTooltip},
+        // eslint-disable-next-line max-len
+        {title: Util.i18n.strings.treemapResourceBytes, field: 'resourceBytes', headerSortStartingDir: 'desc', tooltip: makeBytesTooltip('resourceBytes'), formatter: cell => {
           const value = cell.getValue();
           return TreemapUtil.formatBytes(value);
         }},
         // eslint-disable-next-line max-len
-        {title: 'Unused', field: 'unusedBytes', widthGrow: 1, sorterParams: {alignEmptyValues: 'bottom'}, headerSortStartingDir: 'desc', formatter: cell => {
+        {title: Util.i18n.strings.treemapUnusedBytes, field: 'unusedBytes', widthGrow: 1, sorterParams: {alignEmptyValues: 'bottom'}, headerSortStartingDir: 'desc', tooltip: makeBytesTooltip('unusedBytes'), formatter: cell => {
           const value = cell.getValue();
           if (value === undefined) return '';
           return TreemapUtil.formatBytes(value);
         }},
         // eslint-disable-next-line max-len
-        {title: 'Coverage', widthGrow: 3, headerSort: false, tooltip: makeCoverageTooltip, formatter: cell => {
+        {title: Util.i18n.strings.treemapCoverage, widthGrow: 3, headerSort: false, tooltip: makeCoverageTooltip, formatter: cell => {
           /** @type {typeof data[number]} */
           const dataRow = cell.getRow().getData();
 
@@ -450,6 +466,10 @@ class TreemapViewer {
    */
   makeCaption(node) {
     const partitionBy = this.currentViewMode.partitionBy || 'resourceBytes';
+    const partitionByStr = {
+      resourceBytes: Util.i18n.strings.treemapResourceBytes,
+      unusedBytes: Util.i18n.strings.treemapUnusedBytes,
+    }[partitionBy];
     const bytes = node[partitionBy];
     const total = this.currentTreemapRoot[partitionBy];
 
@@ -458,10 +478,11 @@ class TreemapViewer {
     ];
 
     if (bytes !== undefined && total !== undefined) {
-      let str = `${TreemapUtil.formatBytes(bytes)} (${Math.round(bytes / total * 100)}%)`;
+      const percentStr = `${Util.i18n.formatNumber(Math.round(bytes / total * 100))}%`;
+      let str = `${TreemapUtil.formatBytes(bytes)} (${percentStr})`;
       // Only add label for bytes on the root node.
       if (node === this.currentTreemapRoot) {
-        str = `${partitionBy}: ${str}`;
+        str = `${partitionByStr}: ${str}`;
       }
       parts.push(str);
     }
@@ -569,6 +590,23 @@ function injectOptions(options) {
  * @param {LH.Treemap.Options} options
  */
 function init(options) {
+  const report = Util.prepareReportResult(options.lhr);
+  const i18n = new I18n(report.configSettings.locale, {
+    // Set missing renderer strings to default (english) values.
+    ...Util.UIStrings,
+    ...report.i18n.rendererFormattedStrings,
+  });
+  Util.i18n = i18n;
+  Util.reportJson = report;
+
+  // Fill in all i18n data.
+  for (const node of document.querySelectorAll('[data-i18n]')) {
+    // These strings are guaranteed to (at least) have a default English string in Util.UIStrings,
+    // so this cannot be undefined as long as `report-ui-features.data-i18n` test passes.
+    const i18nAttr = /** @type {keyof LH.I18NRendererStrings} */ (node.getAttribute('data-i18n'));
+    node.textContent = Util.i18n.strings[i18nAttr];
+  }
+
   treemapViewer = new TreemapViewer(options, TreemapUtil.find('div.lh-treemap'));
 
   injectOptions(options);

diff --git a/lighthouse-treemap/app/src/util.js b/lighthouse-treemap/app/src/util.js
@@ -7,6 +7,8 @@
 
 /* eslint-env browser */
 
+/* globals Util */
+
 /** @typedef {HTMLElementTagNameMap & {[id: string]: HTMLElement}} HTMLElementByTagName */
 /** @template {string} T @typedef {import('typed-query-selector/parser').ParseSelector<T, Element>} ParseSelector */
 
@@ -126,9 +128,9 @@ class TreemapUtil {
    * @param {number} bytes
    */
   static formatBytes(bytes) {
-    if (bytes >= MiB) return (bytes / MiB).toFixed(2) + '\xa0MiB';
-    if (bytes >= KiB) return (bytes / KiB).toFixed(0) + '\xa0KiB';
-    return bytes + '\xa0B';
+    if (bytes >= MiB) return Util.i18n.formatBytesToMiB(bytes);
+    if (bytes >= KiB) return Util.i18n.formatBytesToKiB(bytes);
+    return Util.i18n.formatNumber(bytes) + '\xa0B';
   }
 
   /**
@@ -137,8 +139,8 @@ class TreemapUtil {
    */
   static format(value, unit) {
     if (unit === 'bytes') return TreemapUtil.formatBytes(value);
-    if (unit === 'time') return `${value}\xa0ms`;
-    return `${value} ${unit}`;
+    if (unit === 'time') return `${Util.i18n.formatNumber(value)}\xa0ms`;
+    return `${Util.i18n.formatNumber(value)}\xa0${unit}`;
   }
 
   /**