Bug 1168376 - Show transferred size in request summary. r=Honza

--HG--
extra : rebase_source : 9c0a927a9ffd796c9601dae45a33184b96f0773c

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

@@ -147,12 +147,12 @@ networkMenu.sortedDesc=Sorted descending
 # in the network table footer when there are no requests available.
 networkMenu.empty=No requests
 
-# LOCALIZATION NOTE (networkMenu.summary): Semi-colon list of plural forms.
+# LOCALIZATION NOTE (networkMenu.summary2): 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 number of seconds.
-networkMenu.summary=One request, #2 KB, #3 s;#1 requests, #2 KB, #3 s
+# #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
 
 # LOCALIZATION NOTE (networkMenu.sizeB): This is the label displayed
 # in the network menu specifying the size of a request (in bytes).
@@ -225,10 +225,22 @@ tableChart.unavailable=No data available
 # in pie or table charts specifying the size of a request (in kilobytes).
 charts.sizeKB=%S KB
 
+# LOCALIZATION NOTE (charts.transferredSizeKB): This is the label displayed
+# in pie or table charts specifying the size of a transferred request (in kilobytes).
+charts.transferredSizeKB=%S KB
+
 # LOCALIZATION NOTE (charts.totalS): This is the label displayed
 # in pie or table charts specifying the time for a request to finish (in seconds).
 charts.totalS=%S s
 
+# LOCALIZATION NOTE (charts.totalS): This is the label displayed
+# in the performance analysis view for total requests size, in kilobytes.
+charts.totalSize=Size: %S KB
+
+# LOCALIZATION NOTE (charts.totalTranferredSize): This is the label displayed
+# in the performance analysis view for total transferred size, in kilobytes.
+charts.totalTransferredSize=Transferred Size: %S KB
+
 # LOCALIZATION NOTE (charts.cacheEnabled): This is the label displayed
 # in the performance analysis view for "cache enabled" charts.
 charts.cacheEnabled=Primed cache
@@ -255,6 +267,23 @@ charts.totalCached=Cached responses: %S
 # in the performance analysis view for total requests.
 charts.totalCount=Total requests: %S
 
+# LOCALIZATION NOTE (charts.totalCount): This is the label displayed
+# in the header column in the performance analysis view for size of the request.
+charts.size=Size
+
+# LOCALIZATION NOTE (charts.totalCount): This is the label displayed
+# in the header column in the performance analysis view for type of request.
+charts.type=Type
+
+# LOCALIZATION NOTE (charts.totalCount): This is the label displayed
+# in the header column in the performance analysis view for transferred
+# size of the request.
+charts.transferred=Transferred
+
+# LOCALIZATION NOTE (charts.totalCount): This is the label displayed
+# in the header column in the performance analysis view for time of request.
+charts.time=Time
+
 # LOCALIZATION NOTE (netRequest.headers): A label used for Headers tab
 # This tab displays list of HTTP headers
 netRequest.headers=Headers
@@ -753,3 +782,6 @@ netmonitor.backButton=Back
 # LOCALIZATION NOTE (netmonitor.headers.learnMore): This is the label displayed
 # next to a header list item, with a link to external documentation
 netmonitor.headers.learnMore=Learn More
+
+
+

devtools/client/netmonitor/components/statistics-panel.js

