Bug 1308694 - Introduce a tooltip for the waterfall graph displaying timings. r?rickychien
MozReview-Commit-ID: 9UBNiKBHDxj
--- a/devtools/client/locales/en-US/netmonitor.properties
+++ b/devtools/client/locales/en-US/netmonitor.properties
@@ -191,16 +191,44 @@ networkMenu.sizeCached=cached
# in the network menu specifying the transferred of a request computed
# by a service worker.
networkMenu.sizeServiceWorker=service worker
# LOCALIZATION NOTE (networkMenu.totalMS): This is the label displayed
# in the network menu specifying the time for a request to finish (in milliseconds).
networkMenu.totalMS=→ %S ms
+# LOCALIZATION NOTE (netmonitor.waterfall.tooltip.total): This is part of the tooltip
+# displayed in the requests waterfall for total time (in milliseconds).
+netmonitor.waterfall.tooltip.total=Total %S ms
+
+# LOCALIZATION NOTE (netmonitor.waterfall.tooltip.blocked): This is part of the tooltip
+# displayed in the requests waterfall for blocked time (in milliseconds).
+netmonitor.waterfall.tooltip.blocked=Blocked %S ms
+
+# LOCALIZATION NOTE (netmonitor.waterfall.tooltip.dns): This is part of the tooltip
+# displayed in the requests waterfall for dns time (in milliseconds).
+netmonitor.waterfall.tooltip.dns=DNS %S ms
+
+# LOCALIZATION NOTE (netmonitor.waterfall.tooltip.connect): This is part of the tooltip
+# displayed in the requests waterfall for connect time (in milliseconds).
+netmonitor.waterfall.tooltip.connect=Connect %S ms
+
+# LOCALIZATION NOTE (netmonitor.waterfall.tooltip.send): This is part of the tooltip
+# displayed in the requests waterfall for send time (in milliseconds).
+netmonitor.waterfall.tooltip.send=Send %S ms
+
+# LOCALIZATION NOTE (netmonitor.waterfall.tooltip.wait): This is part of the tooltip
+# displayed in the requests waterfall for wait time (in milliseconds).
+netmonitor.waterfall.tooltip.wait=Wait %S ms
+
+# LOCALIZATION NOTE (netmonitor.waterfall.tooltip.receive): This is part of the tooltip
+# displayed in the requests waterfall for receive time (in milliseiconds).
+netmonitor.waterfall.tooltip.receive=Receive %S ms
+
# LOCALIZATION NOTE (networkMenu.millisecond): This is the label displayed
# in the network menu specifying timing interval divisions (in milliseconds).
networkMenu.millisecond=%S ms
# LOCALIZATION NOTE (networkMenu.second): This is the label displayed
# in the network menu specifying timing interval divisions (in seconds).
networkMenu.second=%S s
--- a/devtools/client/netmonitor/src/components/request-list-column-waterfall.js
+++ b/devtools/client/netmonitor/src/components/request-list-column-waterfall.js
@@ -33,38 +33,40 @@ const RequestListColumnWaterfall = creat
shouldComponentUpdate(nextProps) {
return !propertiesEqual(UPDATED_WATERFALL_PROPS, this.props.item, nextProps.item) ||
this.props.firstRequestStartedMillis !== nextProps.firstRequestStartedMillis;
},
render() {
let { firstRequestStartedMillis, item } = this.props;
+ const { boxes, tooltip } = timingBoxes(item);
return (
- div({ className: "requests-list-column requests-list-waterfall" },
+ div({ className: "requests-list-column requests-list-waterfall", title: tooltip },
div({
className: "requests-list-timings",
style: {
paddingInlineStart: `${item.startedMillis - firstRequestStartedMillis}px`,
},
},
- timingBoxes(item),
+ boxes,
)
)
);
}
});
function timingBoxes(item) {
let { eventTimings, fromCache, fromServiceWorker, totalTime } = item;
let boxes = [];
+ let tooltip = [];
if (fromCache || fromServiceWorker) {
- return boxes;
+ return { boxes, tooltip };
}
if (eventTimings) {
// Add a set of boxes representing timing information.
for (let key of TIMING_KEYS) {
let width = eventTimings.timings[key];
// Don't render anything if it surely won't be visible.
@@ -72,27 +74,29 @@ function timingBoxes(item) {
if (width > 0) {
boxes.push(
div({
key,
className: `requests-list-timings-box ${key}`,
style: { width },
})
);
+ tooltip.push(L10N.getFormatStr("netmonitor.waterfall.tooltip." + key, width));
}
}
}
if (typeof totalTime === "number") {
let title = L10N.getFormatStr("networkMenu.totalMS", totalTime);
boxes.push(
div({
key: "total",
className: "requests-list-timings-total",
title,
}, title)
);
+ tooltip.push(L10N.getFormatStr("netmonitor.waterfall.tooltip.total", totalTime));
}
- return boxes;
+ return { boxes, tooltip: tooltip.join(", ") };
}
module.exports = RequestListColumnWaterfall;