lighthouse 13.5.0-dev.20261019 → 13.5.0-dev.20261021

package/core/computed/lcp-network-record.js

@@ -0,0 +1,74 @@
+/**
+ * @license
+ * Copyright 2023 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {makeComputedArtifact} from './computed-artifact.js';
+import {NetworkRecords} from './network-records.js';
+import {ProcessedNavigation} from './processed-navigation.js';
+import {LighthouseError} from '../lib/lh-error.js';
+
+/**
+ * @fileoverview Match the LCP event with the paint event to get the request of the image actually painted.
+ * This could differ from the `ImageElement` associated with the nodeId if e.g. the LCP
+ * was a pseudo-element associated with a node containing a smaller background-image.
+ */
+
+class LCPNetworkRecord {
+  /**
+   * @param {{trace: LH.Trace, devtoolsLog: LH.DevtoolsLog}} data
+   * @param {LH.Artifacts.ComputedContext} context
+   * @return {Promise<LH.Artifacts.NetworkRequest|undefined>}
+   */
+  static async compute_(data, context) {
+    const {trace, devtoolsLog} = data;
+    const networkRecords = await NetworkRecords.request(devtoolsLog, context);
+    const processedNavigation = await ProcessedNavigation.request(trace, context);
+    if (processedNavigation.timings.largestContentfulPaint === undefined) {
+      throw new LighthouseError(LighthouseError.errors.NO_LCP);
+    }
+
+    // Use main-frame-only LCP to match the metric value.
+    const lcpEvent = processedNavigation.largestContentfulPaintEvt;
+    if (!lcpEvent) return;
+
+    const lcpImagePaintEvent = trace.traceEvents.filter(e => {
+      return e.name === 'LargestImagePaint::Candidate' &&
+          e.args.frame === lcpEvent.args.frame &&
+          e.args.data?.DOMNodeId === lcpEvent.args.data?.nodeId &&
+          e.args.data?.size === lcpEvent.args.data?.size;
+    // Get last candidate, in case there was more than one.
+    }).sort((a, b) => b.ts - a.ts)[0];
+
+    const lcpUrl = lcpImagePaintEvent?.args.data?.imageUrl;
+    if (!lcpUrl) return;
+
+    const candidates = networkRecords.filter(record => {
+      return record.url === lcpUrl &&
+          record.finished &&
+          // Same frame as LCP trace event.
+          record.frameId === lcpImagePaintEvent.args.frame &&
+          record.networkRequestTime < (processedNavigation.timestamps.largestContentfulPaint || 0);
+    }).map(record => {
+      // Follow any redirects to find the real image request.
+      while (record.redirectDestination) {
+        record = record.redirectDestination;
+      }
+      return record;
+    }).filter(record => {
+      // Don't select if also loaded by some other means (xhr, etc). `resourceType`
+      // isn't set on redirect _sources_, so have to check after following redirects.
+      return record.resourceType === 'Image' || record.resourceType === 'Media';
+    });
+
+    // If there are still multiple candidates, at this point it appears the page
+    // simply made multiple requests for the image. The first loaded is the best
+    // guess of the request that made the image available for use.
+    return candidates.sort((a, b) => a.networkEndTime - b.networkEndTime)[0];
+  }
+}
+
+const LCPNetworkRecordComputed = makeComputedArtifact(LCPNetworkRecord, ['devtoolsLog', 'trace']);
+export {LCPNetworkRecordComputed as LCPNetworkRecord};
+

package/core/computed/metrics/lcp-breakdown.js

@@ -9,7 +9,7 @@ import {LighthouseError} from '../../lib/lh-error.js';
 import {LargestContentfulPaint} from './largest-contentful-paint.js';
 import {ProcessedNavigation} from '../processed-navigation.js';
 import {TimeToFirstByte} from './time-to-first-byte.js';
