Support the case where some visual metrics properties are missing

Fixes #3966

src/profile-logic/tracks.js

@@ -387,9 +387,17 @@ export function computeGlobalTracks(profile: Profile): GlobalTrack[] {
 
   // Add the visual progress tracks if we have visualMetrics data.
   if (profile.meta && profile.meta.visualMetrics) {
-    globalTracks.push({ type: 'visual-progress' });
-    globalTracks.push({ type: 'perceptual-visual-progress' });
-    globalTracks.push({ type: 'contentful-visual-progress' });
+    const metrics = profile.meta.visualMetrics;
+    // Some metrics might be missing depending on the options specified to browsertime.
+    if (metrics.VisualProgress) {
+      globalTracks.push({ type: 'visual-progress' });
+    }
+    if (metrics.PerceptualSpeedIndexProgress) {
+      globalTracks.push({ type: 'perceptual-visual-progress' });
+    }
+    if (metrics.ContentfulSpeedIndexProgress) {
+      globalTracks.push({ type: 'contentful-visual-progress' });
+    }
   }
 
   // When adding a new track type, this sort ensures that the newer tracks are added

src/selectors/profile.js

@@ -170,14 +170,15 @@ export const getVisualMetrics: Selector<VisualMetrics> = (state) =>
     getVisualMetricsOrNull(state),
     'Tried to access the visual metrics when it does not exist.'
   );
-export const getVisualProgress: Selector<ProgressGraphData[]> = (state) =>
-  getVisualMetrics(state).VisualProgress;
-export const getPerceptualSpeedIndexProgress: Selector<ProgressGraphData[]> = (
+export const getVisualProgress: Selector<ProgressGraphData[] | null> = (
   state
-) => getVisualMetrics(state).PerceptualSpeedIndexProgress;
-export const getContentfulSpeedIndexProgress: Selector<ProgressGraphData[]> = (
-  state
-) => getVisualMetrics(state).ContentfulSpeedIndexProgress;
+) => getVisualMetrics(state).VisualProgress;
+export const getPerceptualSpeedIndexProgress: Selector<
+  ProgressGraphData[] | null
+> = (state) => getVisualMetrics(state).PerceptualSpeedIndexProgress ?? null;
+export const getContentfulSpeedIndexProgress: Selector<
+  ProgressGraphData[] | null
+> = (state) => getVisualMetrics(state).ContentfulSpeedIndexProgress ?? null;
 export const getProfilerConfiguration: Selector<?ProfilerConfiguration> = (
   state
 ) => getMeta(state).configuration;

src/types/gecko-profile.js

@@ -373,7 +373,7 @@ export type GeckoProfileFullMeta = {|
   // Visual metrics contains additional performance metrics such as Speed Index,
   // Perceptual Speed Index, and ContentfulSpeedIndex. This is optional because only
   // profiles generated by browsertime will have this property. Source code for
-  // browsertime can be found at https://github.com/mozilla/browsertime.
+  // browsertime can be found at https://github.com/sitespeedio/browsertime.
   visualMetrics?: VisualMetrics,
   // Optional because older Firefox versions may not have the data.
   configuration?: ProfilerConfiguration,

src/types/profile.js

@@ -685,30 +685,30 @@ export type ProgressGraphData = {|
  * along with their visual progression. These properties find their way into the gecko profile through running
  * browsertime, which is a tool that lets you collect performance metrics of your website.
  * Browsertime provides the option of generating a gecko profile, which then embeds these visual metrics
- * into the geckoprofile. More information about browsertime can be found through https://github.com/mozilla/browsertime.
+ * into the geckoprofile. More information about browsertime can be found through https://github.com/sitespeedio/browsertime.
+ * These values are generated only when browsertime is run with --visualMetrics.
+ *
+ * Most values from this object are generated by the python script https://github.com/sitespeedio/browsertime/blob/6e88284930c1d3ded8d9d95252d2e13c252d361c/browsertime/visualmetrics.py
+ * Especially look at the function calculate_visual_metrics.
+ * Then the script is called and the result processed from the JS files in https://github.com/sitespeedio/browsertime/tree/6e88284930c1d3ded8d9d95252d2e13c252d361c/lib/video/postprocessing/visualmetrics
+ * and https://github.com/sitespeedio/browsertime/blob/6e88284930c1d3ded8d9d95252d2e13c252d361c/lib/core/engine/iteration.js#L261-L264.
+ * Finally they're inserted into the JSON profile in https://github.com/sitespeedio/browsertime/blob/6e88284930c1d3ded8d9d95252d2e13c252d361c/lib/firefox/webdriver/firefox.js#L215-L230
  */
 export type VisualMetrics = {|
-  // ContentfulSpeedIndex and ContentfulSpeedIndexProgress generated here
-  // https://github.com/mozilla/browsertime/blob/f453e93152003c7befb9a062feab86e25a4e9550/vendor/visualmetrics.py#L1330
-  ContentfulSpeedIndex: number,
-  ContentfulSpeedIndexProgress: ProgressGraphData[],
-  // PerceptualSpeedIndex and PerceptualSpeedIndexProgress generated here
-  // https://github.com/mozilla/browsertime/blob/f453e93152003c7befb9a062feab86e25a4e9550/vendor/visualmetrics.py#L1319
-  PerceptualSpeedIndex: number,
-  PerceptualSpeedIndexProgress: ProgressGraphData[],
-  // FirstVisualChange, LastVisualChange, SpeedIndex generated here
-  // https://github.com/mozilla/browsertime/blob/f453e93152003c7befb9a062feab86e25a4e9550/vendor/visualmetrics.py#L1310
   FirstVisualChange: number,
   LastVisualChange: number,
   SpeedIndex: number,
-  // VisualProgress generated here
-  // https://github.com/mozilla/browsertime/blob/master/vendor/visualmetrics.py#L1390
   VisualProgress: ProgressGraphData[],
-  // VisualReadiness generated here
-  // https://github.com/mozilla/browsertime/blob/master/lib/video/postprocessing/visualmetrics/extraMetrics.js#L5
+  // Contentful and Perceptual values may be missing. They're generated only if
+  // the user specifies the options --visualMetricsContentful and
+  // --visualMetricsPerceptual in addition to --visualMetrics.
+  ContentfulSpeedIndex?: number,
+  ContentfulSpeedIndexProgress?: ProgressGraphData[],
+  PerceptualSpeedIndex?: number,
+  PerceptualSpeedIndexProgress?: ProgressGraphData[],
+  // VisualReadiness and VisualCompleteXX values are generated in
+  // https://github.com/sitespeedio/browsertime/blob/main/lib/video/postprocessing/visualmetrics/extraMetrics.js
   VisualReadiness: number,
-  // VisualComplete85, VisualComplete95, VisualComplete99 generated here
-  // https://github.com/mozilla/browsertime/blob/master/lib/video/postprocessing/visualmetrics/extraMetrics.js#L10
   VisualComplete85: number,
   VisualComplete95: number,
   VisualComplete99: number,
@@ -824,7 +824,7 @@ export type ProfileMeta = {|
   // Visual metrics contains additional performance metrics such as Speed Index,
   // Perceptual Speed Index, and ContentfulSpeedIndex. This is optional because only
   // profiles generated by browsertime will have this property. Source code for
-  // browsertime can be found at https://github.com/mozilla/browsertime.
+  // browsertime can be found at https://github.com/sitespeedio/browsertime.
   visualMetrics?: VisualMetrics,
   // The configuration of the profiler at the time of recording. Optional since older
   // versions of Firefox did not include it.