Display time in ms/s (#2245)

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

@@ -55,31 +55,31 @@ block content
              if d.browsertime && d.browsertime.run && d.browsertime.run.visualMetrics
                tr
                  td First Visual Change:
-                 td #{d.browsertime.run.visualMetrics.FirstVisualChange}
+                 td #{h.time.ms(d.browsertime.run.visualMetrics.FirstVisualChange)}
              else if d.browsertime && d.browsertime.run && d.browsertime.run.timings.firstPaint
                tr
                  td First Paint:
-                 td #{d.browsertime.run.timings.firstPaint}
+                 td #{h.time.ms(d.browsertime.run.timings.firstPaint)}
              if d.browsertime && d.browsertime.run && d.browsertime.run.visualMetrics
                tr
                  td Speed Index:
-                 td #{d.browsertime.run.visualMetrics.SpeedIndex}
+                 td #{h.time.ms(d.browsertime.run.visualMetrics.SpeedIndex)}
                tr
                  td Visual Complete 85%:
-                 td #{d.browsertime.run.visualMetrics.VisualComplete85}
+                 td #{h.time.ms(d.browsertime.run.visualMetrics.VisualComplete85)}
                tr
                  td Visual Complete 95%:
-                 td #{d.browsertime.run.visualMetrics.VisualComplete95}
+                 td #{h.time.ms(d.browsertime.run.visualMetrics.VisualComplete95)}
                tr
                  td Visual Complete 99%:
-                 td #{d.browsertime.run.visualMetrics.VisualComplete99}
+                 td #{h.time.ms(d.browsertime.run.visualMetrics.VisualComplete99)}
                tr
                  td Last Visual Change:
-                 td #{d.browsertime.run.visualMetrics.LastVisualChange}
+                 td #{h.time.ms(d.browsertime.run.visualMetrics.LastVisualChange)}
              else if d.browsertime && d.browsertime.run
                tr
                  td RUM Speed Index:
-                 td #{d.browsertime.run.timings.rumSpeedIndex}
+                 td #{h.time.ms(d.browsertime.run.timings.rumSpeedIndex)}
              if !d.browsertime && d.webpagetest
                tr
                  td Render (first view):

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

@@ -16,46 +16,46 @@ if  browsertime
           tr
             td
               a(href=baseHelpURL + 'FirstVisualChange') First Visual Change
-            td.number #{visualMetrics.FirstVisualChange.toFixed(0)}
+            td.number #{h.time.ms(visualMetrics.FirstVisualChange.toFixed(0))}
           tr
             td
               a(href=baseHelpURL + 'SpeedIndex') Speed Index
-            td.number #{visualMetrics.SpeedIndex.toFixed(0)}
+            td.number #{h.time.ms(visualMetrics.SpeedIndex.toFixed(0))}
           tr
             td
               a(href=baseHelpURL + 'PerceptualSpeedIndex') Perceptual Speed Index
-            td.number #{visualMetrics.PerceptualSpeedIndex.toFixed(0)}
+            td.number #{h.time.ms(visualMetrics.PerceptualSpeedIndex.toFixed(0))}
           if visualMetrics.LargestImage
             tr
               td
                 a(href=baseHelpURL + 'LargestImage') Largest Image
-              td.number #{visualMetrics.LargestImage.toFixed(0)}
+              td.number #{h.time.ms(visualMetrics.LargestImage.toFixed(0))}
           if visualMetrics.Heading
             tr
               td
                 a(href=baseHelpURL + 'Heading') Heading
-              td.number #{visualMetrics.Heading.toFixed(0)}
+              td.number #{h.time.ms(visualMetrics.Heading.toFixed(0))}
           if visualMetrics.Logo
             tr
               td
                 a(href=baseHelpURL + 'Logo') Logo
-              td.number #{visualMetrics.Logo.toFixed(0)}
+              td.number #{h.time.ms(visualMetrics.Logo.toFixed(0))}
           tr
             td
               a(href=baseHelpURL + 'VisualComplete85') Visual Complete 85%
-            td.number #{visualMetrics.VisualComplete85.toFixed(0)}
+            td.number #{h.time.ms(visualMetrics.VisualComplete85.toFixed(0))}
           tr
             td
               a(href=baseHelpURL + 'VisualComplete95') Visual Complete 95%
-            td.number #{visualMetrics.VisualComplete95.toFixed(0)}
+            td.number #{h.time.ms(visualMetrics.VisualComplete95.toFixed(0))}
           tr
             td
               a(href=baseHelpURL + 'VisualComplete99') Visual Complete 99%
-            td.number #{visualMetrics.VisualComplete99.toFixed(0)}
+            td.number #{h.time.ms(visualMetrics.VisualComplete99.toFixed(0))}
           tr
             td
               a(href=baseHelpURL + 'LastVisualChange') Last Visual Change
-            td.number #{visualMetrics.LastVisualChange.toFixed(0)}
+            td.number #{h.time.ms(visualMetrics.LastVisualChange.toFixed(0))}
       .one-half.column
         .ct-chart.ct-minor-sixth#ct-visualprogress
         include ./visualProgress.pug
@@ -72,7 +72,7 @@ if  browsertime
             - url = baseHelpURL + name
             td
               a(href=url) #{name}
-            td.number #{value}
+            td.number #{h.time.ms(value)}
     .one-half.column
       table
         tr
@@ -81,27 +81,27 @@ if  browsertime
           each value, name in timings.paintTiming
             tr
               td #{name}
-              td.number #{value.toFixed(0)}
+              td.number #{h.time.ms(value.toFixed(0))}
         else if timings.firstPaint > -1
           tr
             td
               a(href=baseHelpURL + 'firstPaint') First paint
-            td.number #{timings.firstPaint.toFixed(0)}
+            td.number #{h.time.ms(timings.firstPaint.toFixed(0))}
         if timings.timeToDomContentFlushed
          tr
             td
               a(href=baseHelpURL + 'timeToDomContentFlushed') DOM Content Flushed
-            td.number #{timings.timeToDomContentFlushed.toFixed(0)}
+            td.number #{h.time.ms(timings.timeToDomContentFlushed.toFixed(0))}
         tr
           td
             a(href=baseHelpURL + 'rumSpeedIndex') RUM Speed Index
-          td.number #{timings.rumSpeedIndex.toFixed(0)}
+          td.number #{h.time.ms(timings.rumSpeedIndex.toFixed(0))}
         if (pageInfo.data.pagexray) 
           tr
             td
               a(href=baseHelpURL + 'fullyLoaded') Fully loaded
               - const pagexrayData = pageInfo.data.pagexray.run || pageInfo.data.pagexray.pageSummary;
-            td.number #{pagexrayData.fullyLoaded.toFixed(0)}
+            td.number #{h.time.ms(pagexrayData.fullyLoaded.toFixed(0))}
       table
         tr
           th(colspan='2') User timings
@@ -109,12 +109,12 @@ if  browsertime
           each value, name in timings.userTimings.marks
             tr
               td #{value.name}
-              td.number #{value.startTime.toFixed(0)}
+              td.number #{h.time.ms(value.startTime.toFixed(0))}
         if (Object.keys(timings.userTimings.measures).length > 0)
           each value, name in timings.userTimings.measures
             tr
               td #{value.name}
-              td.number #{value.startTime.toFixed(0)} 
+              td.number #{h.time.ms(value.startTime.toFixed(0))} 
 
   if options.browsertime.chrome && options.browsertime.chrome.timeline
     include ./cpu.pug

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

@@ -49,31 +49,31 @@ block content
                 td #{d.pagexray.pageSummary.requests}
               tr
                 td Fully Loaded:
-                td #{d.pagexray.pageSummary.fullyLoaded.toFixed(0)}  
+                td #{h.time.ms(d.pagexray.pageSummary.fullyLoaded.toFixed(0))}  
             if d.browsertime && d.browsertime.pageSummary && d.browsertime.pageSummary.statistics.visualMetrics
               tr
                 td First Visual Change [median]:
-                td #{d.browsertime.pageSummary.statistics.visualMetrics.FirstVisualChange.median}
+                td #{h.time.ms(d.browsertime.pageSummary.statistics.visualMetrics.FirstVisualChange.median)}
             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 #{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]:
-                td #{d.browsertime.pageSummary.statistics.visualMetrics.SpeedIndex.median}
+                td #{h.time.ms(d.browsertime.pageSummary.statistics.visualMetrics.SpeedIndex.median)}
               tr
                 td Visual Complete 85% [median]:
-                td #{d.browsertime.pageSummary.statistics.visualMetrics.VisualComplete85.median}
+                td #{h.time.ms(d.browsertime.pageSummary.statistics.visualMetrics.VisualComplete85.median)}
               tr
                 td Visual Complete 95% [median]:
-                td #{d.browsertime.pageSummary.statistics.visualMetrics.VisualComplete95.median}
+                td #{h.time.ms(d.browsertime.pageSummary.statistics.visualMetrics.VisualComplete95.median)}
               tr
                 td Visual Complete 99% [median]:
-                td #{d.browsertime.pageSummary.statistics.visualMetrics.VisualComplete99.median}
+                td #{h.time.ms(d.browsertime.pageSummary.statistics.visualMetrics.VisualComplete99.median)}
               tr
                 td Last Visual Change [median]:
-                td #{d.browsertime.pageSummary.statistics.visualMetrics.LastVisualChange.median}
+                td #{h.time.ms(d.browsertime.pageSummary.statistics.visualMetrics.LastVisualChange.median)}
             else if d.browsertime && d.browsertime.pageSummary && d.browsertime.pageSummary.statistics && d.browsertime.pageSummary.statistics.timings && d.browsertime.pageSummary.statistics.timings.rumSpeedIndex
               tr
                 td RUM Speed Index [median]:

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

@@ -7,7 +7,7 @@ mixin getLink(path, name, metric, type)
       if (run[name] === metric[type] && isSet === false)
         - isSet = true
         td.number(data-title=type)
-          a(href='./' + (index+1) + '.html', title='Go to the run with the ' + type + ' ' + name) #{metric[type]}
+          a(href='./' + (index+1) + '.html', title='Go to the run with the ' + type + ' ' + name) #{h.time.ms(metric[type])}
 
 mixin getLinkTimings(path, name, metric, type)
   - isSet = false
@@ -18,7 +18,7 @@ mixin getLinkTimings(path, name, metric, type)
       if (Number(run.timings[name]).toFixed(0) === Number(metric[name][type]).toFixed(0) && isSet === false)
         - isSet = true
         td.number(data-title=type)
-          a(href='./' + (index+1) + '.html', title='Go to the run with the ' + type + ' ' + name) #{metric[name][type]}
+          a(href='./' + (index+1) + '.html', title='Go to the run with the ' + type + ' ' + name) #{h.time.ms(metric[name][type])}
 
 mixin getLinkPageTimings(path, name, metric, type)
   - isSet = false
@@ -29,7 +29,7 @@ mixin getLinkPageTimings(path, name, metric, type)
       if (Number(run.timings.pageTimings[name]).toFixed(0) === Number(metric[name][type]).toFixed(0) && isSet === false)
         - isSet = true
         td.number(data-title=type)
-          a(href='./' + (index+1) + '.html', title='Go to the run with the ' + type + ' ' + name) #{metric[name][type]}
+          a(href='./' + (index+1) + '.html', title='Go to the run with the ' + type + ' ' + name) #{h.time.ms(metric[name][type])}
 
 mixin getUserTimings(path, name, metric, type)
   - isSet = false
@@ -41,7 +41,7 @@ mixin getUserTimings(path, name, metric, type)
           if (marks.name === name && Number(marks.startTime).toFixed(0) === Number(metric[type]).toFixed(0) && isSet === false)
             - isSet = true
             td.number(data-title=type)
-              a(href='./' + (index+1) + '.html', title='Go to the run with the ' + type + ' ' + name) #{metric[type]}
+              a(href='./' + (index+1) + '.html', title='Go to the run with the ' + type + ' ' + name) #{h.time.ms(metric[type])}
 
 - btStatistics = h.get(pageInfo.data, 'browsertime.pageSummary.statistics')
 
@@ -65,7 +65,7 @@ if btStatistics
             td(data-title='metric') #{name}
             +getLink(pageInfo.data.browsertime.pageSummary.visualMetrics, name, visualMetric, 'min')
             +getLink(pageInfo.data.browsertime.pageSummary.visualMetrics, name, visualMetric, 'median')
-            td.number(data-title='mean') #{visualMetric.mean}
+            td.number(data-title='mean') #{h.time.ms(visualMetric.mean)}
             +getLink(pageInfo.data.browsertime.pageSummary.visualMetrics, name, visualMetric, 'max')
       if btStatistics.timings && btStatistics.timings.pageTimings
         tr 
@@ -74,7 +74,7 @@ if btStatistics
           td(data-title='metric') backEndTime
           +getLinkPageTimings(pageInfo.data.browsertime.pageSummary.browserScripts, 'backEndTime', btStatistics.timings.pageTimings, 'min')
           +getLinkPageTimings(pageInfo.data.browsertime.pageSummary.browserScripts, 'backEndTime', btStatistics.timings.pageTimings, 'median')
-          td.number(data-title='mean') #{btStatistics.timings.pageTimings.backEndTime.mean}
+          td.number(data-title='mean') #{h.time.ms(btStatistics.timings.pageTimings.backEndTime.mean)}
           +getLinkPageTimings(pageInfo.data.browsertime.pageSummary.browserScripts, 'backEndTime', btStatistics.timings.pageTimings, 'max')
 
         each timing in timingMetrics
@@ -83,7 +83,7 @@ if btStatistics
               td(data-title='metric') #{timing}
               +getLinkTimings(pageInfo.data.browsertime.pageSummary.browserScripts, timing, btStatistics.timings, 'min')
               +getLinkTimings(pageInfo.data.browsertime.pageSummary.browserScripts, timing, btStatistics.timings, 'median')
-              td.number(data-title='mean') #{btStatistics.timings[timing].mean}
+              td.number(data-title='mean') #{h.time.ms(btStatistics.timings[timing].mean)}
               +getLinkTimings(pageInfo.data.browsertime.pageSummary.browserScripts, timing, btStatistics.timings, 'max')
       if btStatistics.timings && btStatistics.timings.userTimings
         if btStatistics.timings.userTimings.marks
@@ -94,5 +94,5 @@ if btStatistics
               td(data-title= 'User Timing') #{name}
               +getUserTimings(pageInfo.data.browsertime.pageSummary.browserScripts, name, userTimings, 'min')
               +getUserTimings(pageInfo.data.browsertime.pageSummary.browserScripts, name, userTimings, 'median')
-              td.number(data-title='mean') #{userTimings ? userTimings.mean: ''}
+              td.number(data-title='mean') #{userTimings ? h.time.ms(userTimings.mean): ''}
               +getUserTimings(pageInfo.data.browsertime.pageSummary.browserScripts, name, userTimings, 'max')

lib/support/helpers/time.js

@@ -34,6 +34,10 @@ module.exports = {
     }
   },
   ms(ms) {
-    return ms + ' ms';
+    if (ms < 1000) {
+      return ms + ' ms';
+    } else {
+      return Number(ms / 1000).toFixed(3) + ' s';
+    }
   }
 };