-import {LCPImageRecord} from '../lcp-image-record.js';
+import {LCPNetworkRecord} from '../lcp-network-record.js';
 import {NavigationInsights} from '../navigation-insights.js';
 
 /**
@@ -32,7 +32,7 @@ class LCPBreakdown {
 
       const {timing: ttfb} = await TimeToFirstByte.request(data, context);
 
-      const lcpRecord = await LCPImageRecord.request(data, context);
+      const lcpRecord = await LCPNetworkRecord.request(data, context);
       if (!lcpRecord) {
         return {ttfb};
       }

package/core/config/config-helpers.d.ts

@@ -1,6 +1,8 @@
 export type GathererConstructor = typeof import("../gather/base-gatherer.js").default;
 export type Audit = typeof import("../audits/audit.js")["Audit"];
 export type Gatherer = InstanceType<GathererConstructor>;
+/** @type {Map<string, Promise<any>>} */
+export const bundledModules: Map<string, Promise<any>>;
 /**
  * // TODO(bckenny): could adopt "jsonified" type to ensure T will survive JSON
  * round trip: https://github.com/Microsoft/TypeScript/issues/21838
@@ -33,6 +35,9 @@ export const mergeConfigFragment: LH.Config.Merge;
  * @return {Array<T>}
  */
 export function mergeConfigFragmentArrayByKey<T extends Record<string, any>>(baseArray: Array<T> | null | undefined, extensionArray: Array<T> | null | undefined, keyFn: (item: T) => string): Array<T>;
+/** @typedef {typeof import('../gather/base-gatherer.js').default} GathererConstructor */
+/** @typedef {typeof import('../audits/audit.js')['Audit']} Audit */
+/** @typedef {InstanceType<GathererConstructor>} Gatherer */
 /**
  * If any items with identical `path` properties are found in the input array,
  * merge their `options` properties into the first instance and then discard any

package/core/config/config-helpers.js

@@ -21,21 +21,6 @@ const require = createRequire(import.meta.url);
 /** @typedef {typeof import('../audits/audit.js')['Audit']} Audit */
 /** @typedef {InstanceType<GathererConstructor>} Gatherer */
 
