lighthouse 9.5.0-dev.20220509 → 9.6.1

package/lighthouse-core/audits/server-response-time.js

@@ -8,6 +8,8 @@
 const Audit = require('./audit.js');
 const i18n = require('../lib/i18n/i18n.js');
 const MainResource = require('../computed/main-resource.js');
+const NetworkRecords = require('../computed/network-records.js');
+const NetworkAnalyzer = require('../lib/dependency-graph/simulator/network-analyzer.js');
 
 const UIStrings = {
   /** Title of a diagnostic audit that provides detail on how long it took from starting a request to when the server started responding. This descriptive title is shown to users when the amount is acceptable and no user action is required. */
@@ -37,7 +39,7 @@ class ServerResponseTime extends Audit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
-      supportedModes: ['navigation'],
+      supportedModes: ['timespan', 'navigation'],
       requiredArtifacts: ['devtoolsLogs', 'URL', 'GatherContext'],
     };
   }
@@ -59,7 +61,20 @@ class ServerResponseTime extends Audit {
     const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
 
     /** @type {LH.Artifacts.NetworkRequest} */
-    const mainResource = await MainResource.request({devtoolsLog, URL: artifacts.URL}, context);
+    let mainResource;
+    if (artifacts.GatherContext.gatherMode === 'timespan') {
+      const networkRecords = await NetworkRecords.request(devtoolsLog, context);
+      const optionalMainResource = NetworkAnalyzer.findOptionalMainDocument(
+        networkRecords,
+        artifacts.URL.finalUrl
+      );
+      if (!optionalMainResource) {
+        return {score: null, notApplicable: true};
+      }
+      mainResource = optionalMainResource;
+    } else {
+      mainResource = await MainResource.request({devtoolsLog, URL: artifacts.URL}, context);
+    }
 
     const responseTime = ServerResponseTime.calculateResponseTime(mainResource);
     const passed = responseTime < TOO_SLOW_THRESHOLD_MS;

package/lighthouse-core/audits/service-worker.js

@@ -51,7 +51,6 @@ class ServiceWorker extends Audit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
-      supportedModes: ['navigation'],
       requiredArtifacts: ['URL', 'ServiceWorker', 'WebAppManifest'],
     };
   }
