Bug 1308694 - Introduce a tooltip for the waterfall graph displaying timings. r?rickychien draft
authorVangelis Katsikaros <vkatsikaros@gmail.com>
Mon, 17 Apr 2017 14:18:58 +0300
changeset 569967 38d864c7357d187613bea240f4f8e9f888a70fe7
parent 569701 2cca333f546f38860f84940d4c72d7470a3410f4
child 626359 63d6705d19df280b8aeaec00e83b568438ea2be6
push id56346
push uservkatsikaros@gmail.com
push dateFri, 28 Apr 2017 07:02:04 +0000
reviewersrickychien
bugs1308694
milestone55.0a1
Bug 1308694 - Introduce a tooltip for the waterfall graph displaying timings. r?rickychien MozReview-Commit-ID: 9UBNiKBHDxj
devtools/client/locales/en-US/netmonitor.properties
devtools/client/netmonitor/src/components/request-list-column-waterfall.js
--- 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;