[Lighthouse] Roll Lighthouse 8.0.0

Bug: 772558
Change-Id: Ib1182e2e3dddf8b0859cee85ca4dd5c7e5812cb3
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2930996
Reviewed-by: Paul Irish <[email protected]>
Commit-Queue: Paul Irish <[email protected]>

Author: Connor Clark

front_end/panels/lighthouse/LighthouseReportRenderer.ts

@@ -71,7 +71,6 @@ export class LighthouseReportRenderer extends self.ReportRenderer {
     if (simulated) {
       UI.Tooltip.Tooltip.install(timelineButton, i18nString(UIStrings.thePerformanceMetricsAboveAre));
     }
-    container.insertBefore(timelineButton, disclaimerEl.nextSibling);
 
     async function onViewTraceClick(): Promise<void> {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.LighthouseViewTrace);

front_end/third_party/lighthouse/lighthouse-dt-bundle.js

@@ -2542,7 +2542,7 @@ if (typeof module !== 'undefined' && module.exports) {
  * the report.
  */
 
-/* globals getFilenamePrefix Util ElementScreenshotRenderer */
+/* globals getFilenamePrefix Util TextEncoding ElementScreenshotRenderer */
 
 /** @typedef {import('./dom')} DOM */
 
@@ -2672,8 +2672,7 @@ class ReportUIFeatures {
 
     const showTreemapApp =
       this.json.audits['script-treemap-data'] && this.json.audits['script-treemap-data'].details;
-    // TODO: need window.opener to work in DevTools.
-    if (showTreemapApp && !this._dom.isDevTools()) {
+    if (showTreemapApp) {
       this.addButton({
         text: Util.i18n.strings.viewTreemapLabel,
         icon: 'treemap',
@@ -2700,12 +2699,18 @@ class ReportUIFeatures {
   }
 
   /**
-   * @param {{text: string, icon?: string, onClick: () => void}} opts
+   * @param {{container?: Element, text: string, icon?: string, onClick: () => void}} opts
    */
   addButton(opts) {
+    // report-ui-features doesn't have a reference to the root report el, and PSI has
+    // 2 reports on the page (and not even attached to DOM when installFeatures is called..)
+    // so we need a container option to specify where the element should go.
     const metricsEl = this._document.querySelector('.lh-audit-group--metrics');
-    // Not supported without metrics group.
-    if (!metricsEl) return;
+    const containerEl = opts.container || metricsEl;
+    if (!containerEl) return;
+
+    let buttonsEl = containerEl.querySelector('.lh-buttons');
+    if (!buttonsEl) buttonsEl = this._dom.createChildOf(containerEl, 'div', 'lh-buttons');
 
     const classes = [
       'lh-button',
@@ -2714,10 +2719,9 @@ class ReportUIFeatures {
       classes.push('report-icon');
       classes.push(`report-icon--${opts.icon}`);
     }
-    const buttonEl = this._dom.createChildOf(metricsEl, 'button', classes.join(' '));
-    buttonEl.addEventListener('click', opts.onClick);
+    const buttonEl = this._dom.createChildOf(buttonsEl, 'button', classes.join(' '));
     buttonEl.textContent = opts.text;
-    metricsEl.append(buttonEl);
+    buttonEl.addEventListener('click', opts.onClick);
     return buttonEl;
   }
 
@@ -3049,23 +3053,31 @@ class ReportUIFeatures {
   }
 
   /**
-   * Opens a new tab to the online viewer and sends the local page's JSON results
-   * to the online viewer using postMessage.
+   * The popup's window.name is keyed by version+url+fetchTime, so we reuse/select tabs correctly.
    * @param {LH.Result} json
    * @protected
    */
-  static openTabAndSendJsonReportToViewer(json) {
-    // The popup's window.name is keyed by version+url+fetchTime, so we reuse/select tabs correctly
+  static computeWindowNameSuffix(json) {
     // @ts-ignore - If this is a v2 LHR, use old `generatedTime`.
     const fallbackFetchTime = /** @type {string} */ (json.generatedTime);
     const fetchTime = json.fetchTime || fallbackFetchTime;
-    const windowName = `${json.lighthouseVersion}-${json.requestedUrl}-${fetchTime}`;
+    return `${json.lighthouseVersion}-${json.requestedUrl}-${fetchTime}`;
+  }
+
+  /**
+   * Opens a new tab to the online viewer and sends the local page's JSON results
+   * to the online viewer using postMessage.
+   * @param {LH.Result} json
+   * @protected
+   */
+  static openTabAndSendJsonReportToViewer(json) {
+    const windowName = 'viewer-' + this.computeWindowNameSuffix(json);
     const url = getAppsOrigin() + '/viewer/';
     ReportUIFeatures.openTabAndSendData({lhr: json}, url, windowName);
   }
 
   /**
-   * Opens a new tab to the treemap app and sends the JSON results using postMessage.
+   * Opens a new tab to the treemap app and sends the JSON results using URL.fragment
    * @param {LH.Result} json
    */
   static openTreemap(json) {
@@ -3074,13 +3086,23 @@ class ReportUIFeatures {
       throw new Error('no script treemap data found');
     }
 
-    const windowName = `treemap-${json.requestedUrl}`;
     /** @type {LH.Treemap.Options} */
     const treemapOptions = {
-      lhr: json,
+      lhr: {
+        requestedUrl: json.requestedUrl,
+        finalUrl: json.finalUrl,
+        audits: {
+          'script-treemap-data': json.audits['script-treemap-data'],
+        },
+        configSettings: {
+          locale: json.configSettings.locale,
+        },
+      },
     };
     const url = getAppsOrigin() + '/treemap/';
-    ReportUIFeatures.openTabAndSendData(treemapOptions, url, windowName);
+    const windowName = 'treemap-' + this.computeWindowNameSuffix(json);
+
+    ReportUIFeatures.openTabWithUrlData(treemapOptions, url, windowName);
   }
 
   /**
@@ -3106,10 +3128,26 @@ class ReportUIFeatures {
       }
     });
 
-    // The popup's window.name is keyed by version+url+fetchTime, so we reuse/select tabs correctly
     const popup = window.open(url, windowName);
   }
 
+  /**
+   * Opens a new tab to an external page and sends data via base64 encoded url params.
+   * @param {{lhr: LH.Result} | LH.Treemap.Options} data
+   * @param {string} url_
+   * @param {string} windowName
+   * @protected
+   */
+  static async openTabWithUrlData(data, url_, windowName) {
+    const url = new URL(url_);
+    const gzip = Boolean(window.CompressionStream);
+    url.hash = await TextEncoding.toBase64(JSON.stringify(data), {
+      gzip,
+    });
+    if (gzip) url.searchParams.set('gzip', '1');
+    window.open(url.toString(), windowName);
+  }
+
   /**
    * Expands all audit `<details>`.
    * Ideally, a print stylesheet could take care of this, but CSS has no way to
@@ -4071,11 +4109,12 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
    * @return {string}
    */
   _getScoringCalculatorHref(auditRefs) {
-    const v5andv6metrics = auditRefs.filter(audit => audit.group === 'metrics');
+    // TODO: filter by !!acronym when dropping renderer support of v7 LHRs.
+    const metrics = auditRefs.filter(audit => audit.group === 'metrics');
     const fci = auditRefs.find(audit => audit.id === 'first-cpu-idle');
     const fmp = auditRefs.find(audit => audit.id === 'first-meaningful-paint');
-    if (fci) v5andv6metrics.push(fci);
-    if (fmp) v5andv6metrics.push(fmp);
+    if (fci) metrics.push(fci);
+    if (fmp) metrics.push(fmp);
 
     /**
      * Clamp figure to 2 decimal places
@@ -4084,7 +4123,7 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
      */
     const clampTo2Decimals = val => Math.round(val * 100) / 100;
 
-    const metricPairs = v5andv6metrics.map(audit => {
+    const metricPairs = metrics.map(audit => {
       let value;
       if (typeof audit.result.numericValue === 'number') {
         value = audit.id === 'cumulative-layout-shift' ?
@@ -4270,17 +4309,17 @@ class PerformanceCategoryRenderer extends CategoryRenderer {
     ]);
     for (const metric of filterChoices) {
       const elemId = `metric-${metric.acronym}`;
+      const radioEl = this.dom.createChildOf(metricFilterEl, 'input', 'lh-metricfilter__radio', {
+        type: 'radio',
+        name: 'metricsfilter',
+        id: elemId,
+      });
+
       const labelEl = this.dom.createChildOf(metricFilterEl, 'label', 'lh-metricfilter__label', {
         for: elemId,
         title: metric.result && metric.result.title,
       });
       labelEl.textContent = metric.acronym || metric.id;
-      const radioEl = this.dom.createChildOf(labelEl, 'input', 'lh-metricfilter__radio', {
-        type: 'radio',
-        name: 'metricsfilter',
-        id: elemId,
-        hidden: 'true',
-      });
 
       if (metric.acronym === 'All') {
         radioEl.checked = true;
@@ -5010,3 +5049,82 @@ if (typeof module !== 'undefined' && module.exports) {
 } else {
   self.I18n = I18n;
 }
+;
+/**
+ * @license Copyright 2021 The Lighthouse Authors. All Rights Reserved.
+ * 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 self btoa atob window CompressionStream Response */
+
+const btoa_ = typeof btoa !== 'undefined' ?
+  btoa :
+  /** @param {string} str */
+  (str) => Buffer.from(str).toString('base64');
+const atob_ = typeof atob !== 'undefined' ?
+  atob :
+  /** @param {string} str */
+  (str) => Buffer.from(str, 'base64').toString();
+
+/**
+ * Takes an UTF-8 string and returns a base64 encoded string.
+ * If gzip is true, the UTF-8 bytes are gzipped before base64'd, using
+ * CompressionStream (currently only in Chrome), falling back to pako
+ * (which is only used to encode in our Node tests).
+ * @param {string} string
+ * @param {{gzip: boolean}} options
+ * @return {Promise<string>}
+ */
+async function toBase64(string, options) {
+  let bytes = new TextEncoder().encode(string);
+
+  if (options.gzip) {
+    if (typeof CompressionStream !== 'undefined') {
+      const cs = new CompressionStream('gzip');
+      const writer = cs.writable.getWriter();
+      writer.write(bytes);
+      writer.close();
+      const compAb = await new Response(cs.readable).arrayBuffer();
+      bytes = new Uint8Array(compAb);
+    } else {
+      /** @type {import('pako')=} */
+      const pako = window.pako;
+      bytes = pako.gzip(string);
+    }
+  }
+
+  let binaryString = '';
+  // This is ~25% faster than building the string one character at a time.
+  // https://jsbench.me/2gkoxazvjl
+  const chunkSize = 5000;
+  for (let i = 0; i < bytes.length; i += chunkSize) {
+    binaryString += String.fromCharCode(...bytes.subarray(i, i + chunkSize));
+  }
+  return btoa_(binaryString);
+}
+
+/**
+ * @param {string} encoded
+ * @param {{gzip: boolean}} options
+ * @return {string}
+ */
+function fromBase64(encoded, options) {
+  const binaryString = atob_(encoded);
+  const bytes = Uint8Array.from(binaryString, c => c.charCodeAt(0));
+
+  if (options.gzip) {
+    /** @type {import('pako')=} */
+    const pako = window.pako;
+    return pako.ungzip(bytes, {to: 'string'});
+  } else {
+    return new TextDecoder().decode(bytes);
+  }
+}
+
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = {toBase64, fromBase64};
+} else {
+  self.TextEncoding = {toBase64, fromBase64};
+}

front_end/third_party/lighthouse/locales/ar-XB.json

@@ -323,8 +323,8 @@
       background-color: var(--color-gray-200);
       outline: none;
     }
-    /* save-as-gist option hidden in report */
-    .lh-tools__dropdown .lh-tools--gist {
+    /* save-gist option hidden in report. */
+    .lh-tools__dropdown a[data-action='save-gist'] {
       display: none;
     }
 
@@ -393,8 +393,8 @@
         <a role="menuitem" tabindex="-1" href="#" class="report-icon report-icon--copy" data-i18n="dropdownCopyJSON" data-action="copy"></a>
         <a role="menuitem" tabindex="-1" href="#" class="report-icon report-icon--download" data-i18n="dropdownSaveHTML" data-action="save-html"></a>
         <a role="menuitem" tabindex="-1" href="#" class="report-icon report-icon--download" data-i18n="dropdownSaveJSON" data-action="save-json"></a>
-        <a role="menuitem" tabindex="-1" href="#" class="report-icon report-icon--open lh-tools--viewer" data-i18n="dropdownViewer" data-action="open-viewer"></a>
-        <a role="menuitem" tabindex="-1" href="#" class="report-icon report-icon--open lh-tools--gist" data-i18n="dropdownSaveGist" data-action="save-gist"></a>
+        <a role="menuitem" tabindex="-1" href="#" class="report-icon report-icon--open" data-i18n="dropdownViewer" data-action="open-viewer"></a>
+        <a role="menuitem" tabindex="-1" href="#" class="report-icon report-icon--open" data-i18n="dropdownSaveGist" data-action="save-gist"></a>
         <a role="menuitem" tabindex="-1" href="#" class="report-icon report-icon--dark" data-i18n="dropdownDarkTheme" data-action="toggle-dark"></a>
       </div>
     </div>

front_end/third_party/lighthouse/locales/ar.json

@@ -11,5 +11,5 @@ Tests that Lighthouse panel displays a warning when important data may affect pe
 [x] Clear storage
 [x] Simulated throttling
 Generate report: enabled visible
-Warning Text: There may be stored data affecting loading performance in this location: IndexedDB. Audit this page in an incognito window to prevent those resources from affecting your scores.
+Warning Text: There may be stored data affecting loading performance in these locations: Web SQL, IndexedDB. Audit this page in an incognito window to prevent those resources from affecting your scores.
 

front_end/third_party/lighthouse/locales/bg.json

@@ -14,7 +14,7 @@ Generate report: enabled visible
 
 =============== Lighthouse Results ===============
 URL: http://127.0.0.1:8000/devtools/lighthouse/resources/lighthouse-emulate-pass.html
-Version: 7.5.0
+Version: 8.0.0
 formFactor: mobile
 screenEmulation: {
   "mobile": true,

front_end/third_party/lighthouse/locales/ca.json

@@ -2,11 +2,11 @@ Tests that exporting works.
 
 ++++++++ testExportHtml
 
-# of .lh-audit divs (original): 136
+# of .lh-audit divs (original): 137
 
-# of .lh-audit divs (exported html): 136
+# of .lh-audit divs (exported html): 137
 
 ++++++++ testExportJson
 
-# of audits (json): 155
+# of audits (json): 154