Bug 1353057 - Split requests summary button into multiple labels. r=Honza,ntim

MozReview-Commit-ID: 1lwmft6Nucy

--HG--
extra : rebase_source : aa06974077f8c5a96becba24889745f4633ab1ce

devtools/client/locales/en-US/netmonitor.properties

@@ -143,16 +143,23 @@ networkMenu.sortedAsc=Sorted ascending
 # 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.summary3): Semi-colon list of plural forms.
+# 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
-# 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
+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.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).

devtools/client/netmonitor/src/assets/styles/netmonitor.css

@@ -1123,13 +1123,7 @@ body,
   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;
 }
 

devtools/client/netmonitor/src/components/status-bar.js

@@ -32,23 +32,31 @@ function StatusBar({ summary, openStatistics, timingMarkers }) {
     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 = L10N.getFormatStrWithNumbers("networkMenu.summary.transferred",
+    getFormattedSize(contentSize), getFormattedSize(transferredSize));
+  let finishText = 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 requests-list-network-summary-count" },
+        countText),
+      count !== 0 &&
+        span({ className: "status-bar-label requests-list-network-summary-transfer" },
+          transferText),
+      count !== 0 &&
+        span({ className: "status-bar-label requests-list-network-summary-finish" },
+          finishText),
 
       DOMContentLoaded > -1 &&
       span({ className: "status-bar-label dom-content-loaded" },

devtools/client/netmonitor/test/browser_net_footer-summary.js

@@ -49,29 +49,42 @@ add_task(function* () {
   yield teardown(monitor);
 
   function testStatus() {
-    let value = document.querySelector(".requests-list-network-summary-button")
-                        .textContent;
-    info("Current summary: " + value);
-
     let state = gStore.getState();
     let totalRequestsCount = state.requests.requests.size;
     let requestsSummary = getDisplayedRequestsSummary(state);
     info(`Current requests: ${requestsSummary.count} of ${totalRequestsCount}.`);
 
+    let valueCount = document.querySelector(".requests-list-network-summary-count")
+                        .textContent;
+    info("Current summary count: " + valueCount);
+    let expectedCount = PluralForm.get(requestsSummary.count,
+      L10N.getFormatStrWithNumbers("networkMenu.summary.requestsCount",
+        requestsSummary.count));
+
     if (!totalRequestsCount || !requestsSummary.count) {
-      is(value, L10N.getStr("networkMenu.empty"),
+      is(valueCount, L10N.getStr("networkMenu.summary.requestsCountEmpty"),
         "The current summary text is incorrect, expected an 'empty' label.");
       return;
     }
 
+    let valueTransfer = document.querySelector(".requests-list-network-summary-transfer")
+                        .textContent;
+    info("Current summary transfer: " + valueTransfer);
+    let expectedTransfer = L10N.getFormatStrWithNumbers("networkMenu.summary.transferred",
+      getFormattedSize(requestsSummary.contentSize),
+      getFormattedSize(requestsSummary.transferredSize));
+
+    let valueFinish = document.querySelector(".requests-list-network-summary-finish")
+                        .textContent;
+    info("Current summary finish: " + valueFinish);
+    let expectedFinish = L10N.getFormatStrWithNumbers("networkMenu.summary.finish",
+      getFormattedTime(requestsSummary.millis));
+
     info(`Computed total bytes: ${requestsSummary.bytes}`);
     info(`Computed total millis: ${requestsSummary.millis}`);
 
-    is(value, PluralForm.get(requestsSummary.count, L10N.getStr("networkMenu.summary3"))
-      .replace("#1", requestsSummary.count)
-      .replace("#2", getFormattedSize(requestsSummary.contentSize))
-      .replace("#3", getFormattedSize(requestsSummary.transferredSize))
-      .replace("#4", getFormattedTime(requestsSummary.millis))
-    , "The current summary text is correct.");
+    is(valueCount, expectedCount, "The current summary count is correct.");
+    is(valueTransfer, expectedTransfer, "The current summary transfer is correct.");
+    is(valueFinish, expectedFinish, "The current summary finish is correct.");
   }
 });