From 47bdbe512cf52ce1d17a5b818c85adc179434bbb Mon Sep 17 00:00:00 2001
From: Vangelis Katsikaros <vkatsikaros@gmail.com>
Date: Tue, 25 Apr 2017 11:17:52 +0300
Subject: [PATCH] Bug 1358013 - Implement status-bar tooltips. r=Honza

MozReview-Commit-ID: 89QrOF66Yll

--HG--
extra : rebase_source : 334f8bcd39479915488f1e99aa5b89f285311a14
---
 .../locales/en-US/netmonitor.properties       | 23 ++++++++++++
 .../netmonitor/src/components/status-bar.js   | 36 +++++++++++--------
 2 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/devtools/client/locales/en-US/netmonitor.properties b/devtools/client/locales/en-US/netmonitor.properties
index 197ce70ec4f5..309833dad7db 100644
--- a/devtools/client/locales/en-US/netmonitor.properties
+++ b/devtools/client/locales/en-US/netmonitor.properties
@@ -143,6 +143,18 @@ networkMenu.sortedAsc=Sorted ascending
 # in the network table toolbar, for any column that is sorted descending.
 networkMenu.sortedDesc=Sorted descending
 
+# LOCALIZATION NOTE (networkMenu.summary.tooltip.perf): A tooltip explaining
+# what the perf button does
+networkMenu.summary.tooltip.perf=Start performance analysis
+
+# LOCALIZATION NOTE (networkMenu.summary.tooltip.domContentLoaded): A tooltip explaining
+# what the DOMContentLoaded label displays
+networkMenu.summary.tooltip.domContentLoaded=Time when "DOMContentLoad" event occurred
+
+# LOCALIZATION NOTE (networkMenu.summary.tooltip.load): A tooltip explaining
+# what the load label displays
+networkMenu.summary.tooltip.load=Time when "load" event occurred
+
 # LOCALIZATION NOTE (networkMenu.summary.requestsCount): This label is displayed
 # in the network table footer providing the number of requests
 # See: http://developer.mozilla.org/en/docs/Localization_and_Plurals
@@ -152,14 +164,25 @@ networkMenu.summary.requestsCount=One request;%S requests
 # in the network table footer when there are no requests
 networkMenu.summary.requestsCountEmpty=No requests
 
+# LOCALIZATION NOTE (networkMenu.summary.tooltip.requestsCount): A tooltip explaining
+# what the requestsCount label displays
+networkMenu.summary.tooltip.requestsCount=Number of requests
+
 # LOCALIZATION NOTE (networkMenu.summary.transferred): This label is displayed
 # in the network table footer providing the transferred size.
 networkMenu.summary.transferred=%S / %S transferred
 
+# LOCALIZATION NOTE (networkMenu.summary.tooltip.transferred): A tooltip explaining
+# what the transferred  label displays
+networkMenu.summary.tooltip.transferred=Size/transferred size of all requests
+
 # LOCALIZATION NOTE (networkMenu.summary.finish): This label is displayed
 # in the network table footer providing the transfer time.
 networkMenu.summary.finish=Finish: %S
 
+# LOCALIZATION NOTE (networkMenu.summary.tooltip.finish): A tooltip explaining
+# what the finish label displays
+networkMenu.summary.tooltip.finish=Total time needed to load all requests
 
 # LOCALIZATION NOTE (networkMenu.sizeB): This is the label displayed
 # in the network menu specifying the size of a request (in bytes).
diff --git a/devtools/client/netmonitor/src/components/status-bar.js b/devtools/client/netmonitor/src/components/status-bar.js
index b128de9aa91d..bad6869a2b12 100644
--- a/devtools/client/netmonitor/src/components/status-bar.js
+++ b/devtools/client/netmonitor/src/components/status-bar.js
@@ -43,29 +43,35 @@ function StatusBar({ summary, openStatistics, timingMarkers }) {
     div({ className: "devtools-toolbar devtools-status-bottom" },
       button({
         className: "devtools-button requests-list-network-summary-button",
+        title: L10N.getStr("networkMenu.summary.tooltip.perf"),
         onClick: openStatistics,
       },
         div({ className: "summary-info-icon" }),
       ),
-      div({ className: "status-bar-label requests-list-network-summary-count" },
-        countText
-      ),
+      div({
+        className: "status-bar-label requests-list-network-summary-count",
+        title: L10N.getStr("networkMenu.summary.tooltip.requestsCount"),
+      }, countText),
       count !== 0 &&
-        div({ className: "status-bar-label requests-list-network-summary-transfer" },
-          transferText
-        ),
+        div({
+          className: "status-bar-label requests-list-network-summary-transfer",
+          title: L10N.getStr("networkMenu.summary.tooltip.transferred"),
+        }, transferText),
       count !== 0 &&
-        div({ className: "status-bar-label requests-list-network-summary-finish" },
-          finishText
-        ),
+        div({
+          className: "status-bar-label requests-list-network-summary-finish",
+          title: L10N.getStr("networkMenu.summary.tooltip.finish"),
+        }, finishText),
       DOMContentLoaded > -1 &&
-        div({ className: "status-bar-label dom-content-loaded" },
-          `DOMContentLoaded: ${getFormattedTime(DOMContentLoaded)}`
-        ),
+        div({
+          className: "status-bar-label dom-content-loaded",
+          title: L10N.getStr("networkMenu.summary.tooltip.domContentLoaded"),
+        }, `DOMContentLoaded: ${getFormattedTime(DOMContentLoaded)}`),
       load > -1 &&
-        div({ className: "status-bar-label load" },
-          `load: ${getFormattedTime(load)}`
-        ),
+        div({
+          className: "status-bar-label load",
+          title: L10N.getStr("networkMenu.summary.tooltip.load"),
+        }, `load: ${getFormattedTime(load)}`),
     )
   );
 }