Bug 1406312 - Lazy loading of tooltip text on hover in Waterfall Timing boxes. r=gasolin
authorabhinav <abhinav.koppula@gmail.com>
Mon, 09 Oct 2017 13:10:47 +0530
changeset 679164 e92ca171760d45bc16813e6f235bb7bd2c48ca81
parent 679163 7b8f1bcaf50db587e235b3f03835adb48bfeb84c
child 679165 16003b36a7b36b4d92fef7c12b76c5492a026cf2
push id84141
push userbmo:schien@mozilla.com
push dateThu, 12 Oct 2017 11:13:04 +0000
reviewersgasolin
bugs1406312
milestone58.0a1
Bug 1406312 - Lazy loading of tooltip text on hover in Waterfall Timing boxes. r=gasolin MozReview-Commit-ID: 5y4EPkpqcBr
devtools/client/netmonitor/src/components/request-list-column-waterfall.js
--- 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;