browsertime 16.16.0 → 17.0.0-beta.0

package/lib/support/util.js

@@ -1,252 +1,232 @@
-'use strict';
+import groupBy from 'lodash.groupby';
+import intel from 'intel';
+const log = intel.getLogger('browsertime');
 
-const groupBy = require('lodash.groupby');
-const log = require('intel').getLogger('browsertime');
-
-module.exports = {
-  formatMetric(name, metric, multiple, inMs, extras) {
-    if (metric === undefined) return null;
-    function fmt(value) {
-      if (inMs) {
-        if (value < 1000) {
-          return value + 'ms';
-        } else {
-          return (value / 1000).toFixed(2) + 's';
-        }
-      } else return value;
-    }
+export function formatMetric(name, metric, multiple, inMs, extras) {
+  if (metric === undefined) return;
+  function fmt(value) {
+    if (inMs) {
+      return value < 1000 ? value + 'ms' : (value / 1000).toFixed(2) + 's';
+    } else return value;
+  }
 
-    let formatted = `${name}: ${fmt(multiple ? metric.median : metric)}`;
-    if (extras) {
-      formatted += ` (σ${fmt(metric.stddev.toFixed(2))} ${
-        metric.stddev > 0 ? metric.rsd.toFixed(1) : '0'
-      }%)`;
-    }
-    return formatted;
-  },
-  logResultLogLine(results) {
-    let index = 0;
-    for (let result of results) {
-      let totalSize = 0;
-      let requests = '';
-      let firstPaint = '',
-        domContent = '',
-        pageLoad = '',
-        speedIndex = '',
-        perceptualSpeedIndex = '',
-        contentfulSpeedIndex = '',
-        startRender = '',
-        visualComplete85 = '',
-        backEndTime = '',
-        lastVisualChange = '',
-        memory = '',
-        lcp = '',
-        fcp = '',
-        cls = '',
-        tbt = '',
-        nRuns = result.browserScripts.length,
-        m = nRuns > 1;
-      if (results.har && results.har.log.pages[index]) {
-        // get the id
-        let pageId = results.har.log.pages[index].id;
-        let entriesByPage = groupBy(results.har.log.entries, 'pageref');
-        requests = entriesByPage[pageId]
-          ? entriesByPage[pageId].length + ' requests'
-          : '';
-        if (entriesByPage[pageId]) {
-          for (const request of entriesByPage[pageId]) {
-            // transfer size
-            totalSize += request.response.bodySize;
-          }
-        }
-        if (totalSize > 1024) {
-          totalSize = (totalSize / 1024).toFixed(2) + ' kb';
-        } else {
-          totalSize = totalSize + ' bytes';
+  let formatted = `${name}: ${fmt(multiple ? metric.median : metric)}`;
+  if (extras) {
+    formatted += ` (σ${fmt(metric.stddev.toFixed(2))} ${
+      metric.stddev > 0 ? metric.rsd.toFixed(1) : '0'
+    }%)`;
+  }
+  return formatted;
+}
+export function logResultLogLine(results) {
+  let index = 0;
+  for (let result of results) {
+    let totalSize = 0;
+    let requests = '';
+    let firstPaint = '',
+      domContent = '',
+      pageLoad = '',
+      speedIndex = '',
+      perceptualSpeedIndex = '',
+      contentfulSpeedIndex = '',
+      startRender = '',
+      visualComplete85 = '',
+      backEndTime = '',
+      lastVisualChange = '',
+      memory = '',
+      lcp = '',
+      fcp = '',
+      cls = '',
+      tbt = '',
+      nRuns = result.browserScripts.length,
+      m = nRuns > 1;
+    if (results.har && results.har.log.pages[index]) {
+      // get the id
+      let pageId = results.har.log.pages[index].id;
+      let entriesByPage = groupBy(results.har.log.entries, 'pageref');
+      requests = entriesByPage[pageId]
+        ? entriesByPage[pageId].length + ' requests'
+        : '';
+      if (entriesByPage[pageId]) {
+        for (const request of entriesByPage[pageId]) {
+          // transfer size
+          totalSize += request.response.bodySize;
         }
       }
+      totalSize =
+        totalSize > 1024
+          ? (totalSize / 1024).toFixed(2) + ' kb'
+          : totalSize + ' bytes';
+    }
 
-      if (result.statistics.timings && result.statistics.timings.pageTimings) {
-        let pt = result.statistics.timings.pageTimings,
-          t = result.statistics.timings,
-          vm = result.statistics.visualMetrics,
-          pi = result.statistics.pageinfo,
-          cpu = result.statistics.cpu;
+    if (result.statistics.timings && result.statistics.timings.pageTimings) {
+      let pt = result.statistics.timings.pageTimings,
+        t = result.statistics.timings,
+        vm = result.statistics.visualMetrics,
+        pi = result.statistics.pageinfo,
+        cpu = result.statistics.cpu;
 
-        firstPaint = this.formatMetric(
-          'firstPaint',
-          t.firstPaint,
+      firstPaint = formatMetric('firstPaint', t.firstPaint, true, true, m);
+      if (t.largestContentfulPaint) {
+        lcp = formatMetric(
+          'LCP',
+          t.largestContentfulPaint.renderTime,
           true,
           true,
           m
         );
-        if (t.largestContentfulPaint) {
-          lcp = this.formatMetric(
-            'LCP',
-            t.largestContentfulPaint.renderTime,
-            true,
-            true,
-            m
-          );
-        }
-
-        if (pi && pi.cumulativeLayoutShift) {
-          cls = this.formatMetric(
-            'CLS',
-            pi.cumulativeLayoutShift,
-            true,
-            false,
-            m
-          );
-        }
-
-        if (cpu && cpu.longTasks && cpu.longTasks.totalBlockingTime) {
-          tbt = this.formatMetric(
-            'TBT',
-            cpu.longTasks.totalBlockingTime,
-            true,
-            true,
-            m
-          );
-        }
+      }
 
-        if (
-          result.statistics.timings.paintTiming &&
-          result.statistics.timings.paintTiming['first-contentful-paint']
-        ) {
-          fcp = this.formatMetric(
-            'FCP',
-            result.statistics.timings.paintTiming['first-contentful-paint'],
-            true,
-            true,
-            m
-          );
-        }
+      if (pi && pi.cumulativeLayoutShift) {
+        cls = formatMetric('CLS', pi.cumulativeLayoutShift, true, false, m);
+      }
 
-        domContent = this.formatMetric(
-          'DOMContentLoaded',
-          pt.domContentLoadedTime,
-          true,
-          true,
-          m
-        );
-        speedIndex = this.formatMetric(
-          'speedIndex',
-          vm ? vm.SpeedIndex : vm,
-          true,
-          true,
-          m
-        );
-        perceptualSpeedIndex = this.formatMetric(
-          'perceptualSpeedIndex',
-          vm ? vm.PerceptualSpeedIndex : vm,
-          true,
-          true,
-          m
-        );
-        contentfulSpeedIndex = this.formatMetric(
-          'contentfulSpeedIndex',
-          vm ? vm.ContentfulSpeedIndex : vm,
-          true,
-          true,
-          m
-        );
-        startRender = this.formatMetric(
-          'firstVisualChange',
-          vm ? vm.FirstVisualChange : vm,
+      if (cpu && cpu.longTasks && cpu.longTasks.totalBlockingTime) {
+        tbt = formatMetric(
+          'TBT',
+          cpu.longTasks.totalBlockingTime,
           true,
           true,
           m
         );
-        lastVisualChange = this.formatMetric(
-          'lastVisualChange',
-          vm ? vm.LastVisualChange : vm,
-          true,
-          true,
-          m
-        );
-        visualComplete85 = this.formatMetric(
-          'visualComplete85',
-          vm ? vm.VisualComplete85 : vm,
+      }
+
+      if (
+        result.statistics.timings.paintTiming &&
+        result.statistics.timings.paintTiming['first-contentful-paint']
+      ) {
+        fcp = formatMetric(
+          'FCP',
+          result.statistics.timings.paintTiming['first-contentful-paint'],
           true,
           true,
           m
         );
-        pageLoad = this.formatMetric('Load', pt.pageLoadTime, true, true, m);
-        backEndTime = this.formatMetric('TTFB', pt.backEndTime, true, true, m);
       }
 
-      if (result.statistics.memory) {
-        let mem = result.statistics.memory;
-        for (let val in mem) {
-          mem[val] = Math.round(mem[val] / 1024 / 1024);
-        }
+      domContent = formatMetric(
+        'DOMContentLoaded',
+        pt.domContentLoadedTime,
+        true,
+        true,
+        m
+      );
+      speedIndex = formatMetric(
+        'speedIndex',
+        vm ? vm.SpeedIndex : vm,
+        true,
+        true,
+        m
+      );
+      perceptualSpeedIndex = formatMetric(
+        'perceptualSpeedIndex',
+        vm ? vm.PerceptualSpeedIndex : vm,
+        true,
+        true,
+        m
+      );
+      contentfulSpeedIndex = formatMetric(
+        'contentfulSpeedIndex',
+        vm ? vm.ContentfulSpeedIndex : vm,
+        true,
+        true,
+        m
+      );
+      startRender = formatMetric(
+        'firstVisualChange',
+        vm ? vm.FirstVisualChange : vm,
+        true,
+        true,
+        m
+      );
+      lastVisualChange = formatMetric(
+        'lastVisualChange',
+        vm ? vm.LastVisualChange : vm,
+        true,
+        true,
+        m
+      );
+      visualComplete85 = formatMetric(
+        'visualComplete85',
+        vm ? vm.VisualComplete85 : vm,
+        true,
+        true,
+        m
+      );
+      pageLoad = formatMetric('Load', pt.pageLoadTime, true, true, m);
+      backEndTime = formatMetric('TTFB', pt.backEndTime, true, true, m);
+    }
 
-        memory = this.formatMetric('Memory', mem, true, false, m);
-        memory = memory + 'mb';
+    if (result.statistics.memory) {
+      let mem = result.statistics.memory;
+      for (let value in mem) {
+        mem[value] = Math.round(mem[value] / 1024 / 1024);
       }
 
-      let lines = [
-          `${requests}`,
-          `${totalSize > 0 ? totalSize : ''}`,
-          backEndTime,
-          firstPaint,
-          startRender,
-          fcp,
-          domContent,
-          lcp,
-          cls,
-          tbt,
-          pageLoad,
-          memory,
-          speedIndex,
-          perceptualSpeedIndex,
-          contentfulSpeedIndex,
-          visualComplete85,
-          lastVisualChange
-        ],
-        note = m ? ` (${nRuns} runs)` : '';
-
-      lines = lines.filter(Boolean).join(', ');
-      log.info(`${result.info.url} ${lines}${note}`);
-      index++;
+      memory = formatMetric('Memory', mem, true, false, m);
+      memory = memory + 'mb';
     }
-  },
-  toArray(arrayLike) {
-    if (arrayLike === undefined || arrayLike === null) {
-      return [];
-    }
-    if (Array.isArray(arrayLike)) {
-      return arrayLike;
-    }
-    return [arrayLike];
-  },
-  jsonifyVisualProgress(visualProgress) {
-    // Original data looks like
-    //  "0=0, 1500=81, 1516=81, 1533=84, 1550=84, 1566=84, 1600=95, 1683=95, 1833=100"
-    if (typeof visualProgress === 'string') {
-      const visualProgressArray = [];
-      for (const value of visualProgress.split(', ')) {
-        const [timestamp, percent] = value.split('=');
-        visualProgressArray.push({
-          timestamp: parseInt(timestamp, 10),
-          percent: parseInt(percent, 10)
-        });
-      }
-      return visualProgressArray;
+
+    let lines = [
+        `${requests}`,
+        `${totalSize > 0 ? totalSize : ''}`,
+        backEndTime,
+        firstPaint,
+        startRender,
+        fcp,
+        domContent,
+        lcp,
+        cls,
+        tbt,
+        pageLoad,
+        memory,
+        speedIndex,
+        perceptualSpeedIndex,
+        contentfulSpeedIndex,
+        visualComplete85,
+        lastVisualChange
+      ],
+      note = m ? ` (${nRuns} runs)` : '';
+
+    lines = lines.filter(Boolean).join(', ');
+    log.info(`${result.info.url} ${lines}${note}`);
+    index++;
+  }
+}
+export function toArray(arrayLike) {
+  if (arrayLike === undefined || arrayLike === null) {
+    return [];
+  }
+  if (Array.isArray(arrayLike)) {
+    return arrayLike;
+  }
+  return [arrayLike];
+}
+export function jsonifyVisualProgress(visualProgress) {
+  // Original data looks like
+  //  "0=0, 1500=81, 1516=81, 1533=84, 1550=84, 1566=84, 1600=95, 1683=95, 1833=100"
+  if (typeof visualProgress === 'string') {
+    const visualProgressArray = [];
+    for (const value of visualProgress.split(', ')) {
+      const [timestamp, percent] = value.split('=');
+      visualProgressArray.push({
+        timestamp: Number.parseInt(timestamp, 10),
+        percent: Number.parseInt(percent, 10)
+      });
     }
-    return visualProgress;
-  },
-  adjustVisualProgressTimestamps(
-    visualProgress,
-    profilerStartTime,
-    recordingStartTime
-  ) {
-    // calculate offset between unix timestamps which represents the profiler start
-    // time and the time of the first frame after the orange frame after recording start
-    visualProgress.forEach(value => {
-      value.timestamp += recordingStartTime - profilerStartTime;
-    });
-    return visualProgress;
+    return visualProgressArray;
+  }
+  return visualProgress;
+}
+export function adjustVisualProgressTimestamps(
+  visualProgress,
+  profilerStartTime,
+  recordingStartTime
+) {
+  // calculate offset between unix timestamps which represents the profiler start
+  // time and the time of the first frame after the orange frame after recording start
+  for (const value of visualProgress) {
+    value.timestamp += recordingStartTime - profilerStartTime;
   }
-};
+  return visualProgress;
+}

package/lib/support/xvfb.js

@@ -1,13 +1,11 @@
-'use strict';
+import { promisify } from 'node:util';
+import get from 'lodash.get';
+import Xvfb from '@cypress/xvfb';
+import { xvfbDisplay } from '../video/defaults.js';
+import getViewPort from '../support/getViewPort.js';
+import { isAndroidConfigured } from '../android/index.js';
 
-const Xvfb = require('@cypress/xvfb');
-const get = require('lodash.get');
-const videoDefaults = require('../video/defaults');
-const getViewPort = require('../support/getViewPort');
-const { promisify } = require('util');
-const { isAndroidConfigured } = require('../android');
-
-function buildXvfbArgs({ display, screen = 0, size, silent }) {
+function buildXvfbArguments({ display, screen = 0, size, silent }) {
   return {
     displayNum: display,
     silent,
@@ -23,12 +21,12 @@ async function startXvfb({ size, options }) {
     const viewPort = size.split('x');
     xvfbSize = Number(viewPort[0]) + extraSizeInFirefox + 'x' + viewPort[1];
   }
-  const xvfbArgs = buildXvfbArgs({
-    display: get(options, 'xvfbParams.display', videoDefaults.xvfbDisplay),
+  const xvfbArguments = buildXvfbArguments({
+    display: get(options, 'xvfbParams.display', xvfbDisplay),
     size: xvfbSize,
     silent: options.verbose >= 2 ? false : true
   });
-  const xvfb = new Xvfb(xvfbArgs);
+  const xvfb = new Xvfb(xvfbArguments);
   const start = promisify(xvfb.start.bind(xvfb));
   await start();
   return xvfb;
@@ -70,4 +68,4 @@ class XVFB {
   }
 }
 
-module.exports = XVFB;
+export default XVFB;

package/lib/video/defaults.js

@@ -1,10 +1,6 @@
-'use strict';
-
-module.exports = {
-  framerate: 30,
-  crf: 23,
-  xvfbDisplay: 99,
-  addTimer: true,
-  convert: true,
-  threads: 0
-};
+export const framerate = 30;
+export const crf = 23;
+export const xvfbDisplay = 99;
+export const addTimer = true;
+export const convert = true;
+export const threads = 0;

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

@@ -1,10 +1,9 @@
-'use strict';
-
-const execa = require('execa');
-const log = require('intel').getLogger('browsertime.video');
-const getTimingMetrics = require('./getTimingMetrics');
-const getFont = require('./getFont');
-const { isAndroidConfigured } = require('../../../android');
+import { execa } from 'execa';
+import intel from 'intel';
+import getTimingMetrics from './getTimingMetrics.js';
+import getFont from './getFont.js';
+import { isAndroidConfigured } from '../../../android/index.js';
+const log = intel.getLogger('browsertime.video');
 
 function isSmallish(options) {
   return (
@@ -15,7 +14,7 @@ function isSmallish(options) {
   );
 }
 
-module.exports = async function (
+export default async function (
   inputFile,
   outputFile,
   videoMetrics,
@@ -23,7 +22,7 @@ module.exports = async function (
   options
 ) {
   /** Add timer and metrics to the video */
-  const args = ['-nostdin', '-i', inputFile, '-c:v', 'libx264'];
+  const arguments_ = ['-nostdin', '-i', inputFile, '-c:v', 'libx264'];
   const allTimingMetrics = getTimingMetrics(
     videoMetrics,
     timingMetrics,
@@ -40,11 +39,12 @@ module.exports = async function (
     fontSize = 32;
   }
 
-  args.push(
+  arguments_.push(
     '-vf',
-    `drawtext=${fontFile}x=w/2-(tw/2): y=H-h/10:fontcolor=white:fontsize=h/${fontSize}:box=1:boxcolor=0x000000AA:text='%{pts\\:hms}'${allTimingMetrics}`
+    `drawtext=${fontFile}x=w/2-(tw/2): y=H-h/10:fontcolor=white:fontsize=h/${fontSize}:box=1:boxcolor=0x000000AA:text='%{pts\\:hms}'${allTimingMetrics}`,
+    '-y',
+    outputFile
   );
-  args.push('-y', outputFile);
-  log.verbose('Adding text with FFMPEG ' + args.join(' '));
-  return execa('ffmpeg', args);
-};
+  log.verbose('Adding text with FFMPEG ' + arguments_.join(' '));
+  return execa('ffmpeg', arguments_);
+}

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

@@ -1,10 +1,16 @@
-'use strict';
+import { execa } from 'execa';
+import intel from 'intel';
+const log = intel.getLogger('browsertime.video');
 
-const execa = require('execa');
-const log = require('intel').getLogger('browsertime.video');
-
-module.exports = async function (src, dest, framerate) {
-  const scriptArgs = ['-nostdin', '-i', src, '-r', framerate, dest];
+export default async function (source, destination, framerate) {
+  const scriptArguments = [
+    '-nostdin',
+    '-i',
+    source,
+    '-r',
+    framerate,
+    destination
+  ];
   log.info('Converting video to %s fps', framerate);
-  return execa('ffmpeg', scriptArgs);
-};
+  return execa('ffmpeg', scriptArguments);
+}

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

@@ -1,17 +1,15 @@
-'use strict';
-
-const fs = require('fs');
-module.exports = function (options) {
+import { existsSync } from 'node:fs';
+export default function (options) {
   // If the font is not part of the params and we're on macOS
   // we check that SFNSMono.ttf is available
   if (!options.videoParams.fontPath && process.platform === 'darwin') {
     const systemFontFile = '/System/Library/Fonts/SFNSMono.ttf';
     try {
-      if (fs.existsSync(systemFontFile)) {
+      if (existsSync(systemFontFile)) {
         return systemFontFile + ':';
       }
       return '';
-    } catch (err) {
+    } catch {
       return '';
     }
   } else if (!options.videoParams.fontPath && options.docker) {
@@ -19,15 +17,15 @@ module.exports = function (options) {
     const systemFontFile =
       '/usr/share/fonts/truetype/dejavu/DejaVuSansMono.ttf';
     try {
-      if (fs.existsSync(systemFontFile)) {
+      if (existsSync(systemFontFile)) {
         return systemFontFile + ':';
       }
       return '';
-    } catch (err) {
+    } catch {
       return '';
     }
   } else
     return options.videoParams.fontPath
       ? options.videoParams.fontPath + ':'
       : '';
-};
+}