lighthouse 9.5.0-dev.20220509 → 9.6.1

package/report/renderer/crc-details-renderer.js

@@ -14,6 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+'use strict';
 
 /**
  * @fileoverview This file contains helpers for constructing and rendering the

package/report/renderer/details-renderer.js

@@ -14,6 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+'use strict';
 
 /** @typedef {import('./dom.js').DOM} DOM */
 
@@ -26,7 +27,6 @@
 
 import {Util} from './util.js';
 import {CriticalRequestChainRenderer} from './crc-details-renderer.js';
-import {SnippetRenderer} from './snippet-renderer.js';
 import {ElementScreenshotRenderer} from './element-screenshot-renderer.js';
 
 const URL_PREFIXES = ['http://', 'https://', 'data:'];
@@ -78,8 +78,9 @@ export class DetailsRenderer {
    * @return {Element}
    */
   _renderBytes(details) {
-    // TODO: handle displayUnit once we have something other than 'KiB'
-    const value = Util.i18n.formatBytesToKiB(details.value, details.granularity || 0.1);
+    // TODO: handle displayUnit once we have something other than 'kb'
+    // Note that 'kb' is historical and actually represents KiB.
+    const value = Util.i18n.formatBytesToKiB(details.value, details.granularity);
     const textEl = this._renderText(value);
     textEl.title = Util.i18n.formatBytes(details.value);
     return textEl;
@@ -90,11 +91,9 @@ export class DetailsRenderer {
    * @return {Element}
    */
   _renderMilliseconds(details) {
-    let value;
+    let value = Util.i18n.formatMilliseconds(details.value, details.granularity);
     if (details.displayUnit === 'duration') {
       value = Util.i18n.formatDuration(details.value);
-    } else {
-      value = Util.i18n.formatMilliseconds(details.value, details.granularity || 10);
     }
 
     return this._renderText(value);
@@ -173,7 +172,7 @@ export class DetailsRenderer {
    * @return {Element}
    */
   _renderNumeric(details) {
-    const value = Util.i18n.formatNumber(details.value, details.granularity || 0.1);
+    const value = Util.i18n.formatNumber(details.value, details.granularity);
     const element = this._dom.createElement('div', 'lh-numeric');
     element.textContent = value;
     return element;
@@ -472,15 +471,16 @@ export class DetailsRenderer {
   }
 
   /**
-   * @param {LH.Audit.Details.List} details
+   * @param {LH.FormattedIcu<LH.Audit.Details.List>} details
    * @return {Element}
    */
   _renderList(details) {
     const listContainer = this._dom.createElement('div', 'lh-list');
 
     details.items.forEach(item => {
-      const snippetEl = SnippetRenderer.render(this._dom, item, this);
-      listContainer.appendChild(snippetEl);
+      const listItem = this.render(item);
+      if (!listItem) return;
+      listContainer.append(listItem);
     });
 
     return listContainer;

package/report/renderer/dom.js

@@ -14,6 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+'use strict';
 
 /* eslint-env browser */
 

package/report/renderer/drop-down-menu.js

@@ -3,6 +3,7 @@
  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
+'use strict';
 
 /* eslint-env browser */
 

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

@@ -3,6 +3,7 @@
  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
+'use strict';
 
 /**
  * @fileoverview These functions define {Rect}s and {Size}s using two different coordinate spaces:
@@ -252,6 +253,9 @@ export class ElementScreenshotRenderer {
       {width: screenshot.width, height: screenshot.height}
     );
 
+    const contentEl = dom.find('div.lh-element-screenshot__content', containerEl);
+    contentEl.style.top = `-${elementPreviewSizeDC.height}px`;
+
     const imageEl = dom.find('div.lh-element-screenshot__image', containerEl);
     imageEl.style.width = elementPreviewSizeDC.width + 'px';
     imageEl.style.height = elementPreviewSizeDC.height + 'px';

package/report/renderer/features-util.js

@@ -3,6 +3,7 @@
  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
+'use strict';
 
 /* eslint-env browser */
 

package/report/renderer/i18n.js

@@ -3,6 +3,7 @@
  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
+'use strict';
 
 // Not named `NBSP` because that creates a duplicate identifier (util.js).
 const NBSP2 = '\xa0';
@@ -21,7 +22,9 @@ export class I18n {
     // When testing, use a locale with more exciting numeric formatting.
     if (locale === 'en-XA') locale = 'de';
 
-    this._locale = locale;
+    this._numberDateLocale = locale;
+    this._numberFormatter = new Intl.NumberFormat(locale);
+    this._percentFormatter = new Intl.NumberFormat(locale, {style: 'percent'});
     this._strings = strings;
   }
 
@@ -29,58 +32,15 @@ export class I18n {
     return this._strings;
   }
 
-  /**
-   * @param {number} number
-   * @param {number|undefined} granularity
-   * @param {Intl.NumberFormatOptions=} opts
-   * @return {string}
-   */
-  _formatNumberWithGranularity(number, granularity, opts = {}) {
-    if (granularity !== undefined) {
-      const log10 = -Math.log10(granularity);
-      if (!Number.isInteger(log10)) {
-        console.warn(`granularity of ${granularity} is invalid. Using 1 instead`);
-        granularity = 1;
-      }
-
-      if (granularity < 1) {
-        opts = {...opts};
-        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;
-    } else if (Math.abs(number) < 0.0005) {
-      // Also avoids "-0".
-      number = 0;
-    }
-
-    return new Intl.NumberFormat(this._locale, opts).format(number).replace(' ', NBSP2);
-  }
-
   /**
    * Format number.
    * @param {number} number
-   * @param {number=} granularity Controls how coarse the displayed value is.
-   *                              If undefined, the number will be displayed as described
-   *                              by the Intl defaults: tinyurl.com/7s67w5x7
-   * @return {string}
-   */
-  formatNumber(number, granularity) {
-    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
+   * @param {number=} granularity Number of decimal places to include. Defaults to 0.1.
    * @return {string}
    */
-  formatInteger(number) {
-    return this._formatNumberWithGranularity(number, 1);
+  formatNumber(number, granularity = 0.1) {
+    const coarseValue = Math.round(number / granularity) * granularity;
+    return this._numberFormatter.format(coarseValue);
   }
 
   /**
@@ -89,99 +49,92 @@ export class I18n {
    * @return {string}
    */
   formatPercent(number) {
-    return new Intl.NumberFormat(this._locale, {style: 'percent'}).format(number);
+    return this._percentFormatter.format(number);
   }
 
   /**
    * @param {number} size
-   * @param {number=} granularity Controls how coarse the displayed value is.
-   *                              If undefined, the number will be displayed in full.
+   * @param {number=} granularity Controls how coarse the displayed value is, defaults to 0.1
    * @return {string}
    */
-  formatBytesToKiB(size, granularity = undefined) {
-    return this._formatNumberWithGranularity(size / KiB, granularity) + `${NBSP2}KiB`;
+  formatBytesToKiB(size, granularity = 0.1) {
+    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.
-   *                              If undefined, the number will be displayed in full.
+   * @param {number=} granularity Controls how coarse the displayed value is, defaults to 0.1
    * @return {string}
    */
-  formatBytesToMiB(size, granularity = undefined) {
-    return this._formatNumberWithGranularity(size / MiB, granularity) + `${NBSP2}MiB`;
+  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.
-   *                              If undefined, the number will be displayed in full.
+   * @param {number=} granularity Controls how coarse the displayed value is, defaults to 1
    * @return {string}
    */
   formatBytes(size, granularity = 1) {
-    return this._formatNumberWithGranularity(size, granularity, {
-      style: 'unit',
-      unit: 'byte',
-      unitDisplay: 'long',
-    });
+    const formatter = this._byteFormatterForGranularity(granularity);
+    const kbs = formatter.format(Math.round(size / granularity) * granularity);
+    return `${kbs}${NBSP2}bytes`;
   }
 
   /**
    * @param {number} size
-   * @param {number=} granularity Controls how coarse the displayed value is.
-   *                              If undefined, the number will be displayed in full.
+   * @param {number=} granularity Controls how coarse the displayed value is, defaults to 0.1
    * @return {string}
    */
-  formatBytesWithBestUnit(size, granularity = undefined) {
+  formatBytesWithBestUnit(size, granularity = 0.1) {
     if (size >= MiB) return this.formatBytesToMiB(size, granularity);
     if (size >= KiB) return this.formatBytesToKiB(size, granularity);
-    return this._formatNumberWithGranularity(size, granularity, {
-      style: 'unit',
-      unit: 'byte',
-      unitDisplay: 'narrow',
-    });
+    return this.formatNumber(size, granularity) + '\xa0B';
   }
 
   /**
-   * @param {number} size
-   * @param {number=} granularity Controls how coarse the displayed value is.
-   *                              If undefined, the number will be displayed in full.
-   * @return {string}
+   * 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}
    */
-  formatKbps(size, granularity = undefined) {
-    return this._formatNumberWithGranularity(size, granularity, {
-      style: 'unit',
-      unit: 'kilobit-per-second',
-      unitDisplay: 'short',
+  _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,
     });
   }
 
   /**
    * @param {number} ms
-   * @param {number=} granularity Controls how coarse the displayed value is.
-   *                              If undefined, the number will be displayed in full.
+   * @param {number=} granularity Controls how coarse the displayed value is, defaults to 10
    * @return {string}
    */
-  formatMilliseconds(ms, granularity = undefined) {
-    return this._formatNumberWithGranularity(ms, granularity, {
-      style: 'unit',
-      unit: 'millisecond',
-      unitDisplay: 'short',
-    });
+  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`;
   }
 
   /**
    * @param {number} ms
-   * @param {number=} granularity Controls how coarse the displayed value is.
-   *                              If undefined, the number will be displayed in full.
+   * @param {number=} granularity Controls how coarse the displayed value is, defaults to 0.1
    * @return {string}
    */
-  formatSeconds(ms, granularity = undefined) {
-    return this._formatNumberWithGranularity(ms / 1000, granularity, {
-      style: 'unit',
-      unit: 'second',
-      unitDisplay: 'short',
-    });
+  formatSeconds(ms, granularity = 0.1) {
+    const coarseTime = Math.round(ms / 1000 / granularity) * granularity;
+    return `${this._numberFormatter.format(coarseTime)}${NBSP2}s`;
   }
 
   /**
@@ -201,10 +154,10 @@ export class I18n {
     // and https://github.com/GoogleChrome/lighthouse/pull/9822
     let formatter;
     try {
-      formatter = new Intl.DateTimeFormat(this._locale, options);
+      formatter = new Intl.DateTimeFormat(this._numberDateLocale, options);
     } catch (err) {
       options.timeZone = 'UTC';
-      formatter = new Intl.DateTimeFormat(this._locale, options);
+      formatter = new Intl.DateTimeFormat(this._numberDateLocale, options);
     }
 
     return formatter.format(new Date(date));
@@ -216,10 +169,6 @@ 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';
@@ -228,24 +177,19 @@ export class I18n {
     /** @type {Array<string>} */
     const parts = [];
     /** @type {Record<string, number>} */
-    const unitToSecondsPer = {
-      day: 60 * 60 * 24,
-      hour: 60 * 60,
-      minute: 60,
-      second: 1,
+    const unitLabels = {
+      d: 60 * 60 * 24,
+      h: 60 * 60,
+      m: 60,
+      s: 1,
     };
 
-    Object.keys(unitToSecondsPer).forEach(unit => {
-      const secondsPerUnit = unitToSecondsPer[unit];
-      const numberOfUnits = Math.floor(timeInSeconds / secondsPerUnit);
+    Object.keys(unitLabels).forEach(label => {
+      const unit = unitLabels[label];
+      const numberOfUnits = Math.floor(timeInSeconds / unit);
       if (numberOfUnits > 0) {
-        timeInSeconds -= numberOfUnits * secondsPerUnit;
-        const part = this._formatNumberWithGranularity(numberOfUnits, 1, {
-          style: 'unit',
-          unit,
-          unitDisplay: 'narrow',
-        });
-        parts.push(part);
+        timeInSeconds -= numberOfUnits * unit;
+        parts.push(`${numberOfUnits}\xa0${label}`);
       }
     });
 

package/report/renderer/logger.js

@@ -14,6 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+'use strict';
 
 /**
  * Logs messages via a UI butter.

package/report/renderer/open-tab.js

@@ -14,6 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+'use strict';
 
 import {TextEncoding} from './text-encoding.js';
 
@@ -37,7 +38,7 @@ function computeWindowNameSuffix(json) {
   // @ts-expect-error - If this is a v2 LHR, use old `generatedTime`.
   const fallbackFetchTime = /** @type {string} */ (json.generatedTime);
   const fetchTime = json.fetchTime || fallbackFetchTime;
-  return `${json.lighthouseVersion}-${json.finalUrl}-${fetchTime}`;
+  return `${json.lighthouseVersion}-${json.requestedUrl}-${fetchTime}`;
 }
 
 /**
@@ -119,6 +120,7 @@ function openTreemap(json) {
   /** @type {LH.Treemap.Options} */
   const treemapOptions = {
     lhr: {
+      requestedUrl: json.requestedUrl,
       finalUrl: json.finalUrl,
       audits: {
         'script-treemap-data': json.audits['script-treemap-data'],

package/report/renderer/performance-category-renderer.js

@@ -14,6 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+'use strict';
 
 /** @typedef {import('./dom.js').DOM} DOM */
 

package/report/renderer/pwa-category-renderer.js

@@ -14,6 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+'use strict';
 
 import {Util} from './util.js';
 import {CategoryRenderer} from './category-renderer.js';

package/report/renderer/report-renderer.js

@@ -17,6 +17,7 @@
  * Dummy text for ensuring report robustness: </script> pre$`post %%LIGHTHOUSE_JSON%%
  * (this is handled by terser)
  */
+'use strict';
 
 /** @typedef {import('./dom.js').DOM} DOM */
 

package/report/renderer/report-ui-features.js

@@ -14,6 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+'use strict';
 
 /**
  * @fileoverview Adds tools button, print, and other dynamic functionality to

package/report/renderer/snippet-renderer.js

@@ -3,6 +3,7 @@
  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
+'use strict';
 
 /** @typedef {import('./details-renderer').DetailsRenderer} DetailsRenderer */
 /** @typedef {import('./dom').DOM} DOM */

package/report/renderer/swap-locale-feature.js

@@ -3,6 +3,7 @@
  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
+'use strict';
 
 /**
  * @fileoverview Creates a <select> element, filled with all supported locales

package/report/renderer/text-encoding.js

@@ -3,6 +3,7 @@
  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
+'use strict';
 
 /* global CompressionStream */
 

package/report/renderer/topbar-features.js

@@ -3,6 +3,7 @@
  * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
+'use strict';
 
 /* eslint-env browser */
 

package/report/renderer/util.js

@@ -14,6 +14,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+'use strict';
 
 /** @template T @typedef {import('./i18n').I18n<T>} I18n */
 
@@ -314,26 +315,24 @@ class Util {
     }
 
     const MAX_LENGTH = 64;
-    if (parsedUrl.protocol !== 'data:') {
-      // Always elide hexadecimal hash
-      name = name.replace(/([a-f0-9]{7})[a-f0-9]{13}[a-f0-9]*/g, `$1${ELLIPSIS}`);
-      // Also elide other hash-like mixed-case strings
-      name = name.replace(/([a-zA-Z0-9-_]{9})(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z0-9-_]{10,}/g,
-        `$1${ELLIPSIS}`);
-      // Also elide long number sequences
-      name = name.replace(/(\d{3})\d{6,}/g, `$1${ELLIPSIS}`);
-      // Merge any adjacent ellipses
-      name = name.replace(/\u2026+/g, ELLIPSIS);
-
-      // Elide query params first
-      if (name.length > MAX_LENGTH && name.includes('?')) {
-        // Try to leave the first query parameter intact
-        name = name.replace(/\?([^=]*)(=)?.*/, `?$1$2${ELLIPSIS}`);
-
-        // Remove it all if it's still too long
-        if (name.length > MAX_LENGTH) {
-          name = name.replace(/\?.*/, `?${ELLIPSIS}`);
-        }
+    // Always elide hexadecimal hash
+    name = name.replace(/([a-f0-9]{7})[a-f0-9]{13}[a-f0-9]*/g, `$1${ELLIPSIS}`);
+    // Also elide other hash-like mixed-case strings
+    name = name.replace(/([a-zA-Z0-9-_]{9})(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z0-9-_]{10,}/g,
+      `$1${ELLIPSIS}`);
+    // Also elide long number sequences
+    name = name.replace(/(\d{3})\d{6,}/g, `$1${ELLIPSIS}`);
+    // Merge any adjacent ellipses
+    name = name.replace(/\u2026+/g, ELLIPSIS);
+
+    // Elide query params first
+    if (name.length > MAX_LENGTH && name.includes('?')) {
+      // Try to leave the first query parameter intact
+      name = name.replace(/\?([^=]*)(=)?.*/, `?$1$2${ELLIPSIS}`);
+
+      // Remove it all if it's still too long
+      if (name.length > MAX_LENGTH) {
+        name = name.replace(/\?.*/, `?${ELLIPSIS}`);
       }
     }
 
@@ -429,11 +428,10 @@ class Util {
         break;
       case 'devtools': {
         const {cpuSlowdownMultiplier, requestLatencyMs} = throttling;
-        // eslint-disable-next-line max-len
         cpuThrottling = `${Util.i18n.formatNumber(cpuSlowdownMultiplier)}x slowdown (DevTools)`;
-        networkThrottling = `${Util.i18n.formatMilliseconds(requestLatencyMs)} HTTP RTT, ` +
-          `${Util.i18n.formatKbps(throttling.downloadThroughputKbps)} down, ` +
-          `${Util.i18n.formatKbps(throttling.uploadThroughputKbps)} up (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)`;
 
         const isSlow4G = () => {
           return requestLatencyMs === 150 * 3.75 &&
@@ -445,10 +443,9 @@ class Util {
       }
       case 'simulate': {
         const {cpuSlowdownMultiplier, rttMs, throughputKbps} = throttling;
-        // eslint-disable-next-line max-len
         cpuThrottling = `${Util.i18n.formatNumber(cpuSlowdownMultiplier)}x slowdown (Simulated)`;
-        networkThrottling = `${Util.i18n.formatMilliseconds(rttMs)} TCP RTT, ` +
-          `${Util.i18n.formatKbps(throughputKbps)} throughput (Simulated)`;
+        networkThrottling = `${Util.i18n.formatNumber(rttMs)}${NBSP}ms TCP RTT, ` +
+          `${Util.i18n.formatNumber(throughputKbps)}${NBSP}Kbps throughput (Simulated)`;
 
         const isSlow4G = () => {
           return rttMs === 150 && throughputKbps === 1.6 * 1024;

package/report/test/clients/bundle-test.js

@@ -4,6 +4,7 @@
  * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
  */
 
+'use strict';
 
 import fs from 'fs';
 
@@ -16,6 +17,9 @@ import {LH_ROOT} from '../../../root.js';
 const sampleResultsStr =
   fs.readFileSync(LH_ROOT + '/lighthouse-core/test/results/sample_v2.json', 'utf-8');
 
+
+/* eslint-env jest */
+
 describe('lighthouseRenderer bundle', () => {
   let document;
   beforeAll(() => {

package/report/test/generator/file-namer-test.js

@@ -9,6 +9,7 @@ const assert = require('assert').strict;
 
 const getLhrFilenamePrefix = require('../../generator/file-namer.js').getLhrFilenamePrefix;
 
+/* eslint-env jest */
 describe('file-namer helper', () => {
   it('generates filename prefixes', () => {
     const results = {