DevTools: Add FCP to timeline markers

* Adds FirstContentfulPaint to timeline markers
* Adjusts colors of paint markers to different shades of green

BUG=749814

Change-Id: I4ccbcae4c6906d9fbacc8a81eb55b6059f55f472
Reviewed-on: https://chromium-review.googlesource.com/619500Reviewed-by: Andrey Kosyakov <caseq@chromium.org>
Reviewed-by: Alexei Filippov <alph@chromium.org>
Commit-Queue: Patrick Hulce <phulce@chromium.org>
Cr-Commit-Position: refs/heads/master@{#534802}

third_party/WebKit/Source/devtools/front_end/timeline/TimelineUIUtils.js

@@ -115,10 +115,12 @@ Timeline.TimelineUIUtils = class {
         new Timeline.TimelineRecordStyle(Common.UIString('DOMContentLoaded event'), categories['scripting'], true);
     eventStyles[recordTypes.MarkFirstPaint] =
         new Timeline.TimelineRecordStyle(Common.UIString('First paint'), categories['painting'], true);
+    eventStyles[recordTypes.MarkFCP] =
+        new Timeline.TimelineRecordStyle(Common.UIString('First contentful paint'), categories['rendering'], true);
     eventStyles[recordTypes.MarkFMP] =
-        new Timeline.TimelineRecordStyle(Common.UIString('FMP'), categories['rendering'], true);
+        new Timeline.TimelineRecordStyle(Common.UIString('First meaningful paint'), categories['rendering'], true);
     eventStyles[recordTypes.MarkFMPCandidate] =
-        new Timeline.TimelineRecordStyle(Common.UIString('FMP candidate'), categories['rendering'], true);
+        new Timeline.TimelineRecordStyle(Common.UIString('Meaningful paint candidate'), categories['rendering'], true);
     eventStyles[recordTypes.TimeStamp] =
         new Timeline.TimelineRecordStyle(Common.UIString('Timestamp'), categories['scripting']);
     eventStyles[recordTypes.ConsoleTime] =
@@ -1530,7 +1532,7 @@ Timeline.TimelineUIUtils = class {
     var recordTypes = TimelineModel.TimelineModel.RecordType;
     return new TimelineModel.TimelineInvisibleEventsFilter(
         !Runtime.experiments.isEnabled('timelinePaintTimingMarkers') ?
-            [recordTypes.MarkFMP, recordTypes.MarkFMPCandidate] :
+            [recordTypes.MarkFCP, recordTypes.MarkFMP, recordTypes.MarkFMPCandidate] :
             []);
   }
 
@@ -1786,15 +1788,19 @@ Timeline.TimelineUIUtils = class {
         tall = true;
         break;
       case recordTypes.MarkFirstPaint:
-        color = 'green';
+        color = 'hsl(180, 45%, 79%)';
         tall = true;
         break;
-      case recordTypes.MarkFMP:
-        color = 'orange';
+      case recordTypes.MarkFCP:
+        color = 'hsl(160, 43%, 58%)';
         tall = true;
         break;
       case recordTypes.MarkFMPCandidate:
-        color = 'orange';
+        color = 'hsl(146, 57%, 40%)';
+        tall = true;
+        break;
+      case recordTypes.MarkFMP:
+        color = 'hsl(144, 100%, 21%)';
         tall = true;
         break;
       case recordTypes.TimeStamp:

third_party/WebKit/Source/devtools/front_end/timeline_model/TimelineModel.js

@@ -106,6 +106,7 @@ TimelineModel.TimelineModel = class {
     switch (event.name) {
       case recordTypes.TimeStamp:
       case recordTypes.MarkFirstPaint:
+      case recordTypes.MarkFCP:
       case recordTypes.MarkFMP:
       case recordTypes.MarkFMPCandidate:
         return true;
@@ -1102,6 +1103,7 @@ TimelineModel.TimelineModel.RecordType = {
   MarkLoad: 'MarkLoad',
   MarkDOMContent: 'MarkDOMContent',
   MarkFirstPaint: 'MarkFirstPaint',
+  MarkFCP: 'firstContentfulPaint',
   MarkFMP: 'firstMeaningfulPaint',
   MarkFMPCandidate: 'firstMeaningfulPaintCandidate',