Use paint timings (#2163)

Send them to Graphite per page and show them in the detailed page.

lib/plugins/browsertime/aggregator.js

@@ -58,6 +58,15 @@ module.exports = {
       );
     });
 
+    forEach(browsertimeRunData.timings.paintTiming, (value, name) => {
+      statsHelpers.pushGroupStats(
+        this.statsPerType,
+        this.groups[group],
+        ['paintTiming', name],
+        value
+      );
+    });
+
     forEach(browsertimeRunData.timings.userTimings.marks, timing => {
       statsHelpers.pushGroupStats(
         this.statsPerType,

lib/plugins/browsertime/default/metricsPageSummary.js

@@ -7,6 +7,7 @@ module.exports = [
   'statistics.timings.firstPaint',
   'statistics.timings.timeToDomContentFlushed',
   'statistics.timings.userTimings',
+  'statistics.timings.paintTiming',
   'statistics.visualMetrics.*',
   'statistics.custom.*',
   'statistics.console.error',

lib/plugins/html/setup/detailed.js

@@ -130,6 +130,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));
+      }
+    }
+
     const timings = Object.keys(summary.pageTimings);
     for (let timing of timings) {
       rows.push(row(summary.pageTimings[timing], timing, timing));