DevTools: brush up paint marker rendering, sort experiments, restore event markers on the overview.

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

 /*
  * Copyright (C) 2013 Google Inc. All rights reserved.
  * Copyright (C) 2012 Intel Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
@@ skipping 93 matching lines @@
     eventStyles[recordTypes.EvaluateScript] =
         new Timeline.TimelineRecordStyle(Common.UIString('Evaluate Script'), categories['scripting']);
     eventStyles[recordTypes.ParseScriptOnBackground] =
         new Timeline.TimelineRecordStyle(Common.UIString('Parse Script'), categories['scripting']);
     eventStyles[recordTypes.MarkLoad] =
         new Timeline.TimelineRecordStyle(Common.UIString('Load event'), categories['scripting'], true);
     eventStyles[recordTypes.MarkDOMContent] =
         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.MarkFMP] =
+        new Timeline.TimelineRecordStyle(Common.UIString('FMP'), categories['rendering'], true);
+    eventStyles[recordTypes.MarkFMPCandidate] =
+        new Timeline.TimelineRecordStyle(Common.UIString('FMP candidate'), categories['rendering'], true);
     eventStyles[recordTypes.TimeStamp] =
         new Timeline.TimelineRecordStyle(Common.UIString('Timestamp'), categories['scripting']);
     eventStyles[recordTypes.ConsoleTime] =
         new Timeline.TimelineRecordStyle(Common.UIString('Console Time'), categories['scripting']);
     eventStyles[recordTypes.UserTiming] =
         new Timeline.TimelineRecordStyle(Common.UIString('User Timing'), categories['scripting']);
     eventStyles[recordTypes.ResourceSendRequest] =
         new Timeline.TimelineRecordStyle(Common.UIString('Send Request'), categories['loading']);
     eventStyles[recordTypes.ResourceReceiveResponse] =
         new Timeline.TimelineRecordStyle(Common.UIString('Receive Response'), categories['loading']);
@@ skipping 1286 matching lines @@
 
   /**
    * @param {!SDK.TracingModel.Event} event
    * @param {number} zeroTime
    * @return {!Element}
    */
   static createEventDivider(event, zeroTime) {
     var eventDivider = createElementWithClass('div', 'resources-event-divider');
     var startTime = Number.millisToString(event.startTime - zeroTime);
     eventDivider.title = Common.UIString('%s at %s', Timeline.TimelineUIUtils.eventTitle(event), startTime);
-
-    var recordTypes = TimelineModel.TimelineModel.RecordType;
-    var name = event.name;
-    if (name === recordTypes.MarkDOMContent)
-      eventDivider.classList.add('resources-blue-divider');
-    else if (name === recordTypes.MarkLoad)
-      eventDivider.classList.add('resources-red-divider');
-    else if (name === recordTypes.MarkFirstPaint)
-      eventDivider.classList.add('resources-green-divider');
-
+    var style = Timeline.TimelineUIUtils.markerStyleForEvent(event);
+    if (style.tall)
+      eventDivider.style.backgroundColor = style.color;
     return eventDivider;
   }
 
   /**
    * @return {!Array.<string>}
    */
   static _visibleTypes() {
     var eventStyles = Timeline.TimelineUIUtils._initEventStyles();
     var result = [];
     for (var name in eventStyles) {
       if (!eventStyles[name].hidden)
         result.push(name);
     }
     return result;
   }
 
   /**
    * @return {!TimelineModel.TimelineModelFilter}
    */
   static visibleEventsFilter() {
     return new TimelineModel.TimelineVisibleEventsFilter(Timeline.TimelineUIUtils._visibleTypes());
   }
 
   /**
+   * @return {!TimelineModel.TimelineModelFilter}
+   */
+  static paintEventsFilter() {
+    var recordTypes = TimelineModel.TimelineModel.RecordType;
+    return new TimelineModel.TimelineVisibleEventsFilter([recordTypes.MarkFMP, recordTypes.MarkFMPCandidate]);
+  }
+
+  /**
    * @return {!Object.<string, !Timeline.TimelineCategory>}
    */
   static categories() {
     if (Timeline.TimelineUIUtils._categories)
       return Timeline.TimelineUIUtils._categories;
     Timeline.TimelineUIUtils._categories = {
       loading: new Timeline.TimelineCategory(
           'loading', Common.UIString('Loading'), true, 'hsl(214, 67%, 74%)', 'hsl(214, 67%, 66%)'),
       scripting: new Timeline.TimelineCategory(
           'scripting', Common.UIString('Scripting'), true, 'hsl(43, 83%, 72%)', 'hsl(43, 83%, 64%) '),
@@ skipping 211 matching lines @@
       new Timeline.TimelineUIUtils.EventDispatchTypeDescriptor(3, purple, ['keydown', 'keyup', 'keypress'])
     ];
     return Timeline.TimelineUIUtils._eventDispatchDesciptors;
   }
 
   /**
    * @param {!SDK.TracingModel.Event} event
    * @return {!Timeline.TimelineMarkerStyle}
    */
   static markerStyleForEvent(event) {
-    const red = 'rgb(255, 0, 0)';
-    const blue = 'rgb(0, 0, 255)';
-    const orange = 'rgb(255, 178, 23)';
-    const green = 'rgb(0, 130, 0)';
-    const purple = '#a2f';
     const tallMarkerDashStyle = [10, 5];
     const title = Timeline.TimelineUIUtils.eventTitle(event);
 
     if (event.hasCategory(TimelineModel.TimelineModel.Category.Console) ||
         event.hasCategory(TimelineModel.TimelineModel.Category.UserTiming)) {
       return {
         title: title,
         dashStyle: tallMarkerDashStyle,
         lineWidth: 0.5,
-        color: event.hasCategory(TimelineModel.TimelineModel.Category.UserTiming) ? purple : orange,
+        color: event.hasCategory(TimelineModel.TimelineModel.Category.UserTiming) ? 'purple' : 'orange',
         tall: false,
         lowPriority: false,
       };
     }
     var recordTypes = TimelineModel.TimelineModel.RecordType;
     var tall = false;
-    var color = green;
+    var color = 'green';
     switch (event.name) {
       case recordTypes.MarkDOMContent:
-        color = blue;
+        color = 'blue';
         tall = true;
         break;
       case recordTypes.MarkLoad:
-        color = red;
+        color = 'red';
         tall = true;
         break;
       case recordTypes.MarkFirstPaint:
-        color = green;
+        color = 'green';
+        tall = true;
+        break;
+      case recordTypes.MarkFMP:
+        color = 'orange';

[caseq, 2017/04/08 01:04:16]

Let's use other color. This is paint/rendering, not script, so orange is
confusing.

+        tall = true;
+        break;
+      case recordTypes.MarkFMPCandidate:
+        color = 'orange';

[caseq, 2017/04/08 01:04:16]

ditto.

         tall = true;
         break;
       case recordTypes.TimeStamp:
-        color = orange;
+        color = 'orange';
         break;
     }
     return {
       title: title,
       dashStyle: tallMarkerDashStyle,
       lineWidth: 0.5,
       color: color,
       tall: tall,
       lowPriority: false,
     };
@@ skipping 555 matching lines @@
    * @param {string=} warningType
    */
   appendWarningRow(event, warningType) {
     var warning = Timeline.TimelineUIUtils.eventWarning(event, warningType);
     if (warning)
       this.appendElementRow(Common.UIString('Warning'), warning, true);
   }
 };
 
 Timeline.TimelineUIUtils._categoryBreakdownCacheSymbol = Symbol('categoryBreakdownCache');