зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1406312 - Lazy loading of tooltip text on hover in Waterfall Timing boxes. r=gasolin
MozReview-Commit-ID: 5y4EPkpqcBr --HG-- extra : rebase_source : 174fcf52494b1dc16e85855ee2a0fabbf22e49ea
This commit is contained in:
Родитель
d8c3cc3c0b
Коммит
bc9ef2d072
|
@ -39,10 +39,17 @@ const RequestListColumnWaterfall = createClass({
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
let { firstRequestStartedMillis, item, onWaterfallMouseDown } = this.props;
|
let { firstRequestStartedMillis, item, onWaterfallMouseDown } = this.props;
|
||||||
const { boxes, tooltip } = timingBoxes(item);
|
const boxes = timingBoxes(item);
|
||||||
|
|
||||||
return (
|
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({
|
div({
|
||||||
className: "requests-list-timings",
|
className: "requests-list-timings",
|
||||||
style: {
|
style: {
|
||||||
|
@ -57,13 +64,37 @@ const RequestListColumnWaterfall = createClass({
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
function timingBoxes(item) {
|
function timingTooltip(item) {
|
||||||
let { eventTimings, fromCache, fromServiceWorker, totalTime } = item;
|
let { eventTimings, fromCache, fromServiceWorker, totalTime } = item;
|
||||||
let boxes = [];
|
|
||||||
let tooltip = [];
|
let tooltip = [];
|
||||||
|
|
||||||
if (fromCache || fromServiceWorker) {
|
if (fromCache || fromServiceWorker) {
|
||||||
return { boxes, tooltip };
|
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 = [];
|
||||||
|
|
||||||
|
if (fromCache || fromServiceWorker) {
|
||||||
|
return boxes;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (eventTimings) {
|
if (eventTimings) {
|
||||||
|
@ -81,7 +112,6 @@ function timingBoxes(item) {
|
||||||
style: { width },
|
style: { width },
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
tooltip.push(L10N.getFormatStr("netmonitor.waterfall.tooltip." + key, width));
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -95,13 +125,9 @@ function timingBoxes(item) {
|
||||||
title,
|
title,
|
||||||
}, title)
|
}, title)
|
||||||
);
|
);
|
||||||
tooltip.push(L10N.getFormatStr("netmonitor.waterfall.tooltip.total", totalTime));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return boxes;
|
||||||
boxes,
|
|
||||||
tooltip: tooltip.join(L10N.getStr("netmonitor.waterfall.tooltip.separator"))
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports = RequestListColumnWaterfall;
|
module.exports = RequestListColumnWaterfall;
|
||||||
|
|
Загрузка…
Ссылка в новой задаче