Bug 1406312 - Lazy loading of tooltip text on hover in Waterfall Timing boxes. r=gasolin
MozReview-Commit-ID: 5y4EPkpqcBr
--- a/devtools/client/netmonitor/src/components/request-list-column-waterfall.js
+++ b/devtools/client/netmonitor/src/components/request-list-column-waterfall.js
@@ -34,41 +34,72 @@ const RequestListColumnWaterfall = creat
shouldComponentUpdate(nextProps) {
return !propertiesEqual(UPDATED_WATERFALL_PROPS, this.props.item, nextProps.item) ||
this.props.firstRequestStartedMillis !== nextProps.firstRequestStartedMillis;
},
render() {
let { firstRequestStartedMillis, item, onWaterfallMouseDown } = this.props;
- const { boxes, tooltip } = timingBoxes(item);
+ const boxes = timingBoxes(item);
return (
- div({ className: "requests-list-column requests-list-waterfall", title: tooltip },
+ div({
+ className: "requests-list-column requests-list-waterfall",
+ onMouseOver: function ({target}) {
+ if (!target.title) {
+ target.title = timingTooltip(item);
+ }
+ }
+ },
div({
className: "requests-list-timings",
style: {
paddingInlineStart: `${item.startedMillis - firstRequestStartedMillis}px`,
},
onMouseDown: onWaterfallMouseDown,
},
boxes,
)
)
);
}
});
+function timingTooltip(item) {
+ let { eventTimings, fromCache, fromServiceWorker, totalTime } = item;
+ let tooltip = [];
+
+ if (fromCache || fromServiceWorker) {
+ return tooltip;
+ }
+
+ if (eventTimings) {
+ for (let key of TIMING_KEYS) {
+ let width = eventTimings.timings[key];
+
+ if (width > 0) {
+ tooltip.push(L10N.getFormatStr("netmonitor.waterfall.tooltip." + key, width));
+ }
+ }
+ }
+
+ if (typeof totalTime === "number") {
+ tooltip.push(L10N.getFormatStr("netmonitor.waterfall.tooltip.total", totalTime));
+ }
+
+ return tooltip.join(L10N.getStr("netmonitor.waterfall.tooltip.separator"));
+}
+
function timingBoxes(item) {
let { eventTimings, fromCache, fromServiceWorker, totalTime } = item;
let boxes = [];
- let tooltip = [];
if (fromCache || fromServiceWorker) {
- return { boxes, tooltip };
+ return boxes;
}
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.
@@ -76,32 +107,27 @@ 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,
- tooltip: tooltip.join(L10N.getStr("netmonitor.waterfall.tooltip.separator"))
- };
+ return boxes;
}
module.exports = RequestListColumnWaterfall;