lighthouse 9.6.8 → 10.0.0

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

@@ -0,0 +1,258 @@
+/**
+ * @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.
+ */
+
+/* globals window getBoundingClientRect requestAnimationFrame */
+
+import FRGatherer from '../base-gatherer.js';
+import * as emulation from '../../lib/emulation.js';
+import {pageFunctions} from '../../lib/page-functions.js';
+import {NetworkMonitor} from '../driver/network-monitor.js';
+import {waitForNetworkIdle} from '../driver/wait-for-condition.js';
+
+// JPEG quality setting
+// Exploration and examples of reports using different quality settings: https://docs.google.com/document/d/1ZSffucIca9XDW2eEwfoevrk-OTl7WQFeMf0CgeJAA8M/edit#
+// Note: this analysis was done for JPEG, but now we use WEBP.
+const FULL_PAGE_SCREENSHOT_QUALITY = 30;
+
+// https://developers.google.com/speed/webp/faq#what_is_the_maximum_size_a_webp_image_can_be
+const MAX_WEBP_SIZE = 16383;
+
+/**
+ * @template {string} S
+ * @param {S} str
+ */
+function kebabCaseToCamelCase(str) {
+  return /** @type {LH.Util.KebabToCamelCase<S>} */ (
+    str.replace(/(-\w)/g, m => m[1].toUpperCase())
+  );
+}
+
+/* c8 ignore start */
+
+function getObservedDeviceMetrics() {
+  // Convert the Web API's kebab case (landscape-primary) to camel case (landscapePrimary).
+  const screenOrientationType = kebabCaseToCamelCase(window.screen.orientation.type);
+  return {
+    width: window.outerWidth,
+    height: window.outerHeight,
+    screenOrientation: {
+      type: screenOrientationType,
+      angle: window.screen.orientation.angle,
+    },
+    deviceScaleFactor: window.devicePixelRatio,
+  };
+}
+
+/**
+ * The screenshot dimensions are sized to `window.outerHeight` / `window.outerWidth`,
+ * however the bounding boxes of the elements are relative to `window.innerHeight` / `window.innerWidth`.
+ */
+function getScreenshotAreaSize() {
+  return {
+    width: window.innerWidth,
+    height: window.innerHeight,
+  };
+}
+
+function waitForDoubleRaf() {
+  return new Promise((resolve) => {
+    requestAnimationFrame(() => requestAnimationFrame(resolve));
+  });
+}
+
+/* c8 ignore stop */
+
+class FullPageScreenshot extends FRGatherer {
+  /** @type {LH.Gatherer.GathererMeta} */
+  meta = {
+    supportedModes: ['snapshot', 'timespan', 'navigation'],
+  };
+
+  /**
+   * @param {LH.Gatherer.FRTransitionalContext} context
+   * @param {{height: number, width: number, mobile: boolean}} deviceMetrics
+   */
+  async _resizeViewport(context, deviceMetrics) {
+    const session = context.driver.defaultSession;
+    const metrics = await session.sendCommand('Page.getLayoutMetrics');
+
+    // Height should be as tall as the content.
+    // Scale the emulated height to reach the content height.
+    const fullHeight = Math.round(
+      deviceMetrics.height *
+      metrics.cssContentSize.height /
+      metrics.cssLayoutViewport.clientHeight
+    );
+    const height = Math.min(fullHeight, MAX_WEBP_SIZE);
+
+    // Setup network monitor before we change the viewport.
+    const networkMonitor = new NetworkMonitor(context.driver.targetManager);
+    const waitForNetworkIdleResult = waitForNetworkIdle(session, networkMonitor, {
+      pretendDCLAlreadyFired: true,
+      networkQuietThresholdMs: 1000,
+      busyEvent: 'network-critical-busy',
+      idleEvent: 'network-critical-idle',
+      isIdle: recorder => recorder.isCriticalIdle(),
+    });
+    await networkMonitor.enable();
+
+    await session.sendCommand('Emulation.setDeviceMetricsOverride', {
+      mobile: deviceMetrics.mobile,
+      deviceScaleFactor: 1,
+      height,
+      width: 0, // Leave width unchanged
+    });
+
+    // Now that the viewport is taller, give the page some time to fetch new resources that
+    // are now in view.
+    await Promise.race([
+      new Promise(resolve => setTimeout(resolve, 1000 * 5)),
+      waitForNetworkIdleResult.promise,
+    ]);
+    waitForNetworkIdleResult.cancel();
+    await networkMonitor.disable();
+
+    // Now that new resources are (probably) fetched, wait long enough for a layout.
+    await context.driver.executionContext.evaluate(waitForDoubleRaf, {args: []});
+  }
+
+  /**
+   * @param {LH.Gatherer.FRTransitionalContext} context
+   * @return {Promise<LH.Result.FullPageScreenshot['screenshot']>}
+   */
+  async _takeScreenshot(context) {
+    const result = await context.driver.defaultSession.sendCommand('Page.captureScreenshot', {
+      format: 'webp',
+      quality: FULL_PAGE_SCREENSHOT_QUALITY,
+    });
+    const data = 'data:image/webp;base64,' + result.data;
+
+    const screenshotAreaSize =
+      await context.driver.executionContext.evaluate(getScreenshotAreaSize, {
+        args: [],
+        useIsolation: true,
+      });
+
+    return {
+      data,
+      width: screenshotAreaSize.width,
+      height: screenshotAreaSize.height,
+    };
+  }
+
+  /**
+   * Gatherers can collect details about DOM nodes, including their position on the page.
+   * Layout shifts occuring after a gatherer runs can cause these positions to be incorrect,
+   * resulting in a poor experience for element screenshots.
+   * `getNodeDetails` maintains a collection of DOM objects in the page, which we can iterate
+   * to re-collect the bounding client rectangle.
+   * @see pageFunctions.getNodeDetails
+   * @param {LH.Gatherer.FRTransitionalContext} context
+   * @return {Promise<LH.Result.FullPageScreenshot['nodes']>}
+   */
+  async _resolveNodes(context) {
+    function resolveNodes() {
+      /** @type {LH.Result.FullPageScreenshot['nodes']} */
+      const nodes = {};
+      if (!window.__lighthouseNodesDontTouchOrAllVarianceGoesAway) return nodes;
+
+      const lhIdToElements = window.__lighthouseNodesDontTouchOrAllVarianceGoesAway;
+      for (const [node, id] of lhIdToElements.entries()) {
+        // @ts-expect-error - getBoundingClientRect put into scope via stringification
+        const rect = getBoundingClientRect(node);
+        nodes[id] = rect;
+      }
+
+      return nodes;
+    }
+
+    /**
+     * @param {{useIsolation: boolean}} _
+     */
+    function resolveNodesInPage({useIsolation}) {
+      return context.driver.executionContext.evaluate(resolveNodes, {
+        args: [],
+        useIsolation,
+        deps: [pageFunctions.getBoundingClientRect],
+      });
+    }
+
+    // Collect nodes with the page context (`useIsolation: false`) and with our own, reused
+    // context (`useIsolation: true`). Gatherers use both modes when collecting node details,
+    // so we must do the same here too.
+    const pageContextResult = await resolveNodesInPage({useIsolation: false});
+    const isolatedContextResult = await resolveNodesInPage({useIsolation: true});
+    return {...pageContextResult, ...isolatedContextResult};
+  }
+
+  /**
+   * @param {LH.Gatherer.FRTransitionalContext} context
+   * @return {Promise<LH.Artifacts['FullPageScreenshot']>}
+   */
+  async getArtifact(context) {
+    const session = context.driver.defaultSession;
+    const executionContext = context.driver.executionContext;
+    const settings = context.settings;
+    const lighthouseControlsEmulation = !settings.screenEmulation.disabled;
+
+    // Make a copy so we don't modify the config settings.
+    /** @type {{width: number, height: number, deviceScaleFactor: number, mobile: boolean}} */
+    const deviceMetrics = {...settings.screenEmulation};
+
+    try {
+      if (!settings.usePassiveGathering) {
+        // In case some other program is controlling emulation, remember what the device looks like now and reset after gatherer is done.
+        // If we're gathering with mobile screenEmulation on (overlay scrollbars, etc), continue to use that for this screenshot.
+        if (!lighthouseControlsEmulation) {
+          const observedDeviceMetrics = await executionContext.evaluate(getObservedDeviceMetrics, {
+            args: [],
+            useIsolation: true,
+            deps: [kebabCaseToCamelCase],
+          });
+          deviceMetrics.height = observedDeviceMetrics.height;
+          deviceMetrics.width = observedDeviceMetrics.width;
+          deviceMetrics.deviceScaleFactor = observedDeviceMetrics.deviceScaleFactor;
+          // If screen emulation is disabled, use formFactor to determine if we are on mobile.
+          deviceMetrics.mobile = settings.formFactor === 'mobile';
+        }
+
+        await this._resizeViewport(context, deviceMetrics);
+      }
+
+      // Issue both commands at once, to reduce the chance that the page changes between capturing
+      // a screenshot and resolving the nodes. https://github.com/GoogleChrome/lighthouse/pull/14763
+      const [screenshot, nodes] =
+        await Promise.all([this._takeScreenshot(context), this._resolveNodes(context)]);
+      return {
+        screenshot,
+        nodes,
+      };
+    } finally {
+      if (!settings.usePassiveGathering) {
+        // Revert resized page.
+        if (lighthouseControlsEmulation) {
+          await emulation.emulate(session, settings);
+        } else {
+          // Best effort to reset emulation to what it was.
+          // https://github.com/GoogleChrome/lighthouse/pull/10716#discussion_r428970681
+          // TODO: seems like this would be brittle. Should at least work for devtools, but what
+          // about scripted puppeteer usages? Better to introduce a "setEmulation" callback
+          // in the LH runner api, which for ex. puppeteer consumers would setup puppeteer emulation,
+          // and then just call that to reset?
+          // https://github.com/GoogleChrome/lighthouse/issues/11122
+          await session.sendCommand('Emulation.setDeviceMetricsOverride', {
+            mobile: deviceMetrics.mobile,
+            deviceScaleFactor: deviceMetrics.deviceScaleFactor,
+            height: deviceMetrics.height,
+            width: 0, // Leave width unchanged
+          });
+        }
+      }
+    }
+  }
+}
+
+export default FullPageScreenshot;

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

