lighthouse 9.5.0-dev.20220621 → 9.5.0-dev.20220624

package/lighthouse-core/fraggle-rock/gather/session.js

@@ -5,31 +5,45 @@
  */
 'use strict';
 
+const EventEmitter = require('events').EventEmitter;
 const LHError = require('../../lib/lh-error.js');
 
 // Controls how long to wait for a response after sending a DevTools protocol command.
 const DEFAULT_PROTOCOL_TIMEOUT = 30000;
 
+/** @typedef {LH.Protocol.StrictEventEmitterClass<LH.CrdpEvents>} CrdpEventMessageEmitter */
+const CrdpEventEmitter = /** @type {CrdpEventMessageEmitter} */ (EventEmitter);
+
 /** @implements {LH.Gatherer.FRProtocolSession} */
-class ProtocolSession {
+class ProtocolSession extends CrdpEventEmitter {
   /**
    * @param {LH.Puppeteer.CDPSession} cdpSession
    */
   constructor(cdpSession) {
+    super();
+
     this._cdpSession = cdpSession;
     /** @type {LH.Crdp.Target.TargetInfo|undefined} */
     this._targetInfo = undefined;
     /** @type {number|undefined} */
     this._nextProtocolTimeout = undefined;
-    /** @type {WeakMap<any, any>} */
-    this._callbackMap = new WeakMap();
+
+    this._handleProtocolEvent = this._handleProtocolEvent.bind(this);
+    this._cdpSession.on('*', this._handleProtocolEvent);
+  }
+
+  id() {
+    return this._cdpSession.id();
   }
 
-  sessionId() {
-    return this._targetInfo && this._targetInfo.type === 'iframe' ?
-      // TODO: use this._session.id() for real session id.
-      this._targetInfo.targetId :
-      undefined;
+  /**
+   * Re-emit protocol events from the underlying CDPSession.
+   * @template {keyof LH.CrdpEvents} E
+   * @param {E} method
+   * @param {LH.CrdpEvents[E]} params
+   */
+  _handleProtocolEvent(method, ...params) {
+    this.emit(method, ...params);
   }
 
   /** @param {LH.Crdp.Target.TargetInfo} targetInfo */
@@ -58,64 +72,6 @@ class ProtocolSession {
     this._nextProtocolTimeout = ms;
   }
 
-  /**
-   * Bind listeners for protocol events.
-   * @template {keyof LH.CrdpEvents} E
-   * @param {E} eventName
-   * @param {(...args: LH.CrdpEvents[E]) => void} callback
-   */
-  on(eventName, callback) {
-    this._cdpSession.on(eventName, /** @type {*} */ (callback));
-  }
-
-  /**
-   * Bind listeners for protocol events.
-   * @template {keyof LH.CrdpEvents} E
-   * @param {E} eventName
-   * @param {(...args: LH.CrdpEvents[E]) => void} callback
-   */
-  once(eventName, callback) {
-    this._cdpSession.once(eventName, /** @type {*} */ (callback));
-  }
-
-  /**
-   * Bind to puppeteer's '*' event that fires for *any* protocol event,
-   * and wrap it with data about the protocol message instead of just the event.
-   * @param {(payload: LH.Protocol.RawEventMessage) => void} callback
-   */
-  addProtocolMessageListener(callback) {
-    /**
-     * @param {any} method
-     * @param {any} event
-     */
-    const listener = (method, event) => callback({
-      method,
-      params: event,
-      sessionId: this.sessionId(),
-    });
-    this._callbackMap.set(callback, listener);
-    this._cdpSession.on('*', /** @type {*} */ (listener));
-  }
-
-  /**
-   * @param {(payload: LH.Protocol.RawEventMessage) => void} callback
-   */
-  removeProtocolMessageListener(callback) {
-    const listener = this._callbackMap.get(callback);
-    if (!listener) return;
-    this._cdpSession.off('*', /** @type {*} */ (listener));
-  }
-
-  /**
-   * Bind listeners for protocol events.
-   * @template {keyof LH.CrdpEvents} E
-   * @param {E} eventName
-   * @param {(...args: LH.CrdpEvents[E]) => void} callback
-   */
-  off(eventName, callback) {
-    this._cdpSession.off(eventName, /** @type {*} */ (callback));
-  }
-
   /**
    * @template {keyof LH.CrdpCommands} C
    * @param {C} method
@@ -149,7 +105,7 @@ class ProtocolSession {
    * @return {Promise<void>}
    */
   async dispose() {
-    this._cdpSession.removeAllListeners();
+    this._cdpSession.off('*', this._handleProtocolEvent);
     await this._cdpSession.detach();
   }
 }

package/lighthouse-core/gather/driver/navigation.js

@@ -89,7 +89,7 @@ async function gotoURL(driver, requestor, options) {
   log.time(status);
 
   const session = driver.defaultSession;
-  const networkMonitor = new NetworkMonitor(driver.defaultSession);
+  const networkMonitor = new NetworkMonitor(driver.targetManager);
 
   // Enable the events and network monitor needed to track navigation progress.
   await networkMonitor.enable();

package/lighthouse-core/gather/driver/network-monitor.js

@@ -15,89 +15,53 @@ const {EventEmitter} = require('events');
 const NetworkRecorder = require('../../lib/network-recorder.js');
 const NetworkRequest = require('../../lib/network-request.js');
 const URL = require('../../lib/url-shim.js');
-const TargetManager = require('./target-manager.js');
 
-/** @typedef {import('../../lib/network-recorder.js').NetworkRecorderEvent} NetworkRecorderEvent */
+/** @typedef {import('../../lib/network-recorder.js').NetworkRecorderEventMap} NetworkRecorderEventMap */
 /** @typedef {'network-2-idle'|'network-critical-idle'|'networkidle'|'networkbusy'|'network-critical-busy'|'network-2-busy'} NetworkMonitorEvent_ */
-/** @typedef {NetworkRecorderEvent|NetworkMonitorEvent_} NetworkMonitorEvent */
-/** @typedef {Record<NetworkMonitorEvent_, []> & Record<NetworkRecorderEvent, [NetworkRequest]> & {protocolmessage: [LH.Protocol.RawEventMessage]}} NetworkMonitorEventMap */
-/** @typedef {LH.Protocol.StrictEventEmitter<NetworkMonitorEventMap>} NetworkMonitorEmitter */
+/** @typedef {Record<NetworkMonitorEvent_, []> & NetworkRecorderEventMap} NetworkMonitorEventMap */
+/** @typedef {keyof NetworkMonitorEventMap} NetworkMonitorEvent */
+/** @typedef {LH.Protocol.StrictEventEmitterClass<NetworkMonitorEventMap>} NetworkMonitorEmitter */
+const NetworkMonitorEventEmitter = /** @type {NetworkMonitorEmitter} */ (EventEmitter);
 
-/** @implements {NetworkMonitorEmitter} */
-class NetworkMonitor {
+class NetworkMonitor extends NetworkMonitorEventEmitter {
   /** @type {NetworkRecorder|undefined} */
   _networkRecorder = undefined;
-  /** @type {TargetManager|undefined} */
-  _targetManager = undefined;
   /** @type {Array<LH.Crdp.Page.Frame>} */
   _frameNavigations = [];
 
-  /** @param {LH.Gatherer.FRProtocolSession} session */
-  constructor(session) {
-    this._session = session;
+  // TODO(FR-COMPAT): switch to real TargetManager when legacy removed.
+  /** @param {LH.Gatherer.FRTransitionalDriver['targetManager']} targetManager */
+  constructor(targetManager) {
+    super();
 
-    this._onTargetAttached = this._onTargetAttached.bind(this);
+    /** @type {LH.Gatherer.FRTransitionalDriver['targetManager']} */
+    this._targetManager = targetManager;
 
-    /** @type {Map<string, LH.Gatherer.FRProtocolSession>} */
-    this._sessions = new Map();
+    /** @type {LH.Gatherer.FRProtocolSession} */
+    this._session = targetManager.rootSession();
 
     /** @param {LH.Crdp.Page.FrameNavigatedEvent} event */
     this._onFrameNavigated = event => this._frameNavigations.push(event.frame);
 
     /** @param {LH.Protocol.RawEventMessage} event */
     this._onProtocolMessage = event => {
-      this.emit('protocolmessage', event);
       if (!this._networkRecorder) return;
       this._networkRecorder.dispatch(event);
     };
-
-    // Attach the event emitter types to this class.
-    const emitter = /** @type {NetworkMonitorEmitter} */ (new EventEmitter());
-    /** @type {typeof emitter['emit']} */
-    this.emit = emitter.emit.bind(emitter);
-    /** @type {typeof emitter['on']} */
-    this.on = emitter.on.bind(emitter);
-    /** @type {typeof emitter['once']} */
-    this.once = emitter.once.bind(emitter);
-    /** @type {typeof emitter['off']} */
-    this.off = emitter.off.bind(emitter);
-    /** @type {typeof emitter['addListener']} */
-    this.addListener = emitter.addListener.bind(emitter);
-    /** @type {typeof emitter['removeListener']} */
-    this.removeListener = emitter.removeListener.bind(emitter);
-    /** @type {typeof emitter['removeAllListeners']} */
-    this.removeAllListeners = emitter.removeAllListeners.bind(emitter);
-  }
-
-  /**
-   * @param {{target: {targetId: string}, session: LH.Gatherer.FRProtocolSession}} session
-   */
-  async _onTargetAttached({session, target}) {
-    const targetId = target.targetId;
-
-    this._sessions.set(targetId, session);
-    session.addProtocolMessageListener(this._onProtocolMessage);
-
-    await session.sendCommand('Network.enable');
   }
 
   /**
    * @return {Promise<void>}
    */
   async enable() {
-    if (this._targetManager) return;
+    if (this._networkRecorder) return;
 
     this._frameNavigations = [];
-    this._sessions = new Map();
     this._networkRecorder = new NetworkRecorder();
-    /** @type {LH.Puppeteer.CDPSession} */
-    // @ts-expect-error - temporarily reach in to get CDPSession
-    const rootCdpSession = this._session._cdpSession;
-    this._targetManager = new TargetManager(rootCdpSession);
 
     /**
      * Reemit the same network recorder events.
-     * @param {NetworkRecorderEvent} event
+     * @param {keyof NetworkRecorderEventMap} event
      * @return {(r: NetworkRequest) => void}
      */
     const reEmit = event => r => {
@@ -109,46 +73,20 @@ class NetworkMonitor {
     this._networkRecorder.on('requestfinished', reEmit('requestfinished'));
 
     this._session.on('Page.frameNavigated', this._onFrameNavigated);
-    await this._session.sendCommand('Page.enable');
-
-    // Legacy driver does its own target management.
-    // @ts-expect-error
-    const isLegacyRunner = Boolean(this._session._domainEnabledCounts);
-    if (isLegacyRunner) {
-      this._session.addProtocolMessageListener(this._onProtocolMessage);
-    } else {
-      this._targetManager.addTargetAttachedListener(this._onTargetAttached);
-      await this._targetManager.enable();
-    }
+    this._targetManager.on('protocolevent', this._onProtocolMessage);
   }
 
   /**
    * @return {Promise<void>}
    */
   async disable() {
-    if (!this._targetManager) return;
+    if (!this._networkRecorder) return;
 
     this._session.off('Page.frameNavigated', this._onFrameNavigated);
-
-    // Legacy driver does its own target management.
-    // @ts-expect-error
-    const isLegacyRunner = Boolean(this._session._domainEnabledCounts);
-    if (isLegacyRunner) {
-      this._session.removeProtocolMessageListener(this._onProtocolMessage);
-    } else {
-      this._targetManager.removeTargetAttachedListener(this._onTargetAttached);
-
-      for (const session of this._sessions.values()) {
-        session.removeProtocolMessageListener(this._onProtocolMessage);
-      }
-
-      await this._targetManager.disable();
-    }
+    this._targetManager.off('protocolevent', this._onProtocolMessage);
 
     this._frameNavigations = [];
     this._networkRecorder = undefined;
-    this._targetManager = undefined;
-    this._sessions = new Map();
   }
 
   /** @return {Promise<{requestedUrl?: string, mainDocumentUrl?: string}>} */

package/lighthouse-core/gather/driver/target-manager.js

@@ -5,70 +5,125 @@
  */
 'use strict';
 
-/**
-  * @fileoverview This class tracks multiple targets (the page itself and its OOPIFs) and allows consumers to
-  * listen for protocol events before each target is resumed.
-  */
-
+const EventEmitter = require('events').EventEmitter;
 const log = require('lighthouse-logger');
 const ProtocolSession = require('../../fraggle-rock/gather/session.js');
 
-/** @typedef {{target: LH.Crdp.Target.TargetInfo, session: LH.Gatherer.FRProtocolSession}} TargetWithSession */
+/**
+ * @typedef {{
+ *   target: LH.Crdp.Target.TargetInfo,
+ *   cdpSession: LH.Puppeteer.CDPSession,
+ *   session: LH.Gatherer.FRProtocolSession,
+ *   protocolListener: (event: unknown) => void,
+ * }} TargetWithSession
+ */
+
+// Add protocol event types to EventEmitter.
+/** @typedef {{'protocolevent': [LH.Protocol.RawEventMessage]}} ProtocolEventMap */
+/** @typedef {LH.Protocol.StrictEventEmitterClass<ProtocolEventMap>} ProtocolEventMessageEmitter */
+const ProtocolEventEmitter = /** @type {ProtocolEventMessageEmitter} */ (EventEmitter);
 
-class TargetManager {
+/**
+ * Tracks targets (the page itself, its iframes, their iframes, etc) as they
+ * appear and allows listeners to the flattened protocol events from all targets.
+ */
+class TargetManager extends ProtocolEventEmitter {
   /** @param {LH.Puppeteer.CDPSession} cdpSession */
   constructor(cdpSession) {
+    super();
+
     this._enabled = false;
     this._rootCdpSession = cdpSession;
 
-    /** @type {Array<(targetWithSession: TargetWithSession) => Promise<void>|void>} */
-    this._listeners = [];
+    /**
+     * A map of target id to target/session information. Used to ensure unique
+     * attached targets.
+     * @type {Map<string, TargetWithSession>}
+     */
+    this._targetIdToTargets = new Map();
 
     this._onSessionAttached = this._onSessionAttached.bind(this);
+    this._onFrameNavigated = this._onFrameNavigated.bind(this);
+  }
 
-    /** @type {Map<string, TargetWithSession>} */
-    this._targetIdToTargets = new Map();
+  /**
+   * @param {LH.Crdp.Page.FrameNavigatedEvent} frameNavigatedEvent
+   */
+  async _onFrameNavigated(frameNavigatedEvent) {
+    // Child frames are handled in `_onSessionAttached`.
+    if (frameNavigatedEvent.frame.parentId) return;
+
+    // It's not entirely clear when this is necessary, but when the page switches processes on
+    // navigating from about:blank to the `requestedUrl`, resetting `setAutoAttach` has been
+    // necessary in the past.
+    await this._rootCdpSession.send('Target.setAutoAttach', {
+      autoAttach: true,
+      flatten: true,
+      waitForDebuggerOnStart: true,
+    });
+  }
 
-    /** @param {LH.Crdp.Page.FrameNavigatedEvent} event */
-    this._onFrameNavigated = async event => {
-      // Child frames are handled in `_onSessionAttached`.
-      if (event.frame.parentId) return;
+  /**
+   * @param {string} sessionId
+   * @return {LH.Gatherer.FRProtocolSession}
+   */
+  _findSession(sessionId) {
+    for (const {session, cdpSession} of this._targetIdToTargets.values()) {
+      if (cdpSession.id() === sessionId) return session;
+    }
 
-      // It's not entirely clear when this is necessary, but when the page switches processes on
-      // navigating from about:blank to the `requestedUrl`, resetting `setAutoAttach` has been
-      // necessary in the past.
-      await this._rootCdpSession.send('Target.setAutoAttach', {
-        autoAttach: true,
-        flatten: true,
-        waitForDebuggerOnStart: true,
-      });
-    };
+    throw new Error(`session ${sessionId} not found`);
+  }
+
+  /**
+   * Returns the root session.
+   * @return {LH.Gatherer.FRProtocolSession}
+   */
+  rootSession() {
+    const rootSessionId = this._rootCdpSession.id();
+    return this._findSession(rootSessionId);
   }
 
   /**
    * @param {LH.Puppeteer.CDPSession} cdpSession
    */
   async _onSessionAttached(cdpSession) {
-    const session = new ProtocolSession(cdpSession);
+    const newSession = new ProtocolSession(cdpSession);
 
     try {
-      const target = await session.sendCommand('Target.getTargetInfo').catch(() => null);
+      const target = await newSession.sendCommand('Target.getTargetInfo').catch(() => null);
       const targetType = target?.targetInfo?.type;
       const hasValidTargetType = targetType === 'page' || targetType === 'iframe';
+      // TODO: should detach from target in this case?
+      // See pptr: https://github.com/puppeteer/puppeteer/blob/733cbecf487c71483bee8350e37030edb24bc021/src/common/Page.ts#L495-L526
       if (!target || !hasValidTargetType) return;
 
+      // No need to continue if target has already been seen.
       const targetId = target.targetInfo.targetId;
-      session.setTargetInfo(target.targetInfo);
       if (this._targetIdToTargets.has(targetId)) return;
 
+      newSession.setTargetInfo(target.targetInfo);
       const targetName = target.targetInfo.url || target.targetInfo.targetId;
       log.verbose('target-manager', `target ${targetName} attached`);
 
-      const targetWithSession = {target: target.targetInfo, session};
+      const trueProtocolListener = this._getProtocolEventListener(newSession.id());
+      /** @type {(event: unknown) => void} */
+      // @ts-expect-error - pptr currently typed only for single arg emits.
+      const protocolListener = trueProtocolListener;
+      cdpSession.on('*', protocolListener);
+
+      const targetWithSession = {
+        target: target.targetInfo,
+        cdpSession,
+        session: newSession,
+        protocolListener,
+      };
       this._targetIdToTargets.set(targetId, targetWithSession);
-      for (const listener of this._listeners) await listener(targetWithSession);
 
-      await session.sendCommand('Target.setAutoAttach', {
+      // We want to receive information about network requests from iframes, so enable the Network domain.
+      await newSession.sendCommand('Network.enable');
+      // We also want to receive information about subtargets of subtargets, so make sure we autoattach recursively.
+      await newSession.sendCommand('Target.setAutoAttach', {
         autoAttach: true,
         flatten: true,
         waitForDebuggerOnStart: true,
@@ -80,10 +135,30 @@ class TargetManager {
       throw err;
     } finally {
       // Resume the target if it was paused, but if it's unnecessary, we don't care about the error.
-      await session.sendCommand('Runtime.runIfWaitingForDebugger').catch(() => {});
+      await newSession.sendCommand('Runtime.runIfWaitingForDebugger').catch(() => {});
     }
   }
 
+  /**
+   * Returns a listener for all protocol events from session, and augments the
+   * event with the sessionId.
+   * @param {string} sessionId
+   */
+  _getProtocolEventListener(sessionId) {
+    /**
+     * @template {keyof LH.Protocol.RawEventMessageRecord} EventName
+     * @param {EventName} method
+     * @param {LH.Protocol.RawEventMessageRecord[EventName]['params']} params
+     */
+    const onProtocolEvent = (method, params) => {
+      // Cast because tsc 4.7 still can't quite track the dependent parameters.
+      const payload = /** @type {LH.Protocol.RawEventMessage} */ ({method, params, sessionId});
+      this.emit('protocolevent', payload);
+    };
+
+    return onProtocolEvent;
+  }
+
   /**
    * @return {Promise<void>}
    */
@@ -115,23 +190,13 @@ class TargetManager {
     // No need to remove listener if connection is already closed.
     this._rootCdpSession.connection()?.off('sessionattached', this._onSessionAttached);
 
+    for (const {cdpSession, protocolListener} of this._targetIdToTargets.values()) {
+      cdpSession.off('*', protocolListener);
+    }
+
     this._enabled = false;
     this._targetIdToTargets = new Map();
   }
-
-  /**
-   * @param {(targetWithSession: TargetWithSession) => Promise<void>|void} listener
-   */
-  addTargetAttachedListener(listener) {
-    this._listeners.push(listener);
-  }
-
-  /**
-   * @param {(targetWithSession: TargetWithSession) => Promise<void>|void} listener
-   */
-  removeTargetAttachedListener(listener) {
-    this._listeners = this._listeners.filter(entry => entry !== listener);
-  }
 }
 
 module.exports = TargetManager;

package/lighthouse-core/gather/driver.js

@@ -96,6 +96,30 @@ class Driver {
     this.evaluate = this.executionContext.evaluate.bind(this.executionContext);
     /** @private @deprecated Only available for plugin backcompat. */
     this.evaluateAsync = this.executionContext.evaluateAsync.bind(this.executionContext);
+
+    // A shim for sufficient coverage of targetManager functionality. Exposes the target
+    // management that legacy driver already handles (see this._handleTargetAttached).
+    this.targetManager = {
+      rootSession: () => {
+        return this.defaultSession;
+      },
+      /**
+       * Bind to *any* protocol event.
+       * @param {'protocolevent'} event
+       * @param {(payload: LH.Protocol.RawEventMessage) => void} callback
+       */
+      on: (event, callback) => {
+        this._connection.on('protocolevent', callback);
+      },
+      /**
+       * Unbind to *any* protocol event.
+       * @param {'protocolevent'} event
+       * @param {(payload: LH.Protocol.RawEventMessage) => void} callback
+       */
+      off: (event, callback) => {
+        this._connection.off('protocolevent', callback);
+      },
+    };
   }
 
   /** @deprecated - Not available on Fraggle Rock driver. */
@@ -187,22 +211,6 @@ class Driver {
     this._eventEmitter.removeListener(eventName, cb);
   }
 
-  /**
-   * Bind to *any* protocol event.
-   * @param {(payload: LH.Protocol.RawEventMessage) => void} callback
-   */
-  addProtocolMessageListener(callback) {
-    this._connection.on('protocolevent', callback);
-  }
-
-  /**
-   * Unbind to *any* protocol event.
-   * @param {(payload: LH.Protocol.RawEventMessage) => void} callback
-   */
-  removeProtocolMessageListener(callback) {
-    this._connection.off('protocolevent', callback);
-  }
-
   /** @param {LH.Crdp.Target.TargetInfo} targetInfo */
   setTargetInfo(targetInfo) { // eslint-disable-line no-unused-vars
     // OOPIF handling in legacy driver is implicit.

package/lighthouse-core/gather/gatherers/devtools-log.js

@@ -11,7 +11,6 @@
  * This protocol log can be used to recreate the network records using lib/network-recorder.js.
  */
 
-const NetworkMonitor = require('../driver/network-monitor.js');
 const FRGatherer = require('../../fraggle-rock/gather/base-gatherer.js');
 
 class DevtoolsLog extends FRGatherer {
@@ -26,9 +25,6 @@ class DevtoolsLog extends FRGatherer {
   constructor() {
     super();
 
-    /** @type {NetworkMonitor|undefined} */
-    this._networkMonitor = undefined;
-
     this._messageLog = new DevtoolsMessageLog(/^(Page|Network|Target|Runtime)\./);
 
     /** @param {LH.Protocol.RawEventMessage} e */
@@ -42,16 +38,16 @@ class DevtoolsLog extends FRGatherer {
     this._messageLog.reset();
     this._messageLog.beginRecording();
 
-    this._networkMonitor = new NetworkMonitor(driver.defaultSession);
-    this._networkMonitor.on('protocolmessage', this._onProtocolMessage);
-    this._networkMonitor.enable();
+    driver.targetManager.on('protocolevent', this._onProtocolMessage);
+    await driver.defaultSession.sendCommand('Page.enable');
   }
 
-  async stopSensitiveInstrumentation() {
-    if (!this._networkMonitor) return;
+  /**
+   * @param {LH.Gatherer.FRTransitionalContext} passContext
+   */
+  async stopSensitiveInstrumentation({driver}) {
     this._messageLog.endRecording();
-    this._networkMonitor.disable();
-    this._networkMonitor.off('protocolmessage', this._onProtocolMessage);
+    driver.targetManager.off('protocolevent', this._onProtocolMessage);
   }
 
   /**

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

@@ -89,7 +89,7 @@ class FullPageScreenshot extends FRGatherer {
     const height = Math.min(fullHeight, maxTextureSize);
 
     // Setup network monitor before we change the viewport.
-    const networkMonitor = new NetworkMonitor(session);
+    const networkMonitor = new NetworkMonitor(context.driver.targetManager);
     const waitForNetworkIdleResult = waitForNetworkIdle(session, networkMonitor, {
       pretendDCLAlreadyFired: true,
       networkQuietThresholdMs: 1000,