browsertime 21.5.1 → 21.5.3

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Browsertime changelog (we do [semantic versioning](https://semver.org))
 
+## 21.5.3 - 2024-03-12
+### Fixed
+* Fixed `commands.bidi.*` that stopped working [#2101](https://github.com/sitespeedio/browsertime/pull/2101).
+* Fixed missing Loaf data [#2100](https://github.com/sitespeedio/browsertime/pull/2100).
+
+## 21.5.2 - 2024-03-12
+### Fixed
+* Another bug fix: Getting Long Animation Frame (loaf) was broken [#2099](https://github.com/sitespeedio/browsertime/pull/2099).
+
 ## 21.5.1 - 2024-03-12
 ### Fixed
 * There was a bug in how we collect CPU power from Firefox and add it to the statistics. Fixed in [#2098](https://github.com/sitespeedio/browsertime/pull/2098).

package/browserscripts/pageinfo/loaf.js

@@ -1,36 +1,45 @@
-(function() {
-    // See https://developer.chrome.com/docs/web-platform/long-animation-frames
-    if (PerformanceObserver.supportedEntryTypes.includes('long-animation-frame')) {
-    
+(function () {
+  // See https://developer.chrome.com/docs/web-platform/long-animation-frames
+  if (
+    PerformanceObserver.supportedEntryTypes.includes('long-animation-frame')
+  ) {
     const MAX_LOAFS_TO_CONSIDER = 10;
     const relevantLoadEntries = [];
-    const observer = new PerformanceObserver(list => {
-        let longestBlockingLoAFs = [].concat(list.getEntries()).sort(
-          (a, b) => b.blockingDuration - a.blockingDuration
-        ).slice(0, MAX_LOAFS_TO_CONSIDER);
+    const observer = new PerformanceObserver(list => {});
+    observer.observe({type: 'long-animation-frame', buffered: true});
+    const entries = observer.takeRecords();
 
-        // re-package
-        for (let entry of longestBlockingLoAFs) {
-            const info = {};
-                info.blockingDuration = entry.blockingDuration;
-                info.duration = entry.duration;
-                info.styleAndLayoutStart = entry.styleAndLayoutStart;
-                info.renderStart = entry.renderStart;
-                info.scripts = [];
-                for (let script of entry.scripts) {
-                    const s = {};
-                    s.forcedStyleAndLayoutDuration = script.forcedStyleAndLayoutDuration;
-                    s.invoker = script.invoker;
-                    s.invokerType = script.invokerType;
-                    s.sourceFunctionName = script.sourceFunctionName;
-                    s.sourceURL = script.sourceURL;
-                    info.scripts.push(s);
-                }
-                relevantLoadEntries.push(info);
-          }
-        return relevantLoadEntries;
-      });
-      observer.observe({ type: 'long-animation-frame', buffered: true });
+    let longestBlockingLoAFs = []
+      .concat(entries)
+      .sort((a, b) => b.blockingDuration - a.blockingDuration)
+      .slice(0, MAX_LOAFS_TO_CONSIDER);
+
+    // re-package
+    for (let entry of longestBlockingLoAFs) {
+      const info = {};
+      info.blockingDuration = entry.blockingDuration;
+      info.duration = entry.duration;
+      info.styleAndLayoutStart = entry.styleAndLayoutStart;
+      info.renderStart = entry.renderStart;
+      info.workDuration = entry.renderStart ? entry.renderStart - entry.startTime : entry.duration;
+      info.renderDuration = entry.renderStart ? (entry.startTime + entry.duration) - entry.renderStart: 0;
+      info.preLayoutDuration =  entry.styleAndLayoutStart ? entry.styleAndLayoutStart - entry.renderStart : 0;
+      info.styleAndLayoutDuration = entry.styleAndLayoutStart ? (entry.startTime + entry.duration) - entry.styleAndLayoutStart : 0
+      
+      info.scripts = [];
+      for (let script of entry.scripts) {
+        const s = {};
+        s.forcedStyleAndLayoutDuration = script.forcedStyleAndLayoutDuration;
+        s.invoker = script.invoker;
+        s.invokerType = script.invokerType;
+        s.sourceFunctionName = script.sourceFunctionName;
+        s.sourceURL = script.sourceURL;
+        s.sourceCharPosition = script.sourceCharPosition;
+        s.windowAttribution = script.windowAttribution;
+        info.scripts.push(s);
+      }
+      relevantLoadEntries.push(info);
     }
+    return relevantLoadEntries;
+  }
 })();
-  

package/lib/core/engine/command/bidi.js

@@ -23,12 +23,16 @@ export class Bidi {
   /**
    * Add a fanction that will get the events that you subscribes.
    * @async
+   * @example await commands.bidi.onMessage(function(event) {
+   *  const myEvent = JSON.parse(Buffer.from(event.toString()));
+   *  console.log(myEvent);
+   * });
    * @param {Function} f - The callback function to handle incoming messages. The function will get an event passed on to it. Remember to subscribe to the event.
    * @throws {Error} Throws an error if the method is called in a browser other than Firefox.
    */
   async onMessage(f) {
     if (this.browserName === 'firefox') {
-      const client = await this.engineDelegate.getBidi();
+      const client = this.engineDelegate.getBidi();
       const ws = await client.socket;
       ws.on('message', f);
     } else {
@@ -38,12 +42,11 @@ export class Bidi {
 
   /**
    * Retrieves the raw client for Bidi.
-   * @async
-   * @example const bidi = await commands.bidi.getRawClient();
+   * @example const bidi = commands.bidi.getRawClient();
    * @returns {Promise<Object>} A promise that resolves to the Bidi client.
    * @throws {Error} Throws an error if the browser is not supported.
    */
-  async getRawClient() {
+  getRawClient() {
     if (this.browserName === 'firefox') {
       return this.engineDelegate.getBidi();
     } else {
@@ -54,13 +57,15 @@ export class Bidi {
   /**
    * Subscribe to a event.
    * @async
+   * @example // Subscribe to requests before they are sent
+   * await commands.bidi.subscribe('network.beforeRequestSent');
    * @param {string} messageType The type of message to subscribe to.
    * @returns {Promise<Object>} A promise that resolves you have subscribed.
    * @throws {Error} Throws an error if the method is called in a browser other than Firefox.
    */
   async subscribe(messageType) {
     if (this.browserName === 'firefox') {
-      const client = await this.engineDelegate.getBidi();
+      const client = this.engineDelegate.getBidi();
       return client.subscribe(messageType, [
         await this.engineDelegate.getWindowHandle()
       ]);
@@ -72,13 +77,15 @@ export class Bidi {
   /**
    * Unsubscribe to an event.
    * @async
+   *  @example // Unsubscribe to requests before they are sent
+   * await commands.bidi.unsubscribe('network.beforeRequestSent');
    * @param {string} messageType  The type of message to unsubscribe to.
    * @returns  {Promise<Object>} A promise that resolves you have unsubscribed.
    * @throws {Error} Throws an error if the method is called in a browser other than Firefox.
    */
   async unsubscribe(messageType) {
     if (this.browserName === 'firefox') {
-      const client = await this.engineDelegate.getBidi();
+      const client = this.engineDelegate.getBidi();
       return client.unsubscribe(messageType, [
         this.engineDelegate.getWindowHandle()
       ]);
@@ -91,7 +98,14 @@ export class Bidi {
    * Sends a command using Bidi.
    *
    * @async
-   * @example await commands.bidi.send({});
+   * @example
+   *  const params = {
+   *   method: 'script.addPreloadScript',
+   *   params: {
+   *     functionDeclaration: "function() {alert('hello')}"
+   *    }
+   *  };
+   * await commands.bidi.send(params);
    * @param {Object} parameters - The paramaters for the command.
    * @throws {Error} Throws an error if the browser is not supported or if the command fails.
    * @returns {Promise<Object>} A promise that resolves when the command has been sent.
@@ -99,10 +113,14 @@ export class Bidi {
   async send(parameters) {
     if (this.browserName === 'firefox') {
       try {
-        const client = await this.engineDelegate.getBidi();
+        const client = this.engineDelegate.getBidi();
         return client.send(parameters);
       } catch (error) {
-        log.error('Could not send to Bidi command %j', parameters);
+        log.error(
+          'Could not send to Bidi command %j, error: %s',
+          parameters,
+          error
+        );
         log.verbose(error);
         `Could not send to Bidi command ${parameters} `;
       }

package/lib/firefox/webdriver/firefox.js

@@ -13,7 +13,6 @@ import { GeckoProfiler } from '../geckoProfiler.js';
 import { MemoryReport } from '../memoryReport.js';
 import { PerfStats } from '../perfStats.js';
 import { NetworkManager } from '../networkManager.js';
-import { FirefoxBidi } from '../firefoxBidi.js';
 import { getHAR } from '../getHAR.js';
 
 const log = intel.getLogger('browsertime.firefox');
@@ -64,11 +63,7 @@ export class Firefox {
       });
     }
 
-    this.bidi = new FirefoxBidi(
-      await runner.getDriver().getBidi(),
-      this.windowId,
-      this.options
-    );
+    this.bidi = await runner.getDriver().getBidi();
   }
 
   /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "browsertime",
   "description": "Get performance metrics from your web page using Browsertime.",
-  "version": "21.5.1",
+  "version": "21.5.3",
   "bin": "./bin/browsertime.js",
   "type": "module",
   "types": "./types/scripting.d.ts",

package/types/core/engine/command/bidi.d.ts

@@ -18,14 +18,17 @@ export class Bidi {
     /**
      * Add a fanction that will get the events that you subscribes.
      * @async
+     * @example await commands.bidi.onMessage(function(event) {
+     *  const myEvent = JSON.parse(Buffer.from(event.toString()));
+     *  console.log(myEvent);
+     * });
      * @param {Function} f - The callback function to handle incoming messages. The function will get an event passed on to it. Remember to subscribe to the event.
      * @throws {Error} Throws an error if the method is called in a browser other than Firefox.
      */
     onMessage(f: Function): Promise<void>;
     /**
      * Retrieves the raw client for Bidi.
-     * @async
-     * @example const bidi = await commands.bidi.getRawClient();
+     * @example const bidi = commands.bidi.getRawClient();
      * @returns {Promise<Object>} A promise that resolves to the Bidi client.
      * @throws {Error} Throws an error if the browser is not supported.
      */
@@ -33,6 +36,8 @@ export class Bidi {
     /**
      * Subscribe to a event.
      * @async
+     * @example // Subscribe to requests before they are sent
+     * await commands.bidi.subscribe('network.beforeRequestSent');
      * @param {string} messageType The type of message to subscribe to.
      * @returns {Promise<Object>} A promise that resolves you have subscribed.
      * @throws {Error} Throws an error if the method is called in a browser other than Firefox.
@@ -41,6 +46,8 @@ export class Bidi {
     /**
      * Unsubscribe to an event.
      * @async
+     *  @example // Unsubscribe to requests before they are sent
+     * await commands.bidi.unsubscribe('network.beforeRequestSent');
      * @param {string} messageType  The type of message to unsubscribe to.
      * @returns  {Promise<Object>} A promise that resolves you have unsubscribed.
      * @throws {Error} Throws an error if the method is called in a browser other than Firefox.
@@ -50,7 +57,14 @@ export class Bidi {
      * Sends a command using Bidi.
      *
      * @async
-     * @example await commands.bidi.send({});
+     * @example
+     *  const params = {
+     *   method: 'script.addPreloadScript',
+     *   params: {
+     *     functionDeclaration: "function() {alert('hello')}"
+     *    }
+     *  };
+     * await commands.bidi.send(params);
      * @param {Object} parameters - The paramaters for the command.
      * @throws {Error} Throws an error if the browser is not supported or if the command fails.
      * @returns {Promise<Object>} A promise that resolves when the command has been sent.

package/types/core/engine/command/bidi.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bidi.d.ts","sourceRoot":"","sources":["../../../../lib/core/engine/command/bidi.js"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH;IACE,mDASC;IARC;;OAEG;IACH,uBAAoC;IACpC;;OAEG;IACH,oBAA8B;IAGhC;;;;;OAKG;IACH,sCAQC;IAED;;;;;;OAMG;IACH,gBAHa,YAAe,CAS3B;IAED;;;;;;OAMG;IACH,uBAJW,MAAM,GACJ,YAAe,CAY3B;IAED;;;;;;OAMG;IACH,yBAJW,MAAM,GACH,YAAe,CAY5B;IAED;;;;;;;;OAQG;IACH,uBAFa,YAAe,CAe3B;CACF"}
+{"version":3,"file":"bidi.d.ts","sourceRoot":"","sources":["../../../../lib/core/engine/command/bidi.js"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH;IACE,mDASC;IARC;;OAEG;IACH,uBAAoC;IACpC;;OAEG;IACH,oBAA8B;IAGhC;;;;;;;;;OASG;IACH,sCAQC;IAED;;;;;OAKG;IACH,gBAHa,YAAe,CAS3B;IAED;;;;;;;;OAQG;IACH,uBAJW,MAAM,GACJ,YAAe,CAY3B;IAED;;;;;;;;OAQG;IACH,yBAJW,MAAM,GACH,YAAe,CAY5B;IAED;;;;;;;;;;;;;;;OAeG;IACH,uBAFa,YAAe,CAmB3B;CACF"}