lighthouse 9.3.1-dev.20220209 → 9.3.1-dev.20220210

package/lighthouse-cli/run.js

@@ -208,7 +208,7 @@ async function runLighthouseWithFraggleRock(url, flags, config, launchedChrome)
   const page = await browser.newPage();
   flags.channel = 'fraggle-rock-cli';
   const configContext = {configPath: flags.configPath, settingsOverrides: flags};
-  return fraggleRock.navigation({url, page, config, configContext});
+  return fraggleRock.navigation(url, {page, config, configContext});
 }
 
 /**

package/lighthouse-core/fraggle-rock/gather/navigation-runner.js

@@ -35,7 +35,7 @@ const NetworkRecords = require('../../computed/network-records.js');
  * @property {Driver} driver
  * @property {LH.Config.FRConfig} config
  * @property {LH.Config.NavigationDefn} navigation
- * @property {string} requestedUrl
+ * @property {LH.NavigationRequestor} requestor
  * @property {LH.FRBaseArtifacts} baseArtifacts
  * @property {Map<string, LH.ArbitraryEqualityMap>} computedCache
  * @property {InternalOptions} [options]
@@ -44,17 +44,17 @@ const NetworkRecords = require('../../computed/network-records.js');
 /** @typedef {Omit<Parameters<typeof collectPhaseArtifacts>[0], 'phase'>} PhaseState */
 
 /**
- * @param {{driver: Driver, config: LH.Config.FRConfig, requestedUrl: string, options?: InternalOptions}} args
+ * @param {{driver: Driver, config: LH.Config.FRConfig, requestor: LH.NavigationRequestor, options?: InternalOptions}} args
  * @return {Promise<{baseArtifacts: LH.FRBaseArtifacts}>}
  */
