--- 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);