lighthouse 8.5.1-dev.20211012 → 8.5.1

package/report/assets/styles.css

@@ -92,7 +92,6 @@
   --footer-padding-vertical: 16px;
   --gauge-circle-size-big: 112px;
   --gauge-circle-size: 80px;
-  --gauge-circle-size-sm: 36px;
   --gauge-label-font-size-big: 28px;
   --gauge-label-font-size: 20px;
   --gauge-label-line-height-big: 36px;
@@ -104,7 +103,6 @@
   --highlighter-background-color: var(--report-text-color);
   --icon-square-size: calc(var(--score-icon-size) * 0.88);
   --image-preview-size: 48px;
-  --locale-selector-background-color: var(--color-white);
   --metric-toggle-lines-fill: #7F7F7F;
   --metric-value-font-size: 28px;
   --metrics-toggle-background-color: var(--color-gray-200);
@@ -170,8 +168,6 @@
 
   --pwa-installable-color-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><g fill-rule="nonzero" fill="none"><circle fill="%230CCE6B" cx="12" cy="12" r="12"/><path d="M12 5a7 7 0 1 0 0 14 7 7 0 0 0 0-14zm3.5 7.7h-2.8v2.8h-1.4v-2.8H8.5v-1.4h2.8V8.5h1.4v2.8h2.8v1.4z" fill="%23FFF"/></g></svg>');
   --pwa-optimized-color-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><rect fill="%230CCE6B" width="24" height="24" rx="12"/><path d="M5 5h14v14H5z"/><path fill="%23FFF" d="M12 15.07l3.6 2.18-.95-4.1 3.18-2.76-4.2-.36L12 6.17l-1.64 3.86-4.2.36 3.2 2.76-.96 4.1z"/></g></svg>');
-
-  --swap-locale-icon-url: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000000"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"/></svg>');
 }
 
 @media not print {
@@ -194,7 +190,6 @@
 
     /* Component variables */
     --env-item-background-color: var(--color-gray);
-    --locale-selector-background-color: var(--color-gray-200);
     --plugin-badge-background-color: var(--color-gray-800);
     --report-background-color: var(--color-gray-900);
     --report-border-color-secondary: var(--color-gray-200);
@@ -315,6 +310,7 @@
   margin: 0;
   line-height: var(--report-line-height);
   background: var(--report-background-color);
+  scroll-behavior: smooth;
   color: var(--report-text-color);
 }
 
@@ -338,10 +334,6 @@
   cursor: pointer;
 }
 
