lighthouse 9.5.0-dev.20220418 → 9.5.0-dev.20220421

package/report/renderer/i18n.js

@@ -21,9 +21,7 @@ export class I18n {
     // When testing, use a locale with more exciting numeric formatting.
     if (locale === 'en-XA') locale = 'de';
 
-    this._numberDateLocale = locale;
-    this._numberFormatter = new Intl.NumberFormat(locale);
-    this._percentFormatter = new Intl.NumberFormat(locale, {style: 'percent'});
+    this._locale = locale;
     this._strings = strings;
   }
 
@@ -31,6 +29,32 @@ export class I18n {
     return this._strings;
   }
 
+  /**
+   * @param {number} number
+   * @param {number} granularity
+   * @param {Intl.NumberFormatOptions} opts
+   * @return {string}
+   */
+  _formatNumberWithGranularity(number, granularity, opts = {}) {
+    opts = {...opts};
+    const log10 = -Math.log10(granularity);
+    if (!Number.isFinite(log10) || (granularity > 1 && !Number.isInteger(log10))) {
+      console.warn(`granularity of ${granularity} is invalid, defaulting to value of 1`);
+      granularity = 1;
+    }
+
+    if (granularity < 1) {
+      opts.minimumFractionDigits = opts.maximumFractionDigits = Math.ceil(log10);
+    }
+
+    number = Math.round(number / granularity) * granularity;
+
+    // Avoid displaying a negative value that rounds to zero as "0".
+    if (Object.is(number, -0)) number = 0;
+
+    return new Intl.NumberFormat(this._locale, opts).format(number).replace(' ', NBSP2);
+  }
+
   /**
    * Format number.
    * @param {number} number
@@ -38,8 +62,18 @@ export class I18n {
    * @return {string}
    */
   formatNumber(number, granularity = 0.1) {
-    const coarseValue = Math.round(number / granularity) * granularity;
-    return this._numberFormatter.format(coarseValue);
+    return this._formatNumberWithGranularity(number, granularity);
+  }
+
+  /**
+   * Format integer.
+   * Just like {@link formatNumber} but uses a granularity of 1, rounding to the nearest
+   * whole number.
+   * @param {number} number
+   * @return {string}
+   */
+  formatInteger(number) {
+    return this._formatNumberWithGranularity(number, 1);
   }
 
   /**
@@ -48,7 +82,7 @@ export class I18n {
    * @return {string}
    */
   formatPercent(number) {
-    return this._percentFormatter.format(number);
+    return new Intl.NumberFormat(this._locale, {style: 'percent'}).format(number);
   }
 
   /**
@@ -57,9 +91,7 @@ export class I18n {
    * @return {string}
    */
   formatBytesToKiB(size, granularity = 0.1) {
-    const formatter = this._byteFormatterForGranularity(granularity);
-    const kbs = formatter.format(Math.round(size / 1024 / granularity) * granularity);
-    return `${kbs}${NBSP2}KiB`;
+    return this._formatNumberWithGranularity(size / KiB, granularity) + `${NBSP2}KiB`;
   }
 
   /**
@@ -68,9 +100,7 @@ export class I18n {
    * @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`;
+    return this._formatNumberWithGranularity(size / MiB, granularity) + `${NBSP2}MiB`;
   }
 
   /**
@@ -79,9 +109,11 @@ export class I18n {
    * @return {string}
    */
   formatBytes(size, granularity = 1) {
-    const formatter = this._byteFormatterForGranularity(granularity);
-    const kbs = formatter.format(Math.round(size / granularity) * granularity);
-    return `${kbs}${NBSP2}bytes`;
+    return this._formatNumberWithGranularity(size, granularity, {
+      style: 'unit',
+      unit: 'byte',
+      unitDisplay: 'long',
+    });
   }
 
   /**
@@ -92,25 +124,23 @@ export class I18n {
   formatBytesWithBestUnit(size, granularity = 0.1) {
     if (size >= MiB) return this.formatBytesToMiB(size, granularity);
     if (size >= KiB) return this.formatBytesToKiB(size, granularity);
-    return this.formatNumber(size, granularity) + '\xa0B';
+    return this._formatNumberWithGranularity(size, granularity, {
+      style: 'unit',
+      unit: 'byte',
+      unitDisplay: 'narrow',
+    });
   }
 
   /**
-   * 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}
+   * @param {number} size
+   * @param {number=} granularity Controls how coarse the displayed value is, defaults to 1
+   * @return {string}
    */
