Bug 1338284 - Make KB unit on summary and chart view dynamic. r=Honza
authorLeonardo Couto <leonardo.couto@protonmail.com>
Thu, 16 Feb 2017 23:34:19 +0100
changeset 373110 ddc511090d07d991ca58c35e4a986bb83b3b25b3
parent 373109 8d2a0d1f223178383805aba9d4fcaac3f5c88fda
child 373111 e3699678d46e5393c96b49ca55641e67075ab1cc
push id10863
push userjlorenzo@mozilla.com
push dateMon, 06 Mar 2017 23:02:23 +0000
treeherdermozilla-aurora@0931190cd725 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1338284
milestone54.0a1
Bug 1338284 - Make KB unit on summary and chart view dynamic. r=Honza
devtools/client/locales/en-US/netmonitor.properties
devtools/client/netmonitor/components/toolbar.js
devtools/client/netmonitor/test/browser_net_footer-summary.js
devtools/client/netmonitor/utils/format-utils.js
--- a/devtools/client/locales/en-US/netmonitor.properties
+++ b/devtools/client/locales/en-US/netmonitor.properties
@@ -142,22 +142,22 @@ 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.summary2): Semi-colon list of plural forms.
+# 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.summary2=One request, #2 KB (transferred: #3 KB), #4 s;#1 requests, #2 KB (transferred: #3 KB), #4 s
+networkMenu.summary3=One request, #2 (transferred: #3), #4;#1 requests, #2 (transferred: #3), #4
 
 # 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/components/toolbar.js
