lighthouse 8.6.0 → 9.0.0

package/report/assets/templates.html

@@ -52,8 +52,9 @@ limitations under the License.
 
 <!-- Lighthouse clump -->
 <template id="clump">
+  <div class="lh-audit-group">
   <!-- TODO: group classes shouldn't be reused for clumps. -->
-  <details class="lh-clump lh-audit-group">
+  <details class="lh-clump">
     <summary>
       <div class="lh-audit-group__summary">
         <div class="lh-audit-group__header">
@@ -62,27 +63,13 @@ limitations under the License.
           <!-- .lh-audit-group__description will be added here -->
           <!-- .lh-metrics-toggle will be added here -->
         </div>
+        <div class="lh-clump-toggle">
+          <span class="lh-clump-toggletext--show"></span>
+          <span class="lh-clump-toggletext--hide"></span>
+        </div>
       </div>
     </summary>
   </details>
-</template>
-
-<!-- Lighthouse metrics toggle -->
-<template id="metricsToggle">
-  <div class="lh-metrics-toggle">
-    <input class="lh-metrics-toggle__input" type="checkbox" id="toggle-metric-descriptions" aria-label="Toggle the display of metric descriptions">
-    <label class="lh-metrics-toggle__label" for="toggle-metric-descriptions">
-      <div class="lh-metrics-toggle__icon lh-metrics-toggle__icon--less" aria-hidden="true">
-        <svg width="24" height="24" viewBox="0 0 24 24">
-          <path class="lh-metrics-toggle__lines" d="M4 9h16v2H4zm0 4h10v2H4z" />
-        </svg>
-      </div>
-      <div class="lh-metrics-toggle__icon lh-metrics-toggle__icon--more" aria-hidden="true">
-        <svg width="24" height="24" viewBox="0 0 24 24">
-          <path class="lh-metrics-toggle__lines" d="M3 18h12v-2H3v2zM3 6v2h18V6H3zm0 7h18v-2H3v2z" />
-        </svg>
-      </div>
-    </label>
   </div>
 </template>
 
@@ -123,7 +110,7 @@ limitations under the License.
   <div class="lh-audit lh-audit--load-opportunity">
     <details class="lh-expandable-details">
         <summary>
-          <div class="lh-audit__header lh-expandable-details__summary">
+          <div class="lh-audit__header">
             <div class="lh-load-opportunity__cols">
               <div class="lh-load-opportunity__col lh-load-opportunity__col--one">
                 <span class="lh-audit__score-icon"></span>
@@ -159,14 +146,14 @@ limitations under the License.
     .lh-scores-container {
       display: flex;
       flex-direction: column;
-      padding: var(--scores-container-padding);
+      padding: var(--default-padding) 0;
       position: relative;
       width: 100%;
     }
 
     .lh-sticky-header {
       --gauge-circle-size: var(--gauge-circle-size-sm);
-      --plugin-badge-size: 18px;
+      --plugin-badge-size: 16px;
       --plugin-icon-size: 75%;
       --gauge-wrapper-width: 60px;
       --gauge-percentage-font-size: 13px;
@@ -174,7 +161,7 @@ limitations under the License.
       left: 0;
       right: 0;
       top: var(--topbar-height);
-      font-weight: 700;
+      font-weight: 500;
       display: none;
       justify-content: center;
       background-color: var(--sticky-header-background-color);
@@ -242,8 +229,10 @@ limitations under the License.
       display: flex;
       align-items: center;
       height: var(--topbar-height);
-      background-color: var(--topbar-background-color);
       padding: var(--topbar-padding);
+      font-size: var(--report-font-size-secondary);
+      background-color: var(--topbar-background-color);
+      border-bottom: 1px solid var(--color-gray-200);
     }
 
     .lh-topbar__logo {
@@ -315,7 +304,7 @@ limitations under the License.
       color: currentColor;
       text-decoration: none;
       white-space: nowrap;
-      padding: 0 12px;
+      padding: 0 6px;
       line-height: 2;
     }
     .lh-tools__dropdown a:hover,
