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 390725 ddc511090d07d991ca58c35e4a986bb83b3b25b3
parent 390724 8d2a0d1f223178383805aba9d4fcaac3f5c88fda
child 390726 e3699678d46e5393c96b49ca55641e67075ab1cc
push id7198
push userjlorenzo@mozilla.com
push dateTue, 18 Apr 2017 12:07:49 +0000
treeherdermozilla-beta@d57aa49c3948 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersHonza
bugs1338284
milestone54.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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,