@@ -0,0 +1,46 @@
+/**
+ * @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.
+ */
+/**
+ * Base class for all gatherers; defines pass lifecycle methods. The artifact
+ * from the gatherer is the last not-undefined value returned by a lifecycle
+ * method. All methods can return the artifact value directly or return a
+ * Promise that resolves to that value.
+ *
+ * If an Error is thrown (or a Promise that rejects on an Error),
+ * the runner will treat it as an error internal to the gatherer and
+ * continue execution of any remaining gatherers.
+ *
+ * @implements {LH.Gatherer.GathererInstance}
+ */
+export class Gatherer implements LH.Gatherer.GathererInstance {
+    /**
+     * @return {keyof LH.GathererArtifacts}
+     */
+    get name(): keyof import("../..").GathererArtifacts;
+    /**
+     * Called before navigation to target url.
+     * @param {LH.Gatherer.PassContext} passContext
+     * @return {LH.Gatherer.PhaseResult}
+     */
+    beforePass(passContext: LH.Gatherer.PassContext): LH.Gatherer.PhaseResult;
+    /**
+     * Called after target page is loaded. If a trace is enabled for this pass,
+     * the trace is still being recorded.
+     * @param {LH.Gatherer.PassContext} passContext
+     * @return {LH.Gatherer.PhaseResult}
+     */
+    pass(passContext: LH.Gatherer.PassContext): LH.Gatherer.PhaseResult;
+    /**
+     * Called after target page is loaded, all gatherer `pass` methods have been
+     * executed, and — if generated in this pass — the trace is ended. The trace
+     * and record of network activity are provided in `loadData`.
+     * @param {LH.Gatherer.PassContext} passContext
+     * @param {LH.Gatherer.LoadData} loadData
+     * @return {LH.Gatherer.PhaseResult}
+     */
+    afterPass(passContext: LH.Gatherer.PassContext, loadData: LH.Gatherer.LoadData): LH.Gatherer.PhaseResult;
+}
+//# sourceMappingURL=gatherer.d.ts.map

