lighthouse 9.5.0-dev.20220607 → 9.6.2

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
@@ -105,33 +106,34 @@ class CriticalRequestChainRenderer {
 
     // Construct lines and add spacers for sub requests.
     segment.treeMarkers.forEach(separator => {
-      const classSeparator = separator ?
-        'lh-tree-marker lh-vert' :
-        'lh-tree-marker';
-      treeMarkeEl.append(
-        dom.createElement('span', classSeparator),
-        dom.createElement('span', 'lh-tree-marker')
-      );
+      if (separator) {
+        treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker lh-vert'));
+        treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker'));
+      } else {
+        treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker'));
+        treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker'));
+      }
     });
 
-    const classLastChild = segment.isLastChild ?
-      'lh-tree-marker lh-up-right' :
-      'lh-tree-marker lh-vert-right';
-    const classHasChildren = segment.hasChildren ?
-      'lh-tree-marker lh-horiz-down' :
-      'lh-tree-marker lh-right';
+    if (segment.isLastChild) {
+      treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker lh-up-right'));
+      treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker lh-right'));
+    } else {
+      treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker lh-vert-right'));
+      treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker lh-right'));
+    }
 
-    treeMarkeEl.append(
-      dom.createElement('span', classLastChild),
-      dom.createElement('span', 'lh-tree-marker lh-right'),
-      dom.createElement('span', classHasChildren)
-    );
+    if (segment.hasChildren) {
+      treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker lh-horiz-down'));
+    } else {
+      treeMarkeEl.appendChild(dom.createElement('span', 'lh-tree-marker lh-right'));
+    }
 
     // Fill in url, host, and request size information.
     const url = segment.node.request.url;
     const linkEl = detailsRenderer.renderTextURL(url);
     const treevalEl = dom.find('.lh-crc-node__tree-value', chainEl);
-    treevalEl.append(linkEl);
+    treevalEl.appendChild(linkEl);
 
     if (!segment.hasChildren) {
       const {startTime, endTime, transferSize} = segment.node.request;
@@ -140,7 +142,8 @@ class CriticalRequestChainRenderer {
       const span2 = dom.createElement('span', 'lh-crc-node__chain-duration');
       span2.textContent = Util.i18n.formatBytesToKiB(transferSize, 0.01);
 
-      treevalEl.append(span, span2);
+      treevalEl.appendChild(span);
+      treevalEl.appendChild(span2);
     }
 
     return chainEl;
@@ -156,7 +159,7 @@ class CriticalRequestChainRenderer {
    * @param {DetailsRenderer} detailsRenderer
    */
   static buildTree(dom, tmpl, segment, elem, details, detailsRenderer) {
-    elem.append(CRCRenderer.createChainNode(dom, segment, detailsRenderer));
+    elem.appendChild(CRCRenderer.createChainNode(dom, segment, detailsRenderer));
     if (segment.node.children) {
       for (const key of Object.keys(segment.node.children)) {
         const childSegment = CRCRenderer.createSegment(segment.node.children, key,

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 */
 
@@ -77,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;
@@ -89,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);
@@ -119,12 +119,12 @@ export class DetailsRenderer {
     }
 
     const element = this._dom.createElement('div', 'lh-text__url');
-    element.append(this._renderLink({text: displayedPath, url}));
+    element.appendChild(this._renderLink({text: displayedPath, url}));
 
     if (displayedHost) {
       const hostElem = this._renderText(displayedHost);
       hostElem.classList.add('lh-text__url-host');
-      element.append(hostElem);
+      element.appendChild(hostElem);
     }
 
     if (title) {
@@ -172,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;
@@ -397,7 +397,7 @@ export class DetailsRenderer {
 
       if (valueElement) {
         const classes = `lh-table-column--${heading.valueType}`;
-        this._dom.createChildOf(rowElem, 'td', classes).append(valueElement);
+        this._dom.createChildOf(rowElem, 'td', classes).appendChild(valueElement);
       } else {
         // Empty cell is rendered for a column if:
         // - the pair is null
@@ -452,7 +452,7 @@ export class DetailsRenderer {
       const classes = `lh-table-column--${valueType}`;
       const labelEl = this._dom.createElement('div', 'lh-text');
       labelEl.textContent = heading.label;
-      this._dom.createChildOf(theadTrElem, 'th', classes).append(labelEl);
+      this._dom.createChildOf(theadTrElem, 'th', classes).appendChild(labelEl);
     }
 
     const tbodyElem = this._dom.createChildOf(tableElem, 'tbody');
@@ -495,13 +495,13 @@ export class DetailsRenderer {
     if (item.nodeLabel) {
       const nodeLabelEl = this._dom.createElement('div');
       nodeLabelEl.textContent = item.nodeLabel;
-      element.append(nodeLabelEl);
+      element.appendChild(nodeLabelEl);
     }
     if (item.snippet) {
       const snippetEl = this._dom.createElement('div');
       snippetEl.classList.add('lh-node__snippet');
       snippetEl.textContent = item.snippet;
-      element.append(snippetEl);
+      element.appendChild(snippetEl);
     }
     if (item.selector) {
       element.title = item.selector;

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 */
 
@@ -97,7 +98,7 @@ export class DOM {
    */
   createChildOf(parentElem, elementName, className) {
     const element = this.createElement(elementName, className);
-    parentElem.append(element);
+    parentElem.appendChild(element);
     return element;
   }
 
@@ -135,7 +136,7 @@ export class DOM {
     for (const segment of Util.splitMarkdownLink(text)) {
       if (!segment.isLink) {
         // Plain text segment.
-        element.append(this._document.createTextNode(segment.text));
+        element.appendChild(this._document.createTextNode(segment.text));
         continue;
       }
 
@@ -153,7 +154,7 @@ export class DOM {
       a.target = '_blank';
       a.textContent = segment.text;
       this.safelySetHref(a, url.href);
-      element.append(a);
+      element.appendChild(a);
     }
 
     return element;
@@ -210,9 +211,9 @@ export class DOM {
       if (segment.isCode) {
         const pre = this.createElement('code');
         pre.textContent = segment.text;
-        element.append(pre);
+        element.appendChild(pre);
       } else {
-        element.append(this._document.createTextNode(segment.text));
+        element.appendChild(this._document.createTextNode(segment.text));
       }
     }
 
@@ -295,7 +296,7 @@ export class DOM {
     const a = this.createElement('a');
     a.download = filename;
     this.safelySetBlobHref(a, blob);
-    this._document.body.append(a); // Firefox requires anchor to be in the DOM.
+    this._document.body.appendChild(a); // Firefox requires anchor to be in the DOM.
     a.click();
 
     // cleanup.

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:
@@ -186,7 +187,7 @@ export class ElementScreenshotRenderer {
         overlay.remove();
         return;
       }
-      overlay.append(screenshotElement);
+      overlay.appendChild(screenshotElement);
       overlay.addEventListener('click', () => overlay.remove());
     });
   }
@@ -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'],