@@ -345,13 +334,15 @@ limitations under the License.
       max-width: 200px;
     }
     .lh-button.lh-tool-locale__button {
-      height: unset;
+      height: var(--topbar-height);
       color: var(--tools-icon-color);
+      padding: calc(var(--default-padding) / 2);
     }
     .lh-tool-locale__button.lh-active + .lh-tools-locale__selector-wrapper {
       opacity: 1;
       clip: rect(-1px, 194px, 242px, -3px);
       visibility: visible;
+      margin: 0 4px;
     }
 
     @media screen and (max-width: 964px) {
@@ -521,53 +512,16 @@ limitations under the License.
   <style>
     .lh-footer {
       padding: var(--footer-padding-vertical) calc(var(--default-padding) * 2);
-      max-width: var(--report-width);
+      max-width: var(--report-content-width);
       margin: 0 auto;
     }
     .lh-footer .lh-generated {
       text-align: center;
     }
-    .lh-env__title {
-      font-size: var(--env-item-font-size-big);
-      line-height: var(--env-item-line-height-big);
-      text-align: center;
-      padding: var(--score-container-padding);
-    }
-    .lh-env {
-      padding: var(--default-padding) 0;
-    }
-    .lh-env__items {
-      padding-left: 16px;
-      margin: 0 0 var(--audits-margin-bottom);
-      padding: 0;
-    }
-    .lh-env__items .lh-env__item:nth-child(2n) {
-      background-color: var(--env-item-background-color);
-    }
-    .lh-env__item {
-      display: flex;
-      padding: var(--env-item-padding);
-      position: relative;
-    }
-    span.lh-env__name {
-      font-weight: bold;
-      min-width: var(--env-name-min-width);
-      flex: 0.5;
-      padding: 0 8px;
-    }
-    span.lh-env__description {
-      text-align: left;
-      flex: 1;
-    }
   </style>
   <footer class="lh-footer">
-    <!-- TODO(i18n): localize runtime settings -->
-    <div class="lh-env">
-      <div class="lh-env__title">Runtime Settings</div>
-      <ul class="lh-env__items">
-        <!-- envItem -->
-      </ul>
-    </div>
+    <ul class="lh-meta__items">
+    </ul>
 
     <div class="lh-generated">
       <!-- TODO(i18n): use ICU replacement to replace version w/o concatenation. -->
@@ -577,14 +531,6 @@ limitations under the License.
   </footer>
 </template>
 
-<!-- Lighthouse footer env item -->
-<template id="envItem">
-  <li class="lh-env__item">
-    <span class="lh-env__name"></span>
-    <span class="lh-env__description"></span>
-  </li>
-</template>
-
 <!-- Lighthouse score gauge -->
 <template id="gauge">
   <a class="lh-gauge__wrapper">
@@ -784,10 +730,9 @@ limitations under the License.
 <template id="3pFilter">
   <style>
     .lh-3p-filter {
-      background-color: var(--table-higlight-background-color);
       color: var(--color-gray-600);
       float: right;
-      padding: 6px;
+      padding: 6px var(--stackpack-padding-horizontal);
     }
     .lh-3p-filter-label, .lh-3p-filter-input {
       vertical-align: middle;

package/report/clients/bundle.js

@@ -15,3 +15,4 @@
 export {DOM} from '../renderer/dom.js';
 export {ReportRenderer} from '../renderer/report-renderer.js';
 export {ReportUIFeatures} from '../renderer/report-ui-features.js';
+export {renderReport} from '../renderer/api.js';

package/report/clients/standalone.js

@@ -13,26 +13,16 @@
 
 /* global ga */
 
-import {DOM} from '../renderer/dom.js';
+import {renderReport} from '../renderer/api.js';
 import {Logger} from '../renderer/logger.js';
-import {ReportRenderer} from '../renderer/report-renderer.js';
-import {ReportUIFeatures} from '../renderer/report-ui-features.js';
 
-// Used by standalone.html
-// eslint-disable-next-line no-unused-vars
 function __initLighthouseReport__() {
-  const dom = new DOM(document);
-  const renderer = new ReportRenderer(dom);
-  const container = dom.find('main', document);
-  /** @type {LH.ReportResult} */
+  /** @type {LH.Result} */
   // @ts-expect-error
   const lhr = window.__LIGHTHOUSE_JSON__;
-  renderer.renderReport(lhr, container);
 
-  // Hook in JS features and page-level event listeners after the report
-  // is in the document.
-  const features = new ReportUIFeatures(dom);
-  features.initFeatures(lhr);
+  const reportRootEl = renderReport(lhr);
+  document.body.append(reportRootEl);
 
   document.addEventListener('lh-analytics', /** @param {Event} e */ e => {
     // @ts-expect-error
@@ -40,7 +30,8 @@ function __initLighthouseReport__() {
   });
 
   document.addEventListener('lh-log', /** @param {Event} e */ e => {
-    const el = dom.find('div#lh-log', document);
+    const el = document.querySelector('div#lh-log');
+    if (!el) return;
 
     const logger = new Logger(el);
     // @ts-expect-error

package/report/generator/README.md

@@ -4,6 +4,6 @@
 
 Lighthouse's report generator is the entry point for creating reports from an **LHR** (Lighthouse Result object). It returns results as HTML, JSON, and CSV.
 
-It runs natively in Node.js but can run in the browser after a compile step is applied during our bundling pipeline. That compile step uses `brfs`, which takes any `fs.readFileSync()` calls and replaces them with the stringified file content.
+It runs natively in Node.js but can run in the browser after a compile step is applied during our bundling pipeline. That compile step uses `inline-fs`, which takes any `fs.readFileSync()` calls and replaces them with the stringified file content.
 
 Because it's shared between core and the report, dependencies (both code and types) should be kept minimal.

package/report/renderer/api.js

@@ -0,0 +1,32 @@
+/**
+ * @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';
+
+
+import {DOM} from '../renderer/dom.js';
+import {ReportRenderer} from '../renderer/report-renderer.js';
+import {ReportUIFeatures} from '../renderer/report-ui-features.js';
+
+/**
+ * @param {LH.Result} lhr
+ * @param {LH.Renderer.Options} opts
+ * @return {HTMLElement}
+ */
+export function renderReport(lhr, opts = {}) {
+  const rootEl = document.createElement('article');
+  rootEl.classList.add('lh-root', 'lh-vars');
+
+  const dom = new DOM(rootEl.ownerDocument, rootEl);
+  const renderer = new ReportRenderer(dom);
+
+  renderer.renderReport(lhr, rootEl, opts);
+
+  // Hook in JS features and page-level event listeners after the report
+  // is in the document.
+  const features = new ReportUIFeatures(dom, opts);
+  features.initFeatures(lhr);
+  return rootEl;
+}

package/report/renderer/category-renderer.js

@@ -133,7 +133,7 @@ export class CategoryRenderer {
     const warningsEl = this.dom.createChildOf(summaryEl, 'div', 'lh-warnings');
     this.dom.createChildOf(warningsEl, 'span').textContent = strings.warningHeader;
     if (warnings.length === 1) {
-      warningsEl.appendChild(this.dom.document().createTextNode(warnings.join('')));
+      warningsEl.appendChild(this.dom.createTextNode(warnings.join('')));
     } else {
       const warningsUl = this.dom.createChildOf(warningsEl, 'ul');
       for (const warning of warnings) {
@@ -144,6 +144,35 @@ export class CategoryRenderer {
     return auditEl;
   }
 
+  /**
+   * Inject the final screenshot next to the score gauge of the first category (likely Performance)
+   * @param {HTMLElement} categoriesEl
+   * @param {LH.ReportResult['audits']} audits
+   * @param {Element} scoreScaleEl
+   */
+  injectFinalScreenshot(categoriesEl, audits, scoreScaleEl) {
+    const audit = audits['final-screenshot'];
+    if (!audit || audit.scoreDisplayMode === 'error') return null;
+    if (!audit.details || audit.details.type !== 'screenshot') return null;
+
+    const imgEl = this.dom.createElement('img', 'lh-final-ss-image');
+    const finalScreenshotDataUri = audit.details.data;
+    imgEl.src = finalScreenshotDataUri;
+    imgEl.alt = audit.title;
+
+    const firstCatHeaderEl = this.dom.find('.lh-category .lh-category-header', categoriesEl);
+    const leftColEl = this.dom.createElement('div', 'lh-category-headercol');
+    const separatorEl = this.dom.createElement('div',
+        'lh-category-headercol lh-category-headercol--separator');
+    const rightColEl = this.dom.createElement('div', 'lh-category-headercol');
+
+    leftColEl.append(...firstCatHeaderEl.childNodes);
+    leftColEl.append(scoreScaleEl);
+    rightColEl.append(imgEl);
+    firstCatHeaderEl.append(leftColEl, separatorEl, rightColEl);
+    firstCatHeaderEl.classList.add('lh-category-header__finalscreenshot');
+  }
+
   /**
    * @return {Element}
    */
@@ -193,7 +222,7 @@ export class CategoryRenderer {
    * Renders the group container for a group of audits. Individual audit elements can be added
    * directly to the returned element.
    * @param {LH.Result.ReportGroup} group
-   * @return {Element}
+   * @return {[Element, Element | null]}
    */
   renderAuditGroup(group) {
     const groupEl = this.dom.createElement('div', 'lh-audit-group');
@@ -202,14 +231,16 @@ export class CategoryRenderer {
 
     this.dom.createChildOf(auditGroupHeader, 'span', 'lh-audit-group__title')
       .textContent = group.title;
+    groupEl.appendChild(auditGroupHeader);
+
+    let footerEl = null;
     if (group.description) {
-      const descriptionEl = this.dom.convertMarkdownLinkSnippets(group.description);
-      descriptionEl.classList.add('lh-audit-group__description');
-      auditGroupHeader.appendChild(descriptionEl);
+      footerEl = this.dom.convertMarkdownLinkSnippets(group.description);
+      footerEl.classList.add('lh-audit-group__description', 'lh-audit-group__footer');
+      groupEl.appendChild(footerEl);
     }
-    groupEl.appendChild(auditGroupHeader);
 
-    return groupEl;
+    return [groupEl, footerEl];
   }
 
   /**
@@ -249,9 +280,9 @@ export class CategoryRenderer {
 
       // Push grouped audits as a group.
       const groupDef = groupDefinitions[groupId];
-      const auditGroupElem = this.renderAuditGroup(groupDef);
+      const [auditGroupElem, auditGroupFooterEl] = this.renderAuditGroup(groupDef);
       for (const auditRef of groupAuditRefs) {
-        auditGroupElem.appendChild(this.renderAudit(auditRef));
+        auditGroupElem.insertBefore(this.renderAudit(auditRef), auditGroupFooterEl);
       }
       auditGroupElem.classList.add(`lh-audit-group--${groupId}`);
       auditElements.push(auditGroupElem);
@@ -289,17 +320,9 @@ export class CategoryRenderer {
       clumpElement.setAttribute('open', '');
     }
 
-    const summaryInnerEl = this.dom.find('div.lh-audit-group__summary', clumpElement);
-    summaryInnerEl.appendChild(this._createChevron());
-
     const headerEl = this.dom.find('.lh-audit-group__header', clumpElement);
     const title = this._clumpTitles[clumpId];
     this.dom.find('.lh-audit-group__title', headerEl).textContent = title;
-    if (description) {
-      const descriptionEl = this.dom.convertMarkdownLinkSnippets(description);
-      descriptionEl.classList.add('lh-audit-group__description');
-      headerEl.appendChild(descriptionEl);
-    }
 
     const itemCountEl = this.dom.find('.lh-audit-group__itemcount', clumpElement);
     itemCountEl.textContent = `(${auditRefs.length})`;
@@ -308,8 +331,18 @@ export class CategoryRenderer {
     const auditElements = auditRefs.map(this.renderAudit.bind(this));
     clumpElement.append(...auditElements);
 
+    const el = this.dom.find('.lh-audit-group', clumpComponent);
+    if (description) {
+      const descriptionEl = this.dom.convertMarkdownLinkSnippets(description);
+      descriptionEl.classList.add('lh-audit-group__description', 'lh-audit-group__footer');
+      el.appendChild(descriptionEl);
+    }
+
+    this.dom.find('.lh-clump-toggletext--show', el).textContent = Util.i18n.strings.show;
+    this.dom.find('.lh-clump-toggletext--hide', el).textContent = Util.i18n.strings.hide;
+
     clumpElement.classList.add(`lh-clump--${clumpId.toLowerCase()}`);
-    return clumpElement;
+    return el;
   }
 
   /**
@@ -478,7 +511,7 @@ export class CategoryRenderer {
    *   ⋮
    * @param {LH.ReportResult.Category} category
    * @param {Object<string, LH.Result.ReportGroup>=} groupDefinitions
-   * @param {{environment?: 'PSI', gatherMode: LH.Result.GatherMode}=} options
+   * @param {{gatherMode: LH.Result.GatherMode}=} options
    * @return {Element}
    */
   render(category, groupDefinitions = {}, options) {
@@ -503,6 +536,13 @@ export class CategoryRenderer {
       clumps.set(clumpId, clump);
     }
 
+    // Sort audits by weight.
+    for (const auditRefs of clumps.values()) {
+      auditRefs.sort((a, b) => {
+        return b.weight - a.weight;
+      });
+    }
+
     // Render each clump.
     for (const [clumpId, auditRefs] of clumps) {
       if (auditRefs.length === 0) continue;