lighthouse 9.3.1-dev.20220210 → 9.3.1-dev.20220211

package/lighthouse-core/util-commonjs.js

@@ -630,6 +630,10 @@ const UIStrings = {
   thirdPartyResourcesLabel: 'Show 3rd-party resources',
   /** This label is for a button that opens a new tab to a webapp called "Treemap", which is a nested visual representation of a heierarchy of data related to the reports (script bytes and coverage, resource breakdown, etc.) */
   viewTreemapLabel: 'View Treemap',
+  /** This label is for a button that will show the user a trace of the page. */
+  viewTraceLabel: 'View Trace',
+  /** This label is for a button that will show the user a trace of the page. */
+  viewOriginalTraceLabel: 'View Original Trace',
 
   /** Option in a dropdown menu that opens a small, summary report in a print dialog.  */
   dropdownPrintSummary: 'Print Summary',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lighthouse",
-  "version": "9.3.1-dev.20220210",
+  "version": "9.3.1-dev.20220211",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./lighthouse-core/index.js",
   "bin": {

package/report/renderer/report-ui-features.js

@@ -112,6 +112,15 @@ export class ReportUIFeatures {
       });
     }
 
+    if (this._opts.onViewTrace) {
+      this.addButton({
+        text: lhr.configSettings.throttlingMethod === 'simulate' ?
+          Util.i18n.strings.viewOriginalTraceLabel :
+          Util.i18n.strings.viewTraceLabel,
+        onClick: () => this._opts.onViewTrace?.(),
+      });
+    }
+
     if (this._opts.getStandaloneReportHTML) {
       this._dom.find('a[data-action="save-html"]', this._dom.rootEl).classList.remove('lh-hidden');
     }

package/report/renderer/util.js

