lighthouse 9.5.0 → 9.6.3

package/lighthouse-core/gather/gatherers/css-usage.js

@@ -5,7 +5,9 @@
  */
 'use strict';
 
+const log = require('lighthouse-logger');
 const FRGatherer = require('../../fraggle-rock/gather/base-gatherer.js');
+const Sentry = require('../../lib/sentry.js');
 
 /**
  * @fileoverview Tracks unused CSS rules.
@@ -13,21 +15,16 @@ const FRGatherer = require('../../fraggle-rock/gather/base-gatherer.js');
 class CSSUsage extends FRGatherer {
   constructor() {
     super();
-    /** @type {Array<LH.Crdp.CSS.StyleSheetAddedEvent>} */
-    this._stylesheets = [];
-    /** @param {LH.Crdp.CSS.StyleSheetAddedEvent} sheet */
-    this._onStylesheetAdded = sheet => this._stylesheets.push(sheet);
-    /** @param {LH.Crdp.CSS.StyleSheetRemovedEvent} sheet */
-    this._onStylesheetRemoved = sheet => {
-      // We can't fetch the content of removed stylesheets, so we ignore them completely.
-      const styleSheetId = sheet.styleSheetId;
-      this._stylesheets = this._stylesheets.filter(s => s.header.styleSheetId !== styleSheetId);
-    };
+    /** @type {LH.Gatherer.FRProtocolSession|undefined} */
+    this._session = undefined;
+    /** @type {Map<string, Promise<LH.Artifacts.CSSStyleSheetInfo|Error>>} */
+    this._sheetPromises = new Map();
     /**
      * Initialize as undefined so we can assert results are fetched.
      * @type {LH.Crdp.CSS.RuleUsage[]|undefined}
      */
     this._ruleUsage = undefined;
+    this._onStylesheetAdded = this._onStylesheetAdded.bind(this);
   }
 
   /** @type {LH.Gatherer.GathererMeta} */
@@ -35,26 +32,49 @@ class CSSUsage extends FRGatherer {
     supportedModes: ['snapshot', 'timespan', 'navigation'],
   };
 
+  /**
+   * @param {LH.Crdp.CSS.StyleSheetAddedEvent} event
+   */
+  async _onStylesheetAdded(event) {
+    if (!this._session) throw new Error('Session not initialized');
+    const styleSheetId = event.header.styleSheetId;
+    const sheetPromise = this._session.sendCommand('CSS.getStyleSheetText', {styleSheetId})
+      .then(content => ({
+        header: event.header,
+        content: content.text,
+      }))
+      .catch(/** @param {Error} err */ (err) => {
+        log.warn(
+          'CSSUsage',
+          `Error fetching content of stylesheet with URL "${event.header.sourceURL}"`
+        );
+        Sentry.captureException(err, {
+          tags: {
+            gatherer: this.name,
+          },
+          extra: {
+            url: event.header.sourceURL,
+          },
+          level: 'error',
+        });
+        return err;
+      });
+    this._sheetPromises.set(styleSheetId, sheetPromise);
+  }
+
   /**
    * @param {LH.Gatherer.FRTransitionalContext} context
    */
   async startCSSUsageTracking(context) {
     const session = context.driver.defaultSession;
+    this._session = session;
     session.on('CSS.styleSheetAdded', this._onStylesheetAdded);
-    session.on('CSS.styleSheetRemoved', this._onStylesheetRemoved);
 
     await session.sendCommand('DOM.enable');
     await session.sendCommand('CSS.enable');
     await session.sendCommand('CSS.startRuleUsageTracking');
   }
 
