Bug 1580431 - Start time, end time relative to first request in the T…

…imings Panel. r=Honza. Differential Revision: https://phabricator.services.mozilla.com/D54297 --HG-- extra : moz-landing-system : lando
dothq · Nov 26, 2019 · 1ca199f · 1ca199f
1 parent e9711f4
commit 1ca199f
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 2 deletions.
diff --git a/devtools/client/locales/en-US/netmonitor.properties b/devtools/client/locales/en-US/netmonitor.properties
@@ -324,6 +324,18 @@ netmonitor.timings.requestTiming=Request Timing
 # through the "Server-Timing" header.
 netmonitor.timings.serverTiming=Server Timing
 
+# LOCALIZATION NOTE (netmonitor.timings.queuedAt): This is relative queued time to the
+# first request
+netmonitor.timings.queuedAt=Queued: %S
+
+# LOCALIZATION NOTE (netmonitor.timings.startedAt): Related to first request,
+# when the request actually started
+netmonitor.timings.startedAt=Started: %S
+
+# LOCALIZATION NOTE (netmonitor.timings.downloadedAt): Related to first request,
+# when the request actually finished downloading
+netmonitor.timings.downloadedAt=Downloaded: %S
+
 # LOCALIZATION NOTE (networkMenu.millisecond): This is the label displayed
 # in the network menu specifying timing interval divisions (in milliseconds).
 networkMenu.millisecond=%S ms

diff --git a/devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css b/devtools/client/netmonitor/src/assets/styles/NetworkDetailsPanel.css
@@ -412,6 +412,25 @@
   display: flex;
 }
 
+.network-monitor .timings-overview {
+  display: flex;
+  border-bottom: 1px solid var(--theme-splitter-color);
+  padding: 4px;
+}
+
+.network-monitor .timings-overview-item {
+  display: inline-flex;
+}
+
+.network-monitor .timings-overview-item:not(:first-of-type)::before {
+  content: "";
+  display: inline-flex;
+  margin-inline-end: 10px;
+  margin-inline-start: 10px;
+  width: 1px;
+  background: var(--theme-splitter-color);
+}
+
 .network-monitor .timings-label {
   width: 10em;
 }

diff --git a/devtools/client/netmonitor/src/components/TimingsPanel.js b/devtools/client/netmonitor/src/components/TimingsPanel.js
@@ -4,6 +4,9 @@
 
 "use strict";
 
+const {
+  connect,
+} = require("devtools/client/shared/redux/visibility-handler-connect");
 const { Component } = require("devtools/client/shared/vendor/react");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
@@ -29,6 +32,7 @@ class TimingsPanel extends Component {
     return {
       connector: PropTypes.object.isRequired,
       request: PropTypes.object.isRequired,
+      firstRequestStartedMs: PropTypes.number.isRequired,
     };
   }
 
@@ -94,13 +98,18 @@ class TimingsPanel extends Component {
   }
 
   render() {
-    const { eventTimings, totalTime } = this.props.request;
+    const { eventTimings, totalTime, startedMs } = this.props.request;
+    const { firstRequestStartedMs } = this.props;
 
     if (!eventTimings) {
       return null;
     }
 
     const { timings, offsets } = eventTimings;
+    const queuedAt = startedMs - firstRequestStartedMs;
+    const startedAt = queuedAt + timings.blocked;
+    const downloadedAt = queuedAt + totalTime;
+
     const timelines = TIMING_KEYS.map((type, idx) => {
       // Determine the relative offset for each timings box. For example, the
       // offset of third timings box will be 0 + blocked offset + dns offset
@@ -150,6 +159,30 @@ class TimingsPanel extends Component {
 
     return div(
       { className: "panel-container" },
+      div(
+        { className: "timings-overview" },
+        span(
+          { className: "timings-overview-item" },
+          L10N.getFormatStr(
+            "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)
+          )
+        )
+      ),
       div(
         { className: "label-separator" },
         L10N.getStr("netmonitor.timings.requestTiming")
@@ -164,4 +197,6 @@ class TimingsPanel extends Component {
   }
 }
 
-module.exports = TimingsPanel;
+module.exports = connect(state => ({
+  firstRequestStartedMs: state.requests.firstStartedMs,
+}))(TimingsPanel);