browsertime 17.11.2 → 17.12.1

package/CHANGELOG.md

@@ -1,11 +1,21 @@
 # Browsertime changelog (we do [semantic versioning](https://semver.org))
 
-## 17.11.1 - 2022-06-19
+## 17.12.1 - 2022-07-19
+### Fixed
+* Hmm, Chromedriver 115 doesn't seems to work on Mac so reverted to 114.
+
+## 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.0 - 2022-06-12
+## 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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "browsertime",
   "description": "Get performance metrics from your web page using Browsertime.",
-  "version": "17.11.2",
+  "version": "17.12.1",
   "bin": "./bin/browsertime.js",
   "type": "module",
   "dependencies": {