-  /**
-   * @param {LH.Gatherer.FRTransitionalContext} context
-   */
-  async startInstrumentation(context) {
-    if (context.gatherMode !== 'timespan') return;
-    await this.startCSSUsageTracking(context);
-  }
 
   /**
    * @param {LH.Gatherer.FRTransitionalContext} context
@@ -64,7 +84,14 @@ class CSSUsage extends FRGatherer {
     const coverageResponse = await session.sendCommand('CSS.stopRuleUsageTracking');
     this._ruleUsage = coverageResponse.ruleUsage;
     session.off('CSS.styleSheetAdded', this._onStylesheetAdded);
-    session.off('CSS.styleSheetRemoved', this._onStylesheetRemoved);
+  }
+
+  /**
+   * @param {LH.Gatherer.FRTransitionalContext} context
+   */
+  async startInstrumentation(context) {
+    if (context.gatherMode !== 'timespan') return;
+    await this.startCSSUsageTracking(context);
   }
 
   /**
@@ -93,25 +120,23 @@ class CSSUsage extends FRGatherer {
       await this.stopCSSUsageTracking(context);
     }
 
-    // Fetch style sheet content in parallel.
-    const promises = this._stylesheets.map(sheet => {
-      const styleSheetId = sheet.header.styleSheetId;
-      return session.sendCommand('CSS.getStyleSheetText', {styleSheetId}).then(content => {
-        return {
-          header: sheet.header,
-          content: content.text,
-        };
-      });
-    });
-    const styleSheetInfo = await Promise.all(promises);
+    /** @type {Map<string, LH.Artifacts.CSSStyleSheetInfo>} */
+    const dedupedStylesheets = new Map();
+    const sheets = await Promise.all(this._sheetPromises.values());
+
+    for (const sheet of sheets) {
+      // Erroneous sheets will be reported via sentry and the log.
+      // We can ignore them here without throwing a fatal error.
+      if (sheet instanceof Error) {
+        continue;
+      }
+
+      dedupedStylesheets.set(sheet.content, sheet);
+    }
 
     await session.sendCommand('CSS.disable');
     await session.sendCommand('DOM.disable');
 
-    const dedupedStylesheets = new Map(styleSheetInfo.map(sheet => {
-      return [sheet.content, sheet];
-    }));
-
     if (!this._ruleUsage) throw new Error('Issue collecting rule usages');
 
     return {

package/lighthouse-core/gather/gatherers/trace-elements.js

@@ -22,6 +22,7 @@ const Trace = require('./trace.js');
 const ProcessedTrace = require('../../computed/processed-trace.js');
 const ProcessedNavigation = require('../../computed/processed-navigation.js');
 const LighthouseError = require('../../lib/lh-error.js');
+const ComputedResponsivenes = require('../../computed/metrics/responsiveness.js');
 
 /** @typedef {{nodeId: number, score?: number, animations?: {name?: string, failureReasonsMask?: number, unsupportedProperties?: string[]}[]}} TraceElementData */
 
@@ -142,6 +143,23 @@ class TraceElements extends FRGatherer {
     return topFive;
   }
 
+  /**
+   * @param {LH.Trace} trace
+   * @param {LH.Gatherer.FRTransitionalContext} context
+   * @return {Promise<TraceElementData|undefined>}
+   */
+  static async getResponsivenessElement(trace, context) {
+    const {settings} = context;
+    try {
+      const responsivenessEvent = await ComputedResponsivenes.request({trace, settings}, context);
+      if (!responsivenessEvent || responsivenessEvent.name === 'FallbackTiming') return;
+      return {nodeId: responsivenessEvent.args.data.nodeId};
+    } catch {
+      // Don't let responsiveness errors sink the rest of the gatherer.
+      return;
+    }
+  }
+
   /**
    * Find the node ids of elements which are animated using the Animation trace events.
    * @param {Array<LH.TraceEvent>} mainThreadEvents
@@ -237,14 +255,15 @@ class TraceElements extends FRGatherer {
 
     const lcpNodeId = largestContentfulPaintEvt?.args?.data?.nodeId;
     const clsNodeData = TraceElements.getTopLayoutShiftElements(mainThreadEvents);
-    const animatedElementData =
-      await this.getAnimatedElements(mainThreadEvents);
+    const animatedElementData = await this.getAnimatedElements(mainThreadEvents);
+    const responsivenessElementData = await TraceElements.getResponsivenessElement(trace, context);
 
     /** @type {Map<string, TraceElementData[]>} */
     const backendNodeDataMap = new Map([
       ['largest-contentful-paint', lcpNodeId ? [{nodeId: lcpNodeId}] : []],
       ['layout-shift', clsNodeData],
       ['animation', animatedElementData],
+      ['responsiveness', responsivenessElementData ? [responsivenessElementData] : []],
     ]);
 
     const traceElements = [];

package/lighthouse-core/lib/arbitrary-equality-map.js

@@ -5,7 +5,7 @@
  */
 'use strict';
 
-const {isEqual} = require('lodash');
+const isDeepEqual = require('lodash/isEqual.js');
 
 /**
  * @fileoverview This class is designed to allow maps with arbitrary equality functions.
@@ -74,7 +74,7 @@ class ArbitraryEqualityMap {
    * @return {boolean}
    */
   static deepEquals(objA, objB) {
-    return isEqual(objA, objB);
+    return isDeepEqual(objA, objB);
   }
 }
 

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

