Bug 1168376: Show transferred size in request summary instead of decompressed size

https://github.com/MoonchildProductions/moebius/pull/93
- without: DOMContentLoaded and load

devtools/client/netmonitor/components/summary-button.js

@@ -14,21 +14,25 @@ const { DOM, PropTypes } = require("devtools/client/shared/vendor/react");
 const { connect } = require("devtools/client/shared/vendor/react-redux");
 const { PluralForm } = require("devtools/shared/plural-form");
 const { L10N } = require("../l10n");
-const { getSummary } = require("../selectors/index");
+const { 
+  getDisplayedRequestsSummary
+} = require("../selectors/index");
 
 const { button, span } = DOM;
 
 function SummaryButton({
   summary,
-  triggerSummary,
+  triggerSummary
 }) {
-  let { count, totalBytes, totalMillis } = summary;
+  let { count, contentSize, transferredSize, millis } = summary;
   const text = (count === 0) ? L10N.getStr("networkMenu.empty") :
-    PluralForm.get(count, L10N.getStr("networkMenu.summary"))
+    PluralForm.get(count, L10N.getStr("networkMenu.summary2"))
     .replace("#1", count)
-    .replace("#2", L10N.numberWithDecimals(totalBytes / 1024,
+    .replace("#2", L10N.numberWithDecimals(contentSize / 1024,
       CONTENT_SIZE_DECIMALS))
-    .replace("#3", L10N.numberWithDecimals(totalMillis / 1000,
+    .replace("#3", L10N.numberWithDecimals(transferredSize / 1024,
+      CONTENT_SIZE_DECIMALS))
+    .replace("#4", L10N.numberWithDecimals(millis / 1000,
       REQUEST_TIME_DECIMALS));
 
   return button({
@@ -47,7 +51,7 @@ SummaryButton.propTypes = {
 
 module.exports = connect(
   (state) => ({
-    summary: getSummary(state),
+    summary: getDisplayedRequestsSummary(state),
   }),
   (dispatch) => ({
     triggerSummary: () => {

devtools/client/netmonitor/netmonitor-view.js

@@ -233,7 +233,7 @@ var NetMonitorView = {
         // populating the statistics view.
         // • The response mime type is used for categorization.
         yield whenDataAvailable(requestsView, [
-          "responseHeaders", "status", "contentSize", "mimeType", "totalTime"
+          "responseHeaders", "status", "contentSize", "transferredSize", "mimeType", "totalTime"
         ]);
       } catch (ex) {
         // Timed out while waiting for data. Continue with what we have.

devtools/client/netmonitor/performance-statistics-view.js

@@ -92,27 +92,35 @@ PerformanceStatisticsView.prototype = {
       let string = L10N.numberWithDecimals(value / 1024, CONTENT_SIZE_DECIMALS);
       return L10N.getFormatStr("charts.sizeKB", string);
     },
+    transferredSize: value => {
+      let string = L10N.numberWithDecimals(value / 1024, CONTENT_SIZE_DECIMALS);
+      return L10N.getFormatStr("charts.transferredSizeKB", string);
+    },
     time: value => {
       let string = L10N.numberWithDecimals(value / 1000, REQUEST_TIME_DECIMALS);
       return L10N.getFormatStr("charts.totalS", string);
     }
   },
   _commonChartTotals: {
+    cached: total => {
+      return L10N.getFormatStr("charts.totalCached", total);
+    },
+    count: total => {
+      return L10N.getFormatStr("charts.totalCount", total);
+    },
     size: total => {
       let string = L10N.numberWithDecimals(total / 1024, CONTENT_SIZE_DECIMALS);
       return L10N.getFormatStr("charts.totalSize", string);
     },
+    transferredSize: total => {
+      let string = L10N.numberWithDecimals(total / 1024, CONTENT_SIZE_DECIMALS);
+      return L10N.getFormatStr("charts.totalTransferredSize", string);
+    },
     time: total => {
       let seconds = total / 1000;
       let string = L10N.numberWithDecimals(seconds, REQUEST_TIME_DECIMALS);
       return PluralForm.get(seconds,
         L10N.getStr("charts.totalSeconds")).replace("#1", string);
-    },
-    cached: total => {
-      return L10N.getFormatStr("charts.totalCached", total);
-    },
-    count: total => {
-      return L10N.getFormatStr("charts.totalCount", total);
     }
   },
 
@@ -136,6 +144,14 @@ PerformanceStatisticsView.prototype = {
     let chart = Chart.PieTable(document, {
       diameter: NETWORK_ANALYSIS_PIE_CHART_DIAMETER,
       title: L10N.getStr(title),
+      header: {
+        cached: "",
+        count: "",
+        label: L10N.getStr("charts.type"),
+        size: L10N.getStr("charts.size"),
+        transferredSize: L10N.getStr("charts.transferred"),
+        time: L10N.getStr("charts.time")
+      },
       data: data,
       strings: strings,
       totals: totals,
@@ -161,13 +177,14 @@ PerformanceStatisticsView.prototype = {
    *        True if the cache is considered enabled, false for disabled.
    */
   _sanitizeChartDataSource: function (items, emptyCache) {
-    let data = [
+    const data = [
       "html", "css", "js", "xhr", "fonts", "images", "media", "flash", "ws", "other"
-    ].map(e => ({
+    ].map((type) => ({
       cached: 0,
       count: 0,
-      label: e,
+      label: type,
       size: 0,
+      transferredSize: 0,
       time: 0
     }));
 
@@ -211,6 +228,7 @@ PerformanceStatisticsView.prototype = {
       if (emptyCache || !responseIsFresh(details)) {
         data[type].time += details.totalTime || 0;
         data[type].size += details.contentSize || 0;
+        data[type].transferredSize += details.transferredSize || 0;
       } else {
         data[type].cached++;
       }

devtools/client/netmonitor/selectors/index.js

@@ -13,7 +13,7 @@ const { createSelector } = require("devtools/client/shared/vendor/reselect");
  * @param {array} items - an array of request items
  * @return {number} total bytes of requests
  */
-function getTotalBytesOfRequests(items) {
+function getContentSizeOfRequests(items) {
   if (!items.length) {
     return 0;
   }
@@ -27,6 +27,20 @@ function getTotalBytesOfRequests(items) {
   return result;
 }
 
+function getTransferredSizeOfRequests(items) {
+  if (!items.length) {
+    return 0;
+  }
+
+  let result = 0;
+  items.forEach((item) => {
+    let size = item.attachment.transferredSize;
+    result += (typeof size == "number") ? size : 0;
+  });
+
+  return result;
+}
+
 /**
  * Gets the total milliseconds for all requests. Returns null for an
  * empty set.
@@ -34,7 +48,7 @@ function getTotalBytesOfRequests(items) {
  * @param {array} items - an array of request items
  * @return {object} total milliseconds for all requests
  */
-function getTotalMillisOfRequests(items) {
+function getMillisOfRequests(items) {
   if (!items.length) {
     return null;
   }
@@ -49,15 +63,16 @@ function getTotalMillisOfRequests(items) {
   return newest.attachment.endedMillis - oldest.attachment.startedMillis;
 }
 
-const getSummary = createSelector(
+const getDisplayedRequestsSummary = createSelector(
   (state) => state.requests.items,
   (requests) => ({
     count: requests.length,
-    totalBytes: getTotalBytesOfRequests(requests),
-    totalMillis: getTotalMillisOfRequests(requests),
+    contentSize: getContentSizeOfRequests(requests),
+    transferredSize: getTransferredSizeOfRequests(requests),
+    millis: getMillisOfRequests(requests),
   })
 );
 
 module.exports = {
-  getSummary,
+  getDisplayedRequestsSummary,
 };

devtools/client/netmonitor/test/browser_net_charts-03.js

@@ -33,6 +33,10 @@ add_task(function* () {
     totals: {
       label1: value => "Hello " + L10N.numberWithDecimals(value, 2),
       label2: value => "World " + L10N.numberWithDecimals(value, 2)
+    },
+    header: {
+      label1: "label1header",
+      label2: "label2header",
     }
   });
 
@@ -51,39 +55,48 @@ add_task(function* () {
   is(title.getAttribute("value"), "Table title",
     "The title node displays the correct text.");
 
-  is(rows.length, 3, "There should be 3 table chart rows created.");
+  is(rows.length, 4, "There should be 3 table chart rows and a header created.");
 
-  ok(rows[0].querySelector(".table-chart-row-box.chart-colored-blob"),
-    "A colored blob exists for the firt row.");
   is(rows[0].querySelectorAll("label")[0].getAttribute("name"), "label1",
-    "The first column of the first row exists.");
+    "The first column of the header exists.");
   is(rows[0].querySelectorAll("label")[1].getAttribute("name"), "label2",
-    "The second column of the first row exists.");
-  is(rows[0].querySelectorAll("label")[0].getAttribute("value"), "1",
-    "The first column of the first row displays the correct text.");
-  is(rows[0].querySelectorAll("label")[1].getAttribute("value"), "11.1foo",
-    "The second column of the first row displays the correct text.");
+    "The second column of the header exists.");
+  is(rows[0].querySelectorAll("span")[0].textContent, "label1header",
+    "The first column of the header displays the correct text.");
+  is(rows[0].querySelectorAll("span")[1].textContent, "label2header",
+    "The second column of the header displays the correct text.");
 
   ok(rows[1].querySelector(".table-chart-row-box.chart-colored-blob"),
-    "A colored blob exists for the second row.");
-  is(rows[1].querySelectorAll("label")[0].getAttribute("name"), "label1",
-    "The first column of the second row exists.");
-  is(rows[1].querySelectorAll("label")[1].getAttribute("name"), "label2",
-    "The second column of the second row exists.");
-  is(rows[1].querySelectorAll("label")[0].getAttribute("value"), "2",
-    "The first column of the second row displays the correct text.");
-  is(rows[1].querySelectorAll("label")[1].getAttribute("value"), "12.2bar",
+    "A colored blob exists for the firt row.");
+  is(rows[1].querySelectorAll("span")[0].getAttribute("name"), "label1",
+    "The first column of the first row exists.");
+  is(rows[1].querySelectorAll("span")[1].getAttribute("name"), "label2",
+    "The second column of the first row exists.");
+  is(rows[1].querySelectorAll("label")[0].getAttribute("value"), "1",
+    "The first column of the first row displays the correct text.");
+  is(rows[1].querySelectorAll("label")[1].getAttribute("value"), "11.1foo",
     "The second column of the first row displays the correct text.");
 
   ok(rows[2].querySelector(".table-chart-row-box.chart-colored-blob"),
-    "A colored blob exists for the third row.");
+    "A colored blob exists for the second row.");
   is(rows[2].querySelectorAll("label")[0].getAttribute("name"), "label1",
-    "The first column of the third row exists.");
+    "The first column of the second row exists.");
   is(rows[2].querySelectorAll("label")[1].getAttribute("name"), "label2",
+    "The second column of the second row exists.");
+  is(rows[2].querySelectorAll("label")[0].getAttribute("value"), "2",
+    "The first column of the second row displays the correct text.");
+  is(rows[2].querySelectorAll("label")[1].getAttribute("value"), "12.2bar",
+    "The second column of the first row displays the correct text.");
+
+  ok(rows[3].querySelector(".table-chart-row-box.chart-colored-blob"),
+    "A colored blob exists for the third row.");
+  is(rows[3].querySelectorAll("label")[0].getAttribute("name"), "label1",
+    "The first column of the third row exists.");
+  is(rows[3].querySelectorAll("label")[1].getAttribute("name"), "label2",
     "The second column of the third row exists.");
-  is(rows[2].querySelectorAll("label")[0].getAttribute("value"), "3",
+  is(rows[3].querySelectorAll("label")[0].getAttribute("value"), "3",
     "The first column of the third row displays the correct text.");
-  is(rows[2].querySelectorAll("label")[1].getAttribute("value"), "13.3baz",
+  is(rows[3].querySelectorAll("label")[1].getAttribute("value"), "13.3baz",
     "The second column of the third row displays the correct text.");
 
   is(sums.length, 2, "There should be 2 total summaries created.");

devtools/client/netmonitor/test/browser_net_charts-04.js

@@ -22,6 +22,10 @@ add_task(function* () {
     totals: {
       label1: value => "Hello " + L10N.numberWithDecimals(value, 2),
       label2: value => "World " + L10N.numberWithDecimals(value, 2)
+    },
+    header: {
+      label1: "",
+      label2: ""
     }
   });
 
@@ -40,17 +44,17 @@ add_task(function* () {
   is(title.getAttribute("value"), "Table title",
     "The title node displays the correct text.");
 
-  is(rows.length, 1, "There should be 1 table chart row created.");
+  is(rows.length, 2, "There should be 1 table chart row and a 1 header created.");
 
-  ok(rows[0].querySelector(".table-chart-row-box.chart-colored-blob"),
+  ok(rows[1].querySelector(".table-chart-row-box.chart-colored-blob"),
     "A colored blob exists for the firt row.");
-  is(rows[0].querySelectorAll("label")[0].getAttribute("name"), "size",
+  is(rows[1].querySelectorAll("label")[0].getAttribute("name"), "size",
     "The first column of the first row exists.");
-  is(rows[0].querySelectorAll("label")[1].getAttribute("name"), "label",
+  is(rows[1].querySelectorAll("label")[1].getAttribute("name"), "label",
     "The second column of the first row exists.");
-  is(rows[0].querySelectorAll("label")[0].getAttribute("value"), "",
+  is(rows[1].querySelectorAll("label")[0].getAttribute("value"), "",
     "The first column of the first row displays the correct text.");
-  is(rows[0].querySelectorAll("label")[1].getAttribute("value"),
+  is(rows[1].querySelectorAll("label")[1].getAttribute("value"),
     L10N.getStr("tableChart.loading"),
     "The second column of the first row displays the correct text.");
 

devtools/client/netmonitor/test/browser_net_charts-05.js

@@ -33,6 +33,10 @@ add_task(function* () {
     totals: {
       size: value => "Hello " + L10N.numberWithDecimals(value, 2),
       label: value => "World " + L10N.numberWithDecimals(value, 2)
+    },
+    header: {
+      label1: "",
+      label2: ""
     }
   });
 
@@ -53,9 +57,9 @@ add_task(function* () {
   ok(node.querySelector(".table-chart-container"),
     "A table chart was created successfully.");
 
-  is(rows.length, 3, "There should be 3 pie chart slices created.");
-  is(rows.length, 3, "There should be 3 table chart rows created.");
-  is(sums.length, 2, "There should be 2 total summaries created.");
+  is(rows.length, 4, "There should be 3 pie chart slices and 1 header created.");
+  is(rows.length, 4, "There should be 3 table chart rows and 1 header created.");
+  is(sums.length, 2, "There should be 2 total summaries and 1 header created.");
 
   yield teardown(monitor);
 });

devtools/client/netmonitor/test/browser_net_charts-07.js

@@ -20,6 +20,10 @@ add_task(function* () {
     totals: {
       label1: value => "Hello " + L10N.numberWithDecimals(value, 2),
       label2: value => "World " + L10N.numberWithDecimals(value, 2)
+    },
+    header: {
+      label1: "",
+      label2: ""
     }
   });
 
@@ -29,17 +33,17 @@ add_task(function* () {
   let rows = grid.querySelectorAll(".table-chart-row");
   let sums = node.querySelectorAll(".table-chart-summary-label");
 
-  is(rows.length, 1, "There should be 1 table chart row created.");
+  is(rows.length, 2, "There should be 1 table chart row and 1 header created.");
 
-  ok(rows[0].querySelector(".table-chart-row-box.chart-colored-blob"),
+  ok(rows[1].querySelector(".table-chart-row-box.chart-colored-blob"),
     "A colored blob exists for the firt row.");
-  is(rows[0].querySelectorAll("label")[0].getAttribute("name"), "size",
+  is(rows[1].querySelectorAll("label")[0].getAttribute("name"), "size",
     "The first column of the first row exists.");
-  is(rows[0].querySelectorAll("label")[1].getAttribute("name"), "label",
+  is(rows[1].querySelectorAll("label")[1].getAttribute("name"), "label",
     "The second column of the first row exists.");
-  is(rows[0].querySelectorAll("label")[0].getAttribute("value"), "",
+  is(rows[1].querySelectorAll("label")[0].getAttribute("value"), "",
     "The first column of the first row displays the correct text.");
-  is(rows[0].querySelectorAll("label")[1].getAttribute("value"),
+  is(rows[1].querySelectorAll("label")[1].getAttribute("value"),
     L10N.getStr("tableChart.unavailable"),
     "The second column of the first row displays the correct text.");
 

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

@@ -44,7 +44,7 @@ add_task(function* () {
   yield teardown(monitor);
 
   function testStatus() {
-    const { count, totalBytes, totalMillis } = getSummary(gStore.getState());
+    const { count, contentSize, transferredSize, millis } = getSummary(gStore.getState());
     let value = $("#requests-menu-network-summary-button").textContent;
     info("Current summary: " + value);
 
@@ -57,13 +57,14 @@ add_task(function* () {
       return;
     }
 
-    info("Computed total bytes: " + totalBytes);
-    info("Computed total millis: " + totalMillis);
+    info("Computed total bytes: " + contentSize);
+    info("Computed total millis: " + millis);
 
-    is(value, PluralForm.get(count, L10N.getStr("networkMenu.summary"))
+    is(value, PluralForm.get(count, L10N.getStr("networkMenu.summary2"))
       .replace("#1", count)
-      .replace("#2", L10N.numberWithDecimals((totalBytes || 0) / 1024, 2))
-      .replace("#3", L10N.numberWithDecimals((totalMillis || 0) / 1000, 2))
+      .replace("#2", L10N.numberWithDecimals((contentSize || 0) / 1024, 2))
+      .replace("#3", L10N.numberWithDecimals((transferredSize || 0) / 1024, 2))
+      .replace("#4", L10N.numberWithDecimals((millis || 0) / 1000, 2))
     , "The current summary text is incorrect.");
   }
 });