lighthouse 9.6.8 → 10.0.0

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

@@ -0,0 +1,160 @@
+/**
+ * @license Copyright 2020 Google Inc. 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.
+ */
+
+import {Audit} from './audit.js';
+import {EntityClassification} from '../computed/entity-classification.js';
+import * as i18n from '../lib/i18n/i18n.js';
+import {Util} from '../../shared/util.js';
+import UrlUtils from '../lib/url-utils.js';
+
+const UIStrings = {
+  /** Title of a Lighthouse audit that provides detail on HTTP to HTTPS redirects. This descriptive title is shown to users when HTTP traffic is redirected to HTTPS. */
+  title: 'Page has valid source maps',
+  /** Title of a Lighthouse audit that provides detail on HTTP to HTTPS redirects. This descriptive title is shown to users when HTTP traffic is not redirected to HTTPS. */
+  failureTitle: 'Missing source maps for large first-party JavaScript',
+  /** Description of a Lighthouse audit that tells the user that their JavaScript source maps are invalid or missing. This is displayed after a user expands the section to see more. No character length limits. The last sentence starting with 'Learn' becomes link text to additional documentation. */
+  description: 'Source maps translate minified code to the original source code. This helps ' +
+    'developers debug in production. In addition, Lighthouse is able to provide further ' +
+    'insights. Consider deploying source maps to take advantage of these benefits. ' +
+    '[Learn more about source maps](https://developers.google.com/web/tools/chrome-devtools/javascript/source-maps).',
+  /** Label for a column in a data table. Entries will be URLs to JavaScript source maps. */
+  columnMapURL: 'Map URL',
+  /** Label for a possible error message indicating that a source map for a large, first-party JavaScript script is missing. */
+  missingSourceMapErrorMessage: 'Large JavaScript file is missing a source map',
+  /** Label for a possible error message indicating that the content of a source map is invalid because it is missing items in the sourcesContent attribute. */
+  missingSourceMapItemsWarningMesssage: `{missingItems, plural,
+    =1 {Warning: missing 1 item in \`.sourcesContent\`}
+    other {Warning: missing # items in \`.sourcesContent\`}
+    }`,
+};
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+const LARGE_JS_BYTE_THRESHOLD = 500 * 1024;
+
+class ValidSourceMaps extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'valid-source-maps',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
+      requiredArtifacts: ['Scripts', 'SourceMaps', 'URL', 'devtoolsLogs'],
+    };
+  }
+
+  /**
+   * Returns true if the size of the script exceeds a static threshold.
+   * @param {LH.Artifacts.Script} script
+   * @param {LH.Artifacts.EntityClassification} classifiedEntities
+   * @return {boolean}
+   */
+  static isLargeFirstPartyJS(script, classifiedEntities) {
+    const url = script.url;
+    if (!script.length || !url) return false;
+    if (!UrlUtils.isValid(url)) return false;
+    if (!Util.createOrReturnURL(url).protocol.startsWith('http')) return false;
+
+    const isLargeJS = script.length >= LARGE_JS_BYTE_THRESHOLD;
+    return classifiedEntities.isFirstParty(url) && isLargeJS;
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   */
+  static async audit(artifacts, context) {
+    const {SourceMaps} = artifacts;
+    const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
+    const classifiedEntities = await EntityClassification.request(
+      {URL: artifacts.URL, devtoolsLog}, context);
+
+    /** @type {Set<string>} */
+    const isMissingMapForLargeFirstPartyScriptUrl = new Set();
+
+    let missingMapsForLargeFirstPartyFile = false;
+    const results = [];
+    for (const script of artifacts.Scripts) {
+      const sourceMap = SourceMaps.find(m => m.scriptId === script.scriptId);
+      const errors = [];
+      const isLargeFirstParty = this.isLargeFirstPartyJS(script, classifiedEntities);
+
+      if (isLargeFirstParty && (!sourceMap || !sourceMap.map)) {
+        missingMapsForLargeFirstPartyFile = true;
+        isMissingMapForLargeFirstPartyScriptUrl.add(script.url);
+        errors.push({error: str_(UIStrings.missingSourceMapErrorMessage)});
+      }
+
+      if (sourceMap && !sourceMap.map) {
+        errors.push({error: sourceMap.errorMessage});
+      }
+
+      // Sources content errors.
+      if (sourceMap?.map) {
+        const sourcesContent = sourceMap.map.sourcesContent || [];
+        let missingSourcesContentCount = 0;
+        for (let i = 0; i < sourceMap.map.sources.length; i++) {
+          if (sourcesContent.length < i || !sourcesContent[i]) missingSourcesContentCount += 1;
+        }
+        if (missingSourcesContentCount > 0) {
+          errors.push({error: str_(UIStrings.missingSourceMapItemsWarningMesssage,
+              {missingItems: missingSourcesContentCount})});
+        }
+      }
+
+      if (sourceMap || errors.length) {
+        results.push({
+          scriptUrl: script.url,
+          sourceMapUrl: sourceMap?.sourceMapUrl,
+          subItems: {
+            type: /** @type {const} */ ('subitems'),
+            items: errors,
+          },
+        });
+      }
+    }
+
+    /** @type {LH.Audit.Details.TableColumnHeading[]} */
+    const headings = [
+      /* eslint-disable max-len */
+      {
+        key: 'scriptUrl',
+        valueType: 'url',
+        subItemsHeading: {key: 'error'},
+        label: str_(i18n.UIStrings.columnURL),
+      },
+      {key: 'sourceMapUrl', valueType: 'url', label: str_(UIStrings.columnMapURL)},
+      /* eslint-enable max-len */
+    ];
+
+    results.sort((a, b) => {
+      // Show the items that can fail the audit first.
+      const missingMapA = isMissingMapForLargeFirstPartyScriptUrl.has(a.scriptUrl);
+      const missingMapB = isMissingMapForLargeFirstPartyScriptUrl.has(b.scriptUrl);
+      if (missingMapA && !missingMapB) return -1;
+      if (!missingMapA && missingMapB) return 1;
+
+      // Then sort by whether one has errors and the other doesn't.
+      if (a.subItems.items.length && !b.subItems.items.length) return -1;
+      if (!a.subItems.items.length && b.subItems.items.length) return 1;
+
+      // Then sort by script url.
+      return b.scriptUrl.localeCompare(a.scriptUrl);
+    });
+
+    // Only fails if `missingMapsForLargeFirstPartyFile` is true. All other errors are diagnostical.
+    return {
+      score: missingMapsForLargeFirstPartyFile ? 0 : 1,
+      details: Audit.makeTableDetails(headings, results),
+    };
+  }
+}
+
+export default ValidSourceMaps;
+export {UIStrings};

