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

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

@@ -151,8 +151,8 @@ networkMenu.empty=No 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 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,30 @@ 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 +119,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 +169,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/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";