+++ b/devtools/client/netmonitor/components/toolbar.js
@@ -16,18 +16,18 @@ const Actions = require("../actions/inde
 const { L10N } = require("../utils/l10n");
 const { Prefs } = require("../utils/prefs");
 const {
   getDisplayedRequestsSummary,
   getRequestFilterTypes,
   isNetworkDetailsToggleButtonDisabled,
 } = require("../selectors/index");
 const {
-  getSizeWithDecimals,
-  getTimeWithDecimals,
+  getFormattedSize,
+  getFormattedTime
 } = require("../utils/format-utils");
 const { FILTER_SEARCH_DELAY } = require("../constants");
 
 // Components
 const SearchBox = createFactory(require("devtools/client/shared/components/search-box"));
 
 const { button, div, span } = DOM;
 
@@ -84,21 +84,21 @@ const Toolbar = createClass({
       "devtools-button",
     ];
     if (!networkDetailsOpen) {
       toggleButtonClassName.push("pane-collapsed");
     }
 
     let { count, contentSize, transferredSize, millis } = summary;
     let text = (count === 0) ? L10N.getStr("networkMenu.empty") :
-      PluralForm.get(count, L10N.getStr("networkMenu.summary2"))
+      PluralForm.get(count, L10N.getStr("networkMenu.summary3"))
       .replace("#1", count)
-      .replace("#2", getSizeWithDecimals(contentSize / 1024))
-      .replace("#3", getSizeWithDecimals(transferredSize / 1024))
-      .replace("#4", getTimeWithDecimals(millis / 1000));
+      .replace("#2", getFormattedSize(contentSize))
+      .replace("#3", getFormattedSize(transferredSize))
+      .replace("#4", getFormattedTime(millis));
 
     let buttons = requestFilterTypes.map(([type, checked]) => {
       let classList = ["devtools-button"];
       checked && classList.push("checked");
 
       return (
         button({
           id: `requests-menu-filter-${type}-button`,
--- a/devtools/client/netmonitor/test/browser_net_footer-summary.js
+++ b/devtools/client/netmonitor/test/browser_net_footer-summary.js
@@ -3,16 +3,21 @@
 
 "use strict";
 
 /**
  * Test if the summary text displayed in the network requests menu footer is correct.
  */
 
 add_task(function* () {
+  const {
+    getFormattedSize,
+    getFormattedTime
+  } = require("devtools/client/netmonitor/utils/format-utils");
+
   requestLongerTimeout(2);
 
   let { tab, monitor } = yield initNetMonitor(FILTERING_URL);
   info("Starting test... ");
 
   let { document, gStore, windowRequire } = monitor.panelWin;
   let Actions = windowRequire("devtools/client/netmonitor/actions/index");
   let { getDisplayedRequestsSummary } =
@@ -56,16 +61,16 @@ add_task(function* () {
       is(value, L10N.getStr("networkMenu.empty"),
         "The current summary text is incorrect, expected an 'empty' label.");
       return;
     }
 
     info(`Computed total bytes: ${requestsSummary.bytes}`);
     info(`Computed total millis: ${requestsSummary.millis}`);
 
-    is(value, PluralForm.get(requestsSummary.count, L10N.getStr("networkMenu.summary2"))
+    is(value, PluralForm.get(requestsSummary.count, L10N.getStr("networkMenu.summary3"))
       .replace("#1", requestsSummary.count)
-      .replace("#2", L10N.numberWithDecimals(requestsSummary.contentSize / 1024, 2))
-      .replace("#3", L10N.numberWithDecimals(requestsSummary.transferredSize / 1024, 2))
-      .replace("#4", L10N.numberWithDecimals(requestsSummary.millis / 1000, 2))
+      .replace("#2", getFormattedSize(requestsSummary.contentSize))
+      .replace("#3", getFormattedSize(requestsSummary.transferredSize))
+      .replace("#4", getFormattedTime(requestsSummary.millis))
     , "The current summary text is correct.");
   }
 });
--- a/devtools/client/netmonitor/utils/format-utils.js
+++ b/devtools/client/netmonitor/utils/format-utils.js
@@ -13,59 +13,72 @@ const BYTES_IN_GB = Math.pow(BYTES_IN_KB
 const MAX_BYTES_SIZE = 1000;
 const MAX_KB_SIZE = 1000 * BYTES_IN_KB;
 const MAX_MB_SIZE = 1000 * BYTES_IN_MB;
 
 // Constants for formatting time.
 const MAX_MILLISECOND = 1000;
 const MAX_SECOND = 60 * MAX_MILLISECOND;
 
-const CONTENT_SIZE_DECIMALS = 2;
-const REQUEST_TIME_DECIMALS = 2;
+const REQUEST_DECIMALS = 2;
 
-function getSizeWithDecimals(size, decimals = REQUEST_TIME_DECIMALS) {
-  return L10N.numberWithDecimals(size, CONTENT_SIZE_DECIMALS);
+function getSizeWithDecimals(size, decimals = REQUEST_DECIMALS) {
+  return L10N.numberWithDecimals(size, decimals);
 }
 
 function getTimeWithDecimals(time) {
-  return L10N.numberWithDecimals(time, REQUEST_TIME_DECIMALS);
+  return L10N.numberWithDecimals(time, REQUEST_DECIMALS);
+}
+
+function formatDecimals(size, decimals) {
+  return (size % 1 > 0) ? decimals : 0;
 }
 
 /**
  * Get a human-readable string from a number of bytes, with the B, KB, MB, or
  * GB value. Note that the transition between abbreviations is by 1000 rather
  * than 1024 in order to keep the displayed digits smaller as "1016 KB" is
  * more awkward than 0.99 MB"
  */
-function getFormattedSize(bytes, decimals = REQUEST_TIME_DECIMALS) {
+function getFormattedSize(bytes, decimals = REQUEST_DECIMALS) {
   if (bytes < MAX_BYTES_SIZE) {
     return L10N.getFormatStr("networkMenu.sizeB", bytes);
-  } else if (bytes < MAX_KB_SIZE) {
-    let kb = bytes / BYTES_IN_KB;
-    return L10N.getFormatStr("networkMenu.sizeKB", getSizeWithDecimals(kb, decimals));
-  } else if (bytes < MAX_MB_SIZE) {
-    let mb = bytes / BYTES_IN_MB;
-    return L10N.getFormatStr("networkMenu.sizeMB", getSizeWithDecimals(mb, decimals));
+  }
+  if (bytes < MAX_KB_SIZE) {
+    const kb = bytes / BYTES_IN_KB;
+    const formattedDecimals = formatDecimals(kb, decimals);
+
+    return L10N.getFormatStr("networkMenu.sizeKB",
+      getSizeWithDecimals(kb, formattedDecimals));
   }
-  let gb = bytes / BYTES_IN_GB;
-  return L10N.getFormatStr("networkMenu.sizeGB", getSizeWithDecimals(gb, decimals));
+  if (bytes < MAX_MB_SIZE) {
+    const mb = bytes / BYTES_IN_MB;
+    const formattedDecimals = formatDecimals(mb, decimals);
+    return L10N.getFormatStr("networkMenu.sizeMB",
+      getSizeWithDecimals(mb, formattedDecimals));
+  }
+  const gb = bytes / BYTES_IN_GB;
+  const formattedDecimals = formatDecimals(gb, decimals);
+  return L10N.getFormatStr("networkMenu.sizeGB",
+    getSizeWithDecimals(gb, formattedDecimals));
 }
 
 /**
  * Get a human-readable string from a number of time, with the ms, s, or min
  * value.
  */
 function getFormattedTime(ms) {
   if (ms < MAX_MILLISECOND) {
     return L10N.getFormatStr("networkMenu.millisecond", ms | 0);
-  } else if (ms < MAX_SECOND) {
-    let sec = ms / MAX_MILLISECOND;
+  }
+  if (ms < MAX_SECOND) {
+    const sec = ms / MAX_MILLISECOND;
     return L10N.getFormatStr("networkMenu.second", getTimeWithDecimals(sec));
   }
-  let min = ms / MAX_SECOND;
+  const min = ms / MAX_SECOND;
   return L10N.getFormatStr("networkMenu.minute", getTimeWithDecimals(min));
 }
 
 module.exports = {
   getFormattedSize,
   getFormattedTime,
   getSizeWithDecimals,
   getTimeWithDecimals,