Use Fully Loaded from Browsertime instead of PageXray (#2251)

* Use Fully Loaded from Browsertime instead of PageXray

We now uses the Fully Loaded from the HAR and using the one from
Browsertime gives us stats like median, so let us use that!

lib/plugins/html/setup/detailed.js

@@ -102,13 +102,7 @@ module.exports = function(data) {
         'fontSizePerPage',
         h.size.format
       ),
-      row(
-        summary.transferSize,
-        'Total size',
-        'totalSizePerPage',
-        h.size.format
-      ),
-      row(summary.fullyLoaded, 'Fully loaded', 'fullyLoaded', h.time.ms)
+      row(summary.transferSize, 'Total size', 'totalSizePerPage', h.size.format)
     );
 
     const responseCodes = Object.keys(summary.responseCodes);
@@ -121,8 +115,9 @@ module.exports = function(data) {
     const summary = browsertime.summary;
 
     rows.push(
-      row(summary.rumSpeedIndex, 'RUMSpeed Index', 'rumSpeedIndex'),
-      row(summary.firstPaint, 'First Paint', 'firstPaint')
+      row(summary.rumSpeedIndex, 'RUMSpeed Index', 'rumSpeedIndex', h.time.ms),
+      row(summary.firstPaint, 'First Paint', 'firstPaint', h.time.ms),
+      row(summary.fullyLoaded, 'Fully Loaded', 'fullyLoaded', h.time.ms)
     );
 
     if (summary.timeToDomContentFlushed) {
@@ -130,7 +125,8 @@ module.exports = function(data) {
         row(
           summary.timeToDomContentFlushed,
           'DOMContentFlushed',
-          'timeToDomContentFlushed'
+          'timeToDomContentFlushed',
+          h.time.ms
         )
       );
     }
@@ -138,13 +134,13 @@ module.exports = function(data) {
     if (summary.paintTiming) {
       const paintTimings = Object.keys(summary.paintTiming);
       for (let pt of paintTimings) {
-        rows.push(row(summary.paintTiming[pt], pt));
+        rows.push(row(summary.paintTiming[pt], pt, pt, h.time.ms));
       }
     }
 
     const timings = Object.keys(summary.pageTimings);
     for (let timing of timings) {
-      rows.push(row(summary.pageTimings[timing], timing, timing));
+      rows.push(row(summary.pageTimings[timing], timing, timing, h.time.ms));
     }
 
     if (summary.custom) {
@@ -224,12 +220,18 @@ module.exports = function(data) {
     const firstView = get(webpagetest, 'summary.timing.firstView');
     if (firstView) {
       rows.push(
-        row(firstView.render, 'WPT render (firstView)', 'render'),
-        row(firstView.SpeedIndex, 'WPT SpeedIndex (firstView)', 'SpeedIndex'),
+        row(firstView.render, 'WPT render (firstView)', 'render', h.time.ms),
+        row(
+          firstView.SpeedIndex,
+          'WPT SpeedIndex (firstView)',
+          'SpeedIndex',
+          h.time.ms
+        ),
         row(
           firstView.fullyLoaded,
           'WPT Fully loaded (firstView)',
-          'fullyLoaded'
+          'fullyLoaded',
+          h.time.ms
         )
       );
     }

lib/plugins/html/setup/summaryBoxes.js

@@ -151,12 +151,6 @@ module.exports = function(data) {
         summary.lastModifiedStats,
         'Time since last modification',
         h.time.duration
-      ),
-      infoBox(
-        summary.fullyLoaded,
-        'Fully Loaded Time',
-        h.time.ms,
-        'fullyLoaded'
       )
     );
 
@@ -211,6 +205,12 @@ module.exports = function(data) {
         'Page Load Time',
         h.time.ms,
         'pageLoadTime'
+      ),
+      infoBox(
+        summary.fullyLoaded,
+        'Fully Loaded Time',
+        h.time.ms,
+        'fullyLoaded'
       )
     );
 

lib/plugins/html/templates/url/iteration/index.pug

@@ -52,6 +52,10 @@ block content
                tr
                  td Requests:
                  td #{d.pagexray.run.requests}
+             if d.browsertime && d.browsertime.run
+               tr
+                 td Fully loaded:
+                 td #{h.time.ms(d.browsertime.run.timings.fullyLoaded)}
              if d.browsertime && d.browsertime.run && d.browsertime.run.visualMetrics
                tr
                  td First Visual Change:

lib/plugins/html/templates/url/metrics/index.pug

@@ -96,12 +96,11 @@ if  browsertime
           td
             a(href=baseHelpURL + 'rumSpeedIndex') RUM Speed Index
           td.number #{h.time.ms(timings.rumSpeedIndex.toFixed(0))}
-        if (pageInfo.data.pagexray) 
+        if (timings.fullyLoaded) 
           tr
             td
               a(href=baseHelpURL + 'fullyLoaded') Fully loaded
-              - const pagexrayData = pageInfo.data.pagexray.run || pageInfo.data.pagexray.pageSummary;
-            td.number #{h.time.ms(pagexrayData.fullyLoaded.toFixed(0))}
+            td.number #{h.time.ms(timings.fullyLoaded.toFixed(0))}
       if (Object.keys(timings.userTimings.marks).length > 0 || Object.keys(timings.userTimings.measures).length > 0)
         table
           tr

lib/plugins/html/templates/url/pagexray/index.pug

@@ -27,9 +27,6 @@ a#pagexray-summary
         tr
           td Responses missing compression
           +numberCell('', pagexray.missingCompression)
-        tr 
-          td Fully loaded
-          +timeCell('', pagexray.fullyLoaded.toFixed(0)) 
 
   .one-half.column
     table

lib/plugins/html/templates/url/summary/index.pug

@@ -47,9 +47,11 @@ block content
               tr
                 td Requests:
                 td #{d.pagexray.pageSummary.requests}
+            if d.browsertime && d.browsertime.pageSummary    
               tr
-                td Fully Loaded:
-                td #{h.time.ms(d.pagexray.pageSummary.fullyLoaded.toFixed(0))}  
+                td Fully Loaded [median]:
+                td #{h.time.ms(d.browsertime.pageSummary.statistics.timings.fullyLoaded.median)}
+
             if d.browsertime && d.browsertime.pageSummary && d.browsertime.pageSummary.statistics.visualMetrics
               tr
                 td First Visual Change [median]:
@@ -57,7 +59,7 @@ block content
             else if d.browsertime && d.browsertime.pageSummary && d.browsertime.pageSummary.statistics && d.browsertime.pageSummary.statistics.timings && d.browsertime.pageSummary.statistics.timings.firstPaint
               tr
                 td First Paint [median]:
-                td #{h.time.ms(d.browsertime.pageSummary.statistics.timings.firstPaint.median)}
+                td #{h.time.ms(d.browsertime.pageSummary.statistics.timings.firstPaint.median)}                
             if d.browsertime && d.browsertime.pageSummary && d.browsertime.pageSummary.statistics.visualMetrics
               tr
                 td Speed Index [median]:

lib/plugins/pagexray/index.js

@@ -14,8 +14,7 @@ const DEFAULT_PAGEXRAY_PAGESUMMARY_METRICS = [
   'expireStats',
   'totalDomains',
   'lastModifiedStats',
-  'cookieStats',
-  'fullyLoaded'
+  'cookieStats'
 ];
 const DEFAULT_PAGEXRAY_SUMMARY_METRICS = [
   'contentTypes',
@@ -28,8 +27,7 @@ const DEFAULT_PAGEXRAY_SUMMARY_METRICS = [
   'expireStats',
   'domains',
   'lastModifiedStats',
-  'cookieStats',
-  'fullyLoaded'
+  'cookieStats'
 ];
 
 module.exports = {

lib/plugins/pagexray/pagexrayAggregator.js

@@ -3,7 +3,7 @@
 const statsHelpers = require('../../support/statsHelpers'),
   forEach = require('lodash.foreach');
 
-const METRIC_NAMES = ['transferSize', 'contentSize', 'requests', 'fullyLoaded'];
+const METRIC_NAMES = ['transferSize', 'contentSize', 'requests'];
 
 module.exports = {
   stats: {},
@@ -131,9 +131,7 @@ module.exports = {
     return Object.keys(type).reduce((summary, name) => {
       if (
         METRIC_NAMES.indexOf(name) > -1 ||
-        name.match(
-          /(^domains|^expireStats|^lastModifiedStats|^cookiesStats|^fullyLoaded)/
-        )
+        name.match(/(^domains|^expireStats|^lastModifiedStats|^cookiesStats)/)
       ) {
         statsHelpers.setStatsSummary(summary, name, type[name]);
       } else {