lighthouse 9.1.0-dev.20211209 → 9.1.0-dev.20211213

package/lighthouse-core/computed/page-dependency-graph.js

@@ -147,6 +147,9 @@ class PageDependencyGraph {
       const directInitiatorRequest = node.record.initiatorRequest || rootNode.record;
       const directInitiatorNode =
         networkNodeOutput.idToNodeMap.get(directInitiatorRequest.requestId) || rootNode;
+      const canDependOnInitiator =
+        !directInitiatorNode.isDependentOn(node) &&
+        node.canDependOn(directInitiatorNode);
       const initiators = PageDependencyGraph.getNetworkInitiators(node.record);
       if (initiators.length) {
         initiators.forEach(initiator => {
@@ -156,16 +159,18 @@ class PageDependencyGraph {
               parentCandidates[0].startTime <= node.startTime &&
               !parentCandidates[0].isDependentOn(node)) {
             node.addDependency(parentCandidates[0]);
-          } else if (!directInitiatorNode.isDependentOn(node)) {
+          } else if (canDependOnInitiator) {
             directInitiatorNode.addDependent(node);
           }
         });
-      } else if (!directInitiatorNode.isDependentOn(node)) {
+      } else if (canDependOnInitiator) {
         directInitiatorNode.addDependent(node);
       }
 
       // Make sure the nodes are attached to the graph if the initiator information was invalid.
-      if (node !== rootNode && node.getDependencies().length === 0) node.addDependency(rootNode);
+      if (node !== rootNode && node.getDependencies().length === 0 && node.canDependOn(rootNode)) {
+        node.addDependency(rootNode);
+      }
 
       if (!node.record.redirects) return;
 
@@ -321,7 +326,8 @@ class PageDependencyGraph {
         }
       }
 
-      if (node.getNumberOfDependencies() === 0) {
+      // Nodes starting before the root node cannot depend on it.
+      if (node.getNumberOfDependencies() === 0 && node.canDependOn(rootNode)) {
         node.addDependency(rootNode);
       }
     }