@@ -627,6 +627,10 @@ const UIStrings = {
   thirdPartyResourcesLabel: 'Show 3rd-party resources',
   /** This label is for a button that opens a new tab to a webapp called "Treemap", which is a nested visual representation of a heierarchy of data related to the reports (script bytes and coverage, resource breakdown, etc.) */
   viewTreemapLabel: 'View Treemap',
+  /** This label is for a button that will show the user a trace of the page. */
+  viewTraceLabel: 'View Trace',
+  /** This label is for a button that will show the user a trace of the page. */
+  viewOriginalTraceLabel: 'View Original Trace',
 
   /** Option in a dropdown menu that opens a small, summary report in a print dialog.  */
   dropdownPrintSummary: 'Print Summary',

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

@@ -0,0 +1,107 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ReportRendererAxe with aXe renders without axe violations 2`] = `
+Array [
+  Object {
+    "description": "Ensures every id attribute value is unique",
+    "help": "id attribute value must be unique",
+    "helpUrl": "https://dequeuniversity.com/rules/axe/4.3/duplicate-id?application=axeAPI",
+    "id": "duplicate-id",
+    "impact": "minor",
+    "nodes": Array [
+      Object {
+        "all": Array [],
+        "any": Array [
+          Object {
+            "data": "viewport",
+            "id": "duplicate-id",
+            "impact": "minor",
+            "message": "Document has multiple static elements with the same id attribute: viewport",
+            "relatedNodes": Array [
+              Object {
+                "html": "<div class=\\"lh-audit lh-audit--binary lh-audit--pass\\" id=\\"viewport\\">",
+                "target": Array [
+                  "#seo > .lh-audit-group:nth-child(4) > .lh-clump--passed.lh-clump > .lh-audit--binary.lh-audit--pass.lh-audit:nth-child(2)",
+                ],
+              },
+              Object {
+                "html": "<div class=\\"lh-audit lh-audit--binary lh-audit--pass\\" id=\\"viewport\\">",
+                "target": Array [
+                  ".lh-audit-group--pwa-optimized > .lh-audit--binary.lh-audit--pass.lh-audit:nth-child(6)",
+                ],
+              },
+            ],
+          },
+        ],
+        "failureSummary": "Fix any of the following:
+  Document has multiple static elements with the same id attribute: viewport",
+        "html": "<div class=\\"lh-audit lh-audit--binary lh-audit--pass\\" id=\\"viewport\\">",
+        "impact": "minor",
+        "none": Array [],
+        "target": Array [
+          ".lh-audit--binary.lh-audit--pass.lh-audit:nth-child(20)",
+        ],
+      },
+      Object {
+        "all": Array [],
+        "any": Array [
+          Object {
+            "data": "image-alt",
+            "id": "duplicate-id",
+            "impact": "minor",
+            "message": "Document has multiple static elements with the same id attribute: image-alt",
+            "relatedNodes": Array [
+              Object {
+                "html": "<div class=\\"lh-audit lh-audit--binary lh-audit--fail\\" id=\\"image-alt\\">",
+                "target": Array [
+                  ".lh-audit-group--seo-content > .lh-audit--fail.lh-audit--binary.lh-audit:nth-child(3)",
+                ],
+              },
+            ],
+          },
+        ],
+        "failureSummary": "Fix any of the following:
+  Document has multiple static elements with the same id attribute: image-alt",
+        "html": "<div class=\\"lh-audit lh-audit--binary lh-audit--fail\\" id=\\"image-alt\\">",
+        "impact": "minor",
+        "none": Array [],
+        "target": Array [
+          ".lh-audit-group--a11y-names-labels > .lh-audit--fail.lh-audit--binary.lh-audit:nth-child(2)",
+        ],
+      },
+      Object {
+        "all": Array [],
+        "any": Array [
+          Object {
+            "data": "document-title",
+            "id": "duplicate-id",
+            "impact": "minor",
+            "message": "Document has multiple static elements with the same id attribute: document-title",
+            "relatedNodes": Array [
+              Object {
+                "html": "<div class=\\"lh-audit lh-audit--binary lh-audit--pass\\" id=\\"document-title\\">",
+                "target": Array [
+                  "#seo > .lh-audit-group:nth-child(4) > .lh-clump--passed.lh-clump > .lh-audit--binary.lh-audit--pass.lh-audit:nth-child(3)",
+                ],
+              },
+            ],
+          },
+        ],
+        "failureSummary": "Fix any of the following:
+  Document has multiple static elements with the same id attribute: document-title",
+        "html": "<div class=\\"lh-audit lh-audit--binary lh-audit--pass\\" id=\\"document-title\\">",
+        "impact": "minor",
+        "none": Array [],
+        "target": Array [
+          ".lh-audit--binary.lh-audit--pass.lh-audit:nth-child(13)",
+        ],
+      },
+    ],
+    "tags": Array [
+      "cat.parsing",
+      "wcag2a",
+      "wcag411",
+    ],
+  },
+]
+`;

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

@@ -53,23 +53,44 @@ describe('ReportRendererAxe', () => {
       // 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">'},
-          ],
-        },
-      ]);
+      // 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',
+      // },
+
+      expect(axeResults.violations.find(v => v.id === 'duplicate-id')).toMatchObject({
+        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">'},
+        ],
+      });
+
+      const axeSummary = axeResults.violations.map((v) => {
+        return {
+          id: v.id,
+          message: v.nodes.map((n) => n.failureSummary).join('\n'),
+        };
+      });
+      expect(axeSummary).toMatchInlineSnapshot(`
+Array [
+  Object {
+    "id": "duplicate-id",
+    "message": "Fix any of the following:
+  Document has multiple static elements with the same id attribute: viewport
+Fix any of the following:
+  Document has multiple static elements with the same id attribute: image-alt
+Fix any of the following:
+  Document has multiple static elements with the same id attribute: document-title",
+  },
+]
+`);
+
+      expect(axeResults.violations).toMatchSnapshot();
     },
     // 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

package/report/types/report-renderer.d.ts

@@ -5,6 +5,7 @@
  */
 
 import { Result as AuditResult } from "../../types/lhr/audit-result";
+import { ReportUIFeatures } from "../renderer/report-ui-features.js";
 
 declare module Renderer {
   function renderReport(lhr: AuditResult, options?: Options): HTMLElement;
@@ -26,6 +27,12 @@ declare module Renderer {
     onPageAnchorRendered?: (link: HTMLAnchorElement) => void;
     /** If defined, `Save as HTML` option is shown in dropdown menu. */
     getStandaloneReportHTML?: () => string;
+    /**
+     * If defined, adds a `View Trace` button to the report, and calls this callback when clicked.
+     * The callback should do something to present the user with a visualization of the trace
+     * data, which can be gotten from the artifacts.
+     */
+    onViewTrace?: () => void;
   }
 }
 

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

@@ -2543,6 +2543,12 @@
   "report/renderer/util.js | varianceDisclaimer": {
     "message": "Values are estimated and may vary. The [performance score is calculated](https://web.dev/performance-scoring/) directly from these metrics."
   },
+  "report/renderer/util.js | viewOriginalTraceLabel": {
+    "message": "View Original Trace"
+  },
+  "report/renderer/util.js | viewTraceLabel": {
+    "message": "View Trace"
+  },
   "report/renderer/util.js | viewTreemapLabel": {
     "message": "View Treemap"
   },

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

@@ -2543,6 +2543,12 @@
   "report/renderer/util.js | varianceDisclaimer": {
     "message": "V̂ál̂úêś âŕê éŝt́îḿât́êd́ âńd̂ ḿâý v̂ár̂ý. T̂h́ê [ṕêŕf̂ór̂ḿâńĉé ŝćôŕê íŝ ćâĺĉúl̂át̂éd̂](https://web.dev/performance-scoring/) d́îŕêćt̂ĺŷ f́r̂óm̂ t́ĥéŝé m̂ét̂ŕîćŝ."
   },
+  "report/renderer/util.js | viewOriginalTraceLabel": {
+    "message": "V̂íêẃ Ôŕîǵîńâĺ T̂ŕâćê"
+  },
+  "report/renderer/util.js | viewTraceLabel": {
+    "message": "V̂íêẃ T̂ŕâćê"
+  },
   "report/renderer/util.js | viewTreemapLabel": {
     "message": "V̂íêẃ T̂ŕêém̂áp̂"
   },