Draw marker events on Timeline flame chart

Source/devtools/front_end/components/FlameChart.js

Index: Source/devtools/front_end/components/FlameChart.js
diff --git a/Source/devtools/front_end/components/FlameChart.js b/Source/devtools/front_end/components/FlameChart.js
index f4a9c7366e25b9b4a234e4226e703dd6609efa24..3bd195ec5c4db038746442798227f12bec4eda17 100644
--- a/Source/devtools/front_end/components/FlameChart.js
+++ b/Source/devtools/front_end/components/FlameChart.js
@@ -68,6 +68,7 @@ WebInspector.FlameChart = function(dataProvider, flameChartDelegate, isTopDown)
     this._vScrollElement.addEventListener("scroll", this.scheduleUpdate.bind(this), false);
 
     this._entryInfo = this.element.createChild("div", "profile-entry-info");
+    this._markerHighlighElement = this.element.createChild("div", "flame-chart-marker-highlight-element");
     this._highlightElement = this.element.createChild("div", "flame-chart-highlight-element");
     this._selectedElement = this.element.createChild("div", "flame-chart-selected-element");
 
@@ -84,6 +85,7 @@ WebInspector.FlameChart = function(dataProvider, flameChartDelegate, isTopDown)
     this._paddingLeft = this._dataProvider.paddingLeft();
     this._markerPadding = 2;
     this._markerRadius = this._barHeight / 2 - this._markerPadding;
+    this._highlightMarker = null;
     this._highlightedEntryIndex = -1;
     this._selectedEntryIndex = -1;
     this._textWidth = {};
@@ -106,6 +108,19 @@ WebInspector.FlameChartDataProvider = function()
  */
 WebInspector.FlameChart.TimelineData;
 
+/**
+ * @constructor
+ * @param {number} timestamp
+ * @param {string} title
+ * @param {string} color
+ */
+WebInspector.FlameChartDataProvider.Marker = function(timestamp, title, color)
+{
+    this.timestamp = timestamp;
+    this.title = title;
+    this.color = color;
+}
+
 WebInspector.FlameChartDataProvider.prototype = {
     /**
      * @return {number}
@@ -120,6 +135,13 @@ WebInspector.FlameChartDataProvider.prototype = {
     dividerOffsets: function(startTime, endTime) { },
 
     /**
+     * @param {number} startTime
+     * @param {number} endTime
+     * @return {?Array.<!WebInspector.FlameChartDataProvider.Marker>}
+     */
+    timelineMarkers: function(startTime, endTime) { },
+
+    /**
      * @return {number}
      */
     minimumBoundary: function() { },
@@ -455,6 +477,13 @@ WebInspector.FlameChart.prototype = {
     {
         if (this._isDragging)
             return;
+
+        var inDividersBar = event.offsetY < WebInspector.FlameChart.DividersBarHeight;
+        this._highlightMarker = inDividersBar ? this._markerAtPosition(event.offsetX) : null;
+        this._updateMarkerHighlight();
+        if (inDividersBar)
+            return;
+
         var entryIndex = this._coordinatesToEntryIndex(event.offsetX, event.offsetY);
 
         if (this._highlightedEntryIndex === entryIndex)
@@ -599,6 +628,37 @@ WebInspector.FlameChart.prototype = {
     },
 
     /**
+     * @param {number} x
+     * @return {?WebInspector.FlameChartDataProvider.Marker}
+     */
+    _markerAtPosition: function(x)
+    {
+        var markers = this._markers;
+        if (!markers)
+            return null;
+        var accurracyOffset = 1;

[alph, 2014/07/21 12:05:30]

nit: accuracyOffsetPx

[yurys, 2014/07/21 13:49:47]

Done.

+        var time = this._cursorTime(x);
+        var leftTime = this._cursorTime(x - accurracyOffset);
+        var rightTime = this._cursorTime(x + accurracyOffset);
+
+        function comparator(time, marker)
+        {
+            return time - marker.timestamp;
+        }
+        var left = markers.lowerBound(leftTime, comparator);
+        var right = markers.upperBound(rightTime, comparator);
+        var marker = null;
+        var distance = Infinity;
+        for (var i = left; i < right; i++) {
+            var nextMarker = markers[i];
+            var nextDistance = nextMarker.timestamp - time;

[alph, 2014/07/21 12:05:30]

abs?

[yurys, 2014/07/21 13:49:47]

Done.

+            if (nextDistance < distance)
+                marker = nextMarker;

[alph, 2014/07/21 12:05:30]

distance = nextDistance

[yurys, 2014/07/21 13:49:47]

Done.

+        }
+        return marker;
+    },
+
+    /**
      * @param {number} height
      * @param {number} width
      */
@@ -747,8 +807,31 @@ WebInspector.FlameChart.prototype = {
         var offsets = this._dataProvider.dividerOffsets(this._calculator.minimumBoundary(), this._calculator.maximumBoundary());
         WebInspector.TimelineGrid.drawCanvasGrid(this._canvas, this._calculator, offsets);
 
+        this._markers = this._dataProvider.timelineMarkers(this._calculator.minimumBoundary(), this._calculator.maximumBoundary());
+        if (this._markers)
+            WebInspector.TimelineGrid.drawTimelineMarkers(this._canvas, this._calculator, this._markers);

[alph, 2014/07/21 12:05:30]

I'm a bit concerned that FlameChart uses TimelineGrid *and* TimelineGrid uses
FlameChartDP.Marker
Can we eliminate the cross dependency?

[yurys, 2014/07/21 13:49:47]

Done.

+
         this._updateElementPosition(this._highlightElement, this._highlightedEntryIndex);
         this._updateElementPosition(this._selectedElement, this._selectedEntryIndex);
+        this._updateMarkerHighlight();
+    },
+
+    _updateMarkerHighlight: function()
+    {
+        var element = this._markerHighlighElement;
+        if (element.parentElement)
+            element.remove();
+        var marker = this._highlightMarker;
+        if (!marker)
+            return;
+        var barX = this._timeToPosition(marker.timestamp);
+        if (barX === this._canvas.width)

[alph, 2014/07/21 12:05:30]

This comparison looks suspicious. Is it a kinda special value?

[yurys, 2014/07/21 13:49:47]

Removed.

+            return;
+        element.title = marker.title;
+        var style = element.style;
+        style.left = barX + "px";
+        style.backgroundColor = marker.color;
+        this.element.appendChild(element);
     },
 
     /**
@@ -953,6 +1036,7 @@ WebInspector.FlameChart.prototype = {
 
     reset: function()
     {
+        this._highlightMarker = null;
         this._highlightedEntryIndex = -1;
         this._selectedEntryIndex = -1;
         this._textWidth = {};