Bug 1381648 - Add non blocking time to the statistics panel of netmonitor; r=Honza
MozReview-Commit-ID: Anw4hTlpPjH
--- a/devtools/client/locales/en-US/netmonitor.properties
+++ b/devtools/client/locales/en-US/netmonitor.properties
@@ -318,16 +318,22 @@ charts.cacheDisabled=Empty cache
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
# total requests time, in seconds.
charts.totalSeconds=Time: #1 second;Time: #1 seconds
+# LOCALIZATION NOTE (charts.totalSecondsNonBlocking): 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
+# total requests time (non-blocking), in seconds.
+charts.totalSecondsNonBlocking=Non blocking time: #1 second;Non blocking time: #1 seconds
+
# LOCALIZATION NOTE (charts.totalCached): This is the label displayed
# in the performance analysis view for total cached responses.
charts.totalCached=Cached responses: %S
# LOCALIZATION NOTE (charts.totalCount): This is the label displayed
# in the performance analysis view for total requests.
charts.totalCount=Total requests: %S
@@ -343,16 +349,21 @@ charts.type=Type
# 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 (charts.nonBlockingTime): This is the label displayed
+# in the header column in the performance analysis view for non blocking
+# time of request.
+charts.nonBlockingTime=Non blocking time
+
# LOCALIZATION NOTE (netRequest.headers): A label used for Headers tab
# This tab displays list of HTTP headers
netRequest.headers=Headers
# LOCALIZATION NOTE (netRequest.response): A label used for Response tab
# This tab displays HTTP response body
netRequest.response=Response
--- a/devtools/client/netmonitor/src/components/StatisticsPanel.js
+++ b/devtools/client/netmonitor/src/components/StatisticsPanel.js
@@ -127,41 +127,50 @@ class StatisticsPanel extends Component
title,
header: {
cached: "",
count: "",
label: L10N.getStr("charts.type"),
size: L10N.getStr("charts.size"),
transferredSize: L10N.getStr("charts.transferred"),
time: L10N.getStr("charts.time"),
+ nonBlockingTime: L10N.getStr("charts.nonBlockingTime"),
},
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)),
+ nonBlockingTime: (value) =>
+ 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);
return PluralForm.get(seconds,
L10N.getStr("charts.totalSeconds")).replace("#1", string);
},
+ nonBlockingTime: (total) => {
+ let seconds = total / 1000;
+ let string = getTimeWithDecimals(seconds);
+ return PluralForm.get(seconds,
+ L10N.getStr("charts.totalSecondsNonBlocking")).replace("#1", string);
+ },
},
sorted: true,
});
chart.on("click", (_, { label }) => {
// Reset FilterButtons and enable one filter exclusively
this.props.closeStatistics();
this.props.enableRequestFilterTypeOnly(label);
@@ -180,16 +189,17 @@ class StatisticsPanel extends Component
sanitizeChartDataSource(requests, emptyCache) {
const data = FILTER_TAGS.map((type) => ({
cached: 0,
count: 0,
label: type,
size: 0,
transferredSize: 0,
time: 0,
+ nonBlockingTime: 0,
}));
for (let request of requests) {
let type;
if (Filters.html(request)) {
// "html"
type = 0;
@@ -219,16 +229,19 @@ class StatisticsPanel extends Component
// "other"
type = 8;
}
if (emptyCache || !this.responseIsFresh(request)) {
data[type].time += request.totalTime || 0;
data[type].size += request.contentSize || 0;
data[type].transferredSize += request.transferredSize || 0;
+ let nonBlockingTime =
+ request.eventTimings.totalTime - request.eventTimings.timings.blocked;
+ data[type].nonBlockingTime += nonBlockingTime || 0;
} else {
data[type].cached++;
}
data[type].count++;
}
return data.filter(e => e.count > 0);
}