Bug 1353057 - Split requests summary button into multiple labels. r?Honza draft
authorVangelis Katsikaros <vkatsikaros@gmail.com>
Tue, 11 Apr 2017 22:41:26 +0300
changeset 563356 57ff1bb6c8ef8436d105c4b7fc91dccdd35e494b
parent 561911 819a666afddc804b6099ee1b3cff3a0fdf35ec15
child 624438 49f3053f3c70b3336cbbd05ea381ebb7bfc1f652
push id54261
push uservkatsikaros@gmail.com
push dateSun, 16 Apr 2017 06:43:09 +0000
reviewersHonza
bugs1353057
milestone55.0a1
Bug 1353057 - Split requests summary button into multiple labels. r?Honza MozReview-Commit-ID: 1lwmft6Nucy
devtools/client/locales/en-US/netmonitor.properties
devtools/client/netmonitor/src/assets/styles/netmonitor.css
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,26 +138,33 @@ 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.empty): This is the label displayed
-# in the network table footer when there are no requests available.
-networkMenu.empty=No requests
+# 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.summary3): Semi-colon list of plural forms.
-# See: http://developer.mozilla.org/en/docs/Localization_and_Plurals
-# This label is displayed in the network table footer providing concise
-# information about all requests. Parameters: #1 is the number of requests,
-# #2 is the size, #3 is the transferred size, #4 is the number of seconds.
-networkMenu.summary3=One request, #2 (transferred: #3), #4;#1 requests, #2 (transferred: #3), #4
+# 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.finish): This label is displayed
+# in the network table footer providing the transfer time.
+networkMenu.summary.finish=Finish: %S
+
 
 # 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/assets/styles/netmonitor.css
+++ b/devtools/client/netmonitor/src/assets/styles/netmonitor.css
@@ -1109,23 +1109,17 @@ body,
 .requests-list-network-summary-button > .summary-info-icon {
   background-image: url(chrome://devtools/skin/images/profiler-stopwatch.svg);
   filter: var(--icon-filter);
   width: 16px;
   height: 16px;
   opacity: 0.8;
 }
 
-.requests-list-network-summary-button > .summary-info-text {
-  opacity: 0.8;
-  margin-inline-start: 0.5em;
-}
-
-.requests-list-network-summary-button:hover > .summary-info-icon,
-.requests-list-network-summary-button:hover > .summary-info-text {
+.requests-list-network-summary-button:hover > .summary-info-icon {
   opacity: 1;
 }
 
 /* Performance analysis view */
 
 .statistics-panel {
   display: flex;
   height: 100vh;
--- a/devtools/client/netmonitor/src/components/status-bar.js
+++ b/devtools/client/netmonitor/src/components/status-bar.js
@@ -27,33 +27,41 @@ const { div, button, span } = DOM;
 
 function StatusBar({ summary, openStatistics, timingMarkers }) {
   let { count, contentSize, transferredSize, millis } = summary;
   let {
     DOMContentLoaded,
     load,
   } = timingMarkers;
 
-  let text = (count === 0) ? L10N.getStr("networkMenu.empty") :
-    PluralForm.get(count, L10N.getStr("networkMenu.summary3"))
-    .replace("#1", count)
-    .replace("#2", getFormattedSize(contentSize))
-    .replace("#3", getFormattedSize(transferredSize))
-    .replace("#4", getFormattedTime(millis));
+  let countText = count === 0 ? L10N.getStr("networkMenu.summary.requestsCountEmpty") :
+    PluralForm.get(
+      count, L10N.getFormatStrWithNumbers("networkMenu.summary.requestsCount", count)
+  );
+  let transferText = count === 0 ? "" :
+    L10N.getFormatStrWithNumbers(
+      "networkMenu.summary.transferred", getFormattedSize(contentSize),
+      getFormattedSize(transferredSize)
+  );
+  let finishText = count === 0 ? "" :
+    L10N.getFormatStrWithNumbers(
+      "networkMenu.summary.finish", getFormattedTime(millis)
+  );
 
   return (
     div({ className: "devtools-toolbar devtools-toolbar-bottom" },
       button({
         className: "devtools-button requests-list-network-summary-button",
-        title: count ? text : L10N.getStr("netmonitor.toolbar.perf"),
         onClick: openStatistics,
       },
         span({ className: "summary-info-icon" }),
-        span({ className: "summary-info-text" }, text),
       ),
+      span({ className: "status-bar-label" }, countText),
+      count !== 0 && span({ className: "status-bar-label" }, transferText),
+      count !== 0 && span({ className: "status-bar-label" }, finishText),
 
       DOMContentLoaded > -1 &&
       span({ className: "status-bar-label dom-content-loaded" },
         `DOMContentLoaded: ${getFormattedTime(DOMContentLoaded)}`),
 
       load > -1 &&
       span({ className: "status-bar-label load" },
         `load: ${getFormattedTime(load)}`),