-async function _setup({driver, config, requestedUrl, options}) {
+async function _setup({driver, config, requestor, options}) {
   await driver.connect();
   if (!options?.skipAboutBlank) {
     await gotoURL(driver, defaultNavigationConfig.blankPage, {waitUntil: ['navigated']});
   }
 
   const baseArtifacts = await getBaseArtifacts(config, driver, {gatherMode: 'navigation'});
-  baseArtifacts.URL.requestedUrl = requestedUrl;
+  if (typeof requestor === 'string') baseArtifacts.URL.requestedUrl = requestor;
 
   await prepare.prepareTargetForNavigationMode(driver, config.settings);
 
@@ -65,7 +65,7 @@ async function _setup({driver, config, requestedUrl, options}) {
  * @param {NavigationContext} navigationContext
  * @return {Promise<{warnings: Array<LH.IcuMessage>}>}
  */
-async function _setupNavigation({requestedUrl, driver, navigation, config, options}) {
+async function _setupNavigation({requestor, driver, navigation, config, options}) {
   if (!options?.skipAboutBlank) {
     await gotoURL(driver, navigation.blankPage, {...navigation, waitUntil: ['navigated']});
   }
@@ -74,7 +74,7 @@ async function _setupNavigation({requestedUrl, driver, navigation, config, optio
     config.settings,
     {
       ...navigation,
-      url: requestedUrl,
+      requestor,
     }
   );
 
@@ -90,25 +90,25 @@ async function _cleanupNavigation({driver}) {
 
 /**
  * @param {NavigationContext} navigationContext
- * @return {Promise<{finalUrl: string, navigationError: LH.LighthouseError | undefined, warnings: Array<LH.IcuMessage>}>}
+ * @return {Promise<{requestedUrl: string, finalUrl: string, navigationError: LH.LighthouseError | undefined, warnings: Array<LH.IcuMessage>}>}
  */
 async function _navigate(navigationContext) {
-  const {driver, config, requestedUrl} = navigationContext;
+  const {driver, config, requestor} = navigationContext;
 
   try {
-    const {finalUrl, warnings} = await gotoURL(driver, requestedUrl, {
+    const {requestedUrl, finalUrl, warnings} = await gotoURL(driver, requestor, {
       ...navigationContext.navigation,
       debugNavigation: config.settings.debugNavigation,
       maxWaitForFcp: config.settings.maxWaitForFcp,
       maxWaitForLoad: config.settings.maxWaitForLoad,
       waitUntil: navigationContext.navigation.pauseAfterFcpMs ? ['fcp', 'load'] : ['load'],
     });
-
-    return {finalUrl, navigationError: undefined, warnings};
+    return {requestedUrl, finalUrl, navigationError: undefined, warnings};
   } catch (err) {
     if (!(err instanceof LighthouseError)) throw err;
     if (err.code !== 'NO_FCP' && err.code !== 'PAGE_HUNG') throw err;
-    return {finalUrl: requestedUrl, navigationError: err, warnings: []};
+    if (typeof requestor !== 'string') throw err;
+    return {requestedUrl: requestor, finalUrl: requestor, navigationError: err, warnings: []};
   }
 }
 
@@ -152,7 +152,7 @@ async function _collectDebugData(navigationContext, phaseState) {
  * @param {PhaseState} phaseState
  * @param {Awaited<ReturnType<typeof _setupNavigation>>} setupResult
  * @param {Awaited<ReturnType<typeof _navigate>>} navigateResult
- * @return {Promise<{finalUrl: string, artifacts: Partial<LH.GathererArtifacts>, warnings: Array<LH.IcuMessage>, pageLoadError: LH.LighthouseError | undefined}>}
+ * @return {Promise<{requestedUrl: string, finalUrl: string, artifacts: Partial<LH.GathererArtifacts>, warnings: Array<LH.IcuMessage>, pageLoadError: LH.LighthouseError | undefined}>}
  */
 async function _computeNavigationResult(
   navigationContext,
@@ -174,7 +174,7 @@ async function _computeNavigationResult(
   if (pageLoadError) {
     const locale = navigationContext.config.settings.locale;
     const localizedMessage = format.getFormatted(pageLoadError.friendlyMessage, locale);
-    log.error('NavigationRunner', localizedMessage, navigationContext.requestedUrl);
+    log.error('NavigationRunner', localizedMessage, navigateResult.requestedUrl);
 
     /** @type {Partial<LH.GathererArtifacts>} */
     const artifacts = {};
@@ -183,6 +183,7 @@ async function _computeNavigationResult(
     if (debugData.trace) artifacts.traces = {[pageLoadErrorId]: debugData.trace};
 
     return {
+      requestedUrl: navigateResult.requestedUrl,
       finalUrl,
       pageLoadError,
       artifacts,
@@ -192,7 +193,13 @@ async function _computeNavigationResult(
     await collectPhaseArtifacts({phase: 'getArtifact', ...phaseState});
 
     const artifacts = await awaitArtifacts(phaseState.artifactState);
-    return {finalUrl, artifacts, warnings, pageLoadError: undefined};
+    return {
+      requestedUrl: navigateResult.requestedUrl,
+      finalUrl,
+      artifacts,
+      warnings,
+      pageLoadError: undefined,
+    };
   }
 }
 
@@ -224,10 +231,10 @@ async function _navigation(navigationContext) {
 }
 
 /**
- * @param {{driver: Driver, config: LH.Config.FRConfig, requestedUrl: string; baseArtifacts: LH.FRBaseArtifacts, computedCache: NavigationContext['computedCache'], options?: InternalOptions}} args
+ * @param {{driver: Driver, config: LH.Config.FRConfig, requestor: LH.NavigationRequestor; baseArtifacts: LH.FRBaseArtifacts, computedCache: NavigationContext['computedCache'], options?: InternalOptions}} args
  * @return {Promise<{artifacts: Partial<LH.FRArtifacts & LH.FRBaseArtifacts>}>}
  */
-async function _navigations({driver, config, requestedUrl, baseArtifacts, computedCache, options}) {
+async function _navigations({driver, config, requestor, baseArtifacts, computedCache, options}) {
   if (!config.navigations) throw new Error('No navigations configured');
 
   /** @type {Partial<LH.FRArtifacts & LH.FRBaseArtifacts>} */
@@ -239,7 +246,7 @@ async function _navigations({driver, config, requestedUrl, baseArtifacts, comput
     const navigationContext = {
       driver,
       navigation,
-      requestedUrl,
+      requestor,
       config,
       baseArtifacts,
       computedCache,
@@ -254,7 +261,10 @@ async function _navigations({driver, config, requestedUrl, baseArtifacts, comput
         shouldHaltNavigations = true;
       }
 
-      artifacts.URL = {requestedUrl, finalUrl: navigationResult.finalUrl};
+      artifacts.URL = {
+        requestedUrl: navigationResult.requestedUrl,
+        finalUrl: navigationResult.finalUrl,
+      };
     }
 
     LighthouseRunWarnings.push(...navigationResult.warnings);
@@ -266,33 +276,43 @@ async function _navigations({driver, config, requestedUrl, baseArtifacts, comput
 }
 
 /**
- * @param {{requestedUrl: string, driver: Driver, config: LH.Config.FRConfig}} args
+ * @param {{requestedUrl?: string, driver: Driver, config: LH.Config.FRConfig}} args
  */
 async function _cleanup({requestedUrl, driver, config}) {
-  const didResetStorage = !config.settings.disableStorageReset;
+  const didResetStorage = !config.settings.disableStorageReset && requestedUrl;
   if (didResetStorage) await storage.clearDataForOrigin(driver.defaultSession, requestedUrl);
 
   await driver.disconnect();
 }
 
 /**
- * @param {{url: string, page: import('puppeteer').Page, config?: LH.Config.Json, configContext?: LH.Config.FRContext}} options
+ * @param {LH.NavigationRequestor} requestor
+ * @param {{page: import('puppeteer').Page, config?: LH.Config.Json, configContext?: LH.Config.FRContext}} options
  * @return {Promise<LH.RunnerResult|undefined>}
  */
-async function navigation(options) {
-  const {url, page, configContext = {}} = options;
+async function navigation(requestor, options) {
+  const {page, configContext = {}} = options;
   const {config} = initializeConfig(options.config, {...configContext, gatherMode: 'navigation'});
   const computedCache = new Map();
   const internalOptions = {
     skipAboutBlank: configContext.skipAboutBlank,
   };
 
+  // We can't trigger the navigation through user interaction if we reset the page before starting.
+  if (typeof requestor !== 'string') {
+    internalOptions.skipAboutBlank = true;
+  }
+
   const runnerOptions = {config, computedCache};
   const artifacts = await Runner.gather(
     async () => {
       const driver = new Driver(page);
-      const requestedUrl = URL.normalizeUrl(url);
-      const context = {driver, config, requestedUrl, options: internalOptions};
+      const context = {
+        driver,
+        config,
+        requestor: typeof requestor === 'string' ? URL.normalizeUrl(requestor) : requestor,
+        options: internalOptions,
+      };
       const {baseArtifacts} = await _setup(context);
       const {artifacts} = await _navigations({...context, baseArtifacts, computedCache});
       await _cleanup(context);

package/lighthouse-core/fraggle-rock/user-flow.js

@@ -54,11 +54,10 @@ class UserFlow {
   }
 
   /**
-   * @param {string} url
    * @param {StepOptions=} stepOptions
    */
-  _getNextNavigationOptions(url, stepOptions) {
-    const options = {url, ...this.options, ...stepOptions};
+  _getNextNavigationOptions(stepOptions) {
+    const options = {...this.options, ...stepOptions};
     const configContext = {...options.configContext};
     const settingsOverrides = {...configContext.settingsOverrides};
 
@@ -81,13 +80,16 @@ class UserFlow {
   }
 
   /**
-   * @param {string} url
+   * @param {LH.NavigationRequestor} requestor
    * @param {StepOptions=} stepOptions
    */
-  async navigate(url, stepOptions) {
+  async navigate(requestor, stepOptions) {
     if (this.currentTimespan) throw Error('Timespan already in progress');
 
-    const result = await navigation(this._getNextNavigationOptions(url, stepOptions));
+    const result = await navigation(
+      requestor,
+      this._getNextNavigationOptions(stepOptions)
+    );
     if (!result) throw Error('Navigation returned undefined');
 
     const providedName = stepOptions?.stepName;

package/lighthouse-core/gather/driver/navigation.js

@@ -78,12 +78,14 @@ function resolveWaitForFullyLoadedOptions(options) {
  * navigations.
  *
  * @param {LH.Gatherer.FRTransitionalDriver} driver
- * @param {string} url
+ * @param {LH.NavigationRequestor} requestor
  * @param {NavigationOptions} options
- * @return {Promise<{finalUrl: string, warnings: Array<LH.IcuMessage>}>}
+ * @return {Promise<{requestedUrl: string, finalUrl: string, warnings: Array<LH.IcuMessage>}>}
  */
-async function gotoURL(driver, url, options) {
-  const status = {msg: `Navigating to ${url}`, id: 'lh:driver:navigate'};
+async function gotoURL(driver, requestor, options) {
+  const status = typeof requestor === 'string' ?
+    {msg: `Navigating to ${requestor}`, id: 'lh:driver:navigate'} :
+    {msg: 'Navigating using a user defined function', id: 'lh:driver:navigate'};
   log.time(status);
 
   const session = driver.defaultSession;
@@ -94,9 +96,14 @@ async function gotoURL(driver, url, options) {
   await session.sendCommand('Page.enable');
   await session.sendCommand('Page.setLifecycleEventsEnabled', {enabled: true});
 
-  // No timeout needed for Page.navigate. See https://github.com/GoogleChrome/lighthouse/pull/6413
-  session.setNextProtocolTimeout(Infinity);
-  const waitforPageNavigateCmd = session.sendCommand('Page.navigate', {url});
+  let waitForNavigationTriggered;
+  if (typeof requestor === 'string') {
+    // No timeout needed for Page.navigate. See https://github.com/GoogleChrome/lighthouse/pull/6413
+    session.setNextProtocolTimeout(Infinity);
+    waitForNavigationTriggered = session.sendCommand('Page.navigate', {url: requestor});
+  } else {
+    waitForNavigationTriggered = requestor();
+  }
 
   const waitForNavigated = options.waitUntil.includes('navigated');
   const waitForLoad = options.waitUntil.includes('load');
@@ -119,10 +126,21 @@ async function gotoURL(driver, url, options) {
 
   const waitConditions = await Promise.all(waitConditionPromises);
   const timedOut = waitConditions.some(condition => condition.timedOut);
-  const finalUrl = (await networkMonitor.getFinalNavigationUrl()) || url;
+  const navigationUrls = await networkMonitor.getNavigationUrls();
+
+  let requestedUrl = navigationUrls.requestedUrl;
+  if (typeof requestor === 'string') {
+    if (requestor !== requestedUrl) {
+      log.error('Navigation', 'Provided URL did not match initial navigation URL');
+    }
+    requestedUrl = requestor;
+  }
+  if (!requestedUrl) throw Error('No navigations detected when running user defined requestor.');
+
+  const finalUrl = navigationUrls.finalUrl || requestedUrl;
 
   // Bring `Page.navigate` errors back into the promise chain. See https://github.com/GoogleChrome/lighthouse/pull/6739.
-  await waitforPageNavigateCmd;
+  await waitForNavigationTriggered;
   await networkMonitor.disable();
 
   if (options.debugNavigation) {
@@ -131,8 +149,9 @@ async function gotoURL(driver, url, options) {
 
   log.timeEnd(status);
   return {
+    requestedUrl,
     finalUrl,
-    warnings: getNavigationWarnings({timedOut, finalUrl, requestedUrl: url}),
+    warnings: getNavigationWarnings({timedOut, finalUrl, requestedUrl}),
   };
 }
 

package/lighthouse-core/gather/driver/network-monitor.js

@@ -133,18 +133,20 @@ class NetworkMonitor {
     this._sessions = new Map();
   }
 
-  /** @return {Promise<string | undefined>} */
-  async getFinalNavigationUrl() {
+  /** @return {Promise<{requestedUrl?: string, finalUrl?: string}>} */
+  async getNavigationUrls() {
     const frameNavigations = this._frameNavigations;
-    if (!frameNavigations.length) return undefined;
+    if (!frameNavigations.length) return {};
 
     const resourceTreeResponse = await this._session.sendCommand('Page.getResourceTree');
     const mainFrameId = resourceTreeResponse.frameTree.frame.id;
     const mainFrameNavigations = frameNavigations.filter(frame => frame.id === mainFrameId);
-    const finalNavigation = mainFrameNavigations[mainFrameNavigations.length - 1];
-    if (!finalNavigation) log.warn('NetworkMonitor', 'No detected navigations');
+    if (!mainFrameNavigations.length) log.warn('NetworkMonitor', 'No detected navigations');
 
-    return finalNavigation?.url;
+    return {
+      requestedUrl: mainFrameNavigations[0]?.url,
+      finalUrl: mainFrameNavigations[mainFrameNavigations.length - 1]?.url,
+    };
   }
 
   /**

package/lighthouse-core/gather/driver/prepare.js

@@ -71,17 +71,17 @@ async function dismissJavaScriptDialogs(session) {
 
 /**
  * @param {LH.Gatherer.FRProtocolSession} session
- * @param {{url: string}} navigation
+ * @param {string} url
  * @return {Promise<{warnings: Array<LH.IcuMessage>}>}
  */
-async function resetStorageForNavigation(session, navigation) {
+async function resetStorageForUrl(session, url) {
   /** @type {Array<LH.IcuMessage>} */
   const warnings = [];
 
   // Reset the storage and warn if there appears to be other important data.
-  const warning = await storage.getImportantStorageWarning(session, navigation.url);
+  const warning = await storage.getImportantStorageWarning(session, url);
   if (warning) warnings.push(warning);
-  await storage.clearDataForOrigin(session, navigation.url);
+  await storage.clearDataForOrigin(session, url);
   await storage.clearBrowserCaches(session);
 
   return {warnings};
@@ -190,7 +190,7 @@ async function prepareTargetForNavigationMode(driver, settings) {
  *
  * @param {LH.Gatherer.FRProtocolSession} session
  * @param {LH.Config.Settings} settings
- * @param {Pick<LH.Config.NavigationDefn, 'disableThrottling'|'disableStorageReset'|'blockedUrlPatterns'> & {url: string}} navigation
+ * @param {Pick<LH.Config.NavigationDefn, 'disableThrottling'|'disableStorageReset'|'blockedUrlPatterns'> & {requestor: LH.NavigationRequestor}} navigation
  * @return {Promise<{warnings: Array<LH.IcuMessage>}>}
  */
 async function prepareTargetForIndividualNavigation(session, settings, navigation) {
@@ -200,9 +200,15 @@ async function prepareTargetForIndividualNavigation(session, settings, navigatio
   /** @type {Array<LH.IcuMessage>} */
   const warnings = [];
 
-  const shouldResetStorage = !settings.disableStorageReset && !navigation.disableStorageReset;
+  const {requestor} = navigation;
+  const shouldResetStorage =
+    !settings.disableStorageReset &&
+    !navigation.disableStorageReset &&
+    // Without prior knowledge of the destination, we cannot know which URL to clear storage for.
+    typeof requestor === 'string';
   if (shouldResetStorage) {
-    const {warnings: storageWarnings} = await resetStorageForNavigation(session, navigation);
+    const requestedUrl = requestor;
+    const {warnings: storageWarnings} = await resetStorageForUrl(session, requestedUrl);
     warnings.push(...storageWarnings);
   }
 

package/lighthouse-core/gather/gather-runner.js

@@ -572,7 +572,7 @@ class GatherRunner {
       driver.defaultSession,
       passContext.settings,
       {
-        url: passContext.url,
+        requestor: passContext.url,
         disableStorageReset: !passConfig.useThrottling,
         disableThrottling: !passConfig.useThrottling,
         blockedUrlPatterns: passConfig.blockedUrlPatterns,

package/package.json

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

package/report/assets/templates.html

@@ -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');

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

@@ -180,9 +180,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() {

package/types/global-lh.d.ts

@@ -26,6 +26,7 @@ import Treemap_ from './lhr/treemap';
 declare global {
   module LH {
     export type ArbitraryEqualityMap = ArbitraryEqualityMap_;
+    export type NavigationRequestor = string | (() => Promise<void> | void);
 
     // artifacts.d.ts
     export import Artifacts = Artifacts_.Artifacts;