summaryrefslogtreecommitdiffstats
path: root/devtools/client/netmonitor
diff options
context:
space:
mode:
Diffstat (limited to 'devtools/client/netmonitor')
-rw-r--r--devtools/client/netmonitor/components/summary-button.js18
-rw-r--r--devtools/client/netmonitor/netmonitor-view.js2
-rw-r--r--devtools/client/netmonitor/performance-statistics-view.js36
-rw-r--r--devtools/client/netmonitor/selectors/index.js27
-rw-r--r--devtools/client/netmonitor/test/browser_net_charts-03.js45
-rw-r--r--devtools/client/netmonitor/test/browser_net_charts-04.js16
-rw-r--r--devtools/client/netmonitor/test/browser_net_charts-05.js10
-rw-r--r--devtools/client/netmonitor/test/browser_net_charts-07.js16
-rw-r--r--devtools/client/netmonitor/test/browser_net_footer-summary.js13
9 files changed, 123 insertions, 60 deletions
diff --git a/devtools/client/netmonitor/components/summary-button.js b/devtools/client/netmonitor/components/summary-button.js
index 9465d3147..223552fbf 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 8da5a2038..1f957db1b 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 c712c083d..38b98fb68 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 8cd6b6ffc..60d6007cd 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 c7d9b0c1a..4a655a8ca 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 0d150c409..921701ae5 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 00445b132..c444d2c65 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 bb992e4eb..a655f258c 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 94bfa604b..8faa8470b 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.");
}
});