-  _byteFormatterForGranularity(granularity) {
-    // assume any granularity above 1 will not contain fractional parts, i.e. will never be 1.5
-    let numberOfFractionDigits = 0;
-    if (granularity < 1) {
-      numberOfFractionDigits = -Math.floor(Math.log10(granularity));
-    }
-
-    return new Intl.NumberFormat(this._numberDateLocale, {
-      ...this._numberFormatter.resolvedOptions(),
-      maximumFractionDigits: numberOfFractionDigits,
-      minimumFractionDigits: numberOfFractionDigits,
+  formatKbps(size, granularity = 1) {
+    return this._formatNumberWithGranularity(size, granularity, {
+      style: 'unit',
+      unit: 'kilobit-per-second',
+      unitDisplay: 'short',
     });
   }
 
@@ -120,10 +150,11 @@ export class I18n {
    * @return {string}
    */
   formatMilliseconds(ms, granularity = 10) {
-    const coarseTime = Math.round(ms / granularity) * granularity;
-    return coarseTime === 0
-      ? `${this._numberFormatter.format(0)}${NBSP2}ms`
-      : `${this._numberFormatter.format(coarseTime)}${NBSP2}ms`;
+    return this._formatNumberWithGranularity(ms, granularity, {
+      style: 'unit',
+      unit: 'millisecond',
+      unitDisplay: 'short',
+    });
   }
 
   /**
@@ -132,8 +163,11 @@ export class I18n {
    * @return {string}
    */
   formatSeconds(ms, granularity = 0.1) {
-    const coarseTime = Math.round(ms / 1000 / granularity) * granularity;
-    return `${this._numberFormatter.format(coarseTime)}${NBSP2}s`;
+    return this._formatNumberWithGranularity(ms / 1000, granularity, {
+      style: 'unit',
+      unit: 'second',
+      unitDisplay: 'short',
+    });
   }
 
   /**
@@ -153,10 +187,10 @@ export class I18n {
     // and https://github.com/GoogleChrome/lighthouse/pull/9822
     let formatter;
     try {
-      formatter = new Intl.DateTimeFormat(this._numberDateLocale, options);
+      formatter = new Intl.DateTimeFormat(this._locale, options);
     } catch (err) {
       options.timeZone = 'UTC';
-      formatter = new Intl.DateTimeFormat(this._numberDateLocale, options);
+      formatter = new Intl.DateTimeFormat(this._locale, options);
     }
 
     return formatter.format(new Date(date));
@@ -168,6 +202,10 @@ export class I18n {
    * @return {string}
    */
   formatDuration(timeInMilliseconds) {
+    // There is a proposal for a Intl.DurationFormat.
+    // https://github.com/tc39/proposal-intl-duration-format
+    // Until then, we do things a bit more manually.
+
     let timeInSeconds = timeInMilliseconds / 1000;
     if (Math.round(timeInSeconds) === 0) {
       return 'None';
@@ -176,19 +214,24 @@ export class I18n {
     /** @type {Array<string>} */
     const parts = [];
     /** @type {Record<string, number>} */
-    const unitLabels = {
-      d: 60 * 60 * 24,
-      h: 60 * 60,
-      m: 60,
-      s: 1,
+    const unitToSecondsPer = {
+      day: 60 * 60 * 24,
+      hour: 60 * 60,
+      minute: 60,
+      second: 1,
     };
 
-    Object.keys(unitLabels).forEach(label => {
-      const unit = unitLabels[label];
-      const numberOfUnits = Math.floor(timeInSeconds / unit);
+    Object.keys(unitToSecondsPer).forEach(unit => {
+      const secondsPerUnit = unitToSecondsPer[unit];
+      const numberOfUnits = Math.floor(timeInSeconds / secondsPerUnit);
       if (numberOfUnits > 0) {
-        timeInSeconds -= numberOfUnits * unit;
-        parts.push(`${numberOfUnits}\xa0${label}`);
+        timeInSeconds -= numberOfUnits * secondsPerUnit;
+        const part = this._formatNumberWithGranularity(numberOfUnits, 1, {
+          style: 'unit',
+          unit,
+          unitDisplay: 'narrow',
+        });
+        parts.push(part);
       }
     });
 

package/report/renderer/util.js

@@ -429,10 +429,13 @@ class Util {
         break;
       case 'devtools': {
         const {cpuSlowdownMultiplier, requestLatencyMs} = throttling;
-        cpuThrottling = `${Util.i18n.formatNumber(cpuSlowdownMultiplier)}x slowdown (DevTools)`;
-        networkThrottling = `${Util.i18n.formatNumber(requestLatencyMs)}${NBSP}ms HTTP RTT, ` +
-          `${Util.i18n.formatNumber(throttling.downloadThroughputKbps)}${NBSP}Kbps down, ` +
-          `${Util.i18n.formatNumber(throttling.uploadThroughputKbps)}${NBSP}Kbps up (DevTools)`;
+        // TODO: better api in i18n formatter such that this isn't needed.
+        const cpuGranularity = Number.isInteger(cpuSlowdownMultiplier) ? 1 : 0.1;
+        // eslint-disable-next-line max-len
+        cpuThrottling = `${Util.i18n.formatNumber(cpuSlowdownMultiplier, cpuGranularity)}x slowdown (DevTools)`;
+        networkThrottling = `${Util.i18n.formatMilliseconds(requestLatencyMs, 1)} HTTP RTT, ` +
+          `${Util.i18n.formatKbps(throttling.downloadThroughputKbps)} down, ` +
+          `${Util.i18n.formatKbps(throttling.uploadThroughputKbps)} up (DevTools)`;
 
         const isSlow4G = () => {
           return requestLatencyMs === 150 * 3.75 &&
@@ -444,9 +447,12 @@ class Util {
       }
       case 'simulate': {
         const {cpuSlowdownMultiplier, rttMs, throughputKbps} = throttling;
-        cpuThrottling = `${Util.i18n.formatNumber(cpuSlowdownMultiplier)}x slowdown (Simulated)`;
-        networkThrottling = `${Util.i18n.formatNumber(rttMs)}${NBSP}ms TCP RTT, ` +
-          `${Util.i18n.formatNumber(throughputKbps)}${NBSP}Kbps throughput (Simulated)`;
+        // TODO: better api in i18n formatter such that this isn't needed.
+        const cpuGranularity = Number.isInteger(cpuSlowdownMultiplier) ? 1 : 0.1;
+        // eslint-disable-next-line max-len
+        cpuThrottling = `${Util.i18n.formatNumber(cpuSlowdownMultiplier, cpuGranularity)}x slowdown (Simulated)`;
+        networkThrottling = `${Util.i18n.formatMilliseconds(rttMs)} TCP RTT, ` +
+          `${Util.i18n.formatKbps(throughputKbps)} throughput (Simulated)`;
 
         const isSlow4G = () => {
           return rttMs === 150 && throughputKbps === 1.6 * 1024;

package/report/test/renderer/element-screenshot-renderer-test.js

@@ -65,7 +65,8 @@ describe('ElementScreenshotRenderer', () => {
     /* eslint-disable max-len */
     expect(htmlFormatted).toMatchInlineSnapshot(`
 " 
-<div class=\\"lh-element-screenshot__content\\" style=\\"top: -500px;\\"> 
+<div class=\\"lh-element-screenshot__content\\"> 
+<div class=\\"lh-element-screenshot__image\\" style=\\"width: 500px; height: 500px; background-position-y: 0px; background-position-x: 0px; background-size: 1000px 1000px;\\"> 
 <div class=\\"lh-element-screenshot__mask\\" style=\\"width: 500px; height: 500px; clip-path: url(#clip-0);\\"> 
 <svg height=\\"0\\" width=\\"0\\"> <defs> 
 <clipPath clipPathUnits=\\"objectBoundingBox\\" id=\\"clip-0\\">
@@ -73,8 +74,7 @@ describe('ElementScreenshotRenderer', () => {
 <polygon points=\\"0,0.7     1,0.7    1,1               0,1\\"></polygon>
 <polygon points=\\"0,0.1        0.1,0.1 0.1,0.7 0,0.7\\"></polygon>
 <polygon points=\\"0.5,0.1 1,0.1       1,0.7       0.5,0.7\\"></polygon></clipPath>  </defs> </svg> </div> 
-<div class=\\"lh-element-screenshot__image\\" style=\\"width: 500px; height: 500px; background-position-y: 0px; background-position-x: 0px; background-size: 1000px 1000px;\\"></div> 
-<div class=\\"lh-element-screenshot__element-marker\\" style=\\"width: 200px; height: 300px; left: 50px; top: 50px;\\"></div> </div> "
+<div class=\\"lh-element-screenshot__element-marker\\" style=\\"width: 200px; height: 300px; left: 50px; top: 50px;\\"></div> </div> </div> "
 `);
     /* eslint-enable max-len */
   });

package/report/test/renderer/i18n-test.js

@@ -21,9 +21,12 @@ const NBSP = '\xa0';
 describe('util helpers', () => {
   it('formats a number', () => {
     const i18n = new I18n('en', {...Util.UIStrings});
-    assert.strictEqual(i18n.formatNumber(10), '10');
-    assert.strictEqual(i18n.formatNumber(100.01), '100');
+    assert.strictEqual(i18n.formatNumber(10), '10.0');
+    assert.strictEqual(i18n.formatNumber(100.01), '100.0');
     assert.strictEqual(i18n.formatNumber(13000.456), '13,000.5');
+    assert.strictEqual(i18n.formatInteger(10), '10');
+    assert.strictEqual(i18n.formatInteger(100.01), '100');
+    assert.strictEqual(i18n.formatInteger(13000.6), '13,001');
   });
 
   it('formats a date', () => {
@@ -100,9 +103,25 @@ describe('util helpers', () => {
 
   it('formats a duration', () => {
     const i18n = new I18n('en', {...Util.UIStrings});
-    assert.equal(i18n.formatDuration(60 * 1000), `1${NBSP}m`);
-    assert.equal(i18n.formatDuration(60 * 60 * 1000 + 5000), `1${NBSP}h 5${NBSP}s`);
-    assert.equal(i18n.formatDuration(28 * 60 * 60 * 1000 + 5000), `1${NBSP}d 4${NBSP}h 5${NBSP}s`);
+    assert.equal(i18n.formatDuration(60 * 1000), '1m');
+    assert.equal(i18n.formatDuration(60 * 60 * 1000 + 5000), '1h 5s');
+    assert.equal(i18n.formatDuration(28 * 60 * 60 * 1000 + 5000), '1d 4h 5s');
+  });
+
+  it('formats a duration based on locale', () => {
+    let i18n = new I18n('de', {...Util.UIStrings});
+    assert.equal(i18n.formatDuration(60 * 1000), `1${NBSP}Min.`);
+    assert.equal(i18n.formatDuration(60 * 60 * 1000 + 5000), `1${NBSP}Std. 5${NBSP}Sek.`);
+    assert.equal(
+      i18n.formatDuration(28 * 60 * 60 * 1000 + 5000), `1${NBSP}T 4${NBSP}Std. 5${NBSP}Sek.`);
+
+    // Yes, this is actually backwards (s h d).
+    i18n = new I18n('ar', {...Util.UIStrings});
+    /* eslint-disable no-irregular-whitespace */
+    assert.equal(i18n.formatDuration(60 * 1000), `١${NBSP}د`);
+    assert.equal(i18n.formatDuration(60 * 60 * 1000 + 5000), `١${NBSP}س ٥${NBSP}ث`);
+    assert.equal(i18n.formatDuration(28 * 60 * 60 * 1000 + 5000), `١ ي ٤ س ٥ ث`);
+    /* eslint-enable no-irregular-whitespace */
   });
 
   it('formats numbers based on locale', () => {
@@ -113,7 +132,7 @@ describe('util helpers', () => {
     assert.strictEqual(i18n.formatNumber(number), '12.346,9');
     assert.strictEqual(i18n.formatBytesToKiB(number), `12,1${NBSP}KiB`);
     assert.strictEqual(i18n.formatMilliseconds(number), `12.350${NBSP}ms`);
-    assert.strictEqual(i18n.formatSeconds(number), `12,3${NBSP}s`);
+    assert.strictEqual(i18n.formatSeconds(number), `12,3${NBSP}Sek.`);
   });
 
   it('uses decimal comma with en-XA test locale', () => {
@@ -124,7 +143,7 @@ describe('util helpers', () => {
     assert.strictEqual(i18n.formatNumber(number), '12.346,9');
     assert.strictEqual(i18n.formatBytesToKiB(number), `12,1${NBSP}KiB`);
     assert.strictEqual(i18n.formatMilliseconds(number), `12.350${NBSP}ms`);
-    assert.strictEqual(i18n.formatSeconds(number), `12,3${NBSP}s`);
+    assert.strictEqual(i18n.formatSeconds(number), `12,3${NBSP}Sek.`);
   });
 
   it('should not crash on unknown locales', () => {

package/report/test/renderer/util-test.js

@@ -56,7 +56,7 @@ describe('util helpers', () => {
     });
 
     // eslint-disable-next-line max-len
-    assert.equal(descriptions.networkThrottling, '565\xa0ms HTTP RTT, 1,400\xa0Kbps down, 600\xa0Kbps up (DevTools)');
+    assert.equal(descriptions.networkThrottling, '565\xa0ms HTTP RTT, 1,400\xa0kb/s down, 600\xa0kb/s up (DevTools)');
     assert.equal(descriptions.cpuThrottling, '4.5x slowdown (DevTools)');
   });
 
@@ -71,7 +71,7 @@ describe('util helpers', () => {
     });
 
     // eslint-disable-next-line max-len
-    assert.equal(descriptions.networkThrottling, '150\xa0ms TCP RTT, 1,600\xa0Kbps throughput (Simulated)');
+    assert.equal(descriptions.networkThrottling, '150\xa0ms TCP RTT, 1,600\xa0kb/s throughput (Simulated)');
     assert.equal(descriptions.cpuThrottling, '2x slowdown (Simulated)');
   });
 

package/report/test-assets/faux-psi.js

@@ -60,6 +60,8 @@ async function renderLHReport() {
           metaItemsEl,
           reportRootEl.querySelector('.lh-buttons')
         );
+        reportRootEl.querySelector('.lh-metrics-container')?.closest('.lh-category')?.classList
+            .add('lh--hoisted-meta');
       }
 
       container.append(reportRootEl);