Merge f03d5e3 into 540fd3b

GoogleChrome · Sep 30, 2020 · 8303f60 · 8303f60
2 parents 540fd3b + f03d5e3
commit 8303f60
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 17 deletions.
diff --git a/lighthouse-core/report/html/renderer/i18n.js b/lighthouse-core/report/html/renderer/i18n.js
@@ -45,20 +45,39 @@ class I18n {
    * @return {string}
    */
   formatBytesToKiB(size, granularity = 0.1) {
-    const kbs = this._numberFormatter.format(Math.round(size / 1024 / granularity) * granularity);
+    const formatter = this._byteFormatterForGranularity(granularity);
+    const kbs = formatter.format(Math.round(size / 1024 / granularity) * granularity);
     return `${kbs}${NBSP2}KiB`;
   }
 
   /**
    * @param {number} size
-   * @param {number=} granularity Controls how coarse the displayed value is, defaults to 0.1
+   * @param {number=} granularity Controls how coarse the displayed value is, defaults to 1
    * @return {string}
    */
   formatBytes(size, granularity = 1) {
-    const kbs = this._numberFormatter.format(Math.round(size / granularity) * granularity);
+    const formatter = this._byteFormatterForGranularity(granularity);
+    const kbs = formatter.format(Math.round(size / granularity) * granularity);
     return `${kbs}${NBSP2}bytes`;
   }
 
+  /**
+   * Format bytes with a constant number of fractional digits, i.e for a granularity of 0.1, 10 becomes '10.0'
+   * @param {number} granularity Controls how coarse the displayed value is
+   * @return {Intl.NumberFormat}
+   */
+  _byteFormatterForGranularity(granularity) {
+    let numberOfFractionDigits = 0;
+    if (granularity < 1) {
+      // assumes granularities above 1 will not contain fractional parts, i.e. will never be 1.5
+      numberOfFractionDigits = -Math.floor(Math.log10(granularity));
+    }
+    return new Intl.NumberFormat(this._numberDateLocale, {
+      maximumFractionDigits: numberOfFractionDigits,
+      minimumFractionDigits: numberOfFractionDigits,
+    });
+  }
+
   /**
    * @param {number} ms
    * @param {number=} granularity Controls how coarse the displayed value is, defaults to 10

diff --git a/lighthouse-core/test/report/html/renderer/i18n-test.js b/lighthouse-core/test/report/html/renderer/i18n-test.js
@@ -39,8 +39,8 @@ describe('util helpers', () => {
   it('formats bytes', () => {
     const i18n = new I18n('en', {...Util.UIStrings});
     assert.equal(i18n.formatBytesToKiB(100), `0.1${NBSP}KiB`);
-    assert.equal(i18n.formatBytesToKiB(2000), `2${NBSP}KiB`);
-    assert.equal(i18n.formatBytesToKiB(1014 * 1024), `1,014${NBSP}KiB`);
+    assert.equal(i18n.formatBytesToKiB(2000), `2.0${NBSP}KiB`);
+    assert.equal(i18n.formatBytesToKiB(1014 * 1024), `1,014.0${NBSP}KiB`);
   });
 
   it('formats ms', () => {
@@ -89,4 +89,31 @@ describe('util helpers', () => {
       timestamp.includes('Apr 29, 2017')
     );
   });
+
+  describe('_byteFormatterForGranularity', () => {
+    it('returns a formatter that outputs a consistent number of fractional digits', () => {
+      const i18n = new I18n('en', {...Util.UIStrings});
+
+      const formatterTen = i18n._byteFormatterForGranularity(10);
+      const formatterOne = i18n._byteFormatterForGranularity(1);
+      const formatterHalf = i18n._byteFormatterForGranularity(0.5);
+      const formatterTenth = i18n._byteFormatterForGranularity(0.1);
+      const formatterHundredth = i18n._byteFormatterForGranularity(0.01);
+
+      assert.strictEqual(formatterTen.format(15.0), '15');
+      assert.strictEqual(formatterTen.format(15.12345), '15');
+
+      assert.strictEqual(formatterOne.format(15.0), '15');
+      assert.strictEqual(formatterOne.format(15.12345), '15');
+
+      assert.strictEqual(formatterHalf.format(15.0), '15.0');
+      assert.strictEqual(formatterHalf.format(15.12345), '15.1');
+
+      assert.strictEqual(formatterTenth.format(15.0), '15.0');
+      assert.strictEqual(formatterTenth.format(15.12345), '15.1');
+
+      assert.strictEqual(formatterHundredth.format(15.0), '15.00');
+      assert.strictEqual(formatterHundredth.format(15.12345), '15.12');
+    });
+  });
 });
diff --git a/lighthouse-core/test/report/html/renderer/report-ui-features-test.js b/lighthouse-core/test/report/html/renderer/report-ui-features-test.js
@@ -270,23 +270,23 @@ describe('ReportUIFeatures', () => {
         }
 
         const initialExpected = [
-          '/script1.js(www.cdn.com)24 KiB8.8 KiB',
-          '10 KiB0 KiB',
-          '20 KiB0 KiB',
-          '/script2.js(www.example.com)24 KiB8.8 KiB',
-          '30 KiB0 KiB',
-          '40 KiB0 KiB',
-          '/script3.js(www.notexample.com)24 KiB8.8 KiB',
-          '50 KiB0 KiB',
-          '60 KiB0 KiB',
+          '/script1.js(www.cdn.com)24.0 KiB8.8 KiB',
+          '10.0 KiB0.0 KiB',
+          '20.0 KiB0.0 KiB',
+          '/script2.js(www.example.com)24.0 KiB8.8 KiB',
+          '30.0 KiB0.0 KiB',
+          '40.0 KiB0.0 KiB',
+          '/script3.js(www.notexample.com)24.0 KiB8.8 KiB',
+          '50.0 KiB0.0 KiB',
+          '60.0 KiB0.0 KiB',
         ];
 
         expect(getRowIdentifiers()).toEqual(initialExpected);
         filterCheckbox.click();
         expect(getRowIdentifiers()).toEqual([
-          '/script2.js(www.example.com)24 KiB8.8 KiB',
-          '30 KiB0 KiB',
-          '40 KiB0 KiB',
+          '/script2.js(www.example.com)24.0 KiB8.8 KiB',
+          '30.0 KiB0.0 KiB',
+          '40.0 KiB0.0 KiB',
         ]);
         filterCheckbox.click();
         expect(getRowIdentifiers()).toEqual(initialExpected);