diff options
11 files changed, 177 insertions, 70 deletions
diff --git a/devtools/client/locales/en-US/netmonitor.properties b/devtools/client/locales/en-US/netmonitor.properties index e6118ca9fc..f07f38907c 100644 --- a/devtools/client/locales/en-US/netmonitor.properties +++ b/devtools/client/locales/en-US/netmonitor.properties @@ -143,12 +143,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). @@ -221,10 +221,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.totalSize): 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 @@ -233,10 +245,6 @@ charts.cacheEnabled=Primed cache # in the performance analysis view for "cache disabled" charts. charts.cacheDisabled=Empty cache -# LOCALIZATION NOTE (charts.totalSize): This is the label displayed -# in the performance analysis view for total requests size, in kilobytes. -charts.totalSize=Size: %S KB - # LOCALIZATION NOTE (charts.totalSeconds): Semi-colon list of plural forms. # See: http://developer.mozilla.org/en/docs/Localization_and_Plurals # This is the label displayed in the performance analysis view for the @@ -251,6 +259,23 @@ charts.totalCached=Cached responses: %S # in the performance analysis view for total requests. charts.totalCount=Total requests: %S +# LOCALIZATION NOTE (charts.size): 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.type): This is the label displayed +# in the header column in the performance analysis view for type of request. +charts.type=Type + +# LOCALIZATION NOTE (charts.transferred): 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.time): 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 diff --git a/devtools/client/netmonitor/components/summary-button.js b/devtools/client/netmonitor/components/summary-button.js index 9465d3147b..223552fbf9 100644 --- a/devtools/client/netmonitor/components/summary-button.js +++ b/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: () => { diff --git a/devtools/client/netmonitor/netmonitor-view.js b/devtools/client/netmonitor/netmonitor-view.js index 8da5a2038b..1f957db1bb 100644 --- a/devtools/client/netmonitor/netmonitor-view.js +++ b/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. diff --git a/devtools/client/netmonitor/performance-statistics-view.js b/devtools/client/netmonitor/performance-statistics-view.js index c712c083d5..38b98fb689 100644 --- a/devtools/client/netmonitor/performance-statistics-view.js +++ b/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++; } diff --git a/devtools/client/netmonitor/selectors/index.js b/devtools/client/netmonitor/selectors/index.js index 8cd6b6ffc2..60d6007cd6 100644 --- a/devtools/client/netmonitor/selectors/index.js +++ b/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, }; diff --git a/devtools/client/netmonitor/test/browser_net_charts-03.js b/devtools/client/netmonitor/test/browser_net_charts-03.js index c7d9b0c1a0..4a655a8cad 100644 --- a/devtools/client/netmonitor/test/browser_net_charts-03.js +++ b/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 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 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[0].querySelectorAll("label")[0].getAttribute("value"), "1", + is(rows[1].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", + is(rows[1].querySelectorAll("label")[1].getAttribute("value"), "11.1foo", "The second column of the first row displays the correct text."); - ok(rows[1].querySelector(".table-chart-row-box.chart-colored-blob"), + ok(rows[2].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", + is(rows[2].querySelectorAll("label")[0].getAttribute("name"), "label1", "The first column of the second row exists."); - is(rows[1].querySelectorAll("label")[1].getAttribute("name"), "label2", + is(rows[2].querySelectorAll("label")[1].getAttribute("name"), "label2", "The second column of the second row exists."); - is(rows[1].querySelectorAll("label")[0].getAttribute("value"), "2", + is(rows[2].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", + is(rows[2].querySelectorAll("label")[1].getAttribute("value"), "12.2bar", "The second column of the first row displays the correct text."); - ok(rows[2].querySelector(".table-chart-row-box.chart-colored-blob"), + ok(rows[3].querySelector(".table-chart-row-box.chart-colored-blob"), "A colored blob exists for the third row."); - is(rows[2].querySelectorAll("label")[0].getAttribute("name"), "label1", + is(rows[3].querySelectorAll("label")[0].getAttribute("name"), "label1", "The first column of the third row exists."); - is(rows[2].querySelectorAll("label")[1].getAttribute("name"), "label2", + 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."); diff --git a/devtools/client/netmonitor/test/browser_net_charts-04.js b/devtools/client/netmonitor/test/browser_net_charts-04.js index 0d150c409f..921701ae5c 100644 --- a/devtools/client/netmonitor/test/browser_net_charts-04.js +++ b/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."); diff --git a/devtools/client/netmonitor/test/browser_net_charts-05.js b/devtools/client/netmonitor/test/browser_net_charts-05.js index 00445b1324..c444d2c657 100644 --- a/devtools/client/netmonitor/test/browser_net_charts-05.js +++ b/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); }); diff --git a/devtools/client/netmonitor/test/browser_net_charts-07.js b/devtools/client/netmonitor/test/browser_net_charts-07.js index bb992e4eb1..a655f258c6 100644 --- a/devtools/client/netmonitor/test/browser_net_charts-07.js +++ b/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."); diff --git a/devtools/client/netmonitor/test/browser_net_footer-summary.js b/devtools/client/netmonitor/test/browser_net_footer-summary.js index 94bfa604b1..8faa8470bc 100644 --- a/devtools/client/netmonitor/test/browser_net_footer-summary.js +++ b/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."); } }); diff --git a/devtools/client/shared/widgets/Chart.jsm b/devtools/client/shared/widgets/Chart.jsm index 0894a62ca4..0b7cb71fb6 100644 --- a/devtools/client/shared/widgets/Chart.jsm +++ b/devtools/client/shared/widgets/Chart.jsm @@ -105,7 +105,7 @@ function PieTableChart(node, pie, table) { * - "mouseout", when the mouse leaves a slice or a row * - "click", when the mouse enters a slice or a row */ -function createPieTableChart(document, { title, diameter, data, strings, totals, sorted }) { +function createPieTableChart(document, { title, diameter, data, strings, totals, sorted, header }) { if (data && sorted) { data = data.slice().sort((a, b) => +(a.size < b.size)); } @@ -119,7 +119,8 @@ function createPieTableChart(document, { title, diameter, data, strings, totals, title: title, data: data, strings: strings, - totals: totals + totals: totals, + header: header, }); let container = document.createElement("hbox"); @@ -338,7 +339,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; @@ -371,6 +372,24 @@ function createTableChart(document, { title, data, strings, totals }) { tableNode.className = "plain table-chart-grid"; 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("hbox"); rowNode.className = "table-chart-row"; |