@@ -53,13 +53,13 @@ const StatisticsPanel = createClass({
     this.createChart({
       id: "primedCacheChart",
       title: CHARTS_CACHE_ENABLED,
-      data: ready ? this.sanitizeChartDataSource(requests, false) : null,
+      data: ready ? this.sanitizeChartDataSource(requests, false) : null
     });
 
     this.createChart({
       id: "emptyCacheChart",
       title: CHARTS_CACHE_DISABLED,
-      data: ready ? this.sanitizeChartDataSource(requests, true) : null,
+      data: ready ? this.sanitizeChartDataSource(requests, true) : null
     });
   },
 
@@ -68,18 +68,32 @@ const StatisticsPanel = createClass({
     let chart = Chart.PieTable(document, {
       diameter: NETWORK_ANALYSIS_PIE_CHART_DIAMETER,
       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,
       strings: {
         size: (value) =>
           L10N.getFormatStr("charts.sizeKB", getSizeWithDecimals(value / 1024)),
+        transferredSize: (value) =>
+          L10N.getFormatStr("charts.transferredSizeKB",
+            getSizeWithDecimals(value / 1024)),
         time: (value) =>
-          L10N.getFormatStr("charts.totalS", getTimeWithDecimals(value / 1000)),
+          L10N.getFormatStr("charts.totalS", getTimeWithDecimals(value / 1000))
       },
       totals: {
         cached: (total) => L10N.getFormatStr("charts.totalCached", total),
         count: (total) => L10N.getFormatStr("charts.totalCount", total),
         size: (total) =>
           L10N.getFormatStr("charts.totalSize", getSizeWithDecimals(total / 1024)),
+        transferredSize: total =>
+          L10N.getFormatStr("charts.totalTransferredSize",
+            getSizeWithDecimals(total / 1024)),
         time: (total) => {
           let seconds = total / 1000;
           let string = getTimeWithDecimals(seconds);
@@ -107,9 +121,16 @@ const StatisticsPanel = createClass({
   },
 
   sanitizeChartDataSource(requests, emptyCache) {
-    let data = [
+    const data = [
       "html", "css", "js", "xhr", "fonts", "images", "media", "flash", "ws", "other"
-    ].map((type) => ({ cached: 0, count: 0, label: type, size: 0, time: 0 }));
+    ].map((type) => ({
+      cached: 0,
+      count: 0,
+      label: type,
+      size: 0,
+      transferredSize: 0,
+      time: 0
+    }));
 
     for (let request of requests) {
       let type;
@@ -150,6 +171,7 @@ const StatisticsPanel = createClass({
       if (emptyCache || !this.responseIsFresh(request)) {
         data[type].time += request.totalTime || 0;
         data[type].size += request.contentSize || 0;
+        data[type].transferredSize += request.transferredSize || 0;
       } else {
         data[type].cached++;
       }

devtools/client/netmonitor/components/toolbar.js

@@ -57,12 +57,13 @@ function Toolbar({
     toggleButtonClassName.push("pane-collapsed");
   }
 
-  let { count, bytes, millis } = 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", getSizeWithDecimals(bytes / 1024))
-    .replace("#3", getTimeWithDecimals(millis / 1000));
+    .replace("#2", getSizeWithDecimals(contentSize / 1024))
+    .replace("#3", getSizeWithDecimals(transferredSize / 1024))
+    .replace("#4", getTimeWithDecimals(millis / 1000));
 
   const buttons = requestFilterTypes.entrySeq().map(([type, checked]) => {
     let classList = ["menu-filter-button"];

devtools/client/netmonitor/selectors/requests.js

@@ -77,16 +77,22 @@ const getDisplayedRequestsSummary = createSelector(
       return { count: 0, bytes: 0, millis: 0 };
     }
 
-    const totalBytes = requests.reduce((total, item) => {
+    const totalBytes = requests.reduce((totals, item) => {
       if (typeof item.contentSize == "number") {
-        total += item.contentSize;
+        totals.contentSize += item.contentSize;
       }
-      return total;
-    }, 0);
+
+      if (typeof item.transferredSize == "number") {
+        totals.transferredSize += item.transferredSize;
+      }
+
+      return totals;
+    }, { contentSize: 0, transferredSize: 0 });
 
     return {
       count: requests.size,
-      bytes: totalBytes,
+      contentSize: totalBytes.contentSize,
+      transferredSize: totalBytes.transferredSize,
       millis: totalMillis,
     };
   }

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

@@ -34,6 +34,10 @@ add_task(function* () {
     totals: {
       label1: value => "Hello " + L10N.numberWithDecimals(value, 2),
       label2: value => "World " + L10N.numberWithDecimals(value, 2)
+    },
+    header: {
+      label1: "label1header",
+      label2: "label2header",
     }
   });
 
@@ -52,39 +56,49 @@ add_task(function* () {
   is(title.textContent, "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("span")[0].getAttribute("name"), "label1",
-    "The first column of the first row exists.");
+    "The first column of the header exists.");
   is(rows[0].querySelectorAll("span")[1].getAttribute("name"), "label2",
-    "The second column of the first row exists.");
-  is(rows[0].querySelectorAll("span")[0].textContent, "1",
-    "The first column of the first row displays the correct text.");
-  is(rows[0].querySelectorAll("span")[1].textContent, "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.");
+    "A colored blob exists for the firt row.");
   is(rows[1].querySelectorAll("span")[0].getAttribute("name"), "label1",
-    "The first column of the second row exists.");
+    "The first column of the first row exists.");
   is(rows[1].querySelectorAll("span")[1].getAttribute("name"), "label2",
-    "The second column of the second row exists.");
-  is(rows[1].querySelectorAll("span")[0].textContent, "2",
-    "The first column of the second row displays the correct text.");
-  is(rows[1].querySelectorAll("span")[1].textContent, "12.2bar",
+    "The second column of the first row exists.");
+  is(rows[1].querySelectorAll("span")[0].textContent, "1",
+    "The first column of the first row displays the correct text.");
+  is(rows[1].querySelectorAll("span")[1].textContent, "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("span")[0].getAttribute("name"), "label1",
-    "The first column of the third row exists.");
+    "The first column of the second row exists.");
   is(rows[2].querySelectorAll("span")[1].getAttribute("name"), "label2",
+    "The second column of the second row exists.");
+  is(rows[2].querySelectorAll("span")[0].textContent, "2",
+    "The first column of the second row displays the correct text.");
+  is(rows[2].querySelectorAll("span")[1].textContent, "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("span")[0].getAttribute("name"), "label1",
+    "The first column of the third row exists.");
+  is(rows[3].querySelectorAll("span")[1].getAttribute("name"), "label2",
     "The second column of the third row exists.");
-  is(rows[2].querySelectorAll("span")[0].textContent, "3",
+  is(rows[3].querySelectorAll("span")[0].textContent, "3",
     "The first column of the third row displays the correct text.");
-  is(rows[2].querySelectorAll("span")[1].textContent, "13.3baz",
+  is(rows[3].querySelectorAll("span")[1].textContent, "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

@@ -23,6 +23,10 @@ add_task(function* () {
     totals: {
       label1: value => "Hello " + L10N.numberWithDecimals(value, 2),
       label2: value => "World " + L10N.numberWithDecimals(value, 2)
+    },
+    header: {
+      label1: "",
+      label2: ""
     }
   });
 
@@ -41,17 +45,17 @@ add_task(function* () {
   is(title.textContent, "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("span")[0].getAttribute("name"), "size",
+  is(rows[1].querySelectorAll("span")[0].getAttribute("name"), "size",
     "The first column of the first row exists.");
-  is(rows[0].querySelectorAll("span")[1].getAttribute("name"), "label",
+  is(rows[1].querySelectorAll("span")[1].getAttribute("name"), "label",
     "The second column of the first row exists.");
-  is(rows[0].querySelectorAll("span")[0].textContent, "",
+  is(rows[1].querySelectorAll("span")[0].textContent, "",
     "The first column of the first row displays the correct text.");
-  is(rows[0].querySelectorAll("span")[1].textContent,
+  is(rows[1].querySelectorAll("span")[1].textContent,
     L10N.getStr("tableChart.loading"),
     "The second column of the first row displays the correct text.");
 

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

@@ -34,6 +34,10 @@ add_task(function* () {
     totals: {
       size: value => "Hello " + L10N.numberWithDecimals(value, 2),
       label: value => "World " + L10N.numberWithDecimals(value, 2)
+    },
+    header: {
+      label1: "",
+      label2: ""
     }
   });
 
@@ -54,9 +58,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

@@ -21,6 +21,10 @@ add_task(function* () {
     totals: {
       label1: value => "Hello " + L10N.numberWithDecimals(value, 2),
       label2: value => "World " + L10N.numberWithDecimals(value, 2)
+    },
+    header: {
+      label1: "",
+      label2: ""
     }
   });
 
@@ -30,17 +34,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("span")[0].getAttribute("name"), "size",
+  is(rows[1].querySelectorAll("span")[0].getAttribute("name"), "size",
     "The first column of the first row exists.");
-  is(rows[0].querySelectorAll("span")[1].getAttribute("name"), "label",
+  is(rows[1].querySelectorAll("span")[1].getAttribute("name"), "label",
     "The second column of the first row exists.");
-  is(rows[0].querySelectorAll("span")[0].textContent, "",
+  is(rows[1].querySelectorAll("span")[0].textContent, "",
     "The first column of the first row displays the correct text.");
-  is(rows[0].querySelectorAll("span")[1].textContent,
+  is(rows[1].querySelectorAll("span")[1].textContent,
     L10N.getStr("tableChart.unavailable"),
     "The second column of the first row displays the correct text.");
 

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

@@ -61,10 +61,11 @@ add_task(function* () {
     info(`Computed total bytes: ${requestsSummary.bytes}`);
     info(`Computed total millis: ${requestsSummary.millis}`);
 
-    is(value, PluralForm.get(requestsSummary.count, L10N.getStr("networkMenu.summary"))
+    is(value, PluralForm.get(requestsSummary.count, L10N.getStr("networkMenu.summary2"))
       .replace("#1", requestsSummary.count)
-      .replace("#2", L10N.numberWithDecimals(requestsSummary.bytes / 1024, 2))
-      .replace("#3", L10N.numberWithDecimals(requestsSummary.millis / 1000, 2))
+      .replace("#2", L10N.numberWithDecimals(requestsSummary.contentSize / 1024, 2))
+      .replace("#3", L10N.numberWithDecimals(requestsSummary.transferredSize / 1024, 2))
+      .replace("#4", L10N.numberWithDecimals(requestsSummary.millis / 1000, 2))
     , "The current summary text is correct.");
   }
 });

devtools/client/shared/widgets/Chart.js

@@ -94,7 +94,7 @@ function PieTableChart(node, pie, table) {
  *           - "click", when the mouse enters a slice or a row
  */
 function createPieTableChart(document,
-                             { title, diameter, data, strings, totals, sorted }) {
+                             { title, diameter, data, strings, totals, sorted, header }) {
   if (data && sorted) {
     data = data.slice().sort((a, b) => +(a.size < b.size));
   }
@@ -108,7 +108,8 @@ function createPieTableChart(document,
     title: title,
     data: data,
     strings: strings,
-    totals: totals
+    totals: totals,
+    header: header,
   });
 
   let container = document.createElement("div");
@@ -327,7 +328,7 @@ function createPieChart(document, { data, width, height, centerX, centerY, radiu
  *           - "mouseout", when the mouse leaves a row
  *           - "click", when the mouse clicks a row
  */
-function createTableChart(document, { title, data, strings, totals }) {
+function createTableChart(document, { title, data, strings, totals, header }) {
   strings = strings || {};
   totals = totals || {};
   let isPlaceholder = false;
@@ -362,6 +363,24 @@ function createTableChart(document, { title, data, strings, totals }) {
   tableNode.setAttribute("style", "-moz-box-orient: vertical");
   container.appendChild(tableNode);
 
+  const headerNode = document.createElement("div");
+  headerNode.className = "table-chart-row";
+
+  const headerBoxNode = document.createElement("div");
+  headerBoxNode.className = "table-chart-row-box";
+  headerNode.appendChild(headerBoxNode);
+
+  for (let [key, value] of Object.entries(header)) {
+    let headerLabelNode = document.createElement("span");
+    headerLabelNode.className = "plain table-chart-row-label";
+    headerLabelNode.setAttribute("name", key);
+    headerLabelNode.textContent = value;
+
+    headerNode.appendChild(headerLabelNode);
+  }
+
+  tableNode.appendChild(headerNode);
+
   for (let rowInfo of data) {
     let rowNode = document.createElement("div");
     rowNode.className = "table-chart-row";