Add --enableVideoRun (#4177)

* Add --enableVideoRun

* lint

lib/cli/cli.js

@@ -565,6 +565,12 @@ export async function parseCommandLine() {
       describe:
         'Make one extra run that collects the profiling trace log (no other metrics is collected). For Chrome it will collect the timeline trace, for Firefox it will get the Geckoprofiler trace. This means you do not need to get the trace for all runs and can skip the overhead it produces.'
     })
+    .option('browsertime.enableVideoRun', {
+      alias: 'enableVideoRun',
+      type: 'boolean',
+      describe:
+        'Make one extra run that collects video and visual metrics. This means you can do your runs with --visualMetrics true --video false --enableVideoRun true to collect visual metrics from all runs and save a video from the profile/video run. If you run it together with --enableProfileRun it will also collect profiling trace.'
+    })
     .option('browsertime.videoParams.filmstripFullSize', {
       alias: 'videoParams.filmstripFullSize',
       type: 'boolean',

lib/plugins/browsertime/analyzer.js

@@ -66,22 +66,33 @@ async function preWarmServer(urls, options, scriptOrMultiple) {
 }
 
 async function extraProfileRun(urls, options, scriptOrMultiple) {
-  log.info('Make one extra run to collect trace information');
+  log.info('Make one extra run to collect trace/video information');
   options.iterations = 1;
-  if (options.browser === 'firefox') {
-    options.firefox.geckoProfiler = true;
-  } else if (options.browser === 'chrome') {
-    options.chrome.enableTraceScreenshots = true;
-    options.chrome.traceCategory = ['disabled-by-default-v8.cpu_profiler'];
-    options.chrome.timeline = true;
+  if (options.enableProfileRun) {
+    if (options.browser === 'firefox') {
+      options.firefox.geckoProfiler = true;
+    } else if (options.browser === 'chrome') {
+      options.chrome.enableTraceScreenshots = true;
+      options.chrome.traceCategory = ['disabled-by-default-v8.cpu_profiler'];
+      options.chrome.timeline = true;
+    }
+  }
+  if (options.enableVideoRun) {
+    options.video = true;
+    options.visualMetrics = true;
+  } else {
+    options.video = false;
+    options.visualMetrics = false;
   }
-  options.video = false;
-  options.visualMetrics = false;
   const traceEngine = new BrowsertimeEngine(options);
+  const scriptCategories = await browserScripts.allScriptCategories();
+  let scriptsByCategory =
+    await browserScripts.getScriptsForCategories(scriptCategories);
+
   await traceEngine.start();
   await (scriptOrMultiple
-    ? traceEngine.runMultiple(urls, {})
-    : traceEngine.run(urls, {}));
+    ? traceEngine.runMultiple(urls, scriptsByCategory)
+    : traceEngine.run(urls, scriptsByCategory));
   await traceEngine.stop();
 }
 
@@ -187,13 +198,13 @@ export async function analyzeUrl(
     await engine.start();
     if (scriptOrMultiple) {
       const res = await engine.runMultiple(url, scriptsByCategory, asyncScript);
-      if (btOptions.enableProfileRun) {
+      if (btOptions.enableProfileRun || btOptions.enableVideoRun) {
         await extraProfileRun(url, btOptions, scriptOrMultiple);
       }
       return res;
     } else {
       const res = await engine.run(url, scriptsByCategory, asyncScript);
-      if (btOptions.enableProfileRun) {
+      if (btOptions.enableProfileRun || btOptions.enableVideoRun) {
         await extraProfileRun(url, btOptions, scriptOrMultiple);
       }
       return res;

lib/plugins/html/templates/url/summary/index.pug

@@ -258,7 +258,7 @@ block content
       section#waterfall-panel
         include ../waterfall/index.pug
 
-    if options.browsertime.video
+    if options.browsertime.video || options.browsertime.enableVideoRun
       section#video-panel
         include ../video/index.pug
 

lib/plugins/html/templates/url/summary/tabs.pug

@@ -7,7 +7,7 @@
   if d.browsertime && d.browsertime.pageSummary
     a(id='metrics', href='#metrics', onclick='return selectTab(this, true);')
       | Metrics
-  if options.browsertime.video
+  if options.browsertime.video || options.enableVideoRun
     a(id='video', href='#video', onclick='return selectTab(this, true);')
       | Video
   if (options.browsertime.visualMetrics && options.videoParams.createFilmstrip) || options.browsertime.chrome && options.browsertime.chrome.enableTraceScreenshots

lib/plugins/html/templates/url/video/index.pug

@@ -1,5 +1,6 @@
-- const videoIndex = medianRun ? medianRun.runIndex : iteration;
+- let videoIndex = medianRun ? medianRun.runIndex : iteration;
 - const width = options.mobile || options.android || (options.safari && options.safari.useSimulator) ? '400' : '800'
+- videoIndex = options.browsertime.enableVideoRun ? '1' : videoIndex; 
 
 small
     || 
@@ -13,6 +14,11 @@ h3 Video
     video(controls, preload='none', width=width)
       source(src='data/video/' + videoIndex +'.mp4', type='video/mp4')
 
+if options.browsertime.enableVideoRun 
+  p Video from --enableVideoRun
+
 a#download-video
-- const videoPath = 'data/video/' + (iteration ? iteration : medianRun.runIndex ) +'.mp4'
+- let downloadable = iteration ? iteration : medianRun.runIndex;
+- downloadable = options.browsertime.enableVideoRun ? '1' : downloadable;
+- const videoPath = 'data/video/' + downloadable +'.mp4'
 a.button.button-download(href=videoPath, download=downloadName + '-video.mp4') Download video