lighthouse 9.1.0 → 9.2.0

package/report/renderer/report-renderer.js

@@ -311,7 +311,7 @@ export class ReportRenderer {
     for (const category of Object.values(report.categories)) {
       const renderer = specificCategoryRenderers[category.id] || categoryRenderer;
       // .lh-category-wrapper is full-width and provides horizontal rules between categories.
-      // .lh-category within has the max-width: var(--report-content-width);
+      // .lh-category within has the max-width: var(--report-content-max-width);
       const wrapper = renderer.dom.createChildOf(categories, 'div', 'lh-category-wrapper');
       wrapper.appendChild(renderer.render(
         category,

package/report/test/renderer/report-renderer-axe-test.js

@@ -7,78 +7,73 @@
 
 /* eslint-env jest */
 
-import jsdom from 'jsdom';
-import {jest} from '@jest/globals';
+import puppeteer from 'puppeteer';
 
-import {Util} from '../../renderer/util.js';
-import {DOM} from '../../renderer/dom.js';
-import {DetailsRenderer} from '../../renderer/details-renderer.js';
-import {CategoryRenderer} from '../../renderer/category-renderer.js';
-import {ReportRenderer} from '../../renderer/report-renderer.js';
-import sampleResultsOrig from '../../../lighthouse-core/test/results/sample_v2.json';
+import sampleResults from '../../../lighthouse-core/test/results/sample_v2.json';
+import reportGenerator from '../../generator/report-generator.js';
+import axeLib from '../../../lighthouse-core/lib/axe.js';
 
 describe('ReportRendererAxe', () => {
   describe('with aXe', () => {
-    let axe;
-    let renderer;
-    let sampleResults;
+    let browser;
 
     beforeAll(async () => {
-      global.console.warn = jest.fn();
-
-      const {window} = new jsdom.JSDOM();
-      const dom = new DOM(window.document);
-      const detailsRenderer = new DetailsRenderer(dom);
-      const categoryRenderer = new CategoryRenderer(dom, detailsRenderer);
-      renderer = new ReportRenderer(dom, categoryRenderer);
-      sampleResults = Util.prepareReportResult(sampleResultsOrig);
-
-      // Needed by axe-core
-      // https://github.com/dequelabs/axe-core/blob/581c441c/doc/examples/jsdom/test/a11y.js#L24
-      global.window = global.self = window;
-      global.Node = global.self.Node;
-      global.Element = global.self.Element;
-
-      // axe-core must be imported after the global polyfills
-      axe = (await import('axe-core')).default;
+      browser = await puppeteer.launch();
     });
 
-    afterAll(() => {
-      global.window = undefined;
-      global.Node = undefined;
-      global.Element = undefined;
+    afterAll(async () => {
+      await browser.close();
     });
 
     it('renders without axe violations', async () => {
-      const container = renderer._dom.document().createElement('main');
-      const output = renderer.renderReport(sampleResults, container);
-
-      renderer._dom.document().body.appendChild(container);
+      const page = await browser.newPage();
+      const htmlReport = reportGenerator.generateReportHtml(sampleResults);
+      await page.setContent(htmlReport);
 
+      // Superset of Lighthouse's aXe config
       const config = {
+        runOnly: {
+          type: 'tag',
+          values: [
+            'wcag2a',
+            'wcag2aa',
+          ],
+        },
+        resultTypes: ['violations', 'inapplicable'],
         rules: {
-          // Reports may have duplicate ids
-          // https://github.com/GoogleChrome/lighthouse/issues/9432
-          'duplicate-id': {enabled: false},
-          'duplicate-id-aria': {enabled: false},
-          'landmark-no-duplicate-contentinfo': {enabled: false},
-          // The following rules are disable for axe-core + jsdom compatibility
-          // https://github.com/dequelabs/axe-core/tree/b573b1c1/doc/examples/jest_react#to-run-the-example
-          'color-contrast': {enabled: false},
-          'link-in-text-block': {enabled: false},
-          // Report has empty links prior to i18n-ing.
-          'link-name': {enabled: false},
-          // May not be a real issue. https://github.com/dequelabs/axe-core/issues/2958
-          'nested-interactive': {enabled: false},
+          'tabindex': {enabled: true},
+          'accesskeys': {enabled: true},
+          'heading-order': {enabled: true},
+          'meta-viewport': {enabled: true},
+          'aria-treeitem-name': {enabled: true},
         },
       };
 
-      const axeResults = await axe.run(output, config);
-      expect(axeResults.violations).toEqual([]);
+      await page.evaluate(axeLib.source);
+      // eslint-disable-next-line no-undef
+      const axeResults = await page.evaluate(config => axe.run(config), config);
+
+      expect(axeResults.violations).toMatchObject([
+        // Color contrast failure only pops up if this pptr is run headfully.
+        // There are currently 27 problematic nodes, primarily audit display text and explanations.
+        // TODO: fix these failures, regardless.
+        // {
+        //   id: 'color-contrast',
+        // },
+        {
+          id: 'duplicate-id',
+          nodes: [
+            // We use these audits in multiple categories. Makes sense.
+            {html: '<div class="lh-audit lh-audit--binary lh-audit--pass" id="viewport">'},
+            {html: '<div class="lh-audit lh-audit--binary lh-audit--fail" id="image-alt">'},
+            {html: '<div class="lh-audit lh-audit--binary lh-audit--pass" id="document-title">'},
+          ],
+        },
+      ]);
     },
-    // This test takes 40s on fast hardware, and 50-60s on GHA (but can take longer).
+    // This test takes 10s on fast hardware, but can take longer in CI.
     // https://github.com/dequelabs/axe-core/tree/b573b1c1/doc/examples/jest_react#timeout-issues
-    /* timeout= */ process.env.CI ? 200_000 : 60_000
+    /* timeout= */ 20_000
     );
   });
 });

package/report/test-assets/faux-psi-template.html

@@ -43,10 +43,9 @@
   position: relative;
   display: inline-block;
   padding: 15px 55px 15px;
-  border: 1px solid transparent;
-  border-bottom: 0;
   cursor: pointer;
   font-weight: 600;
+  border-bottom: 3px solid transparent;
 }
 
 .tabset > label:hover {
@@ -59,51 +58,111 @@
 }
 
 .tabset > input:checked + label {
-  border-color: #ccc;
-  border-bottom: 1px solid #fff;
   margin-bottom: -1px;
   background: white;
+  border-bottom: 3px solid blue;
 }
 
 .tab-panel {
-  border-top: 1px solid #ccc;
+  border: 1px solid #ccc;
+  padding: 24px;
+  row-gap: calc(8px*2);
+  border-radius: calc(8px/2);
 }
 
-body {
-  padding: 30px;
-}
 
 .tabset {
-  max-width: 65em;
-  background: #eee;
+
 }
 
 .tab-panels {
   background: white;
 }
 
-/* extra styles */
 body {
-  background: hsl(217deg 89% 61%);
+  height: 100%;
+  overflow: hidden;
+  -webkit-font-smoothing: antialiased;
+  color: rgba(0,0,0,0.87);
+  font-family: Roboto,RobotoDraft,Helvetica,Arial,sans-serif;
+  margin: 0;
+  text-size-adjust: 100%;
+  bottom: auto;
+  right: auto;
+  width: auto;
+  overflow: visible;
+  overflow-y: scroll;
+  overscroll-behavior: contain;
+}
+.page {
+  max-width: 960px;
+  width: calc(100% - 24px*2);
+  margin: auto;
+  padding: 24px;
+  padding-top: calc(24px*2);
+  min-width: calc(360px -  8px *2);
+}
+@media screen and (max-width: 768px) {
+  .page {
+    padding:8px;
+    width: calc(100% - 8px*2);
+    padding-top: calc(24px/2)
+  }
+  .tab-panel {
+    padding:unset;
+    border-width: 0;
+  }
+}
+.hrefbar {
+  background: hsl(210deg 17% 98%);
+  border: 1px solid hsl(0deg 0% 85%);
+  border-width: 1px 0;
+  padding: 4px;
+}
+button {
+  background-color: hsl(216deg 100% 50%);
+  border-radius: 4px;
+  color: white;
+  padding: 13px;
+  border: 0;
+  cursor: pointer;
+  float: right;
 }
+
   </style>
 </head>
 <body >
   <noscript>PSI requires JavaScript. Please enable.</noscript>
-
-  <div class="tabset">
-
-    <input type="radio" name="tabset" id="tab1" aria-controls="mobile" checked>
-    <label for="tab1">Mobile</label>
-
-    <input type="radio" name="tabset" id="tab2" aria-controls="desktop">
-    <label for="tab2">Desktop</label>
-
-    <div class="tab-panels">
-      <section id="mobile" class="tab-panel"></section>
-
-      <section id="desktop" class="tab-panel"></section>
-
+  <div class="page">
+    <button type=button>Reanalyze</button>
+    <div class="tabset">
+      <input type="radio" name="tabset" id="tab1" aria-controls="mobile" checked />
+      <label for="tab1">Mobile</label>
+
+      <input type="radio" name="tabset" id="tab2" aria-controls="desktop" />
+      <label for="tab2">Desktop</label>
+
+      <div class="tab-panels">
+        <section id="mobile" class="tab-panel">
+          <h2>Diagnose performance issues</h2>
+          <h4>
+            See detailed analysis and recommendations from loading your site in a simulated
+            environment.
+          </h4>
+          <div class="hrefbar">🔗 http://thisurl.com</div>
+          <div class="reportContainer"></div>
+        </section>
+
+        <section id="desktop" class="tab-panel">
+          <h2>Diagnose performance issues</h2>
+          <h4>
+            See detailed analysis and recommendations from loading your site in a simulated
+            environment.
+          </h4>
+          <div class="hrefbar">🔗 http://thisurl.com</div>
+          <div class="reportContainer"></div>
+        </section>
+      </div>
     </div>
   </div>
 

package/report/test-assets/faux-psi.js

@@ -8,12 +8,22 @@
 /** @fileoverview This file exercises two LH reports within the same DOM. */
 
 /** @typedef {import('../clients/bundle.js')} lighthouseRenderer */
-
 /** @type {lighthouseRenderer} */
 // @ts-expect-error
 const lighthouseRenderer = window['report'];
 
+const wait = (ms = 100) => new Promise(resolve => setTimeout(resolve, ms));
+
+
 (async function __initPsiReports__() {
+  renderLHReport();
+
+  document.querySelector('button')?.addEventListener('click', () => {
+    renderLHReport();
+  });
+})();
+
+async function renderLHReport() {
   // @ts-expect-error
   const mobileLHR = window.__LIGHTHOUSE_JSON__;
   const desktopLHR = JSON.parse(JSON.stringify(mobileLHR));
@@ -26,25 +36,49 @@ const lighthouseRenderer = window['report'];
   for (const [tabId, lhr] of Object.entries(lhrs)) {
     await distinguishLHR(lhr, tabId);
 
-    const container = document.querySelector(`section#${tabId}`);
+    const container = document.querySelector(`section#${tabId} .reportContainer`);
     if (!container) throw new Error('Unexpected DOM. Bailing.');
 
     try {
+      container.textContent = 'Analyzing…';
+      await wait(500);
+      for (const el of container.childNodes) el.remove();
+
       const reportRootEl = lighthouseRenderer.renderReport(lhr, {
         omitTopbar: true,
         disableAutoDarkModeAndFireworks: true,
       });
       // TODO: display warnings if appropriate.
-      for (const el of reportRootEl.querySelectorAll('.lh-warnings')) {
+      for (const el of reportRootEl.querySelectorAll('.lh-warnings--toplevel')) {
         el.setAttribute('hidden', 'true');
       }
+
+      // Move env block
+      const metaItemsEl = reportRootEl.querySelector('.lh-meta__items');
+      if (metaItemsEl) {
+        reportRootEl.querySelector('.lh-metrics-container')?.parentNode?.insertBefore(
+          metaItemsEl,
+          reportRootEl.querySelector('.lh-buttons')
+        );
+      }
+
       container.append(reportRootEl);
+
+      // Override some LH styles. (To find .lh-vars we must descend from reportRootEl's parent)
+      for (const el of container.querySelectorAll('article.lh-vars')) {
+        // Ensure these css var names are not stale.
+        el.style.setProperty('--report-content-max-width', '100%');
+        el.style.setProperty('--edge-gap-padding', '0');
+      }
+      for (const el of reportRootEl.querySelectorAll('footer.lh-footer')) {
+        el.style.display = 'none';
+      }
     } catch (e) {
       console.error(e);
       container.textContent = 'Error: LHR failed to render.';
     }
   }
-})();
+}
 
 
 /**
@@ -59,13 +93,15 @@ async function distinguishLHR(lhr, tabId) {
   }
 
   const finalSSDetails = lhr.audits['final-screenshot'] && lhr.audits['final-screenshot'].details;
-  if (!finalSSDetails || finalSSDetails.type !== 'screenshot') throw new Error();
-  finalSSDetails.data = await decorateScreenshot(finalSSDetails.data, tabId);
+  if (finalSSDetails && finalSSDetails.type === 'screenshot') {
+    finalSSDetails.data = await decorateScreenshot(finalSSDetails.data, tabId);
+  }
 
   const fpSSDetails = lhr.audits['full-page-screenshot'] &&
       lhr.audits['full-page-screenshot'].details;
-  if (!fpSSDetails || fpSSDetails.type !== 'full-page-screenshot') throw new Error();
-  fpSSDetails.screenshot.data = await decorateScreenshot(fpSSDetails.screenshot.data, tabId);
+  if (fpSSDetails && fpSSDetails.type === 'full-page-screenshot') {
+    fpSSDetails.screenshot.data = await decorateScreenshot(fpSSDetails.screenshot.data, tabId);
+  }
 }
 
 /**

package/shared/localization/locales/en-US.json

@@ -1218,7 +1218,7 @@
     "message": "Server Backend Latencies"
   },
   "lighthouse-core/audits/no-unload-listeners.js | description": {
-    "message": "The `unload` event does not fire reliably and listening for it can prevent browser optimizations like the Back-Forward Cache. Consider using the `pagehide` or `visibilitychange` events instead. [Learn more](https://developers.google.com/web/updates/2018/07/page-lifecycle-api#the-unload-event)"
+    "message": "The `unload` event does not fire reliably and listening for it can prevent browser optimizations like the Back-Forward Cache. Use `pagehide` or `visibilitychange` events instead. [Learn more](https://web.dev/bfcache/#never-use-the-unload-event)"
   },
   "lighthouse-core/audits/no-unload-listeners.js | failureTitle": {
     "message": "Registers an `unload` listener"

package/shared/localization/locales/en-XL.json

@@ -1218,7 +1218,7 @@
     "message": "Ŝér̂v́êŕ B̂áĉḱêńd̂ Ĺât́êńĉíêś"
   },
   "lighthouse-core/audits/no-unload-listeners.js | description": {
-    "message": "T̂h́ê `unload` év̂én̂t́ d̂óêś n̂ót̂ f́îŕê ŕêĺîáb̂ĺŷ án̂d́ l̂íŝt́êńîńĝ f́ôŕ ît́ ĉán̂ ṕr̂év̂én̂t́ b̂ŕôẃŝér̂ óp̂t́îḿîźât́îón̂ś l̂ík̂é t̂h́ê B́âćk̂-F́ôŕŵár̂d́ Ĉáĉh́ê. Ćôńŝíd̂ér̂ úŝín̂ǵ t̂h́ê `pagehide` ór̂ `visibilitychange` év̂én̂t́ŝ ín̂śt̂éâd́. [L̂éâŕn̂ ḿôŕê](https://developers.google.com/web/updates/2018/07/page-lifecycle-api#the-unload-event)"
+    "message": "T̂h́ê `unload` év̂én̂t́ d̂óêś n̂ót̂ f́îŕê ŕêĺîáb̂ĺŷ án̂d́ l̂íŝt́êńîńĝ f́ôŕ ît́ ĉán̂ ṕr̂év̂én̂t́ b̂ŕôẃŝér̂ óp̂t́îḿîźât́îón̂ś l̂ík̂é t̂h́ê B́âćk̂-F́ôŕŵár̂d́ Ĉáĉh́ê. Úŝé `pagehide` ôŕ `visibilitychange` êv́êńt̂ś îńŝt́êád̂. [Ĺêár̂ń m̂ór̂é](https://web.dev/bfcache/#never-use-the-unload-event)"
   },
   "lighthouse-core/audits/no-unload-listeners.js | failureTitle": {
     "message": "R̂éĝíŝt́êŕŝ án̂ `unload` ĺîśt̂én̂ér̂"

package/third-party/chromium-synchronization/inspector-issueAdded-types-test.js

@@ -36,6 +36,7 @@ describe('issueAdded types', () => {
 Array [
   "attributionReportingIssueDetails",
   "blockedByResponseIssueDetails",
+  "clientHintIssueDetails",
   "contentSecurityPolicyIssueDetails",
   "corsIssueDetails",
   "deprecationIssueDetails",

package/types/config.d.ts

@@ -65,6 +65,7 @@ declare module Config {
     gatherMode?: Gatherer.GatherMode;
     configPath?: string;
     settingsOverrides?: SharedFlagsSettings & Pick<LH.Flags, 'plugins'>;
+    skipAboutBlank?: boolean;
   }
 
   interface SharedPassNavigationJson {

package/types/externs.d.ts

@@ -20,6 +20,7 @@ declare global {
     // See: `executionContext.cacheNativesOnNewDocument`.
     __nativePromise: PromiseConstructor;
     __nativePerformance: Performance;
+    __nativeFetch: typeof fetch,
     __nativeURL: typeof URL;
     __ElementMatches: Element['matches'];
 

package/types/gatherer.d.ts

@@ -153,6 +153,7 @@ declare module Gatherer {
     interface Options {
       rtt?: number;
       throughput?: number;
+      observedThroughput: number;
       maximumConcurrentRequests?: number;
       cpuSlowdownMultiplier?: number;
       layoutTaskMultiplier?: number;

package/types/smokehouse.d.ts

@@ -70,6 +70,8 @@ declare global {
       urlFilterRegex?: RegExp;
       skip?: (test: TestDfn, expectation: ExpectedRunnerResult) => string | false;
       modify?: (test: TestDfn, expectation: ExpectedRunnerResult) => void;
+      /** String of form `shardNumber/shardTotal`, e.g. `'1/4'`. */
+      shardArg: string | undefined;
     }
   }
 }