Bug 1601911 - WebConsole throws when trying to access Timing panel in network message detail. r=nchevobbe

Differential Revision: https://phabricator.services.mozilla.com/D56530

--HG--
extra : moz-landing-system : lando

devtools/client/netmonitor/src/components/TimingsPanel.js

@@ -106,9 +106,14 @@ class TimingsPanel extends Component {
     }
 
     const { timings, offsets } = eventTimings;
-    const queuedAt = startedMs - firstRequestStartedMs;
+    let queuedAt, startedAt, downloadedAt;
-    const startedAt = queuedAt + timings.blocked;
+    const isFirstRequestStartedAvailable = firstRequestStartedMs !== null;
-    const downloadedAt = queuedAt + totalTime;
+
+    if (isFirstRequestStartedAvailable) {
+      queuedAt = startedMs - firstRequestStartedMs;
+      startedAt = queuedAt + timings.blocked;
+      downloadedAt = queuedAt + totalTime;
+    }
 
     const timelines = TIMING_KEYS.map((type, idx) => {
       // Determine the relative offset for each timings box. For example, the
@@ -159,30 +164,31 @@ class TimingsPanel extends Component {
 
     return div(
       { className: "panel-container" },
-      div(
+      isFirstRequestStartedAvailable &&
-        { className: "timings-overview" },
+        div(
-        span(
+          { className: "timings-overview" },
-          { className: "timings-overview-item" },
+          span(
-          L10N.getFormatStr(
+            { className: "timings-overview-item" },
-            "netmonitor.timings.queuedAt",
+            L10N.getFormatStr(
-            getFormattedTime(queuedAt)
+              "netmonitor.timings.queuedAt",
+              getFormattedTime(queuedAt)
+            )
+          ),
+          span(
+            { className: "timings-overview-item" },
+            L10N.getFormatStr(
+              "netmonitor.timings.startedAt",
+              getFormattedTime(startedAt)
+            )
+          ),
+          span(
+            { className: "timings-overview-item" },
+            L10N.getFormatStr(
+              "netmonitor.timings.downloadedAt",
+              getFormattedTime(downloadedAt)
+            )
           )
         ),
-        span(
-          { className: "timings-overview-item" },
-          L10N.getFormatStr(
-            "netmonitor.timings.startedAt",
-            getFormattedTime(startedAt)
-          )
-        ),
-        span(
-          { className: "timings-overview-item" },
-          L10N.getFormatStr(
-            "netmonitor.timings.downloadedAt",
-            getFormattedTime(downloadedAt)
-          )
-        )
-      ),
       div(
         { className: "label-separator" },
         L10N.getStr("netmonitor.timings.requestTiming")
@@ -198,5 +204,5 @@ class TimingsPanel extends Component {
 }
 
 module.exports = connect(state => ({
-  firstRequestStartedMs: state.requests.firstStartedMs,
+  firstRequestStartedMs: state.requests ? state.requests.firstStartedMs : null,
 }))(TimingsPanel);