Bug 1381648 - Add non blocking time to the statistics panel of netmonitor; r=Honza draft
authorVincent Lequertier <vi.le@autistici.org>
Fri, 06 Oct 2017 15:11:18 +0200
changeset 697814 307fd2f966578b9774274c510e5f809ad16e5840
parent 694943 f63559d7e6a570e4e73ba367964099394248e18d
child 740214 00930648fe766acc7973a5801035acd8e512aac8
push id89104
push uservi.le@autistici.org
push dateTue, 14 Nov 2017 18:56:52 +0000
reviewersHonza
bugs1381648
milestone58.0a1
Bug 1381648 - Add non blocking time to the statistics panel of netmonitor; r=Honza MozReview-Commit-ID: Anw4hTlpPjH
devtools/client/locales/en-US/netmonitor.properties
devtools/client/netmonitor/src/components/StatisticsPanel.js
--- 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);
   }