package/core/gather/gatherers/gatherer.js

@@ -0,0 +1,58 @@
+/**
+ * @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.
+ */
+
+/**
+ * Base class for all gatherers; defines pass lifecycle methods. The artifact
+ * from the gatherer is the last not-undefined value returned by a lifecycle
+ * method. All methods can return the artifact value directly or return a
+ * Promise that resolves to that value.
+ *
+ * If an Error is thrown (or a Promise that rejects on an Error),
+ * the runner will treat it as an error internal to the gatherer and
+ * continue execution of any remaining gatherers.
+ *
+ * @implements {LH.Gatherer.GathererInstance}
+ */
+class Gatherer {
+  /**
+   * @return {keyof LH.GathererArtifacts}
+   */
+  get name() {
+    // @ts-expect-error - assume that class name has been added to LH.GathererArtifacts.
+    return this.constructor.name;
+  }
+
+  /* eslint-disable no-unused-vars */
+
+  /**
+   * Called before navigation to target url.
+   * @param {LH.Gatherer.PassContext} passContext
+   * @return {LH.Gatherer.PhaseResult}
+   */
+  beforePass(passContext) { }
+
+  /**
+   * Called after target page is loaded. If a trace is enabled for this pass,
+   * the trace is still being recorded.
+   * @param {LH.Gatherer.PassContext} passContext
+   * @return {LH.Gatherer.PhaseResult}
+   */
+  pass(passContext) { }
+
+  /**
+   * Called after target page is loaded, all gatherer `pass` methods have been
+   * executed, and — if generated in this pass — the trace is ended. The trace
+   * and record of network activity are provided in `loadData`.
+   * @param {LH.Gatherer.PassContext} passContext
+   * @param {LH.Gatherer.LoadData} loadData
+   * @return {LH.Gatherer.PhaseResult}
+   */
+  afterPass(passContext, loadData) { }
+
+  /* eslint-enable no-unused-vars */
+}
+
+export {Gatherer};

