Timeline: bring back FirstPaint marker and remove brown ticks near frame markers

Source/devtools/front_end/timeline/TimelineModel.js

 /*
  * Copyright (C) 2012 Google 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.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 737 matching lines @@
         this._requestAnimationFrameEvents = {};
         this._invalidationTracker = new WebInspector.InvalidationTracker();
         this._layoutInvalidate = {};
         this._lastScheduleStyleRecalculation = {};
         this._webSocketCreateEvents = {};
         this._paintImageEventByPixelRefId = {};
         this._lastPaintForLayer = {};
         this._lastRecalculateStylesEvent = null;
         this._currentScriptEvent = null;
         this._eventStack = [];
+        this._layerTreeActivatedAfterLoad = false;
+        this._expectFirstPaint = false;
     },
 
     /**
      * @param {number} startTime
      * @param {?number} endTime
      * @param {!WebInspector.TracingModel.Thread} mainThread
      * @param {!WebInspector.TracingModel.Thread} thread
      */
     _processThreadEvents: function(startTime, endTime, mainThread, thread)
     {
+        var recordTypes = WebInspector.TimelineModel.RecordType;
         var events = thread.events();
         var length = events.length;
         var i = events.lowerBound(startTime, function (time, event) { return time - event.startTime });
 
         var threadEvents;
         var virtualThread = null;
         if (thread === mainThread) {
             threadEvents = this._mainThreadEvents;
             this._mainThreadAsyncEvents = this._mainThreadAsyncEvents.concat(thread.asyncEvents());
         } else {
             virtualThread = new WebInspector.TimelineModel.VirtualThread(thread.name());
             threadEvents = virtualThread.events;
             virtualThread.asyncEvents = virtualThread.asyncEvents.concat(thread.asyncEvents());
             this._virtualThreads.push(virtualThread);
         }
 
         this._eventStack = [];
         for (; i < length; i++) {
             var event = events[i];
             if (endTime && event.startTime >= endTime)
                 break;
             this._processEvent(event);
+            if (this._expectFirstPaint && event.name === recordTypes.DrawFrame && this._layerTreeActivatedAfterLoad) {
+                threadEvents.push(new WebInspector.TracingModel.Event(event.category, recordTypes.MarkFirstPaint, WebInspector.TracingModel.Phase.Instant, event.startTime, event.thread));
+                this._expectFirstPaint = false;
+            }
             threadEvents.push(event);
             this._inspectedTargetEvents.push(event);
         }
 
         if (this._cpuProfiles && thread.target()) {
             var cpuProfile = this._cpuProfiles[thread.target().id()];
             if (cpuProfile) {
                 var jsSamples = WebInspector.TimelineJSProfileProcessor.generateTracingEventsFromCpuProfile(cpuProfile, thread);
                 var mergedEvents = threadEvents.mergeOrdered(jsSamples, WebInspector.TracingModel.Event.orderedCompareStartTime);
                 var jsFrameEvents = WebInspector.TimelineJSProfileProcessor.generateJSFrameEvents(mergedEvents);
                 mergedEvents = jsFrameEvents.mergeOrdered(mergedEvents, WebInspector.TracingModel.Event.orderedCompareStartTime);
                 if (virtualThread)
                     virtualThread.events = mergedEvents;
                 else
                     this._mainThreadEvents = mergedEvents;
                 this._inspectedTargetEvents = this._inspectedTargetEvents.concat(jsSamples, jsFrameEvents);
             }
         }
     },
 
     /**
      * @param {!WebInspector.TracingModel.Event} event
      */
     _processEvent: function(event)
     {
         var recordTypes = WebInspector.TimelineModel.RecordType;
-
         var eventStack = this._eventStack;
         while (eventStack.length && eventStack.peekLast().endTime < event.startTime)
             eventStack.pop();
         var duration = event.duration;
         if (duration) {
             if (eventStack.length) {
                 var parent = eventStack.peekLast();
                 parent.selfTime -= duration;
             }
             event.selfTime = duration;
@@ skipping 149 matching lines @@
             break;
 
         case recordTypes.DrawLazyPixelRef:
             var paintImageEvent = this._findAncestorEvent(recordTypes.PaintImage);
             if (!paintImageEvent)
                 break;
             this._paintImageEventByPixelRefId[event.args["LazyPixelRef"]] = paintImageEvent;
             event.backendNodeId = paintImageEvent.backendNodeId;
             event.imageURL = paintImageEvent.imageURL;
             break;
+
+        case recordTypes.MarkDOMContent:
+            if (!event.args["data"]["isMainFrame"])
+                break;
+            this._expectFirstPaint = true;
+            this._layerTreeActivatedAfterLoad = false;
+            break;
+
+        case recordTypes.ActivateLayerTree:
+            this._layerTreeActivatedAfterLoad = true;
+            break;
         }
     },
 
     /**
      * @param {string} name
      * @return {?WebInspector.TracingModel.Event}
      */
     _findAncestorEvent: function(name)
     {
         for (var i = this._eventStack.length - 1; i >= 0; --i) {
@@ skipping 701 matching lines @@
     _initializePerFrameState: function()
     {
         /** @type {!Array.<!WebInspector.InvalidationTrackingEvent>} */
         this._invalidationEvents = [];
         this._lastStyleRecalcEventIndex = 0;
         this._lastLayoutEventIndex = 0;
         this._lastPaintWithLayer = undefined;
         this._didPaint = false;
     }
 }