Draw marker events on Timeline flame chart

Source/devtools/front_end/components/FlameChart.js

 /**
  * Copyright (C) 2013 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 50 matching lines @@
     this._canvas.addEventListener("mousemove", this._onMouseMove.bind(this), false);
     this._canvas.addEventListener("mousewheel", this._onMouseWheel.bind(this), false);
     this._canvas.addEventListener("click", this._onClick.bind(this), false);
     WebInspector.installDragHandle(this._canvas, this._startCanvasDragging.bind(this), this._canvasDragging.bind(this), this._endCanvasDragging.bind(this), "move", null);
 
     this._vScrollElement = this.element.createChild("div", "flame-chart-v-scroll");
     this._vScrollContent = this._vScrollElement.createChild("div");
     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");
 
     this._dataProvider = dataProvider;
 
     this._windowLeft = 0.0;
     this._windowRight = 1.0;
     this._windowWidth = 1.0;
     this._timeWindowLeft = 0;
     this._timeWindowRight = Infinity;
     this._barHeight = dataProvider.barHeight();
     this._barHeightDelta = this._isTopDown ? -this._barHeight : this._barHeight;
     this._minWidth = 1;
     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 = {};
 }
 
 WebInspector.FlameChart.DividersBarHeight = 20;
 
 /**
  * @interface
  */
 WebInspector.FlameChartDataProvider = function()
 {
 }
 
 /** @typedef {!{
         entryLevels: (!Array.<number>|!Uint8Array),
         entryTotalTimes: (!Array.<number>|!Float32Array),
         entryStartTimes: (!Array.<number>|!Float64Array)
     }}
  */
 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}
      */
     barHeight: function() { },
 
     /**
      * @param {number} startTime
      * @param {number} endTime
      * @return {?Array.<number>}
      */
     dividerOffsets: function(startTime, endTime) { },
 
     /**
+     * @param {number} startTime
+     * @param {number} endTime
+     * @return {?Array.<!WebInspector.FlameChartDataProvider.Marker>}
+     */
+    timelineMarkers: function(startTime, endTime) { },
+
+    /**
      * @return {number}
      */
     minimumBoundary: function() { },
 
     /**
      * @return {number}
      */
     totalTime: function() { },
 
     /**
@@ skipping 315 matching lines @@
         this._isDragging = false;
     },
 
     /**
      * @param {!Event} event
      */
     _onMouseMove: function(event)
     {
         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)
             return;
 
         if (entryIndex === -1 || !this._dataProvider.canJumpToEntry(entryIndex))
             this._canvas.style.cursor = "default";
         else
             this._canvas.style.cursor = "pointer";
 
@@ skipping 124 matching lines @@
         var entryIndex = entryIndexes[indexOnLevel];
         if (checkEntryHit.call(this, entryIndex))
             return entryIndex;
         entryIndex = entryIndexes[indexOnLevel + 1];
         if (checkEntryHit.call(this, entryIndex))
             return entryIndex;
         return -1;
     },
 
     /**
+     * @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
      */
     _draw: function(width, height)
     {
         var timelineData = this._timelineData();
         if (!timelineData)
             return;
 
         var context = this._canvas.getContext("2d");
@@ skipping 128 matching lines @@
                 continue;
 
             context.fillStyle = this._dataProvider.textColor(entryIndex);
             context.fillText(text, barX + textPadding, textBaseHeight - barLevel * this._barHeightDelta);
         }
         context.restore();
 
         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);
     },
 
     /**
      * @param {?WebInspector.FlameChart.TimelineData} timelineData
      */
     _processTimelineData: function(timelineData)
     {
         if (!timelineData) {
             this._timelineLevels = null;
             this._rawTimelineData = null;
@@ skipping 184 matching lines @@
         if (!this._timelineData())
             return;
         this._resetCanvas();
         this._updateBoundaries();
         this._calculator._updateBoundaries(this);
         this._draw(this._offsetWidth, this._offsetHeight);
     },
 
     reset: function()
     {
+        this._highlightMarker = null;
         this._highlightedEntryIndex = -1;
         this._selectedEntryIndex = -1;
         this._textWidth = {};
         this.update();
     },
 
     __proto__: WebInspector.HBox.prototype
 }