browsertime 16.11.2 → 16.12.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Browsertime changelog (we do [semantic versioning](https://semver.org))
 
+## 16.12.0 - 2022-08-06
+### Added
+* Upgraded to Chrome 104, Edge 104, Firefox 103 in the Docker container.
+* Upgraded to Chromedriver 104.
+
+### Fixed
+* Remove old Firefox on Android workaround for orange frame [#1821](https://github.com/sitespeedio/browsertime/pull/1821), thank you [Sean Feng](https://github.com/sefeng211) for the PR.
+
+## 16.11.4 - 2022-07-17
+### Fixed
+* Automatically add white background between --preURL and the URL that you wanna test. This makes visual metrics usable when using preURL. [#1819](https://github.com/sitespeedio/browsertime/pull/1819)
+
+## 16.11.3 - 2022-07-14
+
+### Fixed
+* If one of the visual elements failed, all failed. Fixed in [#1818](https://github.com/sitespeedio/browsertime/pull/1818).
+* Use buffered long tasks instead of injecting the measuremnt in the page [#1817](https://github.com/sitespeedio/browsertime/pull/1817).
+* Fixed broken CHromedriver and Geckodriver install on Windows.
+
 ## 16.11.2 - 2022-07-05
 ### Fixed
 * Updated Geckodriver install, it will autoamtically pickup Geckodriver in the path for Raspberry Pis.

package/browserscripts/pageinfo/longTask.js

@@ -1,25 +1,29 @@
 (function(minLength) {
-  if (window.__bt_longtask) {
-    const cleaned = [];
-    for (let event of window.__bt_longtask.e) {
-      if (event.duration >= minLength) {
-        const e = {};
-        e.duration = event.duration;
-        e.name = event.name;
-        e.startTime = event.startTime;
-        e.attribution = [];
-        for (let at of event.attribution) {
-          const a = {};
-          a.containerId = at.containerId;
-          a.containerName = at.containerName;
-          a.containerSrc = at.containerSrc;
-          a.containerType = at.containerType;
-          e.attribution.push(a);
-        }
-        cleaned.push(e);
+  const supported = PerformanceObserver.supportedEntryTypes;
+  if (!supported || supported.indexOf('longtask') === -1) {
+    return;
+  }
+  const observer = new PerformanceObserver(list => {});
+  observer.observe({type: 'longtask', buffered: true});
+  const entries = observer.takeRecords(); 
+  const cleaned = [];
+  for (let event of entries) {
+    if (event.duration >= minLength) {
+      const e = {};
+      e.duration = event.duration;
+      e.name = event.name;
+      e.startTime = event.startTime;
+      e.attribution = [];
+      for (let at of event.attribution) {
+        const a = {};
+        a.containerId = at.containerId;
+        a.containerName = at.containerName;
+        a.containerSrc = at.containerSrc;
+        a.containerType = at.containerType;
+        e.attribution.push(a);
       }
+      cleaned.push(e);
     }
-    window.__bt_longtask.e = [];
-    return cleaned;
   }
-})(arguments[arguments.length - 1]);
+  return cleaned;
+})(arguments[arguments.length - 1]);

package/browsertime/visualmetrics-portable.py

@@ -1266,14 +1266,16 @@ def calculate_visual_metrics(
                     viewport = hero_data["viewport"]
                     hero_timings = []
                     for hero in hero_data["heroes"]:
-                        hero_timings.append(
-                            {
-                                "name": hero["name"],
-                                "value": calculate_hero_time(
+                        hero_time = calculate_hero_time(
                                     progress, dirs, hero, viewport
-                                ),
-                            }
-                        )
+                                )
+                        if hero_time is not None:
+                            hero_timings.append(
+                                {
+                                    "name": hero["name"],
+                                    "value": hero_time,
+                                }
+                            )
                     hero_timings_sorted = sorted(
                         hero_timings, key=lambda timing: timing["value"]
                     )

package/lib/chrome/chromeDevtoolsProtocol.js

@@ -108,19 +108,6 @@ class ChromeDevtoolsProtocol {
     });
   }
 
-  async setupLongTask() {
-    const source = `
-    !function() {
-      let lt = window.__bt_longtask={e:[]};
-      lt.o = new PerformanceObserver(function(a) {
-        lt.e=lt.e.concat(a.getEntries());
-      });
-      lt.o.observe({entryTypes:['longtask']});
-    }();`;
-
-    return this.cdpClient.Page.addScriptToEvaluateOnNewDocument({ source });
-  }
-
   async setBasicAuth(basicAuth) {
     const parts = basicAuth.split('@');
     const basic = 'Basic ' + btoa(parts[0] + ':' + parts[1]);

package/lib/chrome/webdriver/chromium.js

@@ -121,8 +121,6 @@ class Chromium {
       await this.cdpClient.setUserAgent(this.options.userAgent);
     }
 
-    await this.cdpClient.setupLongTask();
-
     await this.cdpClient.loadingFailed();
 
     // Make sure we clear the console log

package/lib/support/preURL.js

@@ -6,5 +6,12 @@ const delay = ms => new Promise(res => setTimeout(res, ms));
 module.exports = async function (browser, options) {
   log.info('Accessing preURL %s', options.preURL);
   await browser.loadAndWait(options.preURL);
-  await delay(options.preURLDelay ? options.preURLDelay : 1500);
+  if (!options.preURLDisableWhiteBackground) {
+    await browser.runScript(
+      'document.body.innerHTML = ""; document.body.style.backgroundColor = "white";',
+      'WHITE_BACKGROUND'
+    );
+  }
+
+  return delay(options.preURLDelay ? options.preURLDelay : 1500);
 };

package/lib/video/postprocessing/visualmetrics/visualMetrics.js

@@ -28,6 +28,7 @@ const PORTABLE_SCRIPT_PATH = path.join(
 
 function getScript(options) {
   if (options.visualMetricsPortable) {
+    log.info('Use the visual metrics portable script');
     return PORTABLE_SCRIPT_PATH;
   }
   return SCRIPT_PATH;

package/lib/video/screenRecording/setOrangeBackground.js

@@ -2,49 +2,12 @@
 
 const log = require('intel').getLogger('browsertime.video');
 const { until, By } = require('selenium-webdriver');
-module.exports = async function (driver, options) {
+module.exports = async function (driver) {
   log.debug('Add orange color');
   // We tried other ways for Android (access an orange page)
   // That works fine ... but break scripts
   // https://github.com/sitespeedio/browsertime/issues/802
-
-  let orangeScript = '';
-
-  if (options.android && options.browser === 'firefox') {
-    orangeScript = `
-        (function() {
-          // Adding this extra layer of white frame fixes
-          // https://bugzilla.mozilla.org/show_bug.cgi?id=1606365
-          // Not clear why it fixes this bug, looks like when
-          // WebRender is enabled, orange frame isn't being
-          // removed correctly if it's the only element
-          // in the document.
-          const white = document.createElement('div');
-          white.id = 'browsertime-white';
-          white.style.position = 'absolute';
-          white.style.top = '0';
-          white.style.left = '0';
-          white.style.width = Math.max(document.documentElement.clientWidth, document.body.clientWidth) + 'px';
-          white.style.height = Math.max(document.documentElement.clientHeight,document.body.clientHeight) + 'px';
-          white.style.backgroundColor = 'white';
-          white.style.zIndex = '2147483647';
-          document.body.appendChild(white);
-          document.body.style.display = '';
-
-          const orange = document.createElement('div');
-          orange.id = 'browsertime-orange';
-          orange.style.position = 'absolute';
-          orange.style.top = '0';
-          orange.style.left = '0';
-          orange.style.width = Math.max(document.documentElement.clientWidth, document.body.clientWidth) + 'px';
-          orange.style.height = Math.max(document.documentElement.clientHeight,document.body.clientHeight) + 'px';
-          orange.style.backgroundColor = '#DE640D';
-          orange.style.zIndex = '2147483647';
-          document.body.appendChild(orange);
-          document.body.style.display = '';
-        })();`;
-  } else {
-    orangeScript = `
+  const orangeScript = `
         (function() {
           const orange = document.createElement('div');
           orange.id = 'browsertime-orange';
@@ -59,7 +22,6 @@ module.exports = async function (driver, options) {
           document.body.appendChild(orange);
           document.body.style.display = '';
         })();`;
-  }
 
   await driver.executeScript(orangeScript);
   // It seems that in some cases the video do not have any orange at the start, so make sure we

package/package.json

@@ -1,13 +1,13 @@
 {
   "description": "Browsertime",
-  "version": "16.11.2",
+  "version": "16.12.0",
   "bin": "./bin/browsertime.js",
   "dependencies": {
     "@cypress/xvfb": "1.2.4",
     "@devicefarmer/adbkit": "2.11.3",
-    "@sitespeed.io/chromedriver": "103.0.5060-24",
+    "@sitespeed.io/chromedriver": "104.0.5112-29",
     "@sitespeed.io/edgedriver": "103.0.1264-37",
-    "@sitespeed.io/geckodriver": "0.31.0-b",
+    "@sitespeed.io/geckodriver": "0.31.0-c",
     "@sitespeed.io/throttle": "4.0.1",
     "@sitespeed.io/tracium": "0.3.3",
     "btoa": "1.2.1",