lighthouse 9.3.1 → 9.4.0

package/lighthouse-core/runner.js

@@ -28,14 +28,16 @@ const {version: lighthouseVersion} = require('../package.json');
 class Runner {
   /**
    * @template {LH.Config.Config | LH.Config.FRConfig} TConfig
-   * @param {(runnerData: {config: TConfig, driverMock?: Driver}) => Promise<LH.Artifacts>} gatherFn
-   * @param {{config: TConfig, computedCache: Map<string, ArbitraryEqualityMap>, driverMock?: Driver}} runOpts
+   * @param {LH.Artifacts} artifacts
+   * @param {{config: TConfig, driverMock?: Driver, computedCache: Map<string, ArbitraryEqualityMap>}} options
    * @return {Promise<LH.RunnerResult|undefined>}
    */
-  static async run(gatherFn, runOpts) {
-    const settings = runOpts.config.settings;
+  static async audit(artifacts, options) {
+    const {config, computedCache} = options;
+    const settings = config.settings;
+
     try {
-      const runnerStatus = {msg: 'Runner setup', id: 'lh:runner:run'};
+      const runnerStatus = {msg: 'Audit phase', id: 'lh:runner:audit'};
       log.time(runnerStatus, 'verbose');
 
       /**
@@ -44,24 +46,14 @@ class Runner {
        */
       const lighthouseRunWarnings = [];
 
-      const sentryContext = Sentry.getContext();
-      Sentry.captureBreadcrumb({
-        message: 'Run started',
-        category: 'lifecycle',
-        data: sentryContext?.extra,
-      });
-
-      const artifacts = await this.gatherAndManageArtifacts(gatherFn, runOpts);
-
       // Potentially quit early
       if (settings.gatherMode && !settings.auditMode) return;
 
-      // Audit phase
-      if (!runOpts.config.audits) {
+      if (!config.audits) {
         throw new Error('No audits to evaluate.');
       }
-      const auditResultsById = await Runner._runAudits(settings, runOpts.config.audits, artifacts,
-          lighthouseRunWarnings, runOpts.computedCache);
+      const auditResultsById = await Runner._runAudits(settings, config.audits, artifacts,
+          lighthouseRunWarnings, computedCache);
 
       // LHR construction phase
       const resultsStatus = {msg: 'Generating results...', id: 'lh:runner:generate'};
@@ -82,8 +74,8 @@ class Runner {
 
       /** @type {Record<string, LH.RawIcu<LH.Result.Category>>} */
       let categories = {};
-      if (runOpts.config.categories) {
-        categories = ReportScoring.scoreAllCategories(runOpts.config.categories, auditResultsById);
+      if (config.categories) {
+        categories = ReportScoring.scoreAllCategories(config.categories, auditResultsById);
       }
 
       log.timeEnd(resultsStatus);
@@ -108,7 +100,7 @@ class Runner {
         audits: auditResultsById,
         configSettings: settings,
         categories,
-        categoryGroups: runOpts.config.groups || undefined,
+        categoryGroups: config.groups || undefined,
         stackPacks: stackPacks.getStackPacks(artifacts.Stacks),
         timing: this._getTiming(artifacts),
         i18n: {
@@ -134,12 +126,7 @@ class Runner {
 
       return {lhr, artifacts, report};
     } catch (err) {
-      // i18n LighthouseError strings.
-      if (err.friendlyMessage) {
-        err.friendlyMessage = format.getFormatted(err.friendlyMessage, settings.locale);
-      }
-      await Sentry.captureException(err, {level: 'fatal'});
-      throw err;
+      throw Runner.createRunnerError(err, settings);
     }
   }
 
@@ -150,38 +137,72 @@ class Runner {
    *
    * @template {LH.Config.Config | LH.Config.FRConfig} TConfig
    * @param {(runnerData: {config: TConfig, driverMock?: Driver}) => Promise<LH.Artifacts>} gatherFn
-   * @param {{config: TConfig, driverMock?: Driver}} options
+   * @param {{config: TConfig, driverMock?: Driver, computedCache: Map<string, ArbitraryEqualityMap>}} options
    * @return {Promise<LH.Artifacts>}
    */
-  static async gatherAndManageArtifacts(gatherFn, options) {
+  static async gather(gatherFn, options) {
     const settings = options.config.settings;
 
-    // Gather phase
     // Either load saved artifacts from disk or from the browser.
-    let artifacts;
-    if (settings.auditMode && !settings.gatherMode) {
-      // No browser required, just load the artifacts from disk.
-      const path = this._getDataSavePath(settings);
-      artifacts = assetSaver.loadArtifacts(path);
-      const requestedUrl = artifacts.URL.requestedUrl;
-
-      if (!requestedUrl) {
-        throw new Error('Cannot run audit mode on empty URL');
-      }
-    } else {
-      artifacts = await gatherFn({
-        config: options.config,
-        driverMock: options.driverMock,
+    try {
+      const sentryContext = Sentry.getContext();
+      Sentry.captureBreadcrumb({
+        message: 'Run started',
+        category: 'lifecycle',
+        data: sentryContext,
       });
 
-      // -G means save these to disk (e.g. ./latest-run).
-      if (settings.gatherMode) {
+      /** @type {LH.Artifacts} */
+      let artifacts;
+      if (settings.auditMode && !settings.gatherMode) {
+        // No browser required, just load the artifacts from disk.
         const path = this._getDataSavePath(settings);
-        await assetSaver.saveArtifacts(artifacts, path);
+        artifacts = assetSaver.loadArtifacts(path);
+        const requestedUrl = artifacts.URL.requestedUrl;
+
+        if (!requestedUrl) {
+          throw new Error('Cannot run audit mode on empty URL');
+        }
+      } else {
+        const runnerStatus = {msg: 'Gather phase', id: 'lh:runner:gather'};
+        log.time(runnerStatus, 'verbose');
+
+        artifacts = await gatherFn({
+          config: options.config,
+          driverMock: options.driverMock,
+        });
+
+        log.timeEnd(runnerStatus);
+
+        // If `gather` is run multiple times before `audit`, the timing entries for each `gather` can pollute one another.
+        // We need to clear the timing entries at the end of gathering.
+        // Set artifacts.Timing again to ensure lh:runner:gather is included.
+        artifacts.Timing = log.takeTimeEntries();
+
+        // -G means save these to disk (e.g. ./latest-run).
+        if (settings.gatherMode) {
+          const path = this._getDataSavePath(settings);
+          await assetSaver.saveArtifacts(artifacts, path);
+        }
       }
+
+      return artifacts;
+    } catch (err) {
+      throw Runner.createRunnerError(err, settings);
     }
+  }
 
-    return artifacts;
+  /**
+   * @param {any} err
+   * @param {LH.Config.Settings} settings
+   */
+  static createRunnerError(err, settings) {
+    // i18n LighthouseError strings.
+    if (err.friendlyMessage) {
+      err.friendlyMessage = format.getFormatted(err.friendlyMessage, settings.locale);
+    }
+    Sentry.captureException(err, {level: 'fatal'});
+    return err;
   }
 
   /**
@@ -197,8 +218,11 @@ class Runner {
     const timingEntriesKeyValues = [
       ...timingEntriesFromArtifacts,
       ...timingEntriesFromRunner,
-      // As entries can share a name, dedupe based on the startTime timestamp
-    ].map(entry => /** @type {[number, PerformanceEntry]} */ ([entry.startTime, entry]));
+    ].map(entry => /** @type {[string, PerformanceEntry]} */ ([
+      // As entries can share a name and start time, dedupe based on the name, startTime and duration
+      `${entry.startTime}-${entry.name}-${entry.duration}`,
+      entry,
+    ]));
     const timingEntries = Array.from(new Map(timingEntriesKeyValues).values())
     // Truncate timestamps to hundredths of a millisecond saves ~4KB. No need for microsecond
     // resolution.
@@ -212,8 +236,11 @@ class Runner {
         entryType: entry.entryType,
       };
     }).sort((a, b) => a.startTime - b.startTime);
-    const runnerEntry = timingEntries.find(e => e.name === 'lh:runner:run');
-    return {entries: timingEntries, total: runnerEntry?.duration || 0};
+    const gatherEntry = timingEntries.find(e => e.name === 'lh:runner:gather');
+    const auditEntry = timingEntries.find(e => e.name === 'lh:runner:audit');
+    const gatherTiming = gatherEntry?.duration || 0;
+    const auditTiming = auditEntry?.duration || 0;
+    return {entries: timingEntries, total: gatherTiming + auditTiming};
   }
 
   /**

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",
+  "version": "9.4.0",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./lighthouse-core/index.js",
   "bin": {
@@ -121,7 +121,6 @@
     "@types/lodash.set": "^4.3.6",
     "@types/node": "*",
     "@types/pako": "^1.0.1",
-    "@types/raven": "^2.5.1",
     "@types/resize-observer-browser": "^0.1.1",
     "@types/semver": "^5.5.0",
     "@types/tabulator-tables": "^4.9.1",
@@ -183,6 +182,7 @@
     "webtreemap-cdt": "^3.2.1"
   },
   "dependencies": {
+    "@sentry/node": "^6.17.4",
     "axe-core": "4.3.5",
     "chrome-launcher": "^0.15.0",
     "configstore": "^5.0.1",
@@ -204,7 +204,6 @@
     "open": "^8.4.0",
     "parse-cache-control": "1.0.1",
     "ps-list": "^8.0.0",
-    "raven": "^2.2.1",
     "robots-parser": "^3.0.0",
     "semver": "^5.3.0",
     "speedline-core": "^1.4.3",

package/readme.md

@@ -313,7 +313,7 @@ yarn type-check
 
 ### Docs
 
-Some of our docs have tests that run only in CI by default. If you end up needing to modify our documentation, you'll need to run `yarn test-docs` locally to make sure they pass.
+Some of our docs have tests that run only in CI by default. If you end up needing to modify our documentation, you'll need to run `yarn build-pack && yarn test-docs` locally to make sure they pass.
 
 **Additional Dependencies**
 - `brew install jq`

package/report/assets/templates.html

@@ -210,8 +210,8 @@ limitations under the License.
   <div class="lh-scores-wrapper">
     <div class="lh-scores-container">
       <div class="lh-pyro">
-        <div class="lh-before"></div>
-        <div class="lh-after"></div>
+        <div class="lh-pyro-before"></div>
+        <div class="lh-pyro-after"></div>
       </div>
     </div>
   </div>
@@ -463,9 +463,6 @@ limitations under the License.
       animation-delay: 2.25s, 2.25s, 2.25s;
       animation-duration: 1.25s, 1.25s, 6.25s;
     }
-    .lh-fireworks-paused .lh-pyro > div {
-      animation-play-state: paused;
-    }
 
     @keyframes bang {
       to {

package/report/renderer/components.js

@@ -349,7 +349,7 @@ function createGaugePwaComponent(dom) {
 function createHeadingComponent(dom) {
   const el0 = dom.createFragment();
   const el1 = dom.createElement('style');
-  el1.append('\n    /* CSS Fireworks. Originally by Eddie Lin\n       https://codepen.io/paulirish/pen/yEVMbP\n    */\n    .lh-pyro {\n      display: none;\n      z-index: 1;\n      pointer-events: none;\n    }\n    .lh-score100 .lh-pyro {\n      display: block;\n    }\n    .lh-score100 .lh-lighthouse stop:first-child {\n      stop-color: hsla(200, 12%, 95%, 0);\n    }\n    .lh-score100 .lh-lighthouse stop:last-child {\n      stop-color: hsla(65, 81%, 76%, 1);\n    }\n\n    .lh-pyro > .lh-pyro-before, .lh-pyro > .lh-pyro-after {\n      position: absolute;\n      width: 5px;\n      height: 5px;\n      border-radius: 2.5px;\n      box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;\n      animation: 1s bang ease-out infinite backwards,  1s gravity ease-in infinite backwards,  5s position linear infinite backwards;\n      animation-delay: 1s, 1s, 1s;\n    }\n\n    .lh-pyro > .lh-pyro-after {\n      animation-delay: 2.25s, 2.25s, 2.25s;\n      animation-duration: 1.25s, 1.25s, 6.25s;\n    }\n    .lh-fireworks-paused .lh-pyro > div {\n      animation-play-state: paused;\n    }\n\n    @keyframes bang {\n      to {\n        box-shadow: -70px -115.67px #47ebbc, -28px -99.67px #eb47a4, 58px -31.67px #7eeb47, 13px -141.67px #eb47c5, -19px 6.33px #7347eb, -2px -74.67px #ebd247, 24px -151.67px #eb47e0, 57px -138.67px #b4eb47, -51px -104.67px #479eeb, 62px 8.33px #ebcf47, -93px 0.33px #d547eb, -16px -118.67px #47bfeb, 53px -84.67px #47eb83, 66px -57.67px #eb47bf, -93px -65.67px #91eb47, 30px -13.67px #86eb47, -2px -59.67px #83eb47, -44px 1.33px #eb47eb, 61px -58.67px #47eb73, 5px -22.67px #47e8eb, -66px -28.67px #ebe247, 42px -123.67px #eb5547, -75px 26.33px #7beb47, 15px -52.67px #a147eb, 36px -51.67px #eb8347, -38px -12.67px #eb5547, -46px -59.67px #47eb81, 78px -114.67px #eb47ba, 15px -156.67px #eb47bf, -36px 1.33px #eb4783, -72px -86.67px #eba147, 31px -46.67px #ebe247, -68px 29.33px #47e2eb, -55px 19.33px #ebe047, -56px 27.33px #4776eb, -13px -91.67px #eb5547, -47px -138.67px #47ebc7, -18px -96.67px #eb47ac, 11px -88.67px #4783eb, -67px -28.67px #47baeb, 53px 10.33px #ba47eb, 11px 19.33px #5247eb, -5px -11.67px #eb4791, -68px -4.67px #47eba7, 95px -37.67px #eb478b, -67px -162.67px #eb5d47, -54px -120.67px #eb6847, 49px -12.67px #ebe047, 88px 8.33px #47ebda, 97px 33.33px #eb8147, 6px -71.67px #ebbc47;\n      }\n    }\n    @keyframes gravity {\n      to {\n        transform: translateY(80px);\n        opacity: 0;\n      }\n    }\n    @keyframes position {\n      0%, 19.9% {\n        margin-top: 4%;\n        margin-left: 47%;\n      }\n      20%, 39.9% {\n        margin-top: 7%;\n        margin-left: 30%;\n      }\n      40%, 59.9% {\n        margin-top: 6%;\n        margin-left: 70%;\n      }\n      60%, 79.9% {\n        margin-top: 3%;\n        margin-left: 20%;\n      }\n      80%, 99.9% {\n        margin-top: 3%;\n        margin-left: 80%;\n      }\n    }\n  ');
+  el1.append('\n    /* CSS Fireworks. Originally by Eddie Lin\n       https://codepen.io/paulirish/pen/yEVMbP\n    */\n    .lh-pyro {\n      display: none;\n      z-index: 1;\n      pointer-events: none;\n    }\n    .lh-score100 .lh-pyro {\n      display: block;\n    }\n    .lh-score100 .lh-lighthouse stop:first-child {\n      stop-color: hsla(200, 12%, 95%, 0);\n    }\n    .lh-score100 .lh-lighthouse stop:last-child {\n      stop-color: hsla(65, 81%, 76%, 1);\n    }\n\n    .lh-pyro > .lh-pyro-before, .lh-pyro > .lh-pyro-after {\n      position: absolute;\n      width: 5px;\n      height: 5px;\n      border-radius: 2.5px;\n      box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;\n      animation: 1s bang ease-out infinite backwards,  1s gravity ease-in infinite backwards,  5s position linear infinite backwards;\n      animation-delay: 1s, 1s, 1s;\n    }\n\n    .lh-pyro > .lh-pyro-after {\n      animation-delay: 2.25s, 2.25s, 2.25s;\n      animation-duration: 1.25s, 1.25s, 6.25s;\n    }\n\n    @keyframes bang {\n      to {\n        box-shadow: -70px -115.67px #47ebbc, -28px -99.67px #eb47a4, 58px -31.67px #7eeb47, 13px -141.67px #eb47c5, -19px 6.33px #7347eb, -2px -74.67px #ebd247, 24px -151.67px #eb47e0, 57px -138.67px #b4eb47, -51px -104.67px #479eeb, 62px 8.33px #ebcf47, -93px 0.33px #d547eb, -16px -118.67px #47bfeb, 53px -84.67px #47eb83, 66px -57.67px #eb47bf, -93px -65.67px #91eb47, 30px -13.67px #86eb47, -2px -59.67px #83eb47, -44px 1.33px #eb47eb, 61px -58.67px #47eb73, 5px -22.67px #47e8eb, -66px -28.67px #ebe247, 42px -123.67px #eb5547, -75px 26.33px #7beb47, 15px -52.67px #a147eb, 36px -51.67px #eb8347, -38px -12.67px #eb5547, -46px -59.67px #47eb81, 78px -114.67px #eb47ba, 15px -156.67px #eb47bf, -36px 1.33px #eb4783, -72px -86.67px #eba147, 31px -46.67px #ebe247, -68px 29.33px #47e2eb, -55px 19.33px #ebe047, -56px 27.33px #4776eb, -13px -91.67px #eb5547, -47px -138.67px #47ebc7, -18px -96.67px #eb47ac, 11px -88.67px #4783eb, -67px -28.67px #47baeb, 53px 10.33px #ba47eb, 11px 19.33px #5247eb, -5px -11.67px #eb4791, -68px -4.67px #47eba7, 95px -37.67px #eb478b, -67px -162.67px #eb5d47, -54px -120.67px #eb6847, 49px -12.67px #ebe047, 88px 8.33px #47ebda, 97px 33.33px #eb8147, 6px -71.67px #ebbc47;\n      }\n    }\n    @keyframes gravity {\n      to {\n        transform: translateY(80px);\n        opacity: 0;\n      }\n    }\n    @keyframes position {\n      0%, 19.9% {\n        margin-top: 4%;\n        margin-left: 47%;\n      }\n      20%, 39.9% {\n        margin-top: 7%;\n        margin-left: 30%;\n      }\n      40%, 59.9% {\n        margin-top: 6%;\n        margin-left: 70%;\n      }\n      60%, 79.9% {\n        margin-top: 3%;\n        margin-left: 20%;\n      }\n      80%, 99.9% {\n        margin-top: 3%;\n        margin-left: 80%;\n      }\n    }\n  ');
   el0.append(el1);
   const el2 = dom.createElement('div', 'lh-header-container');
   const el3 = dom.createElement('div', 'lh-scores-wrapper-placeholder');
@@ -450,8 +450,8 @@ function createScoresWrapperComponent(dom) {
   const el2 = dom.createElement('div', 'lh-scores-wrapper');
   const el3 = dom.createElement('div', 'lh-scores-container');
   const el4 = dom.createElement('div', 'lh-pyro');
-  const el5 = dom.createElement('div', 'lh-before');
-  const el6 = dom.createElement('div', 'lh-after');
+  const el5 = dom.createElement('div', 'lh-pyro-before');
+  const el6 = dom.createElement('div', 'lh-pyro-after');
   el4.append(' ', el5, ' ', el6, ' ');
   el3.append(' ', el4, ' ');
   el2.append(' ', el3, ' ');

package/report/renderer/dom.js

@@ -293,10 +293,8 @@ export class DOM {
    * @param {string} filename
    */
   saveFile(blob, filename) {
-    const ext = blob.type.match('json') ? '.json' : '.html';
-
     const a = this.createElement('a');
-    a.download = `${filename}${ext}`;
+    a.download = filename;
     this.safelySetBlobHref(a, blob);
     this._document.body.appendChild(a); // Firefox requires anchor to be in the DOM.
     a.click();

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

@@ -70,12 +70,13 @@ export class ReportUIFeatures {
     this._setupThirdPartyFilter();
     this._setupElementScreenshotOverlay(this._dom.rootEl);
 
-    let turnOffTheLights = false;
     // Do not query the system preferences for DevTools - DevTools should only apply dark theme
     // if dark is selected in the settings panel.
-    const disableDarkMode = this._dom.isDevTools() || this._opts.disableAutoDarkModeAndFireworks;
+    // TODO: set `disableDarkMode` in devtools and delete this special case.
+    const disableDarkMode = this._dom.isDevTools() ||
+      this._opts.disableDarkMode || this._opts.disableAutoDarkModeAndFireworks;
     if (!disableDarkMode && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      turnOffTheLights = true;
+      toggleDarkTheme(this._dom, true);
     }
 
     // Fireworks!
@@ -85,13 +86,12 @@ export class ReportUIFeatures {
       const cat = lhr.categories[id];
       return cat && cat.score === 1;
     });
-    if (scoresAll100 && !this._opts.disableAutoDarkModeAndFireworks) {
-      turnOffTheLights = true;
+    const disableFireworks =
+      this._opts.disableFireworks || this._opts.disableAutoDarkModeAndFireworks;
+    if (scoresAll100 && !disableFireworks) {
       this._enableFireworks();
-    }
-
-    if (turnOffTheLights) {
-      toggleDarkTheme(this._dom, true);
+      // If dark mode is allowed, force it on because it looks so much better.
+      if (!disableDarkMode) toggleDarkTheme(this._dom, true);
     }
 
     // Show the metric descriptions by default when there is an error.
@@ -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');
     }
@@ -180,9 +189,6 @@ export class ReportUIFeatures {
   _enableFireworks() {
     const scoresContainer = this._dom.find('.lh-scores-container', this._dom.rootEl);
     scoresContainer.classList.add('lh-score100');
-    scoresContainer.addEventListener('click', _ => {
-      scoresContainer.classList.toggle('lh-fireworks-paused');
-    });
   }
 
   _setupMediaQueryListeners() {
@@ -339,13 +345,15 @@ export class ReportUIFeatures {
   }
 
   /**
-   * DevTools uses its own file manager to download files, so it redefines this function.
-   * Wrapper is necessary so DevTools can still override this function.
-   *
    * @param {Blob|File} blob
    */
   _saveFile(blob) {
-    const filename = getLhrFilenamePrefix(this.json);
-    this._dom.saveFile(blob, filename);
+    const ext = blob.type.match('json') ? '.json' : '.html';
+    const filename = getLhrFilenamePrefix(this.json) + ext;
+    if (this._opts.onSaveFileOverride) {
+      this._opts.onSaveFileOverride(blob, filename);
+    } else {
+      this._dom.saveFile(blob, filename);
+    }
   }
 }

package/report/renderer/topbar-features.js

@@ -199,7 +199,11 @@ export class TopbarFeatures {
   }
 
   _print() {
-    self.print();
+    if (this._reportUIFeatures._opts.onPrintOverride) {
+      this._reportUIFeatures._opts.onPrintOverride(this._dom.rootEl);
+    } else {
+      self.print();
+    }
   }
 
   /**

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/test-assets/faux-psi.js

@@ -46,7 +46,8 @@ async function renderLHReport() {
 
       const reportRootEl = lighthouseRenderer.renderReport(lhr, {
         omitTopbar: true,
-        disableAutoDarkModeAndFireworks: true,
+        disableFireworks: true,
+        disableDarkMode: true,
       });
       // TODO: display warnings if appropriate.
       for (const el of reportRootEl.querySelectorAll('.lh-warnings--toplevel')) {