-function isBundledEnvironment() {
-  // If we're in DevTools or LightRider, we are definitely bundled.
-  // TODO: refactor and delete `global.isDevtools`.
-  if (global.isDevtools || global.isLightrider) return true;
-
-  try {
-    // Not foolproof, but `lighthouse-logger` is a dependency of lighthouse that should always be resolvable.
-    // `require.resolve` will only throw in atypical/bundled environments.
-    require.resolve('lighthouse-logger');
-    return false;
-  } catch (err) {
-    return true;
-  }
-}
-
 /**
  * If any items with identical `path` properties are found in the input array,
  * merge their `options` properties into the first instance and then discard any
@@ -224,6 +209,8 @@ async function requireWrapper(requirePath) {
   let module;
   if (bundledModules.has(requirePath)) {
     module = await bundledModules.get(requirePath);
+  } else if (bundledModules.size > 0) {
+    throw new Error(`Unable to locate module '${requirePath}' in bundled Lighthouse`);
   } else if (requirePath.match(/\.(js|mjs|cjs)$/)) {
     module = await import(requirePath);
   } else {
@@ -283,18 +270,12 @@ function requireAudit(auditPath, coreAuditList, configDir) {
   const coreAudit = coreAuditList.find(a => a === auditPathJs);
   let requirePath = `../audits/${auditPath}`;
   if (!coreAudit) {
-    if (isBundledEnvironment()) {
+    if (bundledModules.has(auditPath)) {
       // This is for plugin bundling.
       requirePath = auditPath;
     } else {
       // Otherwise, attempt to find it elsewhere. This throws if not found.
-      const absolutePath = resolveModulePath(auditPath, configDir, 'audit');
-      if (isBundledEnvironment()) {
-        // Use a relative path so bundler can easily expose it.
-        requirePath = path.relative(import.meta.dirname, absolutePath);
-      } else {
-        requirePath = absolutePath;
-      }
+      requirePath = resolveModulePath(auditPath, configDir, 'audit');
     }
   }
 
@@ -372,7 +353,7 @@ async function mergePlugins(config, configDir, flags) {
     validation.assertValidPluginName(config, pluginName);
 
     // In bundled contexts, `resolveModulePath` will fail, so use the raw pluginName directly.
-    const pluginPath = isBundledEnvironment() ?
+    const pluginPath = bundledModules.has(pluginName) ?
         pluginName :
         resolveModulePath(pluginName, configDir, 'plugin');
     const rawPluginJson = await requireWrapper(pluginPath);
@@ -604,6 +585,7 @@ function deepCloneConfigJson(json) {
 }
 
 export {
+  bundledModules,
   deepClone,
   deepCloneConfigJson,
   mergeConfigFragment,

package/core/gather/base-artifacts.js

@@ -11,6 +11,7 @@ import {
   getDevicePixelRatio,
 } from './driver/environment.js';
 import {isEqual} from '../lib/arbitrary-equality-map.js';
+import {Sentry} from '../lib/sentry.js';
 
 /**
  * @param {LH.Config.ResolvedConfig} resolvedConfig
@@ -23,6 +24,11 @@ async function getBaseArtifacts(resolvedConfig, driver, context) {
   const {userAgent, product} = await getBrowserVersion(driver.defaultSession);
   const HostDPR = await getDevicePixelRatio(driver.executionContext);
 
+  const [name, version] = product.split('/');
+  if (name && version) {
+    Sentry.setContext('browser', {name, version});
+  }
+
   return {
     // Meta artifacts.
     fetchTime: new Date().toJSON(),

package/core/gather/gatherers/full-page-screenshot.js

@@ -95,7 +95,7 @@ class FullPageScreenshot extends BaseGatherer {
       mobile: deviceMetrics.mobile,
       deviceScaleFactor: 1,
       height,
-      width: 0, // Leave width unchanged
+      width: deviceMetrics.width,
     });
 
     // Now that the viewport is taller, give the page some time to fetch new resources that
@@ -235,7 +235,7 @@ class FullPageScreenshot extends BaseGatherer {
             mobile: deviceMetrics.mobile,
             deviceScaleFactor: deviceMetrics.deviceScaleFactor,
             height: deviceMetrics.height,
-            width: 0, // Leave width unchanged
+            width: deviceMetrics.width,
           });
         }
       }

package/core/lib/baseline/web-features-data.json

@@ -204,7 +204,7 @@
     "font-face": "2016-09-20",
     "font-family": "2015-07-29",
     "font-family-system": "2021-09-07",
-    "font-feature-settings": "2017-04-05",
+    "font-feature-settings": "2016-03-21",
     "font-kerning": "2020-01-15",
     "font-loading": "2020-01-15",
     "font-optical-sizing": "2020-03-24",
@@ -645,6 +645,7 @@
     "word-break": "2015-09-30",
     "word-spacing": "2015-07-29",
     "writing-mode": "2017-03-27",
+    "x-frame-options": "2015-07-29",
     "xhr": "2015-07-29",
     "xml-serializer": "2015-07-29",
     "xpath": "2015-07-29",
@@ -657,6 +658,7 @@
     "align-content-block": "2024-04-16",
     "alpha": "2026-09-14",
     "alt-text-generated-content": "2024-07-09",
+    "animations-css-animation-accessors": "2026-09-14",
     "arianotify": "2026-09-14",
     "async-clipboard": "2024-06-11",
     "async-iterable-streams": "2026-09-14",
@@ -726,6 +728,7 @@
     "request-video-frame-callback": "2024-10-29",
     "requestclose": "2025-05-27",
     "resizable-buffers": "2024-07-09",
+    "revert-rule": "2026-09-14",
     "rex": "2026-01-13",
     "ric": "2026-01-13",
     "round-mod-rem": "2024-05-17",
@@ -856,6 +859,7 @@
     "cross-document-view-transitions",
     "cross-fade",
     "css-modules",
+    "css-object-model-csspseudoelement",
     "css-object-model-discouraged",
     "css-typed-om",
     "cursor",
@@ -975,7 +979,9 @@
     "inverted-colors",
     "is-error",
     "is-input-pending",
+    "iterator-includes",
     "iterator-join",
+    "iterator-zip-zipkeyed",
     "jpegxl",
     "justify-self-block",
     "keyboard-lock",
@@ -1076,6 +1082,7 @@
     "reporting-permissions-policy-violations",
     "requestidlecallback",
     "resize",
+    "retriable-module-loading",
     "rhythmic-sizing",
     "ruby-overhang",
     "sanitizer",
@@ -1084,6 +1091,7 @@
     "scoped-custom-element-registries",
     "screen-capture",
     "screen-orientation-lock",
+    "scroll-axis-lock",
     "scroll-buttons",
     "scroll-driven-animations",
     "scroll-initial-target",
@@ -1093,6 +1101,7 @@
     "scroll-promises",
     "scroll-snap-events",
     "scroll-target-group",
+    "scroll-triggered-animations",
     "secure-payment-confirmation",
     "selection",
     "serial",
@@ -1116,6 +1125,7 @@
     "spelling-grammar-error",
     "storage-buckets",
     "stretch",
+    "string-substr",
     "string-trim-leftright",
     "style-query-range-syntax",
     "summarizer",
@@ -1124,6 +1134,7 @@
     "svg-discouraged",
     "switch-control",
     "symbols-function",
+    "system-color-accentcolor",
     "table-discouraged",
     "target-within",
     "template-for",
@@ -1132,6 +1143,7 @@
     "text-box",
     "text-decoration-line-blink",
     "text-decoration-selection",
+    "text-decoration-skip-spaces",
     "text-fit",
     "text-justify",
     "text-modules",
@@ -1198,6 +1210,7 @@
     "webxr-layers",
     "webxr-lighting-estimation",
     "wheel-events",
+    "wheel-events-momentum",
     "widows-orphans",
     "window-controls-overlay",
     "window-drag",

package/core/lib/i18n/i18n.d.ts

@@ -1,4 +1,3 @@
-export type LhlMessages = import("../../../shared/localization/locales").LhlMessages;
 export namespace UIStrings {
     let ms: string;
     let seconds: string;

package/core/lib/i18n/i18n.js

@@ -4,12 +4,9 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-/** @typedef {import('../../../shared/localization/locales').LhlMessages} LhlMessages */
-
 import path from 'path';
 import url from 'url';
 