package/core/audits/viewport.d.ts

@@ -0,0 +1,17 @@
+export default Viewport;
+declare class Viewport extends Audit {
+    /**
+     * @param {LH.Artifacts} artifacts
+     * @param {LH.Audit.Context} context
+     * @return {Promise<LH.Audit.Product>}
+     */
+    static audit(artifacts: LH.Artifacts, context: LH.Audit.Context): Promise<LH.Audit.Product>;
+}
+export namespace UIStrings {
+    const title: string;
+    const failureTitle: string;
+    const description: string;
+    const explanationNoTag: string;
+}
+import { Audit } from "./audit.js";
+//# sourceMappingURL=viewport.d.ts.map

package/core/audits/viewport.js

@@ -0,0 +1,64 @@
+/**
+ * @license Copyright 2016 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.
+ */
+
+import {Audit} from './audit.js';
+import {ViewportMeta} from '../computed/viewport-meta.js';
+import * as i18n from '../lib/i18n/i18n.js';
+
+const UIStrings = {
+  /** Title of a Lighthouse audit that provides detail on the viewport meta tag in a web page's html. This descriptive title is shown to users when a viewport tag is set and configured. */
+  title: 'Has a `<meta name="viewport">` tag with `width` or `initial-scale`',
+  /** Title of a Lighthouse audit that provides detail on the viewport meta tag in a web page's html. This descriptive title is shown to users when a viewport tag is not set or configured. */
+  failureTitle: 'Does not have a `<meta name="viewport">` tag with `width` ' +
+    'or `initial-scale`',
+  /** Description of a Lighthouse audit that tells the user why they should have a viewport meta tag in their html. This is displayed after a user expands the section to see more. No character length limits. The last sentence starting with 'Learn' becomes link text to additional documentation. */
+  description: 'A `<meta name="viewport">` not only optimizes your app for mobile screen sizes, ' +
+    'but also prevents [a 300 millisecond delay to user input](https://developer.chrome.com/blog/300ms-tap-delay-gone-away/). ' +
+    '[Learn more about using the viewport meta tag](https://developer.chrome.com/docs/lighthouse/pwa/viewport/).',
+  /** Explanatory message stating that no viewport meta tag exists on the page. */
+  explanationNoTag: 'No `<meta name="viewport">` tag found',
+};
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+class Viewport extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'viewport',
+      title: str_(UIStrings.title),
+      failureTitle: str_(UIStrings.failureTitle),
+      description: str_(UIStrings.description),
+      requiredArtifacts: ['MetaElements'],
+    };
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit(artifacts, context) {
+    const viewportMeta = await ViewportMeta.request(artifacts.MetaElements, context);
+
+    if (!viewportMeta.hasViewportTag) {
+      return {
+        score: 0,
+        explanation: str_(UIStrings.explanationNoTag),
+      };
+    }
+
+    return {
+      score: Number(viewportMeta.isMobileOptimized),
+      warnings: viewportMeta.parserWarnings,
+    };
+  }
+}
+
+export default Viewport;
+export {UIStrings};

