Bug 1431912 - Properly populate timing columns; r=ochameau draft
authorJan Odvarko <odvarko@gmail.com>
Wed, 24 Jan 2018 19:13:52 +0100
changeset 724227 c1086a4151152ed01c53a9f06b4bc08aaf8ec3b2
parent 723950 b0baaec09caf3e1b30ec6b238f5c46ef9b3188be
child 724228 50eea4caf3bf71bbc02ec047740b9326afb33861
push id96700
push userjodvarko@mozilla.com
push dateWed, 24 Jan 2018 18:29:52 +0000
reviewersochameau
bugs1431912
milestone60.0a1
Bug 1431912 - Properly populate timing columns; r=ochameau MozReview-Commit-ID: 9IfVhp1Cdg7
devtools/client/netmonitor/src/assets/styles/RequestList.css
devtools/client/netmonitor/src/components/RequestListColumnDuration.js
devtools/client/netmonitor/src/components/RequestListColumnEndTime.js
devtools/client/netmonitor/src/components/RequestListColumnLatency.js
devtools/client/netmonitor/src/components/RequestListColumnResponseTime.js
devtools/client/netmonitor/src/components/RequestListColumnStartTime.js
devtools/client/netmonitor/src/components/RequestListColumnTime.js
devtools/client/netmonitor/src/components/RequestListItem.js
devtools/client/netmonitor/src/components/moz.build
devtools/client/netmonitor/test/head.js
--- a/devtools/client/netmonitor/src/assets/styles/RequestList.css
+++ b/devtools/client/netmonitor/src/assets/styles/RequestList.css
@@ -367,23 +367,23 @@
 /* Response Time column */
 
 .requests-list-response-time {
   width: 10%;
 }
 
 /* Duration column */
 
