lighthouse 8.5.1-dev.20211010 → 8.6.0-dev.20211013

package/changelog.md

@@ -1,3 +1,98 @@
+<a name="8.6.0"></a>
+# 8.6.0 (2021-10-13)
+[Full Changelog](https://github.com/GoogleChrome/lighthouse/compare/v8.5.1...v8.6.0)
+
+We expect this release to ship in the DevTools of [Chrome 97](https://chromiumdash.appspot.com/schedule), and to PageSpeed Insights within 2 weeks.
+
+## New Contributors
+
+Thanks to our new contributors 👽🐷🐰🐯🐻! 
+
+- meehawk @meehawk
+- Edwin Gustafson @edwingustafson
+- Yorkie Liu @yorkie
+
+## Core
+
+* crawlable-anchors: ignore event listeners, validate url ([#13105](https://github.com/GoogleChrome/lighthouse/pull/13105))
+* full-page-screenshot: fix emulation reset ([#13175](https://github.com/GoogleChrome/lighthouse/pull/13175))
+* response-compression: add x-content-encoding-over-network ([#13176](https://github.com/GoogleChrome/lighthouse/pull/13176))
+* share localization between core and report ([#13146](https://github.com/GoogleChrome/lighthouse/pull/13146))
+* update cdt SourceMap to latest devtools frontend ([#13095](https://github.com/GoogleChrome/lighthouse/pull/13095))
+* stack-packs: simplify i18n filename lookup ([#13133](https://github.com/GoogleChrome/lighthouse/pull/13133))
+
+## ⛏️👷 Fraggle Rock
+
+  Support for auditing user flows ([#11313](https://github.com/GoogleChrome/lighthouse/issues/11313))
+
+* add UserFlow usability improvements ([#13139](https://github.com/GoogleChrome/lighthouse/pull/13139))
+* add `supportedModes` filter to categories ([#13161](https://github.com/GoogleChrome/lighthouse/pull/13161))
+* handle cached timespan records ([#13181](https://github.com/GoogleChrome/lighthouse/pull/13181))
+* add parity logging ([#13114](https://github.com/GoogleChrome/lighthouse/pull/13114))
+* animate timespan thumbnail ([#13178](https://github.com/GoogleChrome/lighthouse/pull/13178))
+* refine snapshot and timespan performance ([#13184](https://github.com/GoogleChrome/lighthouse/pull/13184))
+* topbar save button ([#13109](https://github.com/GoogleChrome/lighthouse/pull/13109))
+* elide step name ([#13171](https://github.com/GoogleChrome/lighthouse/pull/13171))
+* localized sample ([#13143](https://github.com/GoogleChrome/lighthouse/pull/13143))
+* timeline header ([#13128](https://github.com/GoogleChrome/lighthouse/pull/13128))
+* add help dialog to explain flows ([#13159](https://github.com/GoogleChrome/lighthouse/pull/13159))
+* collect i18n strings ([#13152](https://github.com/GoogleChrome/lighthouse/pull/13152))
+
+## CLI
+
+* add list-locales flag ([#12983](https://github.com/GoogleChrome/lighthouse/pull/12983))
+* always return correct version ([#13130](https://github.com/GoogleChrome/lighthouse/pull/13130))
+
+## Report
+
+* move logger styles into js ([#13204](https://github.com/GoogleChrome/lighthouse/pull/13204))
+* remove href from category score gauge ([#13180](https://github.com/GoogleChrome/lighthouse/pull/13180))
+* inject report/assets/styles.css via components.js ([#13057](https://github.com/GoogleChrome/lighthouse/pull/13057))
+* remove smooth scrolling css ([#13102](https://github.com/GoogleChrome/lighthouse/pull/13102))
+* add lh- prefix to remaining show class ([#13203](https://github.com/GoogleChrome/lighthouse/pull/13203))
+* handle gauge fragment links in script ([#13186](https://github.com/GoogleChrome/lighthouse/pull/13186))
+
+## Clients
+
+* psi: include global reports styles in legacy psi rendering ([#13151](https://github.com/GoogleChrome/lighthouse/pull/13151))
+* viewer: swap locale ([#10148](https://github.com/GoogleChrome/lighthouse/pull/10148), [#13192](https://github.com/GoogleChrome/lighthouse/pull/13192))
+* viewer: remove devtools disclaimer ([#13145](https://github.com/GoogleChrome/lighthouse/pull/13145))
+* viewer: add body styles ([#13144](https://github.com/GoogleChrome/lighthouse/pull/13144))
+* viewer: upgrade to firebase 9 ([#13115](https://github.com/GoogleChrome/lighthouse/pull/13115))
+* viewer: use access token regardless of firebase auth ([#13116](https://github.com/GoogleChrome/lighthouse/pull/13116))
+* viewer: use new firebase credentials ([#13110](https://github.com/GoogleChrome/lighthouse/pull/13110))
+
+## I18n
+
+* import ([#13206](https://github.com/GoogleChrome/lighthouse/pull/13206))
+
+## Docs
+
+* correct the Node.js version base ([#13099](https://github.com/GoogleChrome/lighthouse/pull/13099))
+* add user flow docs ([#13134](https://github.com/GoogleChrome/lighthouse/pull/13134))
+
+## Tests
+
+* smoke: make specific assertions about deprecations ([#13191](https://github.com/GoogleChrome/lighthouse/pull/13191))
+* update deprecations smoke for M96 ([#13179](https://github.com/GoogleChrome/lighthouse/pull/13179))
+* make yarn unit run all available unit tests ([#13148](https://github.com/GoogleChrome/lighthouse/pull/13148))
+* centralize running of docs tests ([#13150](https://github.com/GoogleChrome/lighthouse/pull/13150))
+* split out axe test ([#13142](https://github.com/GoogleChrome/lighthouse/pull/13142))
+
+## Misc
+
+* convert lighthouse-core/scripts to ES modules ([#13121](https://github.com/GoogleChrome/lighthouse/pull/13121))
+* remove patrick from issue assigner ([#13194](https://github.com/GoogleChrome/lighthouse/pull/13194))
+* set predictable order for sample json timing entries ([#13162](https://github.com/GoogleChrome/lighthouse/pull/13162))
+* scripts: fix run-devtools sniffing, add error checking ([#13163](https://github.com/GoogleChrome/lighthouse/pull/13163))
+* ensure psi.espanol sample-report es en espanol ([#13160](https://github.com/GoogleChrome/lighthouse/pull/13160))
+* add notes about software versions in issue template ([#13089](https://github.com/GoogleChrome/lighthouse/pull/13089))
+* build: fix smokehouse bundle ([#13135](https://github.com/GoogleChrome/lighthouse/pull/13135))
+* build: fix vercel deployment by adopting stricter `engines` grammar ([#13183](https://github.com/GoogleChrome/lighthouse/pull/13183))
+* build: create rollup-plugins.js helper module ([#13122](https://github.com/GoogleChrome/lighthouse/pull/13122))
+* build: don't build flow if only --standalone is requested ([#13124](https://github.com/GoogleChrome/lighthouse/pull/13124))
+
+
 <a name="8.5.1"></a>
 # 8.5.1 (2021-09-22)
 [Full Changelog](https://github.com/GoogleChrome/lighthouse/compare/v8.5.0...v8.5.1)

package/flow-report/src/wrappers/report.tsx

@@ -15,10 +15,8 @@ import {useReportRenderer} from './report-renderer';
  * e.g. <a href="#link"> -> <a href="#index=0&anchor=link">
  */
 export function convertChildAnchors(element: HTMLElement, index: number) {
-  const links = element.querySelectorAll('a') as NodeListOf<HTMLAnchorElement>;
+  const links = element.querySelectorAll('a[href]') as NodeListOf<HTMLAnchorElement>;
   for (const link of links) {
-    if (!link.href) continue;
-
     // Check if the link destination is in the report.
     const currentUrl = new URL(location.href);
     currentUrl.hash = '';

package/lighthouse-cli/bin.js

@@ -61,6 +61,11 @@ async function begin() {
     commands.listAudits();
   }
 
+  // Process terminating command
+  if (cliFlags.listLocales) {
+    commands.listLocales();
+  }
+
   // Process terminating command
   if (cliFlags.listTraceCategories) {
     commands.listTraceCategories();

package/lighthouse-cli/cli-flags.js

@@ -105,6 +105,11 @@ function getFlags(manualArgv, options = {}) {
           default: false,
           describe: 'Prints a list of all available audits and exits',
         },
+        'list-locales': {
+          type: 'boolean',
+          default: false,
+          describe: 'Prints a list of all supported locales and exits',
+        },
         'list-trace-categories': {
           type: 'boolean',
           default: false,
@@ -210,7 +215,7 @@ function getFlags(manualArgv, options = {}) {
         },
       })
       .group([
-        'save-assets', 'list-all-audits', 'list-trace-categories', 'print-config', 'additional-trace-categories',
+        'save-assets', 'list-all-audits', 'list-locales', 'list-trace-categories', 'print-config', 'additional-trace-categories',
         'config-path', 'preset', 'chrome-flags', 'port', 'hostname', 'form-factor', 'screenEmulation', 'emulatedUserAgent',
         'max-wait-for-load', 'enable-error-reporting', 'gather-mode', 'audit-mode',
         'only-audits', 'only-categories', 'skip-audits', 'budget-path',
@@ -314,7 +319,7 @@ function getFlags(manualArgv, options = {}) {
         //   - We're just printing the config.
         //   - We're in auditMode (and we have artifacts already)
         // If one of these don't apply, if no URL, stop the program and ask for one.
-        const isPrintSomethingMode = argv.listAllAudits || argv.listTraceCategories || argv.printConfig;
+        const isPrintSomethingMode = argv.listAllAudits || argv.listLocales || argv.listTraceCategories || argv.printConfig;
         const isOnlyAuditMode = !!argv.auditMode && !argv.gatherMode;
         if (isPrintSomethingMode || isOnlyAuditMode) {
           return true;

package/lighthouse-cli/commands/commands.js

@@ -7,3 +7,4 @@
 
 export {listAudits} from './list-audits.js';
 export {listTraceCategories} from './list-trace-categories.js';
+export {listLocales} from './list-locales.js';

package/lighthouse-cli/commands/list-locales.js

@@ -0,0 +1,16 @@
+/**
+ * @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 locales from '../../shared/localization/locales.js';
+
+function listLocales() {
+  const localesList = Object.keys(locales);
+  process.stdout.write(JSON.stringify({locales: localesList}, null, 2));
+  process.exit(0);
+}
+
+export {listLocales};

package/lighthouse-core/audits/seo/crawlable-anchors.js

@@ -31,7 +31,7 @@ class CrawlableAnchors extends Audit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
-      requiredArtifacts: ['AnchorElements'],
+      requiredArtifacts: ['AnchorElements', 'URL'],
     };
   }
 
@@ -39,15 +39,12 @@ class CrawlableAnchors extends Audit {
    * @param {LH.Artifacts} artifacts
    * @return {LH.Audit.Product}
    */
-  static audit({AnchorElements: anchorElements}) {
+  static audit({AnchorElements: anchorElements, URL: url}) {
     const failingAnchors = anchorElements.filter(({
       rawHref,
-      listeners = [],
-      onclick = '',
       name = '',
       role = '',
     }) => {
-      onclick = onclick.replace( /\s/g, '');
       rawHref = rawHref.replace( /\s/g, '');
       name = name.trim();
       role = role.trim();
@@ -56,19 +53,20 @@ class CrawlableAnchors extends Audit {
       // Ignore mailto links even if they use one of the failing patterns. See https://github.com/GoogleChrome/lighthouse/issues/11443#issuecomment-694898412
       if (rawHref.startsWith('mailto:')) return;
 
-      const windowLocationRegExp = /window\.location=/;
-      const windowOpenRegExp = /window\.open\(/;
       const javaScriptVoidRegExp = /javascript:void(\(|)0(\)|)/;
 
       if (rawHref.startsWith('file:')) return true;
-      if (windowLocationRegExp.test(onclick)) return true;
-      if (windowOpenRegExp.test(onclick)) return true;
-
-      const hasClickHandler = listeners.some(({type}) => type === 'click');
-      if (hasClickHandler || name.length > 0) return;
+      if (name.length > 0) return;
 
       if (rawHref === '') return true;
       if (javaScriptVoidRegExp.test(rawHref)) return true;
+
+      // checking if rawHref is a valid
+      try {
+        new URL(rawHref, url.finalUrl);
+      } catch (e) {
+        return true;
+      }
     });
 
     /** @type {LH.Audit.Details.Table['headings']} */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lighthouse",
-  "version": "8.5.1-dev.20211010",
+  "version": "8.6.0-dev.20211013",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./lighthouse-core/index.js",
   "bin": {
@@ -21,7 +21,7 @@
     "build-extension-firefox": "node ./build/build-extension.js firefox",
     "build-devtools": "yarn reset-link && node ./build/build-bundle.js clients/devtools-entry.js dist/lighthouse-dt-bundle.js && node ./build/build-dt-report-resources.js",
     "build-smokehouse-bundle": "node ./build/build-smokehouse-bundle.js",
-    "build-lr": "yarn reset-link && node ./build/build-lightrider-bundles.js && rollup lighthouse-cli/test/fixtures/static-server.js -o dist/lightrider/static-server.js -f commonjs -p commonjs -p node-resolve -e mime-types,glob",
+    "build-lr": "yarn reset-link && node ./build/build-lightrider-bundles.js",
     "build-pack": "bash build/build-pack.sh",
     "build-report": "node build/build-report-components.js && yarn eslint --fix report/renderer/components.js && node build/build-report.js",
     "build-sample-reports": "yarn build-report && node build/build-sample-reports.js",

package/report/assets/styles.css

@@ -92,6 +92,7 @@
   --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;
@@ -686,8 +687,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;
@@ -731,7 +732,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;
@@ -1409,6 +1410,10 @@
   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 {
@@ -1419,18 +1424,6 @@
   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);
@@ -1448,31 +1441,6 @@
   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: 36px;
+      --gauge-circle-size: var(--gauge-circle-size-sm);
       --plugin-badge-size: 18px;
       --plugin-icon-size: 75%;
       --gauge-wrapper-width: 60px;
@@ -660,7 +660,7 @@ limitations under the License.
     }
   </style>
 
-  <a href="#" class="lh-gauge__wrapper lh-gauge--pwa__wrapper">
+  <a 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/standalone.js

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

package/report/renderer/category-renderer.js

@@ -373,7 +373,6 @@ 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);
 
@@ -484,7 +483,7 @@ export class CategoryRenderer {
    */
   render(category, groupDefinitions = {}, options) {
     const element = this.dom.createElement('div', 'lh-category');
-    this.createPermalinkSpan(element, category.id);
+    element.id = category.id;
     element.appendChild(this.renderCategoryHeader(category, groupDefinitions, options));
 
     // Top level clumps for audits, in order they will appear in the report.
@@ -522,14 +521,4 @@ 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;
-  }
 }