Draw marker events on Timeline flame chart

Source/devtools/front_end/timeline/TimelineFlameChart.js

 /*
  * Copyright (C) 2014 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 98 matching lines @@
     /**
      * @param {number} startTime
      * @param {number} endTime
      * @return {?Array.<number>}
      */
     dividerOffsets: function(startTime, endTime)
     {
         return null;
     },
 
+    /**
+     * @override
+     * @param {number} index
+     * @return {string}
+     */
+    markerColor: function(index)
+    {
+        var event = this._markerEvents[index];
+        return WebInspector.TracingTimelineUIUtils.markerEventColor(event.name);
+    },
+
+    /**
+     * @override
+     * @param {number} index
+     * @return {string}
+     */
+    markerTitle: function(index)
+    {
+        var event = this._markerEvents[index];
+        return WebInspector.TracingTimelineUIUtils.eventTitle(event, this._model);
+    },
+
     reset: function()
     {
         this._timelineData = null;
         /** @type {!Array.<!WebInspector.TracingModel.Event>} */
         this._entryEvents = [];
         this._entryIndexToTitle = {};
+        this._markerEvents = [];
     },
 
     /**
      * @return {!WebInspector.FlameChart.TimelineData}
      */
     timelineData: function()
     {
         if (this._timelineData)
             return this._timelineData;
 
-        /**
-         * @type {?WebInspector.FlameChart.TimelineData}
-         */
-        this._timelineData = {
-            entryLevels: [],
-            entryTotalTimes: [],
-            entryStartTimes: []
-        };
+        this._timelineData = new WebInspector.FlameChart.TimelineData([], [], []);
 
         this._minimumBoundary = this._model.minimumRecordTime();
         this._timeSpan = Math.max(this._model.maximumRecordTime() - this._minimumBoundary, 1000);
         this._currentLevel = 0;
         this._appendThreadTimelineData(WebInspector.UIString("Main Thread"), this._model.mainThreadEvents());
         var threads = this._model.virtualThreads();
         for (var threadName in threads) {
             if (threadName !== WebInspector.TimelineModel.MainThreadName)
                 this._appendThreadTimelineData(threadName, threads[threadName]);
         }
         return this._timelineData;
     },
 
     /**
      * @param {string} headerName
      * @param {!Array.<!WebInspector.TracingModel.Event>} events
      */
     _appendThreadTimelineData: function(headerName, events)
     {
         var maxStackDepth = 0;
         var openEvents = [];
         var levels = [];
         var jsHeights = [];
         var headerAppended = false;
         var level = 0;
         var jsStackHeight = 0;
         for (var i = 0; i < events.length; ++i) {
             var e = events[i];
-            if (!e.endTime && e.phase !== WebInspector.TracingModel.Phase.Instant)
+            // FIXME: clean up once phase name is unified between Blink and Chromium.
+            if (!e.endTime && e.phase !== WebInspector.TracingModel.Phase.Instant && e.phase !== "I")
                 continue;
+            if (WebInspector.TracingTimelineUIUtils.isMarkerEvent(e)) {
+                this._markerEvents.push(e);
+                this._timelineData.markerTimestamps.push(e.startTime);
+            }
             if (!this._isVisible(e))
                 continue;
             while (openEvents.length && openEvents.peekLast().endTime <= e.startTime) {
                 openEvents.pop();
                 level = levels.pop();
                 jsStackHeight = jsHeights.pop();
             }
             if (!headerAppended) {
                 this._appendHeaderRecord(headerName, this._currentLevel);
                 ++level;
                 headerAppended = true;
             }
             var jsHeightDelta = this._processEvent(e, this._currentLevel + level, jsStackHeight);
+            maxStackDepth = Math.max(maxStackDepth, level + 1 + jsHeightDelta);
             if (e.endTime) {
                 openEvents.push(e);
                 jsHeights.push(jsStackHeight);
                 levels.push(level);
+                level += 1 + jsHeightDelta;
             }
-            level += 1 + jsHeightDelta;
             jsStackHeight += jsHeightDelta;
-            maxStackDepth = Math.max(maxStackDepth, level);
         }
         this._currentLevel += maxStackDepth;
     },
 
     /**
      * @param {!WebInspector.TracingModel.Event} event
      * @param {number} level
      * @param {number} jsStackHeight
      * @return {number}
      */
@@ skipping 421 matching lines @@
 /**
   * @constructor
   * @param {!WebInspector.TimelineSelection} selection
   * @param {number} entryIndex
   */
 WebInspector.TimelineFlameChart.Selection = function(selection, entryIndex)
 {
     this.timelineSelection = selection;
     this.entryIndex = entryIndex;
 }