@@ -44,7 +44,7 @@ class NetworkNode extends BaseNode {
   }
 
   /**
-   * @return {?string}
+   * @return {string}
    */
   get initiatorType() {
     return this._record.initiator && this._record.initiator.type;

package/lighthouse-core/lib/i18n/i18n.js

@@ -105,6 +105,8 @@ const UIStrings = {
   largestContentfulPaintMetric: 'Largest Contentful Paint',
   /** The name of the metric "Cumulative Layout Shift" that indicates how much the page changes its layout while it loads. If big segments of the page shift their location during load, the Cumulative Layout Shift will be higher. Shown to users as the label for the numeric metric value. Ideally fits within a ~40 character limit. */
   cumulativeLayoutShiftMetric: 'Cumulative Layout Shift',
+  /** The name of the "Interaction to Next Paint" metric that measures the time between a user interaction and when the browser displays a response on screen. Shown to users as the label for the numeric metric value. Ideally fits within a ~40 character limit. */
+  interactionToNextPaint: 'Interaction to Next Paint',
   /** Table item value for the severity of a small, or low impact vulnerability. Part of a ranking scale in the form: low, medium, high. */
   itemSeverityLow: 'Low',
   /** Table item value for the severity of a vulnerability. Part of a ranking scale in the form: low, medium, high. */

package/lighthouse-core/lib/minify-trace.js

@@ -44,6 +44,8 @@ const traceEventsToAlwaysKeep = new Set([
   'EventDispatch',
   'LayoutShift',
   'FrameCommittedInBrowser',
+  'EventTiming',
+  'Responsiveness.Renderer.UserInteraction',
   // Not currently used by Lighthouse but might be used in the future for cross-frame LCP
   'NavStartToLargestContentfulPaint::Invalidate::AllFrames::UKM',
   'NavStartToLargestContentfulPaint::Candidate::AllFrames::UKM',

package/lighthouse-core/lib/script-helpers.js

@@ -0,0 +1,24 @@
+/**
+ * @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';
+
+/**
+ * @param {LH.Artifacts.NetworkRequest[]} networkRecords
+ * @param {LH.Artifacts.ScriptElement|undefined} script
+ * @return {LH.Artifacts.NetworkRequest|undefined}
+ */
+function getRequestForScript(networkRecords, script) {
+  if (!script) return;
+  let networkRequest = script.requestId &&
+    networkRecords.find(request => request.requestId === script.requestId);
+  if (!networkRequest) networkRequest = networkRecords.find(request => request.url === script.src);
+  while (networkRequest?.redirectDestination) {
+    networkRequest = networkRequest.redirectDestination;
+  }
+  return networkRequest;
+}
+
+module.exports = {getRequestForScript};

package/lighthouse-core/lib/stack-packs.js

@@ -19,11 +19,10 @@ const stackPacksToInclude = [
     packId: 'wordpress',
     requiredStacks: ['js:wordpress'],
   },
-  // waiting for https://github.com/johnmichel/Library-Detector-for-Chrome/pull/193
-  // {
-  //   packId: 'ezoic',
-  //   requiredStacks: ['js:ezoic'],
-  // },
+  {
+    packId: 'ezoic',
+    requiredStacks: ['js:ezoic'],
+  },
   {
     packId: 'drupal',
     requiredStacks: ['js:drupal'],
@@ -48,6 +47,10 @@ const stackPacksToInclude = [
     packId: 'next.js',
     requiredStacks: ['js:next'],
   },
+  {
+    packId: 'nuxt',
+    requiredStacks: ['js:nuxt'],
+  },
   {
     packId: 'angular',
     requiredStacks: ['js:@angular/core'],

package/lighthouse-core/lib/tracehouse/task-groups.js

@@ -50,6 +50,7 @@ const taskGroups = {
       'UpdateLayer',
       'UpdateLayerTree',
       'CompositeLayers',
+      'PrePaint', // New name for UpdateLayerTree: https://crrev.com/c/3519012
     ],
   },
   scriptParseCompile: {

package/lighthouse-core/lib/tracehouse/task-summary.js

@@ -0,0 +1,87 @@
+/**
+ * @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';
+
+/**
+ * @fileoverview Utility functions for grouping and summarizing tasks.
+ */
+
+const NetworkRequest = require('../network-request.js');
+
+// These trace events, when not triggered by a script inside a particular task, are just general Chrome overhead.
+const BROWSER_TASK_NAMES_SET = new Set([
+  'CpuProfiler::StartProfiling',
+]);
+
+// These trace events, when not triggered by a script inside a particular task, are GC Chrome overhead.
+const BROWSER_GC_TASK_NAMES_SET = new Set([
+  'V8.GCCompactor',
+  'MajorGC',
+  'MinorGC',
+]);
+
+/**
+ * @param {LH.Artifacts.NetworkRequest[]} records
+ */
+function getJavaScriptURLs(records) {
+  /** @type {Set<string>} */
+  const urls = new Set();
+  for (const record of records) {
+    if (record.resourceType === NetworkRequest.TYPES.Script) {
+      urls.add(record.url);
+    }
+  }
+
+  return urls;
+}
+
+/**
+ * @param {LH.Artifacts.TaskNode} task
+ * @param {Set<string>} jsURLs
+ * @return {string}
+ */
+function getAttributableURLForTask(task, jsURLs) {
+  const jsURL = task.attributableURLs.find(url => jsURLs.has(url));
+  const fallbackURL = task.attributableURLs[0];
+  let attributableURL = jsURL || fallbackURL;
+  // If we can't find what URL was responsible for this execution, attribute it to the root page
+  // or Chrome depending on the type of work.
+  if (!attributableURL || attributableURL === 'about:blank') {
+    if (BROWSER_TASK_NAMES_SET.has(task.event.name)) attributableURL = 'Browser';
+    else if (BROWSER_GC_TASK_NAMES_SET.has(task.event.name)) attributableURL = 'Browser GC';
+    else attributableURL = 'Unattributable';
+  }
+
+  return attributableURL;
+}
+
+/**
+ * @param {LH.Artifacts.TaskNode[]} tasks
+ * @param {Array<LH.Artifacts.NetworkRequest>} networkRecords
+ * @return {Map<string, Record<string, number>>}
+ */
+function getExecutionTimingsByURL(tasks, networkRecords) {
+  const jsURLs = getJavaScriptURLs(networkRecords);
+
+  /** @type {Map<string, Record<string, number>>} */
+  const result = new Map();
+
+  for (const task of tasks) {
+    const attributableURL = getAttributableURLForTask(task, jsURLs);
+    const timingByGroupId = result.get(attributableURL) || {};
+    const originalTime = timingByGroupId[task.group.id] || 0;
+    timingByGroupId[task.group.id] = originalTime + task.selfTime;
+    result.set(attributableURL, timingByGroupId);
+  }
+
+  return result;
+}
+
+module.exports = {
+  getJavaScriptURLs,
+  getAttributableURLForTask,
+  getExecutionTimingsByURL,
+};

package/lighthouse-core/lib/tracehouse/trace-processor.js

@@ -82,11 +82,15 @@ class TraceProcessor {
    * Returns true if the event is a navigation start event of a document whose URL seems valid.
    *
    * @param {LH.TraceEvent} event
+   * @return {boolean}
    */
   static _isNavigationStartOfInterest(event) {
-    return event.name === 'navigationStart' &&
-      (!event.args.data || !event.args.data.documentLoaderURL ||
-        ACCEPTABLE_NAVIGATION_URL_REGEX.test(event.args.data.documentLoaderURL));
+    if (event.name !== 'navigationStart') return false;
+    // COMPAT: support pre-m67 test traces before `args.data` added to all navStart events.
+    // TODO: remove next line when old test traces (e.g. progressive-app-m60.json) are updated.
+    if (event.args.data?.documentLoaderURL === undefined) return true;
+    if (!event.args.data?.documentLoaderURL) return false;
+    return ACCEPTABLE_NAVIGATION_URL_REGEX.test(event.args.data.documentLoaderURL);
   }
 
   /**
@@ -462,8 +466,9 @@ class TraceProcessor {
     // If we can't find either TracingStarted event, then we'll fallback to the first navStart that
     // looks like it was loading the main frame with a real URL. Because the schema for this event
     // has changed across Chrome versions, we'll be extra defensive about finding this case.
-    const navStartEvt = events.find(e => Boolean(e.name === 'navigationStart' &&
-      e.args?.data?.isLoadingMainFrame && e.args.data.documentLoaderURL));
+    const navStartEvt = events.find(e =>
+      this._isNavigationStartOfInterest(e) && e.args.data?.isLoadingMainFrame
+    );
     // Find the first resource that was requested and make sure it agrees on the id.
     const firstResourceSendEvt = events.find(e => e.name === 'ResourceSendRequest');
     // We know that these properties exist if we found the events, but TSC doesn't.
@@ -607,39 +612,59 @@ class TraceProcessor {
     // Find the inspected frame
     const mainFrameIds = this.findMainFrameIds(keyEvents);
 
-    const frames = keyEvents
+    /** @type {Map<string, {id: string, url: string, parent?: string}>} */
+    const framesById = new Map();
+
+    // Begin collection of frame tree information with TracingStartedInBrowser,
+    // which should be present even without navigations.
+    const tracingStartedFrames = keyEvents
+        .find(e => e.name === 'TracingStartedInBrowser')?.args?.data?.frames;
+    if (tracingStartedFrames) {
+      for (const frame of tracingStartedFrames) {
+        framesById.set(frame.frame, {
+          id: frame.frame,
+          url: frame.url,
+          parent: frame.parent,
+        });
+      }
+    }
+
+    // Update known frames if FrameCommittedInBrowser events come in, typically
+    // with updated `url`, as well as pid, etc. Some traces (like timespans) may
+    // not have any committed frames.
+    keyEvents
       .filter(/** @return {evt is FrameCommittedEvent} */ evt => {
         return Boolean(
           evt.name === 'FrameCommittedInBrowser' &&
           evt.args.data?.frame &&
           evt.args.data.url
         );
-      })
-      .map(evt => {
-        return {
+      }).forEach(evt => {
+        framesById.set(evt.args.data.frame, {
           id: evt.args.data.frame,
           url: evt.args.data.url,
           parent: evt.args.data.parent,
-        };
+        });
       });
+    const frames = [...framesById.values()];
     const frameIdToRootFrameId = this.resolveRootFrames(frames);
 
     // Filter to just events matching the main frame ID, just to make sure.
     const frameEvents = keyEvents.filter(e => e.args.frame === mainFrameIds.frameId);
 
     // Filter to just events matching the main frame ID or any child frame IDs.
-    // In practice, there should always be FrameCommittedInBrowser events to define the frame tree.
-    // Unfortunately, many test traces do not include FrameCommittedInBrowser events due to minification.
-    // This ensures there is always a minimal frame tree and events so those tests don't fail.
     let frameTreeEvents = [];
     if (frameIdToRootFrameId.has(mainFrameIds.frameId)) {
       frameTreeEvents = keyEvents.filter(e => {
         return e.args.frame && frameIdToRootFrameId.get(e.args.frame) === mainFrameIds.frameId;
       });
     } else {
+      // In practice, there should always be TracingStartedInBrowser/FrameCommittedInBrowser events to
+      // define the frame tree. Unfortunately, many test traces do not that frame info due to minification.
+      // This ensures there is always a minimal frame tree and events so those tests don't fail.
       log.warn(
         'trace-of-tab',
-        'frameTreeEvents may be incomplete, make sure the trace has FrameCommittedInBrowser events'
+        'frameTreeEvents may be incomplete, make sure the trace has frame events'
       );
       frameIdToRootFrameId.set(mainFrameIds.frameId, mainFrameIds.frameId);
       frameTreeEvents = frameEvents;

package/lighthouse-core/runner.js

@@ -5,7 +5,7 @@
  */
 'use strict';
 
-const {isEqual: isDeepEqual} = require('lodash');
+const isDeepEqual = require('lodash/isEqual.js');
 const Driver = require('./gather/driver.js');
 const GatherRunner = require('./gather/gather-runner.js');
 const ReportScoring = require('./scoring.js');

package/lighthouse-core/util-commonjs.js

@@ -318,24 +318,26 @@ class Util {
     }
 
     const MAX_LENGTH = 64;
-    // Always elide hexadecimal hash
-    name = name.replace(/([a-f0-9]{7})[a-f0-9]{13}[a-f0-9]*/g, `$1${ELLIPSIS}`);
-    // Also elide other hash-like mixed-case strings
-    name = name.replace(/([a-zA-Z0-9-_]{9})(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z0-9-_]{10,}/g,
-      `$1${ELLIPSIS}`);
-    // Also elide long number sequences
-    name = name.replace(/(\d{3})\d{6,}/g, `$1${ELLIPSIS}`);
-    // Merge any adjacent ellipses
-    name = name.replace(/\u2026+/g, ELLIPSIS);
-
-    // Elide query params first
-    if (name.length > MAX_LENGTH && name.includes('?')) {
-      // Try to leave the first query parameter intact
-      name = name.replace(/\?([^=]*)(=)?.*/, `?$1$2${ELLIPSIS}`);
-
-      // Remove it all if it's still too long
-      if (name.length > MAX_LENGTH) {
-        name = name.replace(/\?.*/, `?${ELLIPSIS}`);
+    if (parsedUrl.protocol !== 'data:') {
+      // Always elide hexadecimal hash
+      name = name.replace(/([a-f0-9]{7})[a-f0-9]{13}[a-f0-9]*/g, `$1${ELLIPSIS}`);
+      // Also elide other hash-like mixed-case strings
+      name = name.replace(/([a-zA-Z0-9-_]{9})(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])[a-zA-Z0-9-_]{10,}/g,
+        `$1${ELLIPSIS}`);
+      // Also elide long number sequences
+      name = name.replace(/(\d{3})\d{6,}/g, `$1${ELLIPSIS}`);
+      // Merge any adjacent ellipses
+      name = name.replace(/\u2026+/g, ELLIPSIS);
+
+      // Elide query params first
+      if (name.length > MAX_LENGTH && name.includes('?')) {
+        // Try to leave the first query parameter intact
+        name = name.replace(/\?([^=]*)(=)?.*/, `?$1$2${ELLIPSIS}`);
+
+        // Remove it all if it's still too long
+        if (name.length > MAX_LENGTH) {
+          name = name.replace(/\?.*/, `?${ELLIPSIS}`);
+        }
       }
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lighthouse",
-  "version": "9.5.0",
+  "version": "9.6.3",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./lighthouse-core/index.js",
   "bin": {
@@ -138,7 +138,7 @@
     "cpy": "^8.1.2",
     "cross-env": "^7.0.2",
     "csv-validator": "^0.0.3",
-    "devtools-protocol": "0.0.975298",
+    "devtools-protocol": "0.0.999451",
     "es-main": "^1.0.2",
     "eslint": "^8.4.1",
     "eslint-config-google": "^0.14.0",
@@ -163,7 +163,7 @@
     "pako": "^2.0.3",
     "preact": "^10.5.14",
     "pretty-json-stringify": "^0.0.2",
-    "puppeteer": "^10.2.0",
+    "puppeteer": "13.7.0",
     "resolve": "^1.20.0",
     "rollup": "^2.52.7",
     "rollup-plugin-node-resolve": "^5.2.0",
@@ -181,7 +181,7 @@
   },
   "dependencies": {
     "@sentry/node": "^6.17.4",
-    "axe-core": "4.3.5",
+    "axe-core": "4.4.1",
     "chrome-launcher": "^0.15.0",
     "configstore": "^5.0.1",
     "csp_evaluator": "1.1.0",
@@ -190,25 +190,27 @@
     "http-link-header": "^0.8.0",
     "intl-messageformat": "^4.4.0",
     "jpeg-js": "^0.4.3",
-    "js-library-detector": "^6.4.0",
+    "js-library-detector": "^6.5.0",
     "lighthouse-logger": "^1.3.0",
-    "lighthouse-stack-packs": "^1.7.0",
+    "lighthouse-stack-packs": "^1.8.1",
     "lodash": "^4.17.21",
     "lookup-closest-locale": "6.2.0",
     "metaviewport-parser": "0.2.0",
     "open": "^8.4.0",
     "parse-cache-control": "1.0.1",
     "ps-list": "^8.0.0",
+    "puppeteer-core": "^13.7.0",
     "robots-parser": "^3.0.0",
     "semver": "^5.3.0",
     "speedline-core": "^1.4.3",
-    "third-party-web": "^0.12.7",
+    "third-party-web": "^0.17.1",
     "ws": "^7.0.0",
     "yargs": "^17.3.1",
     "yargs-parser": "^21.0.0"
   },
   "resolutions": {
-    "puppeteer/**/devtools-protocol": "0.0.975298"
+    "puppeteer/**/devtools-protocol": "0.0.999451",
+    "puppeteer-core/**/devtools-protocol": "0.0.999451"
   },
   "repository": "GoogleChrome/lighthouse",
   "keywords": [

package/report/assets/styles.css

@@ -300,6 +300,9 @@
   /* This is normally the height of the topbar, but we want it to stick to the top of our scroll container .lh-container` */
   top: 0;
 }
+.lh-devtools .lh-element-screenshot__overlay {
+  position: absolute;
+}
 
 @keyframes fadeIn {
   0% { opacity: 0;}
@@ -1062,8 +1065,8 @@
 }
 
 /* Report */
-.lh-list > div:not(:last-child) {
-  padding-bottom: 20px;
+.lh-list > :not(:last-child) {
+  margin-bottom: calc(var(--default-padding) * 2);
 }
 
 .lh-header-container {

package/report/clients/bundle.js

@@ -16,3 +16,4 @@ export {DOM} from '../renderer/dom.js';
 export {ReportRenderer} from '../renderer/report-renderer.js';
 export {ReportUIFeatures} from '../renderer/report-ui-features.js';
 export {renderReport} from '../renderer/api.js';
+export {swapLocale, format} from '../../shared/localization/i18n-module.js';