lighthouse 13.3.0 → 13.4.0

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

@@ -1,13 +1,5 @@
 export default config;
-/**
- * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
-/**
- * @fileoverview Config for new audits that aren't quite ready for
- * being enabled by default.
- */
 /** @type {LH.Config} */
 declare const config: LH.Config;
+import * as LH from '../../types/lh.js';
 //# sourceMappingURL=experimental-config.d.ts.map

package/core/config/experimental-config.js

@@ -9,6 +9,8 @@
  * being enabled by default.
  */
 
+import * as LH from '../../types/lh.js';
+
 /** @type {LH.Config} */
 const config = {
   extends: 'lighthouse:default',

package/core/config/filters.d.ts

@@ -72,4 +72,5 @@ export function filterCategoriesByExplicitFilters(categories: LH.Config.Resolved
  * @return {LH.Config.ResolvedConfig['categories']}
  */
 export function filterCategoriesByGatherMode(categories: LH.Config.ResolvedConfig["categories"], mode: LH.Gatherer.GatherMode): LH.Config.ResolvedConfig["categories"];
+import * as LH from '../../types/lh.js';
 //# sourceMappingURL=filters.d.ts.map

package/core/config/filters.js

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import * as LH from '../../types/lh.js';
 import {Audit} from '../audits/audit.js';
 
 /** @type {Record<keyof LH.BaseArtifacts, string>} */

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

@@ -1,9 +1,5 @@
 export default fullConfig;
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
 /** @type {LH.Config} */
 declare const fullConfig: LH.Config;
+import * as LH from '../../types/lh.js';
 //# sourceMappingURL=full-config.d.ts.map

package/core/config/full-config.js

@@ -4,6 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import * as LH from '../../types/lh.js';
+
 /** @type {LH.Config} */
 const fullConfig = {
   extends: 'lighthouse:default',

package/core/config/lr-desktop-config.d.ts

@@ -1,4 +1,5 @@
 export default config;
 /** @type {LH.Config} */
 declare const config: LH.Config;
+import * as LH from '../../types/lh.js';
 //# sourceMappingURL=lr-desktop-config.d.ts.map

package/core/config/lr-desktop-config.js

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import * as LH from '../../types/lh.js';
 import * as constants from './constants.js';
 
 /** @type {LH.Config} */

package/core/config/lr-mobile-config.d.ts

@@ -1,9 +1,5 @@
 export default config;
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
 /** @type {LH.Config} */
 declare const config: LH.Config;
+import * as LH from '../../types/lh.js';
 //# sourceMappingURL=lr-mobile-config.d.ts.map

package/core/config/lr-mobile-config.js

@@ -4,6 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import * as LH from '../../types/lh.js';
+
 /** @type {LH.Config} */
 const config = {
   extends: 'lighthouse:default',

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

@@ -1,9 +1,5 @@
 export default perfConfig;
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: Apache-2.0
- */
 /** @type {LH.Config} */
 declare const perfConfig: LH.Config;
+import * as LH from '../../types/lh.js';
 //# sourceMappingURL=perf-config.d.ts.map

package/core/config/perf-config.js

@@ -4,6 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import * as LH from '../../types/lh.js';
+
 /** @type {LH.Config} */
 const perfConfig = {
   extends: 'lighthouse:default',

package/core/config/validation.d.ts

@@ -58,4 +58,5 @@ export function throwInvalidDependencyOrder(artifactId: string, dependencyKey: s
  * @return {never}
  */
 export function throwInvalidArtifactDependency(artifactId: string, dependencyKey: string): never;
+import * as LH from '../../types/lh.js';
 //# sourceMappingURL=validation.d.ts.map

package/core/config/validation.js

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import * as LH from '../../types/lh.js';
 import {Audit} from '../audits/audit.js';
 import BaseGatherer from '../gather/base-gatherer.js';
 import * as i18n from '../lib/i18n/i18n.js';

package/core/gather/driver/execution-context.d.ts

@@ -102,6 +102,29 @@ export class ExecutionContext {
         args: T;
         deps?: Array<Function | string>;
     }): Promise<void>;
+    /**
+     * Call a function on the given object.
+     * Returns a promise that resolves on a value of `mainFn`'s return type.
+     * @template {unknown[]} T, R
+     * @param {((thisArg: any, ...args: T) => R)} mainFn The main function to call.
+     * @param {{args: T, objectId: string, deps?: Array<Function|string>}} options `args` should
+     *   match the args of `mainFn`, and can be any serializable value. `deps` are functions that must be
+     *   defined for `mainFn` to work.
+     * @return {Promise<Awaited<R>>}
+     */
+    evaluateOnObject<T extends unknown[], R>(mainFn: ((thisArg: any, ...args: T) => R), options: {
+        args: T;
+        objectId: string;
+        deps?: Array<Function | string>;
+    }): Promise<Awaited<R>>;
+    /**
+     * @param {string} functionDeclaration
+     * @param {{objectId: string}} options
+     * @return {Promise<*>}
+     */
+    _callFunctionOn(functionDeclaration: string, options: {
+        objectId: string;
+    }): Promise<any>;
     /**
      * Cache native functions/objects inside window so we are sure polyfills do not overwrite the
      * native implementations when the page loads.

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

@@ -223,6 +223,7 @@ class ExecutionContext {
 
     const expression = `(() => {
       ${ExecutionContext._cachedNativesPreamble};
+      ${pageFunctions.esbuildFunctionWrapperString}
       ${depsSerialized};
       (${mainFn})(${argsSerialized});
     })()
@@ -231,6 +232,87 @@ class ExecutionContext {
     await this._session.sendCommand('Page.addScriptToEvaluateOnNewDocument', {source: expression});
   }
 
+  /**
+   * Call a function on the given object.
+   * Returns a promise that resolves on a value of `mainFn`'s return type.
+   * @template {unknown[]} T, R
+   * @param {((thisArg: any, ...args: T) => R)} mainFn The main function to call.
+   * @param {{args: T, objectId: string, deps?: Array<Function|string>}} options `args` should
+   *   match the args of `mainFn`, and can be any serializable value. `deps` are functions that must be
+   *   defined for `mainFn` to work.
+   * @return {Promise<Awaited<R>>}
+   */
+  evaluateOnObject(mainFn, options) {
+    const argsSerialized = ExecutionContext.serializeArguments(options.args);
+    const depsSerialized = ExecutionContext.serializeDeps(options.deps);
+
+    const argsString = argsSerialized ? `this, ${argsSerialized}` : 'this';
+    const functionDeclaration = `function() {
+      ${depsSerialized}
+      return (${mainFn})(${argsString});
+    }`;
+    return this._callFunctionOn(functionDeclaration, options);
+  }
+
+  /**
+   * @param {string} functionDeclaration
+   * @param {{objectId: string}} options
+   * @return {Promise<*>}
+   */
+  async _callFunctionOn(functionDeclaration, options) {
+    const timeout = this._session.hasNextProtocolTimeout() ?
+      this._session.getNextProtocolTimeout() :
+      60000;
+
+    const evaluationParams = {
+      functionDeclaration: `function wrapInNativePromise() {
+        ${ExecutionContext._cachedNativesPreamble};
+        ${pageFunctions.esbuildFunctionWrapperString}
+        const self = this;
+        const args = arguments;
+        return new Promise(function (resolve) {
+          return Promise.resolve()
+            .then(_ => (${functionDeclaration}).apply(self, args))
+            .catch(${pageFunctions.wrapRuntimeEvalErrorInBrowser})
+            .then(resolve);
+        });
+      }
+      //# sourceURL=_lighthouse-eval.js
+      `,
+      objectId: options.objectId,
+      returnByValue: true,
+      awaitPromise: true,
+      timeout,
+    };
+
+    this._session.setNextProtocolTimeout(timeout);
+    const response = await this._session.sendCommand('Runtime.callFunctionOn', evaluationParams);
+
+    const ex = response.exceptionDetails;
+    if (ex) {
+      const elidedExpression = functionDeclaration.replace(/\s+/g, ' ').substring(0, 100);
+      const messageLines = [
+        'Runtime.callFunctionOn exception',
+        `Expression: ${elidedExpression}\n---- (elided)`,
+        !ex.stackTrace ? `Parse error at: ${ex.lineNumber + 1}:${ex.columnNumber + 1}` : null,
+        ex.exception?.description || ex.text,
+      ].filter(Boolean);
+      const evaluationError = new Error(messageLines.join('\n'));
+      return Promise.reject(evaluationError);
+    }
+
+    if (response.result === undefined) {
+      return Promise.reject(
+        new Error('Runtime.callFunctionOn response did not contain a "result" object'));
+    }
+    const value = response.result.value;
+    if (value?.__failedInBrowser) {
+      return Promise.reject(Object.assign(new Error(), value));
+    } else {
+      return value;
+    }
+  }
+
   /**
    * Cache native functions/objects inside window so we are sure polyfills do not overwrite the
    * native implementations when the page loads.
@@ -279,7 +361,10 @@ class ExecutionContext {
    * @return {string}
    */
   static serializeDeps(deps) {
-    deps = [pageFunctions.esbuildFunctionWrapperString, ...deps || []];
+    if (!deps) {
+      return '';
+    }
+
     return deps.map(dep => {
       if (typeof dep === 'function') {
         // esbuild will change the actual function name (ie. function actualName() {})

package/core/gather/driver/storage.js

@@ -7,6 +7,7 @@
 import log from 'lighthouse-logger';
 
 import * as i18n from '../../lib/i18n/i18n.js';
+import {Sentry} from '../../lib/sentry.js';
 
 /* eslint-disable max-len */
 const UIStrings = {
@@ -81,6 +82,18 @@ async function getImportantStorageWarning(session, url) {
   const usageData = await session.sendCommand('Storage.getUsageAndQuota', {
     origin: url,
   });
+
+  // According to the types, this should never happen. But we've gotten an error
+  // report that it does.
+  // https://github.com/GoogleChrome/lighthouse/issues/17011
+  if (!usageData || !usageData.usageBreakdown) {
+    const err = new Error(`missing usageData: ${JSON.stringify(usageData)}`);
+    Sentry.captureException(err, {
+      level: 'error',
+    });
+    return;
+  }
+
   /** @type {Record<string, string>} */
   const storageTypeNames = {
     local_storage: 'Local Storage',

package/core/gather/driver.d.ts

@@ -13,7 +13,7 @@ export class Driver implements LH.Gatherer.Driver {
     _executionContext: ExecutionContext | undefined;
     /** @type {Fetcher|undefined} */
     _fetcher: Fetcher | undefined;
-    defaultSession: import("../../types/gatherer.js").default.ProtocolSession;
+    defaultSession: import("../../types.js").Gatherer.ProtocolSession;
     /** @return {LH.Gatherer.Driver['executionContext']} */
     get executionContext(): LH.Gatherer.Driver["executionContext"];
     get fetcher(): any;

package/core/gather/gatherers/accessibility.js

@@ -84,6 +84,7 @@ async function runA11yChecks() {
       'table-fake-caption': {enabled: true},
       'target-size': {enabled: true},
       'td-has-header': {enabled: true},
+      'aria-tab-name': {enabled: false}, // TODO: consider adding.
     },
   });
 

package/core/gather/gatherers/trace-elements.d.ts

@@ -67,9 +67,12 @@ declare class TraceElements extends BaseGatherer {
     stopInstrumentation(context: LH.Gatherer.Context): Promise<void>;
     /**
      * @param {LH.Gatherer.ProtocolSession} session
+     * @param {LH.Gatherer.Driver['executionContext']} executionContext
      * @param {number} backendNodeId
      */
-    getNodeDetails(session: LH.Gatherer.ProtocolSession, backendNodeId: number): Promise<import("devtools-protocol").Protocol.Runtime.CallFunctionOnResponse | null>;
+    getNodeDetails(session: LH.Gatherer.ProtocolSession, executionContext: LH.Gatherer.Driver["executionContext"], backendNodeId: number): Promise<{
+        node: any;
+    } | null | undefined>;
     /**
      * @param {LH.Gatherer.Context<'Trace'|'SourceMaps'>} context
      * @return {Promise<LH.Artifacts.TraceElement[]>}

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

@@ -20,7 +20,6 @@ import Trace from './trace.js';
 import {ProcessedTrace} from '../../computed/processed-trace.js';
 import {Responsiveness} from '../../computed/metrics/responsiveness.js';
 import {CumulativeLayoutShift} from '../../computed/metrics/cumulative-layout-shift.js';
-import {ExecutionContext} from '../driver/execution-context.js';
 import {TraceEngineResult} from '../../computed/trace-engine-result.js';
 import SourceMaps from './source-maps.js';
 
@@ -29,14 +28,14 @@ import SourceMaps from './source-maps.js';
 const MAX_LAYOUT_SHIFTS = 15;
 
 /**
- * @this {HTMLElement}
+ * @param {Element | ShadowRoot | Text} node
  */
 /* c8 ignore start */
-function getNodeDetailsData() {
-  /** @type {Element|null} */
-  let elem = this.nodeType === document.ELEMENT_NODE ? this : this.parentElement;
-  if (!elem && this instanceof ShadowRoot) {
-    elem = this.host;
+function getNodeDetailsData(node) {
+  /** @type {Element | ShadowRoot | Text | null} */
+  let elem = node.nodeType === document.ELEMENT_NODE ? node : node.parentElement;
+  if (!elem && node instanceof ShadowRoot) {
+    elem = node.host;
   }
 
   let traceElement;
@@ -292,26 +291,22 @@ class TraceElements extends BaseGatherer {
 
   /**
    * @param {LH.Gatherer.ProtocolSession} session
+   * @param {LH.Gatherer.Driver['executionContext']} executionContext
    * @param {number} backendNodeId
    */
-  async getNodeDetails(session, backendNodeId) {
+  async getNodeDetails(session, executionContext, backendNodeId) {
     try {
       const objectId = await resolveNodeIdToObjectId(session, backendNodeId);
       if (!objectId) return null;
 
-      const deps = ExecutionContext.serializeDeps([
-        pageFunctions.getNodeDetails,
+      return await executionContext.evaluateOnObject(
         getNodeDetailsData,
-      ]);
-      return await session.sendCommand('Runtime.callFunctionOn', {
-        objectId,
-        functionDeclaration: `function () {
-          ${deps}
-          return getNodeDetailsData.call(this);
-        }`,
-        returnByValue: true,
-        awaitPromise: true,
-      });
+        {
+          objectId,
+          args: [],
+          deps: [pageFunctions.getNodeDetails],
+        }
+      );
     } catch (err) {
       Sentry.captureException(err, {
         tags: {gatherer: 'TraceElements'},
@@ -346,29 +341,30 @@ class TraceElements extends BaseGatherer {
       trace, traceEngineResult, context);
     const animatedElementData = await this.getAnimatedElements(mainThreadEvents);
 
-    /** @type {Map<string, TraceElementData[]>} */
+    /** @type {Map<LH.Artifacts.TraceElement['traceEventType'], TraceElementData[]>} */
     const backendNodeDataMap = new Map([
       ['trace-engine', traceEngineData],
       ['layout-shift', shiftsData],
       ['animation', animatedElementData],
     ]);
 
-    /** @type {Map<number, LH.Crdp.Runtime.CallFunctionOnResponse | null>} */
-    const callFunctionOnCache = new Map();
+    /** @type {Map<number, {node: LH.Artifacts.NodeDetails} | null>} */
+    const evaluateOnObjectCache = new Map();
     /** @type {LH.Artifacts.TraceElement[]} */
     const traceElements = [];
     for (const [traceEventType, backendNodeData] of backendNodeDataMap) {
       for (let i = 0; i < backendNodeData.length; i++) {
         const backendNodeId = backendNodeData[i].nodeId;
-        let response = callFunctionOnCache.get(backendNodeId);
+        let response = evaluateOnObjectCache.get(backendNodeId);
         if (response === undefined) {
-          response = await this.getNodeDetails(session, backendNodeId);
-          callFunctionOnCache.set(backendNodeId, response);
+          response = await this.getNodeDetails(
+            session, context.driver.executionContext, backendNodeId) || null;
+          evaluateOnObjectCache.set(backendNodeId, response);
         }
 
-        if (response?.result?.value) {
+        if (response?.node) {
           traceElements.push({
-            ...response.result.value,
+            ...response,
             traceEventType,
             animations: backendNodeData[i].animations,
             nodeId: backendNodeId,

package/core/gather/gatherers/webmcp-schema.js

@@ -7,7 +7,6 @@
 import BaseGatherer from '../base-gatherer.js';
 import {resolveNodeIdToObjectId} from '../driver/dom.js';
 import {pageFunctions} from '../../lib/page-functions.js';
-import {ExecutionContext} from '../driver/execution-context.js';
 
 class WebMcpSchemaIssues extends BaseGatherer {
   /** @type {LH.Gatherer.GathererMeta} */
@@ -68,27 +67,21 @@ class WebMcpSchemaIssues extends BaseGatherer {
   async getArtifact(context) {
     const session = context.driver.defaultSession;
 
-    const deps = ExecutionContext.serializeDeps([
-      pageFunctions.getNodeDetails,
-    ]);
-
     const promises = this._issues.map(async (issue) => {
       const processedIssue = {...issue};
       if (issue.violatingNodeId) {
         try {
           const objectId = await resolveNodeIdToObjectId(session, issue.violatingNodeId);
           if (objectId) {
-            const response = await session.sendCommand('Runtime.callFunctionOn', {
-              objectId,
-              functionDeclaration: `function () {
-                ${deps}
-                return getNodeDetails(this);
-              }`,
-              returnByValue: true,
-              awaitPromise: true,
-            });
-            if (response && response.result && response.result.value) {
-              processedIssue.nodeDetails = response.result.value;
+            const nodeDetails = await context.driver.executionContext.evaluateOnObject(
+              pageFunctions.getNodeDetails,
+              {
+                objectId,
+                args: [],
+              }
+            );
+            if (nodeDetails) {
+              processedIssue.nodeDetails = nodeDetails;
             }
           }
         } catch (err) {

package/core/gather/gatherers/webmcp.d.ts

@@ -48,6 +48,11 @@ declare class WebMCP extends BaseGatherer {
      * @param {LH.Gatherer.Context} passContext
      */
     stopInstrumentation(passContext: LH.Gatherer.Context): Promise<void>;
+    /**
+     * @param {LH.Gatherer.Context} context
+     * @param {WebMCPTool} tool
+     */
+    _tryResolveToolNodeDetails(context: LH.Gatherer.Context, tool: WebMCPTool): Promise<void>;
     /**
      * @param {LH.Gatherer.Context} context
      * @return {Promise<LH.Artifacts['WebMCP']>}

package/core/gather/gatherers/webmcp.js

@@ -11,7 +11,6 @@
 import BaseGatherer from '../base-gatherer.js';
 import {resolveNodeIdToObjectId} from '../driver/dom.js';
 import {pageFunctions} from '../../lib/page-functions.js';
-import {ExecutionContext} from '../driver/execution-context.js';
 
 /**
  * @typedef {Object} WebMCPTool
@@ -99,6 +98,37 @@ class WebMCP extends BaseGatherer {
     }
   }
 
+  /**
+   * @param {LH.Gatherer.Context} context
+   * @param {WebMCPTool} tool
+   */
+  async _tryResolveToolNodeDetails(context, tool) {
+    if (!tool.backendNodeId) {
+      return;
+    }
+
+    const session = context.driver.defaultSession;
+
+    try {
+      const objectId = await resolveNodeIdToObjectId(session, tool.backendNodeId);
+      if (!objectId) {
+        return;
+      }
+
+      const nodeDetails = await context.driver.executionContext.evaluateOnObject(
+        pageFunctions.getNodeDetails, {
+          objectId,
+          args: [],
+        }
+      );
+      if (nodeDetails) {
+        tool.nodeDetails = nodeDetails;
+      }
+    } catch (err) {
+      // Ignore error
+    }
+  }
+
   /**
    * @param {LH.Gatherer.Context} context
    * @return {Promise<LH.Artifacts['WebMCP']>}
@@ -113,9 +143,8 @@ class WebMCP extends BaseGatherer {
       return {isSupported: false, tools: []};
     }
 
-    const session = context.driver.defaultSession;
-
     // Remove duplicates based on name, keeping the latest occurrence.
+    /** @type {Map<string, WebMCPTool>} */
     const toolMap = new Map();
     for (const tool of this._tools) {
       toolMap.set(tool.name, tool);
@@ -123,32 +152,10 @@ class WebMCP extends BaseGatherer {
 
     const resolvedTools = [];
     for (const tool of toolMap.values()) {
-      if (tool.backendNodeId) {
-        try {
-          const objectId = await resolveNodeIdToObjectId(session, tool.backendNodeId);
-          if (objectId) {
-            const deps = ExecutionContext.serializeDeps([
-              pageFunctions.getNodeDetails,
-            ]);
-            const response = await session.sendCommand('Runtime.callFunctionOn', {
-              objectId,
-              functionDeclaration: `function () {
-                ${deps}
-                return getNodeDetails(this);
-              }`,
-              returnByValue: true,
-              awaitPromise: true,
-            });
-            if (response && response.result && response.result.value) {
-              tool.nodeDetails = response.result.value;
-            }
-          }
-        } catch (err) {
-          // Ignore error
-        }
-      }
+      await this._tryResolveToolNodeDetails(context, tool);
       resolvedTools.push(tool);
     }
+
     return {
       isSupported: true,
       tools: resolvedTools,