-.lh-hidden {
-  display: none !important;
-}
-
 .lh-container {
   /*
   Text wrapping in the report is so much FUN!
@@ -687,8 +679,8 @@
 
 .lh-metric__innerwrap {
   display: grid;
-  /**
-   * Icon -- Metric Name
+  /** 
+   * Icon -- Metric Name 
    *      -- Metric Value
    */
   grid-template-columns: calc(var(--score-icon-size) + var(--score-icon-margin-left) + var(--score-icon-margin-right)) 1fr;
@@ -732,7 +724,7 @@
 /* Change the grid to 3 columns for narrow viewport. */
 @media screen and (max-width: 535px) {
   .lh-metric__innerwrap {
-  /**
+  /** 
    * Icon -- Metric Name -- Metric Value
    */
     grid-template-columns: calc(var(--score-icon-size) + var(--score-icon-margin-left) + var(--score-icon-margin-right)) 2fr 1fr;
@@ -1410,10 +1402,6 @@
   padding: var(--category-padding);
   max-width: var(--report-width);
   margin: 0 auto;
-
-  --sticky-header-height: calc(var(--gauge-circle-size-sm) + var(--score-container-padding) * 2);
-  --topbar-plus-sticky-header: calc(var(--topbar-height) + var(--sticky-header-height));
-  scroll-margin-top: var(--topbar-plus-sticky-header);
 }
 
 .lh-category-wrapper {
@@ -1424,6 +1412,18 @@
   border-top: 1px solid var(--color-gray-200);
 }
 
+/* section hash link jump should preserve fixed header
+   https://css-tricks.com/hash-tag-links-padding/
+*/
+.lh-category > .lh-permalink {
+  --sticky-header-height: calc(var(--gauge-circle-size) + var(--score-container-padding) * 2);
+  --topbar-plus-header: calc(var(--topbar-height) + var(--sticky-header-height));
+  margin-top: calc(var(--topbar-plus-header) * -1);
+  padding-bottom: var(--topbar-plus-header);
+  display: block;
+  visibility: hidden;
+}
+
 .lh-category-header {
   font-size: var(--category-header-font-size);
   min-height: var(--gauge-circle-size);
@@ -1441,6 +1441,31 @@
   line-height: var(--header-line-height);
 }
 
+#lh-log {
+  position: fixed;
+  background-color: #323232;
+  color: #fff;
+  min-height: 48px;
+  min-width: 288px;
+  padding: 16px 24px;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
+  border-radius: 2px;
+  margin: 12px;
+  font-size: 14px;
+  cursor: default;
+  transition: transform 0.3s, opacity 0.3s;
+  transform: translateY(100px);
+  opacity: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 3;
+}
+
+#lh-log.lh-show {
+  opacity: 1;
+  transform: translateY(0);
+}
+
 /* 964 fits the min-width of the filmstrip */
 @media screen and (max-width: 964px) {
   .lh-report {

package/report/assets/templates.html

@@ -165,7 +165,7 @@ limitations under the License.
     }
 
     .lh-sticky-header {
-      --gauge-circle-size: var(--gauge-circle-size-sm);
+      --gauge-circle-size: 36px;
       --plugin-badge-size: 18px;
       --plugin-icon-size: 75%;
       --gauge-wrapper-width: 60px;
@@ -263,15 +263,12 @@ limitations under the License.
     }
 
     .lh-tools {
-      display: flex;
-      align-items: center;
       margin-left: auto;
       will-change: transform;
       min-width: var(--report-icon-size);
     }
     .lh-tools__button {
       width: var(--report-icon-size);
-      min-width: 24px;
       height: var(--report-icon-size);
       cursor: pointer;
       margin-right: 5px;
@@ -328,32 +325,6 @@ limitations under the License.
       display: none;
     }
 
-    .lh-locale-selector {
-      width: 100%;
-      color: var(--report-text-color);
-      background-color: var(--locale-selector-background-color);
-      padding: 2px;
-    }
-    .lh-tools-locale {
-      display: flex;
-      align-items: center;
-      flex-direction: row-reverse;
-    }
-    .lh-tools-locale__selector-wrapper {
-      transition: opacity 0.15s;
-      opacity: 0;
-      max-width: 200px;
-    }
-    .lh-button.lh-tool-locale__button {
-      height: unset;
-      color: var(--tools-icon-color);
-    }
-    .lh-tool-locale__button.lh-active + .lh-tools-locale__selector-wrapper {
-      opacity: 1;
-      clip: rect(-1px, 194px, 242px, -3px);
-      visibility: visible;
-    }
-
     @media screen and (max-width: 964px) {
       .lh-tools__dropdown {
         right: 0;
@@ -407,15 +378,6 @@ limitations under the License.
     <a href="" class="lh-topbar__url" target="_blank" rel="noopener"></a>
 
     <div class="lh-tools">
-      <div class="lh-tools-locale lh-hidden">
-        <button id="lh-button__swap-locales" class="lh-button lh-tool-locale__button" title="Show Language Picker" aria-label="Toggle language picker" aria-haspopup="menu" aria-expanded="false" aria-controls="lh-tools-locale__selector-wrapper">
-          <svg width="20px" height="20px" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"/></svg>
-        </button>
-        <div id="lh-tools-locale__selector-wrapper" class="lh-tools-locale__selector-wrapper" role="menu" aria-labelledby="lh-button__swap-locales" aria-hidden="true">
-          <!-- Select element created by ReportUIFeatures._enableSwapLocale: .lh-locale-selector -->
-        </div>
-      </div>
-
       <button id="lh-tools-button" class="lh-tools__button" title="Tools menu" aria-label="Toggle report tools menu" aria-haspopup="menu" aria-expanded="false" aria-controls="lh-tools-dropdown">
         <svg width="100%" height="100%" viewBox="0 0 24 24">
             <path d="M0 0h24v24H0z" fill="none"/>
@@ -587,7 +549,7 @@ limitations under the License.
 
 <!-- Lighthouse score gauge -->
 <template id="gauge">
-  <a class="lh-gauge__wrapper">
+  <a href="#" class="lh-gauge__wrapper">
     <!-- Wrapper exists for the ::before plugin icon. Cannot create pseudo-elements on svgs. -->
     <div class="lh-gauge__svg-wrapper">
       <svg viewBox="0 0 120 120" class="lh-gauge">
@@ -603,7 +565,7 @@ limitations under the License.
 
 <!-- Lighthouse category fraction -->
 <template id="fraction">
-  <a class="lh-fraction__wrapper">
+  <a href="#" class="lh-fraction__wrapper">
     <div class="lh-fraction__content-wrapper">
       <div class="lh-fraction__content">
         <div class="lh-fraction__background"></div>
@@ -660,7 +622,7 @@ limitations under the License.
     }
   </style>
 
-  <a class="lh-gauge__wrapper lh-gauge--pwa__wrapper">
+  <a href="#" class="lh-gauge__wrapper lh-gauge--pwa__wrapper">
     <svg viewBox="0 0 60 60" class="lh-gauge lh-gauge--pwa">
       <defs>
         <linearGradient id="lh-gauge--pwa__check-circle__gradient" x1="50%" y1="0%" x2="50%" y2="100%">

package/report/clients/psi.js

@@ -77,7 +77,6 @@ export function prepareLabData(LHResult, document) {
     reportLHR.categoryGroups,
     {environment: 'PSI', gatherMode: lhResult.gatherMode}
   );
-  perfCategoryEl.append(dom.createComponent('styles'));
 
   const scoreGaugeEl = dom.find('.lh-score__gauge', perfCategoryEl);
   scoreGaugeEl.remove();

package/report/clients/standalone.js

@@ -40,7 +40,8 @@ function __initLighthouseReport__() {
   });
 
   document.addEventListener('lh-log', /** @param {Event} e */ e => {
-    const el = dom.find('div#lh-log', document);
+    const el = document.querySelector('#lh-log');
+    if (!el) return;
 
     const logger = new Logger(el);
     // @ts-expect-error

package/report/generator/file-namer.js

@@ -11,14 +11,15 @@
  */
 
 /**
- * Generate a filenamePrefix of name_YYYY-MM-DD_HH-MM-SS
+ * Generate a filenamePrefix of hostname_YYYY-MM-DD_HH-MM-SS
  * Date/time uses the local timezone, however Node has unreliable ICU
  * support, so we must construct a YYYY-MM-DD date format manually. :/
- * @param {string} name
- * @param {string|undefined} fetchTime
+ * @param {{finalUrl: string, fetchTime: string}} lhr
+ * @return {string}
  */
-function getFilenamePrefix(name, fetchTime) {
-  const date = fetchTime ? new Date(fetchTime) : new Date();
+function getFilenamePrefix(lhr) {
+  const hostname = new URL(lhr.finalUrl).hostname;
+  const date = (lhr.fetchTime && new Date(lhr.fetchTime)) || new Date();
 
   const timeStr = date.toLocaleTimeString('en-US', {hour12: false});
   const dateParts = date.toLocaleDateString('en-US', {
@@ -28,19 +29,9 @@ function getFilenamePrefix(name, fetchTime) {
   dateParts.unshift(dateParts.pop());
   const dateStr = dateParts.join('-');
 
-  const filenamePrefix = `${name}_${dateStr}_${timeStr}`;
+  const filenamePrefix = `${hostname}_${dateStr}_${timeStr}`;
   // replace characters that are unfriendly to filenames
   return filenamePrefix.replace(/[/?<>\\:*|"]/g, '-');
 }
 
-/**
- * Generate a filenamePrefix of hostname_YYYY-MM-DD_HH-MM-SS.
- * @param {{finalUrl: string, fetchTime: string}} lhr
- * @return {string}
- */
-function getLhrFilenamePrefix(lhr) {
-  const hostname = new URL(lhr.finalUrl).hostname;
-  return getFilenamePrefix(hostname, lhr.fetchTime);
-}
-
-module.exports = {getLhrFilenamePrefix, getFilenamePrefix};
+module.exports = {getFilenamePrefix};

package/report/generator/report-generator.js

@@ -55,6 +55,7 @@ class ReportGenerator {
     return ReportGenerator.replaceStrings(htmlReportAssets.REPORT_TEMPLATE, [
       {search: '%%LIGHTHOUSE_JSON%%', replacement: sanitizedJson},
       {search: '%%LIGHTHOUSE_JAVASCRIPT%%', replacement: sanitizedJavascript},
+      {search: '/*%%LIGHTHOUSE_CSS%%*/', replacement: htmlReportAssets.REPORT_CSS},
     ]);
   }
 

package/report/renderer/category-renderer.js

@@ -333,6 +333,7 @@ export class CategoryRenderer {
   renderScoreGauge(category, groupDefinitions) { // eslint-disable-line no-unused-vars
     const tmpl = this.dom.createComponent('gauge');
     const wrapper = this.dom.find('a.lh-gauge__wrapper', tmpl);
+    this.dom.safelySetHref(wrapper, `#${category.id}`);
 
     if (Util.isPluginCategory(category.id)) {
       wrapper.classList.add('lh-gauge__wrapper--plugin');
@@ -373,13 +374,14 @@ export class CategoryRenderer {
   renderCategoryFraction(category) {
     const tmpl = this.dom.createComponent('fraction');
     const wrapper = this.dom.find('a.lh-fraction__wrapper', tmpl);
+    this.dom.safelySetHref(wrapper, `#${category.id}`);
 
-    const {numPassed, numPassableAudits, totalWeight} = Util.calculateCategoryFraction(category);
+    const {numPassed, numAudits, totalWeight} = Util.calculateCategoryFraction(category);
 
-    const fraction = numPassed / numPassableAudits;
+    const fraction = numPassed / numAudits;
     const content = this.dom.find('.lh-fraction__content', tmpl);
     const text = this.dom.createElement('span');
-    text.textContent = `${numPassed}/${numPassableAudits}`;
+    text.textContent = `${numPassed}/${numAudits}`;
     content.appendChild(text);
 
     let rating = Util.calculateRating(fraction);
@@ -483,7 +485,7 @@ export class CategoryRenderer {
    */
   render(category, groupDefinitions = {}, options) {
     const element = this.dom.createElement('div', 'lh-category');
-    element.id = category.id;
+    this.createPermalinkSpan(element, category.id);
     element.appendChild(this.renderCategoryHeader(category, groupDefinitions, options));
 
     // Top level clumps for audits, in order they will appear in the report.
@@ -521,4 +523,14 @@ export class CategoryRenderer {
 
     return element;
   }
+
+  /**
+   * Create a non-semantic span used for hash navigation of categories
+   * @param {Element} element
+   * @param {string} id
+   */
+  createPermalinkSpan(element, id) {
+    const permalinkEl = this.dom.createChildOf(element, 'span', 'lh-permalink');
+    permalinkEl.id = id;
+  }
 }