From fb1a32612f0e89b727bbf07e45247bd22bbfec11 Mon Sep 17 00:00:00 2001 From: Leonardo Couto Date: Thu, 9 Feb 2017 01:30:31 +0100 Subject: [PATCH] Bug 1168376 - Show transferred size in request summary. r=Honza --- .../locales/en-US/netmonitor.properties | 36 +++++++++++++++++-- .../netmonitor/components/statistics-panel.js | 30 +++++++++++++--- .../client/netmonitor/components/toolbar.js | 9 ++--- .../client/netmonitor/selectors/requests.js | 16 ++++++--- devtools/client/shared/widgets/Chart.js | 25 +++++++++++-- 5 files changed, 97 insertions(+), 19 deletions(-) diff --git a/devtools/client/locales/en-US/netmonitor.properties b/devtools/client/locales/en-US/netmonitor.properties index 719bea030d69..17fca758dd6e 100644 --- a/devtools/client/locales/en-US/netmonitor.properties +++ b/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 + + + diff --git a/devtools/client/netmonitor/components/statistics-panel.js b/devtools/client/netmonitor/components/statistics-panel.js index a134a7a7553e..72d15e817773 100644 --- a/devtools/client/netmonitor/components/statistics-panel.js +++ b/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++; } diff --git a/devtools/client/netmonitor/components/toolbar.js b/devtools/client/netmonitor/components/toolbar.js index ef33b955a20b..6f38927230ab 100644 --- a/devtools/client/netmonitor/components/toolbar.js +++ b/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"]; diff --git a/devtools/client/netmonitor/selectors/requests.js b/devtools/client/netmonitor/selectors/requests.js index ab9feef2ab9a..3c8e2a86adb4 100644 --- a/devtools/client/netmonitor/selectors/requests.js +++ b/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, }; } diff --git a/devtools/client/shared/widgets/Chart.js b/devtools/client/shared/widgets/Chart.js index 64e669084475..11494d97cc05 100644 --- a/devtools/client/shared/widgets/Chart.js +++ b/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";