@@ -388,23 +394,27 @@ class PageDependencyGraph {
     const networkNodeOutput = PageDependencyGraph.getNetworkNodeOutput(networkRecords);
     const cpuNodes = PageDependencyGraph.getCPUNodes(processedTrace);
 
-    // The root request is the earliest network request, using position in networkRecords array to break ties.
-    const rootRequest = networkRecords.reduce((min, r) => (r.startTime < min.startTime ? r : min));
-    const rootNode = networkNodeOutput.idToNodeMap.get(rootRequest.requestId);
     // The main document request is the earliest network request *of type document*.
     // This will be different from the root request when there are server redirects.
     const mainDocumentRequest = NetworkAnalyzer.findMainDocument(networkRecords);
     const mainDocumentNode = networkNodeOutput.idToNodeMap.get(mainDocumentRequest.requestId);
-
-    if (!rootNode || !mainDocumentNode) {
-      // Should always be found.
-      throw new Error(`${rootNode ? 'mainDocument' : 'root'}Node not found.`);
+    if (!mainDocumentNode) {
+      // mainDocumentNode should always be found.
+      throw new Error('mainDocumentNode not found.');
     }
 
-    if (mainDocumentNode !== rootNode &&
-        (!mainDocumentNode.record.redirects ||
-        !mainDocumentNode.record.redirects.includes(rootNode.record))) {
-      throw new Error('Root node was not in redirect chain of mainDocument');
+    // The root request is the earliest request in the main document redirect chain.
+    // Will be undefined if there were no redirects.
+    const rootRequest = mainDocumentNode.record.redirects && mainDocumentNode.record.redirects[0];
+
+    let rootNode;
+    if (rootRequest) {
+      // rootNode should always be found.
+      rootNode = rootRequest && networkNodeOutput.idToNodeMap.get(rootRequest.requestId);
+      if (!rootNode) throw new Error('rootNode not found');
+    } else {
+      // Use main document as root if there were no redirects.
+      rootNode = mainDocumentNode;
     }
 
     PageDependencyGraph.linkNetworkNodes(rootNode, networkNodeOutput);

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

@@ -27,6 +27,8 @@ const Trace = require('../../gather/gatherers/trace.js');
 const DevtoolsLog = require('../../gather/gatherers/devtools-log.js');
 const NetworkRecords = require('../../computed/network-records.js');
 
+/** @typedef {{skipAboutBlank?: boolean}} InternalOptions */
+
 /**
  * @typedef NavigationContext
  * @property {Driver} driver
@@ -35,17 +37,20 @@ const NetworkRecords = require('../../computed/network-records.js');
  * @property {string} requestedUrl
  * @property {LH.FRBaseArtifacts} baseArtifacts
  * @property {Map<string, LH.ArbitraryEqualityMap>} computedCache
+ * @property {InternalOptions} [options]
  */
 
 /** @typedef {Omit<Parameters<typeof collectPhaseArtifacts>[0], 'phase'>} PhaseState */
 
 /**
- * @param {{driver: Driver, config: LH.Config.FRConfig, requestedUrl: string}} args
+ * @param {{driver: Driver, config: LH.Config.FRConfig, requestedUrl: string, options?: InternalOptions}} args
  * @return {Promise<{baseArtifacts: LH.FRBaseArtifacts}>}
  */
-async function _setup({driver, config, requestedUrl}) {
+async function _setup({driver, config, requestedUrl, options}) {
   await driver.connect();
-  await gotoURL(driver, defaultNavigationConfig.blankPage, {waitUntil: ['navigated']});
+  if (!options?.skipAboutBlank) {
+    await gotoURL(driver, defaultNavigationConfig.blankPage, {waitUntil: ['navigated']});
+  }
 
   const baseArtifacts = await getBaseArtifacts(config, driver, {gatherMode: 'navigation'});
   baseArtifacts.URL.requestedUrl = requestedUrl;
@@ -59,8 +64,10 @@ async function _setup({driver, config, requestedUrl}) {
  * @param {NavigationContext} navigationContext
  * @return {Promise<{warnings: Array<LH.IcuMessage>}>}
  */
-async function _setupNavigation({requestedUrl, driver, navigation, config}) {
-  await gotoURL(driver, navigation.blankPage, {...navigation, waitUntil: ['navigated']});
+async function _setupNavigation({requestedUrl, driver, navigation, config, options}) {
+  if (!options?.skipAboutBlank) {
+    await gotoURL(driver, navigation.blankPage, {...navigation, waitUntil: ['navigated']});
+  }
   const {warnings} = await prepare.prepareTargetForIndividualNavigation(
     driver.defaultSession,
     config.settings,
@@ -216,10 +223,10 @@ async function _navigation(navigationContext) {
 }
 
 /**
- * @param {{driver: Driver, config: LH.Config.FRConfig, requestedUrl: string; baseArtifacts: LH.FRBaseArtifacts, computedCache: NavigationContext['computedCache']}} args
+ * @param {{driver: Driver, config: LH.Config.FRConfig, requestedUrl: string; 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}) {
+async function _navigations({driver, config, requestedUrl, baseArtifacts, computedCache, options}) {
   if (!config.navigations) throw new Error('No navigations configured');
 
   /** @type {Partial<LH.FRArtifacts & LH.FRBaseArtifacts>} */
@@ -235,6 +242,7 @@ async function _navigations({driver, config, requestedUrl, baseArtifacts, comput
       config,
       baseArtifacts,
       computedCache,
+      options,
     };
 
     let shouldHaltNavigations = false;
@@ -274,11 +282,14 @@ async function navigation(options) {
   const {url: requestedUrl, page, configContext = {}} = options;
   const {config} = initializeConfig(options.config, {...configContext, gatherMode: 'navigation'});
   const computedCache = new Map();
+  const internalOptions = {
+    skipAboutBlank: configContext.skipAboutBlank,
+  };
 
   return Runner.run(
     async () => {
       const driver = new Driver(page);
-      const context = {driver, config, requestedUrl};
+      const context = {driver, config, requestedUrl, 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

@@ -59,20 +59,24 @@ class UserFlow {
    */
   _getNextNavigationOptions(url, stepOptions) {
     const options = {url, ...this.options, ...stepOptions};
+    const configContext = {...options.configContext};
+    const settingsOverrides = {...configContext.settingsOverrides};
+
+    if (configContext.skipAboutBlank === undefined) {
+      configContext.skipAboutBlank = true;
+    }
 
     // On repeat navigations, we want to disable storage reset by default (i.e. it's not a cold load).
     const isSubsequentNavigation = this.steps.some(step => step.lhr.gatherMode === 'navigation');
     if (isSubsequentNavigation) {
-      const configContext = {...options.configContext};
-      const settingsOverrides = {...configContext.settingsOverrides};
       if (settingsOverrides.disableStorageReset === undefined) {
         settingsOverrides.disableStorageReset = true;
       }
-
-      configContext.settingsOverrides = settingsOverrides;
-      options.configContext = configContext;
     }
 
+    configContext.settingsOverrides = settingsOverrides;
+    options.configContext = configContext;
+
     return options;
   }
 

package/lighthouse-core/gather/driver/execution-context.js

@@ -211,6 +211,7 @@ class ExecutionContext {
       window.__nativePromise = window.Promise;
       window.__nativeURL = window.URL;
       window.__nativePerformance = window.performance;
+      window.__nativeFetch = window.fetch;
       window.__ElementMatches = window.Element.prototype.matches;
       // Ensure the native `performance.now` is not overwritable.
       const performance = window.performance;
@@ -232,6 +233,7 @@ class ExecutionContext {
     'const Promise = globalThis.__nativePromise || globalThis.Promise',
     'const URL = globalThis.__nativeURL || globalThis.URL',
     'const performance = globalThis.__nativePerformance || globalThis.performance',
+    'const fetch = globalThis.__nativeFetch || globalThis.fetch',
   ].join(';\n');
 
   /**

package/lighthouse-core/lib/dependency-graph/base-node.js

@@ -345,6 +345,14 @@ class BaseNode {
 
     return false;
   }
+
+  /**
+   * @param {Node} node
+   * @return {boolean}
+   */
+  canDependOn(node) {
+    return node.startTime <= this.startTime;
+  }
 }
 
 BaseNode.TYPES = /** @type {{NETWORK: 'network', CPU: 'cpu'}} */({

package/package.json

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

package/report/assets/styles.css

@@ -80,10 +80,11 @@
   --audit-group-padding-vertical: 8px;
   --audit-margin-horizontal: 5px;
   --audit-padding-vertical: 8px;
-  --category-padding: calc(var(--default-padding) * 6) calc(var(--default-padding) * 4) calc(var(--default-padding) * 4);
+  --category-padding: calc(var(--default-padding) * 6) var(--edge-gap-padding) calc(var(--default-padding) * 4);
   --chevron-line-stroke: var(--color-gray-600);
   --chevron-size: 12px;
   --default-padding: 8px;
+  --edge-gap-padding: calc(var(--default-padding) * 4);
   --env-item-background-color: var(--color-gray-100);
   --env-item-font-size: 28px;
   --env-item-line-height: 36px;
@@ -124,11 +125,12 @@
   --report-icon-size: var(--score-icon-background-size);
   --report-line-height: 24px;
   --report-line-height-secondary: 20px;
-  --report-min-width: 360px;
   --report-monospace-font-size: calc(var(--report-font-size) * 0.85);
   --report-text-color-secondary: var(--color-gray-800);
   --report-text-color: var(--color-gray-900);
-  --report-content-width: calc(60 * var(--report-font-size)); /* defaults to 840px */
+  --report-content-max-width: calc(60 * var(--report-font-size)); /* defaults to 840px */
+  --report-content-min-width: 360px;
+  --report-content-max-width-minus-edge-gap: calc(var(--report-content-max-width) - var(--edge-gap-padding) * 2);
   --score-container-padding: 8px;
   --score-icon-background-size: 24px;
   --score-icon-margin-left: 6px;
@@ -217,7 +219,7 @@
 @media only screen and (max-width: 480px) {
   .lh-vars {
     --audit-group-margin-bottom: 20px;
-    --category-padding: 12px;
+    --edge-gap-padding: var(--default-padding);
     --env-name-min-width: 120px;
     --gauge-circle-size-big: 96px;
     --gauge-circle-size: 72px;
@@ -686,6 +688,7 @@
   grid-auto-rows: 1fr;
   grid-template-columns: 1fr 1fr;
   grid-column-gap: var(--report-line-height);
+  margin-bottom: var(--default-padding);
 }
 
 .lh-metric {
@@ -1070,8 +1073,13 @@
   word-wrap: break-word;
 }
 
+.lh-header-container .lh-scores-wrapper {
+  border-bottom: 1px solid var(--color-gray-200);
+}
+
+
 .lh-report {
-  min-width: var(--report-min-width);
+  min-width: var(--report-content-min-width);
 }
 
 .lh-exception {
@@ -1103,8 +1111,7 @@
   color: var(--toplevel-warning-text-color);
   margin-left: auto;
   margin-right: auto;
-  --content-width-minus-category-padding-sides: calc(var(--report-content-width) - calc(var(--default-padding) * 4) * 2);
-  max-width: var(--content-width-minus-category-padding-sides);
+  max-width: var(--report-content-max-width-minus-edge-gap);
   padding: var(--toplevel-warning-padding);
   border-radius: 8px;
 }
@@ -1397,7 +1404,7 @@
 
 .lh-category {
   padding: var(--category-padding);
-  max-width: var(--report-content-width);
+  max-width: var(--report-content-max-width);
   margin: 0 auto;
 
   --sticky-header-height: calc(var(--gauge-circle-size-sm) + var(--score-container-padding) * 2);
@@ -1413,10 +1420,6 @@
   border-bottom: 1px solid var(--color-gray-200);
 }
 
-.lh-category-wrapper:first-of-type {
-  border-top: 1px solid var(--color-gray-200);
-}
-
 .lh-category-header {
   margin-bottom: var(--section-padding-vertical);
 }

package/report/assets/templates.html

@@ -512,7 +512,7 @@ limitations under the License.
   <style>
     .lh-footer {
       padding: var(--footer-padding-vertical) calc(var(--default-padding) * 2);
-      max-width: var(--report-content-width);
+      max-width: var(--report-content-max-width);
       margin: 0 auto;
     }
     .lh-footer .lh-generated {