-.requests-list-duration {
+.requests-list-duration-time {
   width: 8%;
 }
 
 /* Latency column */
 
-.requests-list-latency {
+.requests-list-latency-time {
   width: 8%;
 }
 
 /* Response header columns */
 
 .requests-list-response-header {
   width: 10%;
 }
deleted file mode 100644
--- a/devtools/client/netmonitor/src/components/RequestListColumnDuration.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-"use strict";
-
-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");
-const { getFormattedTime } = require("../utils/format-utils");
-
-const { div } = dom;
-
-class RequestListColumnDuration extends Component {
-  static get propTypes() {
-    return {
-      item: PropTypes.object.isRequired,
-    };
-  }
-
-  shouldComponentUpdate(nextProps) {
-    return this.props.item.totalTime !== nextProps.item.totalTime;
-  }
-
-  render() {
-    let { totalTime } = this.props.item;
-    let duration = getFormattedTime(totalTime);
-    return (
-      div({
-        className: "requests-list-column requests-list-duration",
-        title: duration,
-      },
-        duration
-      )
-    );
-  }
-}
-
-module.exports = RequestListColumnDuration;
deleted file mode 100644
--- a/devtools/client/netmonitor/src/components/RequestListColumnEndTime.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-"use strict";
-
-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");
-const { getFormattedTime } = require("../utils/format-utils");
-const { getEndTime } = require("../utils/request-utils");
-
-const { div } = dom;
-
-class RequestListColumnEndTime extends Component {
-  static get propTypes() {
-    return {
-      firstRequestStartedMillis: PropTypes.number.isRequired,
-      item: PropTypes.object.isRequired,
-    };
-  }
-
-  shouldComponentUpdate(nextProps) {
-    return getEndTime(this.props.item) !== getEndTime(nextProps.item);
-  }
-
-  render() {
-    let { firstRequestStartedMillis, item } = this.props;
-    let endTime = getFormattedTime(getEndTime(item, firstRequestStartedMillis));
-
-    return (
-      div({
-        className: "requests-list-column requests-list-end-time",
-        title: endTime,
-      },
-        endTime
-      )
-    );
-  }
-}
-
-module.exports = RequestListColumnEndTime;
deleted file mode 100644
--- a/devtools/client/netmonitor/src/components/RequestListColumnLatency.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-"use strict";
-
-const { Component } = require("devtools/client/shared/vendor/react");
-const dom = require("devtools/client/shared/vendor/react-dom-factories");
-const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
-const { getFormattedTime } = require("../utils/format-utils");
-
-const { div } = dom;
-
-class RequestListColumnLatency extends Component {
-  static get propTypes() {
-    return {
-      item: PropTypes.object.isRequired,
-    };
-  }
-
-  shouldComponentUpdate(nextProps) {
-    let { eventTimings: currEventTimings = { timings: {} } } = this.props.item;
-    let { eventTimings: nextEventTimings = { timings: {} } } = nextProps.item;
-    return currEventTimings.timings.wait !== nextEventTimings.timings.wait;
-  }
-
-  render() {
-    let { eventTimings = { timings: {} } } = this.props.item;
-    let latency = getFormattedTime(eventTimings.timings.wait);
-
-    return (
-      div({
-        className: "requests-list-column requests-list-latency",
-        title: latency,
-      },
-        latency
-      )
-    );
-  }
-}
-
-module.exports = RequestListColumnLatency;
deleted file mode 100644
--- a/devtools/client/netmonitor/src/components/RequestListColumnResponseTime.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-"use strict";
-
-const { Component } = require("devtools/client/shared/vendor/react");
-const dom = require("devtools/client/shared/vendor/react-dom-factories");
-const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
-const { getFormattedTime } = require("../utils/format-utils");
-const { getResponseTime } = require("../utils/request-utils");
-
-const { div } = dom;
-
-class RequestListColumnResponseTime extends Component {
-  static get propTypes() {
-    return {
-      firstRequestStartedMillis: PropTypes.number.isRequired,
-      item: PropTypes.object.isRequired,
-    };
-  }
-
-  shouldComponentUpdate(nextProps) {
-    return getResponseTime(this.props.item) !== getResponseTime(nextProps.item);
-  }
-
-  render() {
-    let { firstRequestStartedMillis, item } = this.props;
-    let responseTime = getFormattedTime(
-      getResponseTime(item, firstRequestStartedMillis));
-
-    return (
-      div({
-        className: "requests-list-column requests-list-response-time",
-        title: responseTime,
-      },
-        responseTime
-      )
-    );
-  }
-}
-
-module.exports = RequestListColumnResponseTime;
deleted file mode 100644
--- a/devtools/client/netmonitor/src/components/RequestListColumnStartTime.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
-
-"use strict";
-
-const { Component } = require("devtools/client/shared/vendor/react");
-const dom = require("devtools/client/shared/vendor/react-dom-factories");
-const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
-const { getFormattedTime } = require("../utils/format-utils");
-const { getStartTime } = require("../utils/request-utils");
-
-const { div } = dom;
-
-class RequestListColumnStartTime extends Component {
-  static get propTypes() {
-    return {
-      firstRequestStartedMillis: PropTypes.number.isRequired,
-      item: PropTypes.object.isRequired,
-    };
-  }
-
-  shouldComponentUpdate(nextProps) {
-    return getStartTime(this.props.item, this.props.firstRequestStartedMillis)
-      !== getStartTime(nextProps.item, nextProps.firstRequestStartedMillis);
-  }
-
-  render() {
-    let { firstRequestStartedMillis, item } = this.props;
-    let startTime = getFormattedTime(getStartTime(item, firstRequestStartedMillis));
-
-    return (
-      div({
-        className: "requests-list-column requests-list-start-time",
-        title: startTime,
-      },
-        startTime
-      )
-    );
-  }
-}
-
-module.exports = RequestListColumnStartTime;
new file mode 100644
--- /dev/null
+++ b/devtools/client/netmonitor/src/components/RequestListColumnTime.js
@@ -0,0 +1,98 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { Component } = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+const { getFormattedTime } = require("../utils/format-utils");
+const {
+  fetchNetworkUpdatePacket,
+  getResponseTime,
+  getStartTime,
+  getEndTime,
+} = require("../utils/request-utils");
+
+const { div } = dom;
+
+/**
+ * This component represents a column displaying selected
+ * timing value. There are following possible values this
+ * column can render:
+ * - Start Time
+ * - End Time
+ * - Response Time
+ * - Duration Time
+ * - Latency Time
+ */
+class RequestListColumnTime extends Component {
+  static get propTypes() {
+    return {
+      connector: PropTypes.object.isRequired,
+      firstRequestStartedMillis: PropTypes.number.isRequired,
+      item: PropTypes.object.isRequired,
+      type: PropTypes.oneOf([
+        "start",
+        "end",
+        "response",
+        "duration",
+        "latency",
+      ]).isRequired,
+    };
+  }
+
+  componentDidMount() {
+    let { item, connector } = this.props;
+    fetchNetworkUpdatePacket(connector.requestData, item, ["eventTimings"]);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    let { item, connector } = nextProps;
+    fetchNetworkUpdatePacket(connector.requestData, item, ["eventTimings"]);
+  }
+
+  shouldComponentUpdate(nextProps) {
+    return this.getTime(this.props) !== this.getTime(nextProps);
+  }
+
+  getTime(props) {
+    let {
+      firstRequestStartedMillis,
+      item,
+      type,
+    } = props;
+
+    switch (type) {
+      case "start":
+        return getStartTime(item, firstRequestStartedMillis);
+      case "end":
+        return getEndTime(item, firstRequestStartedMillis);
+      case "response":
+        return getResponseTime(item, firstRequestStartedMillis);
+      case "duration":
+        return item.totalTime;
+      case "latency":
+        return item.eventTimings ? item.eventTimings.timings.wait : undefined;
+    }
+
+    return 0;
+  }
+
+  render() {
+    let { type } = this.props;
+    let time = getFormattedTime(this.getTime(this.props));
+
+    return (
+      div({
+        className: "requests-list-column requests-list-" + type + "-time",
+        title: time,
+      },
+        time
+      )
+    );
+  }
+}
+
+module.exports = RequestListColumnTime;
--- a/devtools/client/netmonitor/src/components/RequestListItem.js
+++ b/devtools/client/netmonitor/src/components/RequestListItem.js
@@ -15,29 +15,25 @@ const {
 const { RESPONSE_HEADERS } = require("../constants");
 
 // Components
 /* global
   RequestListColumnCause,
   RequestListColumnContentSize,
   RequestListColumnCookies,
   RequestListColumnDomain,
-  RequestListColumnDuration,
-  RequestListColumnEndTime,
   RequestListColumnFile,
-  RequestListColumnLatency,
   RequestListColumnMethod,
   RequestListColumnProtocol,
   RequestListColumnRemoteIP,
   RequestListColumnResponseHeader,
-  RequestListColumnResponseTime,
   RequestListColumnScheme,
   RequestListColumnSetCookies,
-  RequestListColumnStartTime,
   RequestListColumnStatus,
+  RequestListColumnTime,
   RequestListColumnTransferredSize,
   RequestListColumnType,
   RequestListColumnWaterfall
 */
 
 loader.lazyGetter(this, "RequestListColumnCause", function () {
   return createFactory(require("./RequestListColumnCause"));
 });
@@ -45,52 +41,40 @@ loader.lazyGetter(this, "RequestListColu
   return createFactory(require("./RequestListColumnContentSize"));
 });
 loader.lazyGetter(this, "RequestListColumnCookies", function () {
   return createFactory(require("./RequestListColumnCookies"));
 });
 loader.lazyGetter(this, "RequestListColumnDomain", function () {
   return createFactory(require("./RequestListColumnDomain"));
 });
-loader.lazyGetter(this, "RequestListColumnDuration", function () {
-  return createFactory(require("./RequestListColumnDuration"));
-});
-loader.lazyGetter(this, "RequestListColumnEndTime", function () {
-  return createFactory(require("./RequestListColumnEndTime"));
-});
 loader.lazyGetter(this, "RequestListColumnFile", function () {
   return createFactory(require("./RequestListColumnFile"));
 });
-loader.lazyGetter(this, "RequestListColumnLatency", function () {
-  return createFactory(require("./RequestListColumnLatency"));
-});
 loader.lazyGetter(this, "RequestListColumnMethod", function () {
   return createFactory(require("./RequestListColumnMethod"));
 });
 loader.lazyGetter(this, "RequestListColumnProtocol", function () {
   return createFactory(require("./RequestListColumnProtocol"));
 });
 loader.lazyGetter(this, "RequestListColumnRemoteIP", function () {
   return createFactory(require("./RequestListColumnRemoteIP"));
 });
 loader.lazyGetter(this, "RequestListColumnResponseHeader", function () {
   return createFactory(require("./RequestListColumnResponseHeader"));
 });
-loader.lazyGetter(this, "RequestListColumnResponseTime", function () {
-  return createFactory(require("./RequestListColumnResponseTime"));
+loader.lazyGetter(this, "RequestListColumnTime", function () {
+  return createFactory(require("./RequestListColumnTime"));
 });
 loader.lazyGetter(this, "RequestListColumnScheme", function () {
   return createFactory(require("./RequestListColumnScheme"));
 });
 loader.lazyGetter(this, "RequestListColumnSetCookies", function () {
   return createFactory(require("./RequestListColumnSetCookies"));
 });
-loader.lazyGetter(this, "RequestListColumnStartTime", function () {
-  return createFactory(require("./RequestListColumnStartTime"));
-});
 loader.lazyGetter(this, "RequestListColumnStatus", function () {
   return createFactory(require("./RequestListColumnStatus"));
 });
 loader.lazyGetter(this, "RequestListColumnTransferredSize", function () {
   return createFactory(require("./RequestListColumnTransferredSize"));
 });
 loader.lazyGetter(this, "RequestListColumnType", function () {
   return createFactory(require("./RequestListColumnType"));
@@ -229,33 +213,60 @@ class RequestListItem extends Component 
         onContextMenu,
         onMouseDown,
       },
         columns.status && RequestListColumnStatus({ item }),
         columns.method && RequestListColumnMethod({ item }),
         columns.file && RequestListColumnFile({ item }),
         columns.protocol && RequestListColumnProtocol({ item }),
         columns.scheme && RequestListColumnScheme({ item }),
-        columns.domain && RequestListColumnDomain({ item,
-                                                    onSecurityIconMouseDown }),
+        columns.domain && RequestListColumnDomain({
+          item,
+          onSecurityIconMouseDown
+        }),
         columns.remoteip && RequestListColumnRemoteIP({ item }),
-        columns.cause && RequestListColumnCause({ item, onCauseBadgeMouseDown }),
+        columns.cause && RequestListColumnCause({
+          item,
+          onCauseBadgeMouseDown
+        }),
         columns.type && RequestListColumnType({ item }),
         columns.cookies && RequestListColumnCookies({ connector, item }),
         columns.setCookies && RequestListColumnSetCookies({ connector, item }),
         columns.transferred && RequestListColumnTransferredSize({ item }),
         columns.contentSize && RequestListColumnContentSize({ item }),
-        columns.startTime &&
-          RequestListColumnStartTime({ item, firstRequestStartedMillis }),
-        columns.endTime &&
-          RequestListColumnEndTime({ item, firstRequestStartedMillis }),
-        columns.responseTime &&
-          RequestListColumnResponseTime({ item, firstRequestStartedMillis }),
-        columns.duration && RequestListColumnDuration({ item }),
-        columns.latency && RequestListColumnLatency({ item }),
+        columns.startTime && RequestListColumnTime({
+          connector,
+          item,
+          firstRequestStartedMillis,
+          type: "start",
+        }),
+        columns.endTime && RequestListColumnTime({
+          connector,
+          item,
+          firstRequestStartedMillis,
+          type: "end",
+        }),
+        columns.responseTime && RequestListColumnTime({
+          connector,
+          item,
+          firstRequestStartedMillis,
+          type: "response",
+        }),
+        columns.duration && RequestListColumnTime({
+          connector,
+          item,
+          firstRequestStartedMillis,
+          type: "duration",
+        }),
+        columns.latency && RequestListColumnTime({
+          connector,
+          item,
+          firstRequestStartedMillis,
+          type: "latency",
+        }),
         ...RESPONSE_HEADERS.filter(header => columns[header]).map(
           header => RequestListColumnResponseHeader({ item, header }),
         ),
         columns.waterfall && RequestListColumnWaterfall({
           connector,
           firstRequestStartedMillis,
           item,
           onWaterfallMouseDown,
--- a/devtools/client/netmonitor/src/components/moz.build
+++ b/devtools/client/netmonitor/src/components/moz.build
@@ -13,29 +13,25 @@ DevToolsModules(
     'NetworkDetailsPanel.js',
     'ParamsPanel.js',
     'PropertiesView.js',
     'RequestList.js',
     'RequestListColumnCause.js',
     'RequestListColumnContentSize.js',
     'RequestListColumnCookies.js',
     'RequestListColumnDomain.js',
-    'RequestListColumnDuration.js',
-    'RequestListColumnEndTime.js',
     'RequestListColumnFile.js',
-    'RequestListColumnLatency.js',
     'RequestListColumnMethod.js',
     'RequestListColumnProtocol.js',
     'RequestListColumnRemoteIP.js',
     'RequestListColumnResponseHeader.js',
-    'RequestListColumnResponseTime.js',
     'RequestListColumnScheme.js',
     'RequestListColumnSetCookies.js',
-    'RequestListColumnStartTime.js',
     'RequestListColumnStatus.js',
+    'RequestListColumnTime.js',
     'RequestListColumnTransferredSize.js',
     'RequestListColumnType.js',
     'RequestListColumnWaterfall.js',
     'RequestListContent.js',
     'RequestListEmptyNotice.js',
     'RequestListHeader.js',
     'RequestListItem.js',
     'ResponsePanel.js',
--- a/devtools/client/netmonitor/test/head.js
+++ b/devtools/client/netmonitor/test/head.js
@@ -470,26 +470,26 @@ function* verifyRequestItemTarget(docume
     remoteIP, "The tooltip remote IP is correct.");
 
   is(target.querySelector(".requests-list-scheme").textContent,
     scheme, "The displayed scheme is correct.");
 
   is(target.querySelector(".requests-list-scheme").getAttribute("title"),
     scheme, "The tooltip scheme is correct.");
 
-  is(target.querySelector(".requests-list-duration").textContent,
+  is(target.querySelector(".requests-list-duration-time").textContent,
     duration, "The displayed duration is correct.");
 
-  is(target.querySelector(".requests-list-duration").getAttribute("title"),
+  is(target.querySelector(".requests-list-duration-time").getAttribute("title"),
     duration, "The tooltip duration is correct.");
 
-  is(target.querySelector(".requests-list-latency").textContent,
+  is(target.querySelector(".requests-list-latency-time").textContent,
     latency, "The displayed latency is correct.");
 
-  is(target.querySelector(".requests-list-latency").getAttribute("title"),
+  is(target.querySelector(".requests-list-latency-time").getAttribute("title"),
     latency, "The tooltip latency is correct.");
 
   if (status !== undefined) {
     let value = target.querySelector(".requests-list-status-code")
                       .getAttribute("data-status-code");
     let codeValue = target.querySelector(".requests-list-status-code").textContent;
     let tooltip = target.querySelector(".requests-list-status").getAttribute("title");
     info("Displayed status: " + value);