@@ -129,12 +128,8 @@ class ServiceWorker extends Audit {
    * @return {LH.Audit.Product}
    */
   static audit(artifacts) {
-    // Match against `artifacts.URL.mainDocumentUrl` so audit accounts for any redirects.
-    // Service workers won't control network requests if the page uses `history.pushState` to "enter" the SW scope.
-    // For this reason it is better to evaluate the SW in relation to the main document url rather than the final frame url.
-    const {mainDocumentUrl} = artifacts.URL;
-    if (!mainDocumentUrl) throw new Error('mainDocumentUrl must exist in navigation mode');
-    const pageUrl = new URL(mainDocumentUrl);
+    // Match against artifacts.URL.finalUrl so audit accounts for any redirects.
+    const pageUrl = new URL(artifacts.URL.finalUrl);
     const {versions, registrations} = artifacts.ServiceWorker;
 
     const versionsForOrigin = ServiceWorker.getVersionsForOrigin(versions, pageUrl);

package/lighthouse-core/audits/timing-budget.js

@@ -140,9 +140,8 @@ class TimingBudget extends Audit {
     const gatherContext = artifacts.GatherContext;
     const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
     const trace = artifacts.traces[Audit.DEFAULT_PASS];
-    const URL = artifacts.URL;
-    const mainResource = await MainResource.request({URL, devtoolsLog}, context);
-    const data = {trace, devtoolsLog, gatherContext, settings: context.settings, URL};
+    const mainResource = await MainResource.request({URL: artifacts.URL, devtoolsLog}, context);
+    const data = {trace, devtoolsLog, gatherContext, settings: context.settings};
     const summary = (await TimingSummary.request(data, context)).metrics;
     const budget = Budget.getMatchingBudget(context.settings.budgets, mainResource.url);
 

package/lighthouse-core/audits/uses-rel-preconnect.js

@@ -123,7 +123,7 @@ class UsesRelPreconnectAudit extends Audit {
         MainResource.request({devtoolsLog, URL: artifacts.URL}, context),
         LoadSimulator.request({devtoolsLog, settings}, context),
         ProcessedNavigation.request(processedTrace, context),
-        PageDependencyGraph.request({trace, devtoolsLog, URL: artifacts.URL}, context),
+        PageDependencyGraph.request({trace, devtoolsLog}, context),
       ]);
 
     const {rtt, additionalRttByOrigin} = loadSimulator.getOptions();

package/lighthouse-core/audits/uses-rel-preload.js

@@ -217,7 +217,7 @@ class UsesRelPreloadAudit extends Audit {
 
     const [mainResource, graph, simulator] = await Promise.all([
       MainResource.request({devtoolsLog, URL}, context),
-      PageDependencyGraph.request({trace, devtoolsLog, URL}, context),
+      PageDependencyGraph.request({trace, devtoolsLog}, context),
       LoadSimulator.request(simulatorOptions, context),
     ]);
 

package/lighthouse-core/audits/valid-source-maps.js

@@ -44,22 +44,22 @@ class ValidSourceMaps extends Audit {
       title: str_(UIStrings.title),
       failureTitle: str_(UIStrings.failureTitle),
       description: str_(UIStrings.description),
-      requiredArtifacts: ['Scripts', 'SourceMaps', 'URL'],
+      requiredArtifacts: ['ScriptElements', 'SourceMaps', 'URL'],
     };
   }
 
   /**
    * Returns true if the size of the script exceeds a static threshold.
-   * @param {LH.Artifacts.Script} script
+   * @param {LH.Artifacts.ScriptElement} scriptElement
    * @param {string} finalURL
    * @return {boolean}
    */
-  static isLargeFirstPartyJS(script, finalURL) {
-    if (!script.length) return false;
+  static isLargeFirstPartyJS(scriptElement, finalURL) {
+    if (scriptElement.content === null) return false;
 
-    const isLargeJS = script.length >= LARGE_JS_BYTE_THRESHOLD;
-    const isFirstPartyJS = script.url ?
-      thirdPartyWeb.isFirstParty(script.url, thirdPartyWeb.getEntity(finalURL)) : false;
+    const isLargeJS = scriptElement.content.length >= LARGE_JS_BYTE_THRESHOLD;
+    const isFirstPartyJS = scriptElement.src ?
+      thirdPartyWeb.isFirstParty(scriptElement.src, thirdPartyWeb.getEntity(finalURL)) : false;
 
     return isLargeJS && isFirstPartyJS;
   }
@@ -75,14 +75,16 @@ class ValidSourceMaps extends Audit {
 
     let missingMapsForLargeFirstPartyFile = false;
     const results = [];
-    for (const script of artifacts.Scripts) {
-      const sourceMap = SourceMaps.find(m => m.scriptId === script.scriptId);
+    for (const scriptElement of artifacts.ScriptElements) {
+      if (!scriptElement.src) continue; // TODO: inline scripts, how do they work?
+
+      const sourceMap = SourceMaps.find(m => m.scriptUrl === scriptElement.src);
       const errors = [];
-      const isLargeFirstParty = this.isLargeFirstPartyJS(script, artifacts.URL.finalUrl);
+      const isLargeFirstParty = this.isLargeFirstPartyJS(scriptElement, artifacts.URL.finalUrl);
 
       if (isLargeFirstParty && (!sourceMap || !sourceMap.map)) {
         missingMapsForLargeFirstPartyFile = true;
-        isMissingMapForLargeFirstPartyScriptUrl.add(script.url);
+        isMissingMapForLargeFirstPartyScriptUrl.add(scriptElement.src);
         errors.push({error: str_(UIStrings.missingSourceMapErrorMessage)});
       }
 
@@ -105,7 +107,7 @@ class ValidSourceMaps extends Audit {
 
       if (sourceMap || errors.length) {
         results.push({
-          scriptUrl: script.url,
+          scriptUrl: scriptElement.src,
           sourceMapUrl: sourceMap?.sourceMapUrl,
           subItems: {
             type: /** @type {const} */ ('subitems'),

package/lighthouse-core/audits/violation-audit.js

@@ -31,7 +31,7 @@ class ViolationAudit extends Audit {
     return artifacts.ConsoleMessages
         .filter(entry => entry.url && entry.source === 'violation' && pattern.test(entry.text))
         .map(entry => {
-          const bundle = bundles.find(bundle => bundle.script.scriptId === entry.scriptId);
+          const bundle = bundles.find(bundle => bundle.script.src === entry.url);
           return Audit.makeSourceLocationFromConsoleMessage(entry, bundle);
         })
         .filter(filterUndefined)

package/lighthouse-core/audits/work-during-interaction.js

@@ -0,0 +1,280 @@
+/**
+ * @license Copyright 2022 The Lighthouse Authors. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
+ */
+'use strict';
+
+const Audit = require('./audit.js');
+const ComputedResponsivenes = require('../computed/metrics/responsiveness.js');
+const ProcessedTrace = require('../computed/processed-trace.js');
+const i18n = require('../lib/i18n/i18n.js');
+const NetworkRecords = require('../computed/network-records.js');
+const MainThreadTasks = require('../lib/tracehouse/main-thread-tasks.js');
+const {taskGroups} = require('../lib/tracehouse/task-groups.js');
+const TraceProcessor = require('../lib/tracehouse/trace-processor.js');
+const {getExecutionTimingsByURL} = require('../lib/tracehouse/task-summary.js');
+const inpThresholds = require('./metrics/experimental-interaction-to-next-paint.js').defaultOptions;
+const LHError = require('../lib/lh-error.js');
+
+/** @typedef {import('../computed/metrics/responsiveness.js').EventTimingEvent} EventTimingEvent */
+/** @typedef {import('../lib/tracehouse/main-thread-tasks.js').TaskNode} TaskNode */
+
+const TASK_THRESHOLD = 1;
+
+const UIStrings = {
+  /** Title of a diagnostic audit that provides detail on the main thread work the browser did during a key user interaction. This descriptive title is shown to users when the amount is acceptable and no user action is required. */
+  title: 'Minimizes work during key interaction',
+  /** Title of a diagnostic audit that provides detail on the main thread work the browser did during a key user interaction. This imperative title is shown to users when there is a significant amount of execution time that could be reduced. */
+  failureTitle: 'Minimize work during key interaction',
+  /** Description of the work-during-interaction metric. This description is displayed within a tooltip when the user hovers on the metric name to see more. No character length limits. 'Learn More' becomes link text to additional documentation. */
+  description: 'This is the thread-blocking work occurring during the Interaction to Next Paint measurement. [Learn more](https://web.dev/inp/).',
+  /** Label for a column in a data table; entries will be information on the time that the browser is delayed before responding to user input. Ideally fits within a ~40 character limit. */
+  inputDelay: 'Input delay',
+  /** Label for a column in a data table; entries will be information on the time taken by code processing user input that delays a response to the user. Ideally fits within a ~40 character limit. */
+  processingDelay: 'Processing delay',
+  /** Label for a column in a data table; entries will be information on the time that the browser is delayed before presenting a response to user input on screen. Ideally fits within a ~40 character limit. */
+  presentationDelay: 'Presentation delay',
+  /**
+   * @description Summary text that identifies the time the browser took to process a user interaction.
+   * @example {mousedown} interactionType
+   */
+  displayValue: `{timeInMs, number, milliseconds}\xa0ms spent on event '{interactionType}'`,
+  /** Label for a column in a data table; entries will the UI element that was the target of a user interaction (for example, a button that was clicked on). Ideally fits within a ~40 character limit. */
+  eventTarget: 'Event target',
+};
+
+const str_ = i18n.createMessageInstanceIdFn(__filename, UIStrings);
+
+/**
+ * @fileoverview This metric gives a high-percentile measure of responsiveness to input.
+ */
+class WorkDuringInteraction extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'work-during-interaction',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
+      scoreDisplayMode: Audit.SCORING_MODES.NUMERIC,
+      supportedModes: ['timespan'],
+      requiredArtifacts: ['traces', 'devtoolsLogs', 'TraceElements'],
+    };
+  }
+
+  /**
+   * @param {TaskNode} task
+   * @param {TaskNode|undefined} parent
+   * @param {number} startTs
+   * @param {number} endTs
+   * @return {number}
+   */
+  static recursivelyClipTasks(task, parent, startTs, endTs) {
+    const taskEventStart = task.event.ts;
+    const taskEventEnd = task.endEvent?.ts ?? task.event.ts + Number(task.event.dur || 0);
+
+    task.startTime = Math.max(startTs, Math.min(endTs, taskEventStart)) / 1000;
+    task.endTime = Math.max(startTs, Math.min(endTs, taskEventEnd)) / 1000;
+    task.duration = task.endTime - task.startTime;
+
+    const childTime = task.children
+      .map(child => WorkDuringInteraction.recursivelyClipTasks(child, task, startTs, endTs))
+      .reduce((sum, child) => sum + child, 0);
+    task.selfTime = task.duration - childTime;
+    return task.duration;
+  }
+
+  /**
+   * Clip the tasks by the start and end points. Take the easy route and drop
+   * to duration 0 if out of bounds, since only durations are needed in the
+   * end (for now).
+   * Assumes owned tasks, so modifies in place. Can be called multiple times on
+   * the same `tasks` because always computed from original event timing.
+   * @param {Array<TaskNode>} tasks
+   * @param {number} startTs
+   * @param {number} endTs
+   */
+  static clipTasksByTs(tasks, startTs, endTs) {
+    for (const task of tasks) {
+      if (task.parent) continue;
+      WorkDuringInteraction.recursivelyClipTasks(task, undefined, startTs, endTs);
+    }
+  }
+
+  /**
+   * @param {EventTimingEvent} interactionEvent
+   */
+  static getPhaseTimes(interactionEvent) {
+    const interactionData = interactionEvent.args.data;
+    const startTs = interactionEvent.ts;
+    const navStart = startTs - interactionData.timeStamp * 1000;
+    const processingStartTs = navStart + interactionData.processingStart * 1000;
+    const processingEndTs = navStart + interactionData.processingEnd * 1000;
+    const endTs = startTs + interactionData.duration * 1000;
+    return {
+      inputDelay: {startTs, endTs: processingStartTs},
+      processingDelay: {startTs: processingStartTs, endTs: processingEndTs},
+      presentationDelay: {startTs: processingEndTs, endTs},
+    };
+  }
+
+  /**
+   * @param {EventTimingEvent} interactionEvent
+   * @param {LH.Trace} trace
+   * @param {LH.Artifacts.ProcessedTrace} processedTrace
+   * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords
+   * @return {{table: LH.Audit.Details.Table, phases: Record<string, {startTs: number, endTs: number}>}}
+   */
+  static getThreadBreakdownTable(interactionEvent, trace, processedTrace, networkRecords) {
+    // Limit to interactionEvent's thread.
+    // TODO(bckenny): limit to interactionEvent's navigation.
+    const threadEvents = TraceProcessor.filteredTraceSort(trace.traceEvents, evt => {
+      return evt.pid === interactionEvent.pid && evt.tid === interactionEvent.tid;
+    });
+    const traceEndTs = threadEvents.reduce((endTs, evt) => {
+      return Math.max(evt.ts + (evt.dur || 0), endTs);
+    }, 0);
+    // frames is only used for URL attribution, so can include all frames, even if OOPIF.
+    const {frames} = processedTrace;
+    const threadTasks = MainThreadTasks.getMainThreadTasks(threadEvents, frames, traceEndTs);
+
+    const phases = WorkDuringInteraction.getPhaseTimes(interactionEvent);
+
+    /** @type {LH.Audit.Details.TableItem[]} */
+    const items = [];
+    for (const [phaseName, phaseTimes] of Object.entries(phases)) {
+      // Clip tasks to start and end time.
+      WorkDuringInteraction.clipTasksByTs(threadTasks, phaseTimes.startTs, phaseTimes.endTs);
+      const executionTimings = getExecutionTimingsByURL(threadTasks, networkRecords);
+
+      const results = [];
+      for (const [url, timingByGroupId] of executionTimings) {
+        const totalExecutionTimeForURL = Object.values(timingByGroupId)
+            .reduce((total, timespanMs) => total + timespanMs);
+
+        const scriptingTotal = timingByGroupId[taskGroups.scriptEvaluation.id] || 0;
+        const layoutTotal = timingByGroupId[taskGroups.styleLayout.id] || 0;
+        const renderTotal = timingByGroupId[taskGroups.paintCompositeRender.id] || 0;
+
+        results.push({
+          url: url,
+          total: totalExecutionTimeForURL,
+          scripting: scriptingTotal,
+          layout: layoutTotal,
+          render: renderTotal,
+        });
+      }
+
+      const filteredResults = results
+        .filter(result => result.total > TASK_THRESHOLD)
+        .sort((a, b) => b.total - a.total);
+
+      items.push({
+        phase: str_(UIStrings[/** @type {keyof UIStrings} */ (phaseName)]),
+        total: (phaseTimes.endTs - phaseTimes.startTs) / 1000,
+        subItems: {
+          type: 'subitems',
+          items: filteredResults,
+        },
+      });
+    }
+
+    /** @type {LH.Audit.Details.Table['headings']} */
+    const headings = [
+      /* eslint-disable max-len */
+      {key: 'phase', itemType: 'text', subItemsHeading: {key: 'url', itemType: 'url'}, text: 'Phase'},
+      {key: 'total', itemType: 'ms', subItemsHeading: {key: 'total', granularity: 1, itemType: 'ms'}, granularity: 1, text: 'Total time'},
+      {key: null, itemType: 'ms', subItemsHeading: {key: 'scripting', granularity: 1, itemType: 'ms'}, text: 'Script evaluation'},
+      {key: null, itemType: 'ms', subItemsHeading: {key: 'layout', granularity: 1, itemType: 'ms'}, text: taskGroups.styleLayout.label},
+      {key: null, itemType: 'ms', subItemsHeading: {key: 'render', granularity: 1, itemType: 'ms'}, text: taskGroups.paintCompositeRender.label},
+      /* eslint-enable max-len */
+    ];
+
+    return {
+      table: Audit.makeTableDetails(headings, items),
+      phases,
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts['TraceElements']} traceElements
+   * @return {LH.Audit.Details.Table | undefined}
+   */
+  static getTraceElementTable(traceElements) {
+    const responsivenessElement = traceElements.find(el => el.traceEventType === 'responsiveness');
+    if (!responsivenessElement) return;
+
+    /** @type {LH.Audit.Details.Table['headings']} */
+    const headings = [
+      {key: 'node', itemType: 'node', text: str_(UIStrings.eventTarget)},
+    ];
+    const elementItems = [{node: Audit.makeNodeItem(responsivenessElement.node)}];
+
+    return Audit.makeTableDetails(headings, elementItems);
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit(artifacts, context) {
+    const {settings} = context;
+    // TODO: responsiveness isn't yet supported by lantern.
+    if (settings.throttlingMethod === 'simulate') {
+      return {score: null, notApplicable: true};
+    }
+
+    const trace = artifacts.traces[WorkDuringInteraction.DEFAULT_PASS];
+    const metricData = {trace, settings};
+    const interactionEvent = await ComputedResponsivenes.request(metricData, context);
+    // If no interaction, diagnostic audit is n/a.
+    if (interactionEvent === null) {
+      return {score: null, notApplicable: true};
+    }
+    // TODO: remove workaround once 103.0.5052.0 is sufficiently released.
+    if (interactionEvent.name === 'FallbackTiming') {
+      throw new LHError(
+        LHError.errors.UNSUPPORTED_OLD_CHROME,
+        {featureName: 'detailed EventTiming trace events'}
+      );
+    }
+
+    const auditDetailsItems = [];
+
+    const traceElementItem = WorkDuringInteraction.getTraceElementTable(artifacts.TraceElements);
+    if (traceElementItem) auditDetailsItems.push(traceElementItem);
+
+    const devtoolsLog = artifacts.devtoolsLogs[WorkDuringInteraction.DEFAULT_PASS];
+    // Network records will usually be empty for timespans.
+    const networkRecords = await NetworkRecords.request(devtoolsLog, context);
+    const processedTrace = await ProcessedTrace.request(trace, context);
+    const {table: breakdownTable, phases} = WorkDuringInteraction.getThreadBreakdownTable(
+        interactionEvent, trace, processedTrace, networkRecords);
+    auditDetailsItems.push(breakdownTable);
+
+    const interactionType = interactionEvent.args.data.type;
+    auditDetailsItems.push({
+      type: /** @type {const} */ ('debugdata'),
+      interactionType,
+      phases,
+    });
+
+    const duration = interactionEvent.args.data.duration;
+    const displayValue = str_(UIStrings.displayValue, {timeInMs: duration, interactionType});
+    return {
+      score: duration < inpThresholds.p10 ? 1 : 0,
+      displayValue,
+      details: {
+        type: 'list',
+        items: auditDetailsItems,
+      },
+    };
+  }
+}
+
+module.exports = WorkDuringInteraction;
+module.exports.UIStrings = UIStrings;

package/lighthouse-core/computed/critical-request-chains.js

@@ -117,9 +117,6 @@ class CriticalRequestChains {
       // Ignore if some ancestor is not a critical request.
       if (networkPath.some(r => !CriticalRequestChains.isCritical(r, mainResource))) return;
 
-      // Ignore non-network things (like data urls).
-      if (NetworkRequest.isNonNetworkRequest(node.record)) return;
-
       addChain(networkPath);
     }, getNextNodes);
 
@@ -132,8 +129,15 @@ class CriticalRequestChains {
    * @return {Promise<LH.Artifacts.CriticalRequestNode>}
    */
   static async compute_(data, context) {
-    const mainResource = await MainResource.request(data, context);
-    const graph = await PageDependencyGraph.request(data, context);
+    const mainResource = await MainResource.request({
+      URL: data.URL,
+      devtoolsLog: data.devtoolsLog,
+    }, context);
+
+    const graph = await PageDependencyGraph.request({
+      trace: data.trace,
+      devtoolsLog: data.devtoolsLog,
+    }, context);
 
     return CriticalRequestChains.extractChainsFromGraph(mainResource, graph);
   }

package/lighthouse-core/computed/js-bundles.js

@@ -12,15 +12,14 @@ const SDK = require('../lib/cdt/SDK.js');
 /**
  * Calculate the number of bytes contributed by each source file
  * @param {LH.Artifacts.Bundle['map']} map
- * @param {number} contentLength
  * @param {string} content
  * @return {LH.Artifacts.Bundle['sizes']}
  */
-function computeGeneratedFileSizes(map, contentLength, content) {
+function computeGeneratedFileSizes(map, content) {
   const lines = content.split('\n');
   /** @type {Record<string, number>} */
   const files = {};
-  const totalBytes = contentLength;
+  const totalBytes = content.length;
   let unmappedBytes = totalBytes;
 
   // @ts-expect-error: This function is added in SDK.js. This will eventually be added to CDT.
@@ -79,10 +78,10 @@ function computeGeneratedFileSizes(map, contentLength, content) {
 
 class JSBundles {
   /**
-   * @param {Pick<LH.Artifacts, 'SourceMaps'|'Scripts'>} artifacts
+   * @param {Pick<LH.Artifacts, 'SourceMaps'|'ScriptElements'>} artifacts
    */
   static async compute_(artifacts) {
-    const {SourceMaps, Scripts} = artifacts;
+    const {SourceMaps, ScriptElements} = artifacts;
 
     /** @type {LH.Artifacts.Bundle[]} */
     const bundles = [];
@@ -90,22 +89,23 @@ class JSBundles {
     // Collate map and script, compute file sizes.
     for (const SourceMap of SourceMaps) {
       if (!SourceMap.map) continue;
-      const {scriptId, map: rawMap} = SourceMap;
+      const {scriptUrl, map: rawMap} = SourceMap;
 
       if (!rawMap.mappings) continue;
 
-      const script = Scripts.find(s => s.scriptId === scriptId);
-      if (!script) continue;
+      const scriptElement = ScriptElements.find(s => s.src === scriptUrl);
+      if (!scriptElement) continue;
 
       const compiledUrl = SourceMap.scriptUrl || 'compiled.js';
       const mapUrl = SourceMap.sourceMapUrl || 'compiled.js.map';
       const map = new SDK.TextSourceMap(compiledUrl, mapUrl, rawMap);
 
-      const sizes = computeGeneratedFileSizes(map, script.length || 0, script.content || '');
+      const content = scriptElement?.content ? scriptElement.content : '';
+      const sizes = computeGeneratedFileSizes(map, content);
 
       const bundle = {
         rawMap,
-        script,
+        script: scriptElement,
         map,
         sizes,
       };
@@ -116,4 +116,4 @@ class JSBundles {
   }
 }
 
-module.exports = makeComputedArtifact(JSBundles, ['Scripts', 'SourceMaps']);
+module.exports = makeComputedArtifact(JSBundles, ['ScriptElements', 'SourceMaps']);

package/lighthouse-core/computed/main-resource.js

@@ -20,10 +20,9 @@ class MainResource {
    * @return {Promise<LH.Artifacts.NetworkRequest>}
    */
   static async compute_(data, context) {
-    const {mainDocumentUrl} = data.URL;
-    if (!mainDocumentUrl) throw new Error('mainDocumentUrl must exist to get the main resource');
+    const finalUrl = data.URL.finalUrl;
     const requests = await NetworkRecords.request(data.devtoolsLog, context);
-    const mainResource = NetworkAnalyzer.findResourceForUrl(requests, mainDocumentUrl);
+    const mainResource = NetworkAnalyzer.findMainDocument(requests, finalUrl);
     if (!mainResource) {
       throw new Error('Unable to identify the main resource');
     }

package/lighthouse-core/computed/metrics/first-contentful-paint-all-frames.js

@@ -33,5 +33,5 @@ class FirstContentfulPaintAllFrames extends NavigationMetric {
 
 module.exports = makeComputedArtifact(
   FirstContentfulPaintAllFrames,
-  ['devtoolsLog', 'gatherContext', 'settings', 'simulator', 'trace', 'URL']
+  ['devtoolsLog', 'gatherContext', 'settings', 'simulator', 'trace']
 );

package/lighthouse-core/computed/metrics/first-contentful-paint.js

@@ -36,5 +36,5 @@ class FirstContentfulPaint extends NavigationMetric {
 
 module.exports = makeComputedArtifact(
   FirstContentfulPaint,
-  ['devtoolsLog', 'gatherContext', 'settings', 'simulator', 'trace', 'URL']
+  ['devtoolsLog', 'gatherContext', 'settings', 'simulator', 'trace']
 );

package/lighthouse-core/computed/metrics/first-meaningful-paint.js

@@ -40,5 +40,5 @@ class FirstMeaningfulPaint extends NavigationMetric {
 
 module.exports = makeComputedArtifact(
   FirstMeaningfulPaint,
-  ['devtoolsLog', 'gatherContext', 'settings', 'simulator', 'trace', 'URL']
+  ['devtoolsLog', 'gatherContext', 'settings', 'simulator', 'trace']
 );

package/lighthouse-core/computed/metrics/interactive.js

@@ -183,7 +183,7 @@ class Interactive extends NavigationMetric {
 
 module.exports = makeComputedArtifact(
   Interactive,
-  ['devtoolsLog', 'gatherContext', 'settings', 'simulator', 'trace', 'URL']
+  ['devtoolsLog', 'gatherContext', 'settings', 'simulator', 'trace']
 );
 
 /**

package/lighthouse-core/computed/metrics/lantern-first-contentful-paint.js

@@ -200,5 +200,5 @@ class LanternFirstContentfulPaint extends LanternMetric {
 
 module.exports = makeComputedArtifact(
   LanternFirstContentfulPaint,
-  ['devtoolsLog', 'gatherContext', 'settings', 'simulator', 'trace', 'URL']
+  ['devtoolsLog', 'gatherContext', 'settings', 'simulator', 'trace']
 );

package/lighthouse-core/computed/metrics/lantern-first-meaningful-paint.js

@@ -79,5 +79,5 @@ class LanternFirstMeaningfulPaint extends LanternMetric {
 
 module.exports = makeComputedArtifact(
   LanternFirstMeaningfulPaint,
-  ['devtoolsLog', 'gatherContext', 'settings', 'simulator', 'trace', 'URL']
+  ['devtoolsLog', 'gatherContext', 'settings', 'simulator', 'trace']
 );

package/lighthouse-core/computed/metrics/lantern-interactive.js

@@ -109,5 +109,5 @@ class LanternInteractive extends LanternMetric {
 
 module.exports = makeComputedArtifact(
   LanternInteractive,
-  ['devtoolsLog', 'gatherContext', 'settings', 'simulator', 'trace', 'URL']
+  ['devtoolsLog', 'gatherContext', 'settings', 'simulator', 'trace']
 );

package/lighthouse-core/computed/metrics/lantern-largest-contentful-paint.js

@@ -107,5 +107,5 @@ class LanternLargestContentfulPaint extends LanternMetric {
 
 module.exports = makeComputedArtifact(
   LanternLargestContentfulPaint,
-  ['devtoolsLog', 'gatherContext', 'settings', 'simulator', 'trace', 'URL']
+  ['devtoolsLog', 'gatherContext', 'settings', 'simulator', 'trace']
 );

package/lighthouse-core/computed/metrics/lantern-max-potential-fid.js

@@ -89,5 +89,5 @@ class LanternMaxPotentialFID extends LanternMetricArtifact {
 
 module.exports = makeComputedArtifact(
   LanternMaxPotentialFID,
-  ['devtoolsLog', 'gatherContext', 'settings', 'simulator', 'trace', 'URL']
+  ['devtoolsLog', 'gatherContext', 'settings', 'simulator', 'trace']
 );

package/lighthouse-core/computed/metrics/lantern-metric.js

@@ -101,15 +101,17 @@ class LanternMetricArtifact {
   static async computeMetricWithGraphs(data, context, extras) {
     // TODO: remove this fallback when lighthouse-pub-ads plugin can update.
     const gatherContext = data.gatherContext || {gatherMode: 'navigation'};
+    const {trace, devtoolsLog, settings} = data;
     if (gatherContext.gatherMode !== 'navigation') {
       throw new Error(`Lantern metrics can only be computed on navigations`);
     }
 
     const metricName = this.name.replace('Lantern', '');
-    const graph = await PageDependencyGraph.request(data, context);
-    const processedTrace = await ProcessedTrace.request(data.trace, context);
+    const graph = await PageDependencyGraph.request({trace, devtoolsLog}, context);
+    const processedTrace = await ProcessedTrace.request(trace, context);
     const processedNavigation = await ProcessedNavigation.request(processedTrace, context);
-    const simulator = data.simulator || (await LoadSimulator.request(data, context));
+    const simulator = data.simulator ||
+        (await LoadSimulator.request({devtoolsLog, settings}, context));
 
     const optimisticGraph = this.getOptimisticGraph(graph, processedNavigation);
     const pessimisticGraph = this.getPessimisticGraph(graph, processedNavigation);