package/core/gather/gatherers/global-listeners.d.ts

@@ -0,0 +1,27 @@
+export default GlobalListeners;
+declare class GlobalListeners extends FRGatherer {
+    /**
+     * @param {LH.Crdp.DOMDebugger.EventListener} listener
+     * @return {listener is {type: 'pagehide'|'unload'|'visibilitychange'} & LH.Crdp.DOMDebugger.EventListener}
+     */
+    static _filterForAllowlistedTypes(listener: LH.Crdp.DOMDebugger.EventListener): listener is {
+        type: 'pagehide' | 'unload' | 'visibilitychange';
+    } & import("devtools-protocol").Protocol.DOMDebugger.EventListener;
+    /**
+     * @param { LH.Artifacts.GlobalListener } listener
+     * @return { string }
+     */
+    getListenerIndentifier(listener: LH.Artifacts.GlobalListener): string;
+    /**
+     * @param { LH.Artifacts['GlobalListeners'] } listeners
+     * @return { LH.Artifacts['GlobalListeners'] }
+     */
+    dedupeListeners(listeners: LH.Artifacts['GlobalListeners']): LH.Artifacts['GlobalListeners'];
+    /**
+     * @param {LH.Gatherer.FRTransitionalContext} passContext
+     * @return {Promise<LH.Artifacts['GlobalListeners']>}
+     */
+    getArtifact(passContext: LH.Gatherer.FRTransitionalContext): Promise<LH.Artifacts['GlobalListeners']>;
+}
+import FRGatherer from "../base-gatherer.js";
+//# sourceMappingURL=global-listeners.d.ts.map

