Add support for showing layout shifted elements.

lib/core/engine/command/measure.js

@@ -13,6 +13,7 @@ const { isAndroidConfigured, Android } = require('../../../android');
 const TCPDump = require('../../../support/tcpdump');
 const delay = ms => new Promise(res => setTimeout(res, ms));
 const highlightLargestContentfulPaint = require('./util/lcpHighlightScript.js');
+const highlightLS = require('./util/lsHighlightScript.js');
 // Make this configurable
 const ANDROID_DELAY_TIME = 2000;
 const IOS_DELAY_TIME = 1000;
@@ -384,6 +385,32 @@ class Measure {
       }
     }
 
+    const supportLS = await this.browser.runScript(
+      `
+      const supported = PerformanceObserver.supportedEntryTypes;
+      if (!supported || supported.indexOf('layout-shift') === -1) {
+        return false;
+      } else return true;
+      `,
+      'SUPPORT_LS'
+    );
+
+    if (this.options.screenshotLS && supportLS) {
+      await this.browser.runScript(highlightLS, 'HIGHLIGHT_LS');
+      const screenshot = await this.browser.takeScreenshot(url);
+      await this.screenshotManager.save(
+        'layoutShift',
+        screenshot,
+        url,
+        this.index
+      );
+      const lsScriptClean = `
+          const c = document.getElementById("browsertime-ls");
+          if (c) c.remove();
+        `;
+      await this.browser.runScript(lsScriptClean, 'CLEAN_LS');
+    }
+
     const supportLCP = await this.browser.runScript(
       `
       const supported = PerformanceObserver.supportedEntryTypes;

lib/core/engine/command/util/lsHighlightScript.js

@@ -0,0 +1,44 @@
+'use strict';
+module.exports = `
+const observer = new PerformanceObserver(list => {});
+observer.observe({ type: 'layout-shift', buffered: true });
+const entries = observer.takeRecords();
+if (entries.length > 0) {
+    const canvas = document.createElement('canvas'); 
+    canvas.style.width='100%';
+    canvas.style.height='100%';
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    canvas.style.position='absolute';
+    canvas.style.left=0;
+    canvas.style.top=0;
+    canvas.style.zIndex=2147483646;
+    canvas.id = "browsertime-ls";
+    document.body.appendChild(canvas);
+    for (let entry of entries) {
+        if (entry.hadRecentInput) {
+            continue;
+          } 
+        for (let source of entry.sources) {
+            if (source.node && source.node.getBoundingClientRect) {
+                const clientRect = source.node.getBoundingClientRect();
+                const context = canvas.getContext('2d');
+                context.fillStyle = "yellow";
+                context.strokeStyle = "yellow";
+                context.globalAlpha = 0.03;
+                context.rect(Math.max(0,clientRect.x), Math.max(0,clientRect.y), Math.min(clientRect.width, window.innerWidth - clientRect.x) , Math.min(clientRect.height, window.innerHeight-clientRect.y));
+                context.fill();
+
+                context.globalAlpha = 1.0;
+                context.rect(Math.max(0,clientRect.x), Math.max(0,clientRect.y), Math.min(clientRect.width, window.innerWidth - clientRect.x) , Math.min(clientRect.height, window.innerHeight-clientRect.y));
+                context.stroke();
+
+                context.font = "bolder 24px Arial";
+                context.fillStyle = "black";
+                context.fillText(entry.value.toFixed(4), Math.max(0,clientRect.x) + 24,Math.max(0,clientRect.y) + 24);
+
+            }
+        }
+    }
+}
+`;

lib/support/cli.js

@@ -728,6 +728,13 @@ module.exports.parseCommandLine = function parseCommandLine() {
         'Save one screenshot per iteration that shows the largest contentful paint element (if the browser supports LCP).',
       group: 'Screenshot'
     })
+    .option('screenshotLS', {
+      type: 'boolean',
+      default: false,
+      describe:
+        'Save one screenshot per iteration that shows the layout shift elements (if the browser supports layout shift).',
+      group: 'Screenshot'
+    })
     .option('screenshotParams.type', {
       describe: 'Set the file type of the screenshot',
       choices: ['png', 'jpg'],