package/core/audits/violation-audit.d.ts

@@ -0,0 +1,14 @@
+export default ViolationAudit;
+declare class ViolationAudit extends Audit {
+    /**
+     * @param {LH.Artifacts} artifacts
+     * @param {LH.Audit.Context} context
+     * @param {RegExp} pattern
+     * @return {Promise<Array<{source: LH.Audit.Details.SourceLocationValue}>>}
+     */
+    static getViolationResults(artifacts: LH.Artifacts, context: LH.Audit.Context, pattern: RegExp): Promise<Array<{
+        source: LH.Audit.Details.SourceLocationValue;
+    }>>;
+}
+import { Audit } from "./audit.js";
+//# sourceMappingURL=violation-audit.d.ts.map

package/core/audits/violation-audit.js

@@ -0,0 +1,49 @@
+/**
+ * @license Copyright 2017 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.
+ */
+
+import {Audit} from './audit.js';
+import {JSBundles} from '../computed/js-bundles.js';
+
+class ViolationAudit extends Audit {
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @param {RegExp} pattern
+   * @return {Promise<Array<{source: LH.Audit.Details.SourceLocationValue}>>}
+   */
+  static async getViolationResults(artifacts, context, pattern) {
+    const bundles = await JSBundles.request(artifacts, context);
+
+    /**
+     * @template T
+     * @param {T} value
+     * @return {value is Exclude<T, undefined>}
+     */
+    function filterUndefined(value) {
+      return value !== undefined;
+    }
+
+    const seen = new Set();
+    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);
+          return Audit.makeSourceLocationFromConsoleMessage(entry, bundle);
+        })
+        .filter(filterUndefined)
+        .filter(source => {
+          // Filter out duplicate entries since they are not differentiable to the user
+          // @see https://github.com/GoogleChrome/lighthouse/issues/5218
+          const key = `${source.url}!${source.line}!${source.column}`;
+          if (seen.has(key)) return false;
+          seen.add(key);
+          return true;
+        })
+        .map(source => ({source}));
+  }
+}
+
+export default ViolationAudit;

package/core/audits/work-during-interaction.d.ts