package/core/gather/gatherers/global-listeners.js

@@ -0,0 +1,91 @@
+/**
+ * @license Copyright 2020 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.
+ */
+
+/**
+ * @fileoverview
+ * A gatherer to collect information about the event listeners registered on the
+ * global object. For now, the scope is narrowed to events that occur on and
+ * around page unload, but this can be expanded in the future.
+ */
+
+import FRGatherer from '../base-gatherer.js';
+
+class GlobalListeners extends FRGatherer {
+  /** @type {LH.Gatherer.GathererMeta} */
+  meta = {
+    supportedModes: ['snapshot', 'timespan', 'navigation'],
+  };
+
+  /**
+   * @param {LH.Crdp.DOMDebugger.EventListener} listener
+   * @return {listener is {type: 'pagehide'|'unload'|'visibilitychange'} & LH.Crdp.DOMDebugger.EventListener}
+   */
+  static _filterForAllowlistedTypes(listener) {
+    return listener.type === 'pagehide' ||
+      listener.type === 'unload' ||
+      listener.type === 'visibilitychange';
+  }
+
+  /**
+   * @param { LH.Artifacts.GlobalListener } listener
+   * @return { string }
+   */
+  getListenerIndentifier(listener) {
+    return `${listener.type}:${listener.scriptId}:${listener.columnNumber}:${listener.lineNumber}`;
+  }
+
+  /**
+   * @param { LH.Artifacts['GlobalListeners'] } listeners
+   * @return { LH.Artifacts['GlobalListeners'] }
+   */
+  dedupeListeners(listeners) {
+    const seenListeners = new Set();
+    return listeners.filter(listener => {
+      const id = this.getListenerIndentifier(listener);
+      if (!seenListeners.has(id)) {
+        seenListeners.add(id);
+        return true;
+      } else {
+        return false;
+      }
+    });
+  }
+
+  /**
+   * @param {LH.Gatherer.FRTransitionalContext} passContext
+   * @return {Promise<LH.Artifacts['GlobalListeners']>}
+   */
+  async getArtifact(passContext) {
+    const session = passContext.driver.defaultSession;
+
+    // Get a RemoteObject handle to `window`.
+    const {result: {objectId}} = await session.sendCommand('Runtime.evaluate', {
+      expression: 'window',
+      returnByValue: false,
+    });
+    if (!objectId) {
+      throw new Error('Error fetching information about the global object');
+    }
+
+    // And get all its listeners of interest.
+    const {listeners} = await session.sendCommand('DOMDebugger.getEventListeners', {objectId});
+    const filteredListeners = listeners.filter(GlobalListeners._filterForAllowlistedTypes)
+    .map(listener => {
+      const {type, scriptId, lineNumber, columnNumber} = listener;
+      return {
+        type,
+        scriptId,
+        lineNumber,
+        columnNumber,
+      };
+    });
+
+    // Dedupe listeners with same underlying data.
+    return this.dedupeListeners(filteredListeners);
+  }
+}
+
+export default GlobalListeners;

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

@@ -0,0 +1,11 @@
+export default IFrameElements;
+declare class IFrameElements extends FRGatherer {
+    /**
+     * @param {LH.Gatherer.FRTransitionalContext} passContext
+     * @return {Promise<LH.Artifacts['IFrameElements']>}
+     * @override
+     */
+    override getArtifact(passContext: LH.Gatherer.FRTransitionalContext): Promise<LH.Artifacts['IFrameElements']>;
+}
+import FRGatherer from "../base-gatherer.js";
+//# sourceMappingURL=iframe-elements.d.ts.map

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

