browsertime 17.11.1 → 17.12.0

package/CHANGELOG.md

@@ -1,6 +1,17 @@
 # Browsertime changelog (we do [semantic versioning](https://semver.org))
 
-## 17.11.0 - 2022-06-12
+## 17.12.0 - 2022-07-19
+### Added
+* Chrome and Chromedriver 115. The Chrome team has changed the hosting of Chromedriver, so the logic for downloading Chromedriver has changed [#1967](https://github.com/sitespeedio/browsertime/pull/1967).
+
+* If you collect the Chrome devtools trace using `--cpu` we will now also collect the number of elements that needs recalculate styles before FCP/LCP.[#1964](https://github.com/sitespeedio/browsertime/pull/1964).
+
+## 17.11.2 - 2022-06-19
+### Fixed
+* Fix --debug mode. Thank you [Gregory Mierzwinski](https://github.com/gmierz) for PR [#1959](https://github.com/sitespeedio/browsertime/pull/1959).
+* Update ff-test-bidi-har-export to 0.0.11 that fixes some error logs [#1961](https://github.com/sitespeedio/browsertime/pull/1961).
+
+## 17.11.1 - 2022-06-12
 ### Fixed
 * If Chrome do not collect largest contentful paint, log that instead of just log null [#1957](https://github.com/sitespeedio/browsertime/pull/1957).
 

package/lib/chrome/webdriver/chromium.js

@@ -15,6 +15,11 @@ import { parse } from '../traceCategoriesParser.js';
 import { pathToFolder } from '../../support/pathToFolder.js';
 import { ChromeDevtoolsProtocol } from '../chromeDevtoolsProtocol.js';
 import { Android, isAndroidConfigured } from '../../android/index.js';
+import {
+  getFirstContentFulPaintEvent,
+  getLargestContentfulPaintEvent,
+  getRecalculateStyleElementsAndTimeBefore
+} from './traceUtilities.js';
 const unlink = promisify(_unlink);
 const rm = promisify(_rm);
 
@@ -353,6 +358,27 @@ export class Chromium {
           asset.args.data.renderBlocking;
       }
 
+      const fcpEvent = getFirstContentFulPaintEvent(trace.traceEvents);
+      const lcpEvent = getLargestContentfulPaintEvent(trace.traceEvents);
+
+      result.renderBlocking = { recalculateStyle: {}, requests: {} };
+
+      if (fcpEvent) {
+        const beforeFCP = getRecalculateStyleElementsAndTimeBefore(
+          trace.traceEvents,
+          fcpEvent.ts
+        );
+        result.renderBlocking.recalculateStyle.beforeFCP = beforeFCP;
+      }
+
+      if (lcpEvent) {
+        const beforeLCP = getRecalculateStyleElementsAndTimeBefore(
+          trace.traceEvents,
+          lcpEvent.ts
+        );
+        result.renderBlocking.recalculateStyle.beforeLCP = beforeLCP;
+      }
+
       if (!this.options.skipHar) {
         for (let harRequest of this.hars[index - 1].log.entries) {
           if (renderBlockingInfo[harRequest.request.url]) {
@@ -362,7 +388,7 @@ export class Chromium {
         }
       }
 
-      result.renderBlocking = renderBlockingInfo;
+      result.renderBlocking.requests = renderBlockingInfo;
     }
 
     // Google Web Vitals hacksery

package/lib/chrome/webdriver/traceUtilities.js

@@ -0,0 +1,64 @@
+import intel from 'intel';
+const log = intel.getLogger('browsertime.chrome');
+
+export function getLargestContentfulPaintEvent(traceEvents) {
+  const lcpCandidates = traceEvents.filter(
+    task => task.name === 'largestContentfulPaint::Candidate'
+  );
+
+  if (lcpCandidates.length > 0) {
+    let lcpEvent = lcpCandidates[0];
+
+    for (const candidate of lcpCandidates) {
+      if (candidate.ts > lcpEvent.ts) {
+        lcpEvent = candidate;
+      }
+    }
+    return lcpEvent;
+  } else {
+    log.info('No LCP event found in the trace');
+  }
+}
+
+export function getFirstContentFulPaintEvent(traceEvents) {
+  // Get first contentful paint
+  const fcpEvent = traceEvents.find(
+    task => task.name === 'firstContentfulPaint'
+  );
+
+  if (fcpEvent) {
+    return fcpEvent;
+  } else {
+    log.info('Did not find the FCP event in the trace');
+  }
+}
+
+export function getRecalculateStyleElementsAndTimeBefore(
+  traceEvents,
+  timestamp
+) {
+  const recalculatesBefore = traceEvents.filter(
+    task =>
+      task.cat === 'disabled-by-default-devtools.timeline' &&
+      task.name === 'ScheduleStyleRecalculation' &&
+      task.ts < timestamp
+  );
+
+  const updateLayoutTree = traceEvents.filter(
+    task =>
+      task.cat === 'blink,devtools.timeline' &&
+      task.name === 'UpdateLayoutTree' &&
+      task.ts < timestamp &&
+      recalculatesBefore.some(
+        recalculate => task.args.beginData.frame === recalculate.args.data.frame
+      )
+  );
+  let elements = 0;
+  let duration = 0;
+  for (let a of updateLayoutTree) {
+    elements += a.args.elementCount;
+    duration += a.dur;
+  }
+
+  return { elements, durationInMillis: duration / 1000 };
+}

package/lib/core/engine/collector.js

@@ -404,6 +404,12 @@ export class Collector {
           results.renderBlocking = [];
         }
         results.renderBlocking.push(data.renderBlocking);
+
+        statistics.addDeep({
+          renderBlocking: {
+            recalculateStyle: data.renderBlocking.recalculateStyle
+          }
+        });
       }
 
       // Add power data (if we have it)

package/lib/support/cli.js

@@ -63,6 +63,11 @@ function validateInput(argv) {
     }
   }
 
+  // hack to keep backward compability to --android
+  if (argv.android[0] === true) {
+    set(argv, 'android.enabled', true);
+  }
+
   if (argv.chrome && argv.chrome.mobileEmulation) {
     const m = argv.chrome.mobileEmulation;
     if (!(m.deviceName || (m.height && m.width && m.pixelRatio))) {
@@ -82,7 +87,7 @@ function validateInput(argv) {
     return 'Debug mode do not work in Safari. Please try with Firefox/Chrome or Edge';
   }
 
-  if (argv.debug && argv.android) {
+  if (argv.debug && argv.android.enabled) {
     return 'Debug mode do not work on Android. Please run debug mode on Desktop.';
   }
 
@@ -1262,10 +1267,6 @@ export function parseCommandLine() {
 
   let argv = validated.argv;
 
-  // hack to keep backward compability to --android
-  if (argv.android[0] === true) {
-    set(argv, 'android.enabled', true);
-  }
   if (
     argv.firefox &&
     (argv.firefox.nightly || argv.firefox.beta || argv.firefox.developer)

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "browsertime",
   "description": "Get performance metrics from your web page using Browsertime.",
-  "version": "17.11.1",
+  "version": "17.12.0",
   "bin": "./bin/browsertime.js",
   "type": "module",
   "dependencies": {
     "@cypress/xvfb": "1.2.4",
     "@devicefarmer/adbkit": "2.11.3",
-    "@sitespeed.io/chromedriver": "114.0.5735-90",
+    "@sitespeed.io/chromedriver": "115.0.5790-98",
     "@sitespeed.io/edgedriver": "113.0.1774-9b",
     "@sitespeed.io/geckodriver": "0.33.0",
     "@sitespeed.io/throttle": "5.0.0",
     "@sitespeed.io/tracium": "0.3.3",
-    "ff-test-bidi-har-export": "0.0.10",
+    "ff-test-bidi-har-export": "0.0.11",
     "btoa": "1.2.1",
     "chrome-har": "0.13.1",
     "chrome-remote-interface": "0.32.2",