@@ -0,0 +1,82 @@
+export default WorkDuringInteraction;
+export type EventTimingEvent = import('../computed/metrics/responsiveness.js').EventTimingEvent;
+export type TaskNode = import('../lib/tracehouse/main-thread-tasks.js').TaskNode;
+/**
+ * @fileoverview This metric gives a high-percentile measure of responsiveness to input.
+ */
+declare class WorkDuringInteraction extends Audit {
+    /**
+     * @param {TaskNode} task
+     * @param {TaskNode|undefined} parent
+     * @param {number} startTs
+     * @param {number} endTs
+     * @return {number}
+     */
+    static recursivelyClipTasks(task: TaskNode, parent: TaskNode | undefined, startTs: number, endTs: number): number;
+    /**
+     * 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: Array<TaskNode>, startTs: number, endTs: number): void;
+    /**
+     * @param {EventTimingEvent} interactionEvent
+     */
+    static getPhaseTimes(interactionEvent: EventTimingEvent): {
+        inputDelay: {
+            startTs: number;
+            endTs: number;
+        };
+        processingTime: {
+            startTs: number;
+            endTs: number;
+        };
+        presentationDelay: {
+            startTs: number;
+            endTs: number;
+        };
+    };
+    /**
+     * @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: EventTimingEvent, trace: LH.Trace, processedTrace: LH.Artifacts.ProcessedTrace, networkRecords: Array<LH.Artifacts.NetworkRequest>): {
+        table: LH.Audit.Details.Table;
+        phases: Record<string, {
+            startTs: number;
+            endTs: number;
+        }>;
+    };
+    /**
+     * @param {LH.Artifacts['TraceElements']} traceElements
+     * @return {LH.Audit.Details.Table | undefined}
+     */
+    static getTraceElementTable(traceElements: LH.Artifacts['TraceElements']): LH.Audit.Details.Table | undefined;
+    /**
+     * @param {LH.Artifacts} artifacts
+     * @param {LH.Audit.Context} context
+     * @return {Promise<LH.Audit.Product>}
+     */
+    static audit(artifacts: LH.Artifacts, context: LH.Audit.Context): Promise<LH.Audit.Product>;
+}
+export namespace UIStrings {
+    const title: string;
+    const failureTitle: string;
+    const description: string;
+    const inputDelay: string;
+    const processingTime: string;
+    const presentationDelay: string;
+    const displayValue: string;
+    const eventTarget: string;
+}
+import { Audit } from "./audit.js";
+import { ProcessedTrace } from "../computed/processed-trace.js";
+//# sourceMappingURL=work-during-interaction.d.ts.map

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

@@ -0,0 +1,279 @@
+/**
+ * @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.
+ */
+
+import {Audit} from './audit.js';
+import {Responsiveness} from '../computed/metrics/responsiveness.js';
+import {ProcessedTrace} from '../computed/processed-trace.js';
+import * as i18n from '../lib/i18n/i18n.js';
+import {NetworkRecords} from '../computed/network-records.js';
+import {MainThreadTasks} from '../lib/tracehouse/main-thread-tasks.js';
+import {taskGroups} from '../lib/tracehouse/task-groups.js';
+import {TraceProcessor} from '../lib/tracehouse/trace-processor.js';
+import {getExecutionTimingsByURL} from '../lib/tracehouse/task-summary.js';
+import ExperimentalInteractionToNextPaint from './metrics/experimental-interaction-to-next-paint.js';
+import {LighthouseError} from '../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. The last sentence starting with 'Learn' becomes link text to additional documentation. */
+  description: 'This is the thread-blocking work occurring during the Interaction to Next Paint measurement. [Learn more about the Interaction to Next Paint metric](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. */
+  processingTime: 'Processing time',
+  /** 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.createIcuMessageFn(import.meta.url, 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},
+      processingTime: {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', valueType: 'text', subItemsHeading: {key: 'url', valueType: 'url'}, label: 'Phase'},
+      {key: 'total', valueType: 'ms', subItemsHeading: {key: 'total', granularity: 1, valueType: 'ms'}, granularity: 1, label: 'Total time'},
+      {key: null, valueType: 'ms', subItemsHeading: {key: 'scripting', granularity: 1, valueType: 'ms'}, label: 'Script evaluation'},
+      {key: null, valueType: 'ms', subItemsHeading: {key: 'layout', granularity: 1, valueType: 'ms'}, label: taskGroups.styleLayout.label},
+      {key: null, valueType: 'ms', subItemsHeading: {key: 'render', granularity: 1, valueType: 'ms'}, label: 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', valueType: 'node', label: 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 Responsiveness.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 LighthouseError(
+        LighthouseError.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 < ExperimentalInteractionToNextPaint.defaultOptions.p10 ? 1 : 0,
+      displayValue,
+      details: {
+        type: 'list',
+        items: auditDetailsItems,
+      },
+    };
+  }
+}
+
+export default WorkDuringInteraction;
+export {UIStrings};