@@ -0,0 +1,67 @@
+/**
+ * @license Copyright 2019 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.
+ */
+
+/* global getNodeDetails */
+
+import FRGatherer from '../base-gatherer.js';
+import {pageFunctions} from '../../lib/page-functions.js';
+
+/* eslint-env browser, node */
+
+/**
+ * @return {LH.Artifacts['IFrameElements']}
+ */
+/* c8 ignore start */
+function collectIFrameElements() {
+  const realBoundingClientRect = window.__HTMLElementBoundingClientRect ||
+    window.HTMLElement.prototype.getBoundingClientRect;
+
+  // @ts-expect-error - put into scope via stringification
+  const iFrameElements = getElementsInDocument('iframe'); // eslint-disable-line no-undef
+  return iFrameElements.map(/** @param {HTMLIFrameElement} node */ (node) => {
+    const clientRect = realBoundingClientRect.call(node);
+    const {top, bottom, left, right, width, height} = clientRect;
+    return {
+      id: node.id,
+      src: node.src,
+      clientRect: {top, bottom, left, right, width, height},
+      // @ts-expect-error - put into scope via stringification
+      isPositionFixed: isPositionFixed(node), // eslint-disable-line no-undef
+      // @ts-expect-error - getNodeDetails put into scope via stringification
+      node: getNodeDetails(node),
+    };
+  });
+}
+/* c8 ignore stop */
+
+class IFrameElements extends FRGatherer {
+  /** @type {LH.Gatherer.GathererMeta} */
+  meta = {
+    supportedModes: ['snapshot', 'navigation'],
+  };
+
+  /**
+   * @param {LH.Gatherer.FRTransitionalContext} passContext
+   * @return {Promise<LH.Artifacts['IFrameElements']>}
+   * @override
+   */
+  async getArtifact(passContext) {
+    const driver = passContext.driver;
+
+    const iframeElements = await driver.executionContext.evaluate(collectIFrameElements, {
+      args: [],
+      useIsolation: true,
+      deps: [
+        pageFunctions.getElementsInDocument,
+        pageFunctions.isPositionFixed,
+        pageFunctions.getNodeDetails,
+      ],
+    });
+    return iframeElements;
+  }
+}
+
+export default IFrameElements;

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

@@ -0,0 +1,35 @@
+export default ImageElements;
+declare class ImageElements extends FRGatherer {
+    /** @type {Map<string, {naturalWidth: number, naturalHeight: number}>} */
+    _naturalSizeCache: Map<string, {
+        naturalWidth: number;
+        naturalHeight: number;
+    }>;
+    /**
+     * @param {LH.Gatherer.FRTransitionalDriver} driver
+     * @param {LH.Artifacts.ImageElement} element
+     */
+    fetchElementWithSizeInformation(driver: LH.Gatherer.FRTransitionalDriver, element: LH.Artifacts.ImageElement): Promise<void>;
+    /**
+     * Images might be sized via CSS. In order to compute unsized-images failures, we need to collect
+     * matched CSS rules to see if this is the case.
+     * @url http://go/dwoqq (googlers only)
+     * @param {LH.Gatherer.FRProtocolSession} session
+     * @param {string} devtoolsNodePath
+     * @param {LH.Artifacts.ImageElement} element
+     */
+    fetchSourceRules(session: LH.Gatherer.FRProtocolSession, devtoolsNodePath: string, element: LH.Artifacts.ImageElement): Promise<void>;
+    /**
+     *
+     * @param {LH.Gatherer.FRTransitionalDriver} driver
+     * @param {LH.Artifacts.ImageElement[]} elements
+     */
+    collectExtraDetails(driver: LH.Gatherer.FRTransitionalDriver, elements: LH.Artifacts.ImageElement[]): Promise<void>;
+    /**
+     * @param {LH.Gatherer.FRTransitionalContext} context
+     * @return {Promise<LH.Artifacts['ImageElements']>}
+     */
+    getArtifact(context: LH.Gatherer.FRTransitionalContext): Promise<LH.Artifacts['ImageElements']>;
+}
+import FRGatherer from "../base-gatherer.js";
+//# sourceMappingURL=image-elements.d.ts.map