Bug 1358013 - Implement status-bar tooltips. r=Honza

MozReview-Commit-ID: 89QrOF66Yll

--HG--
extra : rebase_source : 334f8bcd39479915488f1e99aa5b89f285311a14

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).

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" },
+      div({
-        countText
+        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" },
+        div({
-          transferText
+          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" },
+        div({
-          finishText
+          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" },
+        div({
-          `DOMContentLoaded: ${getFormattedTime(DOMContentLoaded)}`
+          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" },
+        div({
-          `load: ${getFormattedTime(load)}`
+          className: "status-bar-label load",
-        ),
+          title: L10N.getStr("networkMenu.summary.tooltip.load"),
+        }, `load: ${getFormattedTime(load)}`),
     )
   );
 }