From bc9ef2d072e73494fdccd9615cbed10a3a4b204a Mon Sep 17 00:00:00 2001
From: abhinav <abhinav.koppula@gmail.com>
Date: Mon, 9 Oct 2017 13:10:47 +0530
Subject: [PATCH] Bug 1406312 - Lazy loading of tooltip text on hover in
 Waterfall Timing boxes. r=gasolin

MozReview-Commit-ID: 5y4EPkpqcBr

--HG--
extra : rebase_source : 174fcf52494b1dc16e85855ee2a0fabbf22e49ea
---
 .../request-list-column-waterfall.js          | 48 ++++++++++++++-----
 1 file changed, 37 insertions(+), 11 deletions(-)

diff --git a/devtools/client/netmonitor/src/components/request-list-column-waterfall.js b/devtools/client/netmonitor/src/components/request-list-column-waterfall.js
index f52b32fc894a..2f039a36a75a 100644
--- a/devtools/client/netmonitor/src/components/request-list-column-waterfall.js
+++ b/devtools/client/netmonitor/src/components/request-list-column-waterfall.js
@@ -39,10 +39,17 @@ const RequestListColumnWaterfall = createClass({
 
   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: {
@@ -57,13 +64,37 @@ const RequestListColumnWaterfall = createClass({
   }
 });
 
-function timingBoxes(item) {
+function timingTooltip(item) {
   let { eventTimings, fromCache, fromServiceWorker, totalTime } = item;
-  let boxes = [];
   let tooltip = [];
 
   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) {
@@ -81,7 +112,6 @@ function timingBoxes(item) {
             style: { width },
           })
         );
-        tooltip.push(L10N.getFormatStr("netmonitor.waterfall.tooltip." + key, width));
       }
     }
   }
@@ -95,13 +125,9 @@ function timingBoxes(item) {
         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;