Bug 1358013 - Implement status-bar tooltips. r?Honza draft
authorVangelis Katsikaros <vkatsikaros@gmail.com>
Tue, 25 Apr 2017 11:17:52 +0300
changeset 569971 f622786bcb75dae765efb4efeb51d8f5fff4b10e
parent 569701 2cca333f546f38860f84940d4c72d7470a3410f4
child 626363 f8138d5391da54ff858e1f1e00f5078075b553e4
push id56350
push uservkatsikaros@gmail.com
push dateFri, 28 Apr 2017 07:34:24 +0000
reviewersHonza
bugs1358013
milestone55.0a1
Bug 1358013 - Implement status-bar tooltips. r?Honza MozReview-Commit-ID: 89QrOF66Yll
devtools/client/locales/en-US/netmonitor.properties
devtools/client/netmonitor/src/components/status-bar.js
--- a/devtools/client/locales/en-US/netmonitor.properties
+++ b/devtools/client/locales/en-US/netmonitor.properties
@@ -138,33 +138,56 @@ jsonpScopeName=JSONP → callback %S()
 # LOCALIZATION NOTE (networkMenu.sortedAsc): This is the tooltip displayed
 # in the network table toolbar, for any column that is sorted ascending.
 networkMenu.sortedAsc=Sorted ascending
 
 # LOCALIZATION NOTE (networkMenu.sortedDesc): This is the tooltip displayed
 # 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
 networkMenu.summary.requestsCount=One request;%S requests
 
 # LOCALIZATION NOTE (networkMenu.summary.requestsCountEmpty): This label is displayed
 # 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).
 networkMenu.sizeB=%S B
 
 # LOCALIZATION NOTE (networkMenu.sizeKB): This is the label displayed
 # in the network menu specifying the size of a request (in kilobytes).
 networkMenu.sizeKB=%S KB
--- a/devtools/client/netmonitor/src/components/status-bar.js
+++ b/devtools/client/netmonitor/src/components/status-bar.js
@@ -38,39 +38,45 @@ function StatusBar({ summary, openStatis
     getFormattedSize(contentSize), getFormattedSize(transferredSize));
   let finishText = L10N.getFormatStrWithNumbers("networkMenu.summary.finish",
     getFormattedTime(millis));
 
   return (
     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)}`),
     )
   );
 }
 
 StatusBar.displayName = "StatusBar";
 
 StatusBar.propTypes = {
   openStatistics: PropTypes.func.isRequired,