-import lookupClosestLocale from 'lookup-closest-locale';
 import log from 'lighthouse-logger';
 
 import {getAvailableLocales} from '../../../shared/localization/format.js';
@@ -144,12 +141,22 @@ function lookupLocale(locales, possibleLocales) {
   // Filter by what's available in this runtime.
   const availableLocales = Intl.NumberFormat.supportedLocalesOf(canonicalLocales);
 
-  // Get available locales and transform into object to match `lookupClosestLocale`'s API.
-  const localesWithMessages = possibleLocales || getAvailableLocales();
-  const localesWithmessagesObj = /** @type {Record<LH.Locale, LhlMessages>} */ (
-    Object.fromEntries(localesWithMessages.map(l => [l, {}])));
-
-  const closestLocale = lookupClosestLocale(availableLocales, localesWithmessagesObj);
+  const localesWithMessages = new Set(possibleLocales || getAvailableLocales());
+
+  /** @type {LH.Locale|undefined} */
+  let closestLocale;
+  for (const locale of availableLocales) {
+    const parts = locale.split('-');
+    while (parts.length) {
+      const candidate = /** @type {LH.Locale} */ (parts.join('-'));
+      if (localesWithMessages.has(candidate)) {
+        closestLocale = candidate;
+        break;
+      }
+      parts.pop();
+    }
+    if (closestLocale) break;
+  }
 
   if (!closestLocale) {
     // Log extra info if we're pretty sure this version of Node was built with `--with-intl=small-icu`.

package/core/lib/sentry.d.ts

@@ -3,6 +3,7 @@ export namespace Sentry {
     export { noop as captureMessage };
     export { noop as captureBreadcrumb };
     export { noop as getContext };
+    export { noop as setContext };
     export let captureException: (error: Error, options: {
         level?: string;
         tags?: {

package/core/lib/sentry.js

@@ -32,6 +32,8 @@ const sentryDelegate = {
   captureBreadcrumb: noop,
   /** @type {() => any} */
   getContext: noop,
+  /** @type {(name: string, context: {[key: string]: any} | null) => void} */
+  setContext: noop,
   /** @type {(error: Error, options: {level?: string, tags?: {[key: string]: any}, extra?: {[key: string]: any}}) => Promise<void>} */
   captureException: async () => { },
   _shouldSample() {
@@ -88,6 +90,7 @@ async function init(opts) {
     sentryDelegate.captureMessage = (...args) => Sentry.captureMessage(...args);
     sentryDelegate.captureBreadcrumb = (...args) => Sentry.addBreadcrumb(...args);
     sentryDelegate.getContext = () => extras;
+    sentryDelegate.setContext = (...args) => Sentry.setContext(...args);
 
     // Keep a record of exceptions per audit/gatherer so we can just report once
     const sentryExceptionCache = new Map();