browsertime 16.2.2 → 16.5.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Browsertime changelog (we do [semantic versioning](https://semver.org))
 
+##  16.5.0 - 2022-05-11
+### Added
+* Make it possible to configure the max size in pixels for the filmstrip screenshots using `--videoParams.thumbsize` [#1787](https://github.com/sitespeedio/browsertime/pull/1787).
+
+### Fixed
+* Handle all boundaries when cropping image in portable script, thank you [Gregory Mierzwinski](https://github.com/gmierz) for PR [#1788](https://github.com/sitespeedio/browsertime/pull/1788).
+## 16.4.0 - 2022-05-11
+### Added
+* If we have the Largest Contentful Paint for the video, add that to the video text instead of DOMContentLoaded [#1783](https://github.com/sitespeedio/browsertime/pull/1783).
+
+### Fixed
+* Only get LCP in Visual Metrics if the LCP API gives us a element [#1786](https://github.com/sitespeedio/browsertime/pull/1786).
+## 16.3.0 - 2022-05-07
+### Added
+* If you use `--visualElements` and the browser supports the Largest Contentful API, we also record 
+the LCP from the video. This will help the Chrome team and other browser teams to get it right (see [https://bugs.chromium.org/p/chromium/issues/detail?id=1291502](https://bugs.chromium.org/p/chromium/issues/detail?id=1291502)) [#1782](https://github.com/sitespeedio/browsertime/pull/1782).
+
 ## 16.2.2 - 2022-05-06
 ### Fixed
 * The Docker container uses Ubuntu 20 again (instead of 22) since there's been multiple problems (running on ARM and on some cloud services).

package/browserscripts/pageinfo/visualElements.js

@@ -125,6 +125,22 @@
     }
   });
 
+  // If the browser support largest contentful paint, get that element as well
+  const supported = PerformanceObserver.supportedEntryTypes;
+  if (supported && supported.indexOf('largest-contentful-paint') > -1) {
+    const observer = new PerformanceObserver(list => {});
+    observer.observe({ type: 'largest-contentful-paint', buffered: true });
+    const entries = observer.takeRecords();
+    if (entries.length > 0) {
+      const largestEntry = entries[entries.length - 1];
+      // It seems that the API do not alwayas have a elememt
+      if (largestEntry.element && isElementPartlyInViewportAndVisible(largestEntry.element)) {
+        keepLargestElementByType('LargestContentfulPaint', largestEntry.element);
+      }
+    }
+  }
+
+
   // We need to follow the standard for VisualMetrics
   return {
     viewport: {

package/browsertime/visualmetrics-portable.py

@@ -105,17 +105,22 @@ def crop_im(img, crop_x, crop_y, crop_x_offset, crop_y_offset, gravity=None):
             base_x -= crop_x // 2
             base_y -= crop_y // 2
 
-        base_x += crop_x_offset
-        base_y += crop_y_offset
-
-        # Take the maximum in case the offset was negative, and
-        # smaller than the base position
-        base_x = max(base_x, 0)
-        base_y = max(base_y, 0)
+        # Handle the boundaries of the crop using max to prevent
+        # negatives, and min to prevent going over the othersde of
+        # the image
+        start_x = min(width - 1, max(base_x + crop_x_offset, 0))
+        start_y = min(height - 1, max(base_y + crop_y_offset, 0))
+
+        end_x = min(width - 1, max(start_x + crop_x, 0))
+        end_y = min(height - 1, max(start_y + crop_y, 0))
+
+        if len(img[start_y:end_y, start_x:end_x, :]) == 0:
+            raise Exception(
+                f"Cropped image is empty. Image dimensions: {img.shape}, "
+                f"Crop Region: {crop_x}, {crop_y}, {crop_x_offset}, {crop_y_offset}"
+            )
 
-        return Image.fromarray(
-            img[base_y : base_y + crop_y, base_x : base_x + crop_x, :]
-        )
+        return Image.fromarray(img[start_y:end_y, start_x:end_x, :])
     except BaseException as e:
         logging.exception(e)
         return None
@@ -2214,7 +2219,7 @@ def calculate_hero_time(progress, directory, hero, viewport):
 
             logging.debug(
                 'Calculating render time for hero element "%s" at position [%d, %d, %d, %d]'
-                % (hero["name"], hero["x"], hero["y"], hero["width"], hero["height"])
+                % (hero["name"], hero_x, hero_y, hero_width, hero_height)
             )
 
             # Apply the mask to the target frame to create the reference frame

package/lib/support/cli.js

@@ -584,6 +584,12 @@ module.exports.parseCommandLine = function parseCommandLine() {
         'Keep the original video. Use it when you have a Visual Metrics bug and want to create an issue at GitHub',
       group: 'video'
     })
+    .option('videoParams.thumbsize', {
+      default: 400,
+      describe:
+        'The maximum size of the thumbnail in the filmstrip. Default is 400 pixels in either direction. If videoParams.filmstripFullSize is used that setting overrides this.',
+      group: 'video'
+    })
     .option('videoParams.filmstripFullSize', {
       type: 'boolean',
       default: false,

package/lib/video/postprocessing/finetune/getTimingMetrics.js

@@ -52,7 +52,13 @@ module.exports = function (videoMetrics, timingMetrics, options) {
       value: vm.LastVisualChange
     });
   }
-  if (timingMetrics) {
+
+  if (vm.LargestContentfulPaint) {
+    metricsAndValues.push({
+      name: 'LargestContentfulPaint',
+      value: vm.LargestContentfulPaint
+    });
+  } else if (timingMetrics) {
     const pt = timingMetrics;
     metricsAndValues.push({
       name: 'DOMContentLoaded',

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

@@ -58,6 +58,8 @@ module.exports = {
       false
     );
 
+    const thumbsize = get(options, 'videoParams.thumbsize', 400);
+
     const scriptArgs = [
       '--video',
       videoPath,
@@ -112,6 +114,9 @@ module.exports = {
       scriptArgs.unshift('--dir', imageDirPath);
       if (fullSizeFilmstrip) {
         scriptArgs.push('--full');
+      } else if (thumbsize !== 400) {
+        scriptArgs.push('--thumbsize');
+        scriptArgs.push(thumbsize);
       }
     }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "description": "Browsertime",
-  "version": "16.2.2",
+  "version": "16.5.0",
   "bin": "./bin/browsertime.js",
   "dependencies": {
     "@cypress/xvfb": "1.2.4",