lighthouse 8.6.0-dev.20211101 → 8.6.0-dev.20211105

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,7 +512,7 @@ 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 {
@@ -739,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,24 +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';
 
 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
@@ -38,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/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) {
@@ -222,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');
@@ -231,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];
   }
 
   /**
@@ -278,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);
@@ -318,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})`;
@@ -337,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;
   }
 
   /**