lighthouse 8.3.0-dev.20210907 → 8.3.0

package/report/assets/templates.html

@@ -221,9 +221,9 @@ limitations under the License.
   </style>
   <div class="lh-scores-wrapper">
     <div class="lh-scores-container">
-      <div class="lh-pyro">
-        <div class="lh-before"></div>
-        <div class="lh-after"></div>
+      <div class="pyro">
+        <div class="before"></div>
+        <div class="after"></div>
       </div>
     </div>
   </div>
@@ -251,6 +251,9 @@ limitations under the License.
       user-select: none;
       flex: none;
     }
+    .lh-topbar__logo .shape {
+      fill: var(--report-text-color);
+    }
 
     .lh-topbar__url {
       margin: var(--topbar-padding);
@@ -283,10 +286,10 @@ limitations under the License.
     .lh-tools__button svg {
       fill: var(--tools-icon-color);
     }
-    .lh-dark .lh-tools__button svg {
+    .dark .lh-tools__button svg {
       filter: invert(1);
     }
-    .lh-tools__button.lh-active + .lh-tools__dropdown {
+    .lh-tools__button.active + .lh-tools__dropdown {
       opacity: 1;
       clip: rect(-1px, 194px, 242px, -3px);
       visibility: visible;
@@ -384,14 +387,14 @@ limitations under the License.
         </svg>
       </button>
       <div id="lh-tools-dropdown" role="menu" class="lh-tools__dropdown" aria-labelledby="lh-tools-button">
-        <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--print" data-i18n="dropdownPrintSummary" data-action="print-summary"></a>
-        <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--print" data-i18n="dropdownPrintExpanded" data-action="print-expanded"></a>
-        <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--copy" data-i18n="dropdownCopyJSON" data-action="copy"></a>
-        <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--download" data-i18n="dropdownSaveHTML" data-action="save-html"></a>
-        <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--download" data-i18n="dropdownSaveJSON" data-action="save-json"></a>
-        <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--open" data-i18n="dropdownViewer" data-action="open-viewer"></a>
-        <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--open" data-i18n="dropdownSaveGist" data-action="save-gist"></a>
-        <a role="menuitem" tabindex="-1" href="#" class="lh-report-icon lh-report-icon--dark" data-i18n="dropdownDarkTheme" data-action="toggle-dark"></a>
+        <a role="menuitem" tabindex="-1" href="#" class="report-icon report-icon--print" data-i18n="dropdownPrintSummary" data-action="print-summary"></a>
+        <a role="menuitem" tabindex="-1" href="#" class="report-icon report-icon--print" data-i18n="dropdownPrintExpanded" data-action="print-expanded"></a>
+        <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" 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>
   </div>
@@ -403,22 +406,22 @@ limitations under the License.
     /* CSS Fireworks. Originally by Eddie Lin
        https://codepen.io/paulirish/pen/yEVMbP
     */
-    .lh-pyro {
+    .pyro {
       display: none;
       z-index: 1;
       pointer-events: none;
     }
-    .lh-score100 .lh-pyro {
+    .score100 .pyro {
       display: block;
     }
-    .lh-score100 .lh-lighthouse stop:first-child {
+    .score100 .lh-lighthouse stop:first-child {
       stop-color: hsla(200, 12%, 95%, 0);
     }
-    .lh-score100 .lh-lighthouse stop:last-child {
+    .score100 .lh-lighthouse stop:last-child {
       stop-color: hsla(65, 81%, 76%, 1);
     }
 
-    .lh-pyro > .lh-pyro-before, .lh-pyro > .lh-pyro-after {
+    .pyro > .before, .pyro > .after {
       position: absolute;
       width: 5px;
       height: 5px;
@@ -428,11 +431,11 @@ limitations under the License.
       animation-delay: 1s, 1s, 1s;
     }
 
-    .lh-pyro > .lh-pyro-after {
+    .pyro > .after {
       animation-delay: 2.25s, 2.25s, 2.25s;
       animation-duration: 1.25s, 1.25s, 6.25s;
     }
-    .lh-fireworks-paused .lh-pyro > div {
+    .fireworks-paused .pyro > div {
       animation-play-state: paused;
     }
 
@@ -585,7 +588,7 @@ limitations under the License.
     .lh-gauge--pwa__logo--secondary-color {
       fill: #3D3D3D;
     }
-    .lh-dark .lh-gauge--pwa__logo--secondary-color {
+    .dark .lh-gauge--pwa__logo--secondary-color {
       fill: #D8B6B6;
     }
 
@@ -661,48 +664,48 @@ limitations under the License.
 <template id="crc">
   <div class="lh-crc-container">
     <style>
-      .lh-crc .lh-tree-marker {
+      .lh-crc .tree-marker {
         width: 12px;
         height: 26px;
         display: block;
         float: left;
         background-position: top left;
       }
-      .lh-crc .lh-horiz-down {
+      .lh-crc .horiz-down {
         background: url('data:image/svg+xml;utf8,<svg width="16" height="26" viewBox="0 0 16 26" xmlns="http://www.w3.org/2000/svg"><g fill="%23D8D8D8" fill-rule="evenodd"><path d="M16 12v2H-2v-2z"/><path d="M9 12v14H7V12z"/></g></svg>');
       }
-      .lh-crc .lh-right {
+      .lh-crc .right {
         background: url('data:image/svg+xml;utf8,<svg width="16" height="26" viewBox="0 0 16 26" xmlns="http://www.w3.org/2000/svg"><path d="M16 12v2H0v-2z" fill="%23D8D8D8" fill-rule="evenodd"/></svg>');
       }
-      .lh-crc .lh-up-right {
+      .lh-crc .up-right {
         background: url('data:image/svg+xml;utf8,<svg width="16" height="26" viewBox="0 0 16 26" xmlns="http://www.w3.org/2000/svg"><path d="M7 0h2v14H7zm2 12h7v2H9z" fill="%23D8D8D8" fill-rule="evenodd"/></svg>');
       }
-      .lh-crc .lh-vert-right {
+      .lh-crc .vert-right {
         background: url('data:image/svg+xml;utf8,<svg width="16" height="26" viewBox="0 0 16 26" xmlns="http://www.w3.org/2000/svg"><path d="M7 0h2v27H7zm2 12h7v2H9z" fill="%23D8D8D8" fill-rule="evenodd"/></svg>');
       }
-      .lh-crc .lh-vert {
+      .lh-crc .vert {
         background: url('data:image/svg+xml;utf8,<svg width="16" height="26" viewBox="0 0 16 26" xmlns="http://www.w3.org/2000/svg"><path d="M7 0h2v26H7z" fill="%23D8D8D8" fill-rule="evenodd"/></svg>');
       }
-      .lh-crc .lh-crc-tree {
+      .lh-crc .crc-tree {
         font-size: 14px;
         width: 100%;
         overflow-x: auto;
       }
-      .lh-crc .lh-crc-node {
+      .lh-crc .crc-node {
         height: 26px;
         line-height: 26px;
         white-space: nowrap;
       }
-      .lh-crc .lh-crc-node__tree-value {
+      .lh-crc .crc-node__tree-value {
         margin-left: 10px;
       }
-      .lh-crc .lh-crc-node__tree-value div {
+      .lh-crc .crc-node__tree-value div {
         display: inline;
       }
-      .lh-crc .lh-crc-node__chain-duration {
+      .lh-crc .crc-node__chain-duration {
         font-weight: 700;
       }
-      .lh-crc .lh-crc-initial-nav {
+      .lh-crc .crc-initial-nav {
         color: #595959;
         font-style: italic;
       }
@@ -716,7 +719,7 @@ limitations under the License.
       </div>
     </div>
     <div class="lh-crc">
-      <div class="lh-crc-initial-nav"></div>
+      <div class="crc-initial-nav"></div>
       <!-- crcChain -->
     </div>
   </div>
@@ -724,9 +727,9 @@ limitations under the License.
 
 <!-- Lighthouse crtiical request chains component, single chain -->
 <template id="crcChain">
-  <div class="lh-crc-node">
-    <span class="lh-crc-node__tree-marker"></span>
-    <span class="lh-crc-node__tree-value"></span>
+  <div class="crc-node">
+    <span class="crc-node__tree-marker"></span>
+    <span class="crc-node__tree-value"></span>
   </div>
 </template>
 

package/report/clients/bundle.js

@@ -11,7 +11,6 @@
 // until we work out a common rendering interface.
 // See: https://github.com/GoogleChrome/lighthouse/pull/12623
 
-// Modify lighthouse-core/scripts/roll-to-devtools.sh if exports change.
 export {DOM} from '../renderer/dom.js';
 export {ReportRenderer} from '../renderer/report-renderer.js';
 export {ReportUIFeatures} from '../renderer/report-ui-features.js';

package/report/clients/psi.js

@@ -20,13 +20,10 @@ import {DetailsRenderer} from '../renderer/details-renderer.js';
 import {DOM} from '../renderer/dom.js';
 import {ElementScreenshotRenderer} from '../renderer/element-screenshot-renderer.js';
 import {I18n} from '../renderer/i18n.js';
-import {openTreemap} from '../renderer/open-tab.js';
 import {PerformanceCategoryRenderer} from '../renderer/performance-category-renderer.js';
 import {ReportUIFeatures} from '../renderer/report-ui-features.js';
 import {Util} from '../renderer/util.js';
 
-/** @typedef {{scoreGaugeEl: Element, perfCategoryEl: Element, finalScreenshotDataUri: string|null, scoreScaleEl: Element, installFeatures: Function}} PrepareLabDataResult */
-
 /**
  * Returns all the elements that PSI needs to render the report
  * We expose this helper method to minimize the 'public' API surface of the renderer
@@ -39,7 +36,7 @@ import {Util} from '../renderer/util.js';
  *
  * @param {LH.Result | string} LHResult The stringified version of {LH.Result}
  * @param {Document} document The host page's window.document
- * @return {PrepareLabDataResult}
+ * @return {{scoreGaugeEl: Element, perfCategoryEl: Element, finalScreenshotDataUri: string|null, scoreScaleEl: Element, installFeatures: Function}}
  */
 export function prepareLabData(LHResult, document) {
   const lhResult = (typeof LHResult === 'string') ?
@@ -92,11 +89,10 @@ export function prepareLabData(LHResult, document) {
   /** @param {HTMLElement} reportEl */
   const installFeatures = (reportEl) => {
     if (fullPageScreenshot) {
-      // 1) Add fpss css var to reportEl parent so any thumbnails will work
       ElementScreenshotRenderer.installFullPageScreenshot(
         reportEl, fullPageScreenshot.screenshot);
 
-      // 2) Append the overlay element to a specific part of the DOM so that
+      // Append the overlay element to a specific part of the DOM so that
       // the sticky tab group element renders correctly. If put in the reportEl
       // like normal, then the sticky header would bleed through the overlay
       // element.
@@ -126,7 +122,7 @@ export function prepareLabData(LHResult, document) {
         container: buttonContainer,
         text: Util.i18n.strings.viewTreemapLabel,
         icon: 'treemap',
-        onClick: () => openTreemap(lhResult),
+        onClick: () => ReportUIFeatures.openTreemap(lhResult),
       });
     }
   };
@@ -145,9 +141,3 @@ function _getFinalScreenshot(perfCategory) {
   if (!details || details.type !== 'screenshot') return null;
   return details.data;
 }
-
-// TODO: remove with report API refactor.
-if (typeof window !== 'undefined') {
-  // @ts-expect-error
-  window.prepareLabData = prepareLabData;
-}

package/report/clients/standalone.js

@@ -11,7 +11,7 @@
  * The renderer code is bundled and injected into the report HTML along with the JSON report.
  */
 
-/* global ga */
+/* global document window ga */
 
 import {DOM} from '../renderer/dom.js';
 import {Logger} from '../renderer/logger.js';

package/report/{types/buffer.d.ts → clients/treemap.js}

@@ -3,17 +3,19 @@
  * 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';
 
-/**
- * A minimal type for Node's `Buffer` to avoid importing all Node types for
- * atob/btoa fallback for testing `text-encoding.js`.
- */
+/* global window */
+
+// TODO(esmodules): delete when treemap app is esm.
 
-declare global {
-  class Buffer {
-    static from(str: string, encoding?: string): Buffer;
-    toString(encoding?: string): string;
-  }
-}
+import {I18n} from '../renderer/i18n.js';
+import {Logger} from '../renderer/logger.js';
+import {TextEncoding} from '../renderer/text-encoding.js';
 
-export {}
+// @ts-expect-error
+window.I18n = I18n;
+// @ts-expect-error
+window.Logger = Logger;
+// @ts-expect-error
+window.TextEncoding = TextEncoding;

package/report/renderer/category-renderer.js

@@ -118,8 +118,8 @@ export class CategoryRenderer {
       auditEl.classList.add(`lh-audit--error`);
       const textEl = this.dom.find('.lh-audit__display-text', auditEl);
       textEl.textContent = strings.errorLabel;
-      textEl.classList.add('lh-tooltip-boundary');
-      const tooltip = this.dom.createChildOf(textEl, 'div', 'lh-tooltip lh-tooltip--error');
+      textEl.classList.add('tooltip-boundary');
+      const tooltip = this.dom.createChildOf(textEl, 'div', 'tooltip tooltip--error');
       tooltip.textContent = audit.result.errorMessage || strings.errorMissingAuditInfo;
     } else if (audit.result.explanation) {
       const explEl = this.dom.createChildOf(titleEl, 'div', 'lh-audit-explanation');