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._highlightedMarkerIndex = -1;
     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)
-    }}
+/**
+ * @constructor
+ * @param {!Array.<number>|!Uint8Array} entryLevels
+ * @param {!Array.<number>|!Float32Array} entryTotalTimes
+ * @param {!Array.<number>|!Float64Array} entryStartTimes
  */
-WebInspector.FlameChart.TimelineData;
+WebInspector.FlameChart.TimelineData = function(entryLevels, entryTotalTimes, entryStartTimes)
+{
+    this.entryLevels = entryLevels;
+    this.entryTotalTimes = entryTotalTimes;
+    this.entryStartTimes = entryStartTimes;
+    /** @type {!Array.<number>} */
+    this.markerTimestamps = [];
+}
 
 WebInspector.FlameChartDataProvider.prototype = {
     /**
      * @return {number}
      */
     barHeight: function() { },
 
     /**
      * @param {number} startTime
      * @param {number} endTime
      * @return {?Array.<number>}
      */
     dividerOffsets: function(startTime, endTime) { },
 
     /**
+     * @param {number} index
+     * @return {string}
+     */
+    markerColor: function(index) { },
+
+    /**
+     * @param {number} index
+     * @return {string}
+     */
+    markerTitle: function(index) { },
+
+    /**
      * @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._highlightedMarkerIndex = inDividersBar ? this._markerIndexAtPosition(event.offsetX) : -1;
+        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 87 matching lines @@
         } else {
             cursorLevel = Math.floor((this._canvas.height / window.devicePixelRatio - y) / this._barHeight);
             offsetFromLevel = this._canvas.height / window.devicePixelRatio - cursorLevel * this._barHeight;
         }
         var entryStartTimes = timelineData.entryStartTimes;
         var entryTotalTimes = timelineData.entryTotalTimes;
         var entryIndexes = this._timelineLevels[cursorLevel];
         if (!entryIndexes || !entryIndexes.length)
             return -1;
 
+        /**
+         * @param {number} time
+         * @param {number} entryIndex
+         * @return {number}
+         */
         function comparator(time, entryIndex)
         {
             return time - entryStartTimes[entryIndex];
         }
         var indexOnLevel = Math.max(entryIndexes.upperBound(cursorTime, comparator) - 1, 0);
 
         /**
          * @this {WebInspector.FlameChart}
          * @param {number} entryIndex
          * @return {boolean}
@@ skipping 17 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 {number}
+     */
+    _markerIndexAtPosition: function(x)
+    {
+        var markers = this._timelineData().markerTimestamps;
+        if (!markers)
+            return -1;
+        var accurracyOffsetPx = 1;
+        var time = this._cursorTime(x);
+        var leftTime = this._cursorTime(x - accurracyOffsetPx);
+        var rightTime = this._cursorTime(x + accurracyOffsetPx);
+
+        /**
+         * @param {number} time
+         * @param {number} markerTimestamp
+         * @return {number}
+         */
+        function comparator(time, markerTimestamp)
+        {
+            return time - markerTimestamp;
+        }
+        var left = markers.lowerBound(leftTime, comparator);
+        var markerIndex = -1;
+        var distance = Infinity;
+        for (var i = left; i < markers.length; i++) {
+            if (markers[i] > rightTime)

[alph, 2014/07/21 14:21:07]

nit: you can move the check into the for condition.

[yurys, 2014/07/21 14:30:00]

Done.

+                break;
+            var nextDistance = Math.abs(markers[i] - time);
+            if (nextDistance < distance) {
+                markerIndex = i;
+                distance = nextDistance;
+            }
+        }
+        return markerIndex;
+    },
+
+    /**
      * @param {number} height
      * @param {number} width
      */
     _draw: function(width, height)
     {
         var timelineData = this._timelineData();
         if (!timelineData)
             return;
 
         var context = this._canvas.getContext("2d");
@@ skipping 127 matching lines @@
             if (!text || !text.length)
                 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._drawMarkers();
 
         this._updateElementPosition(this._highlightElement, this._highlightedEntryIndex);
         this._updateElementPosition(this._selectedElement, this._selectedEntryIndex);
+        this._updateMarkerHighlight();
+    },
+
+    _drawMarkers: function()
+    {
+        var markerTimestamps = this._timelineData().markerTimestamps;
+        /**
+         * @param {number} time
+         * @param {number} markerTimestamp
+         * @return {number}
+         */
+        function compare(time, markerTimestamp)
+        {
+            return time - markerTimestamp;
+        }
+        var left = markerTimestamps.lowerBound(this._calculator.minimumBoundary(), compare);
+        var right = markerTimestamps.upperBound(this._calculator.maximumBoundary(), compare);

[alph, 2014/07/21 14:21:07]

nit: you don't really need to calculate it. you can do it the same way as in
_markerIndexAtPosition

[yurys, 2014/07/21 14:30:00]

Done.

+
+        var context = this._canvas.getContext("2d");
+        context.save();
+        var ratio = window.devicePixelRatio;
+        context.scale(ratio, ratio);
+        var height = WebInspector.FlameChart.DividersBarHeight - 1;
+        context.lineWidth = 2;
+        for (var i = left; i < right; i++) {
+            var timestamp = markerTimestamps[i];
+            var position = this._calculator.computePosition(timestamp);
+            context.strokeStyle = this._dataProvider.markerColor(i);
+            context.beginPath();
+            context.moveTo(position, 0);
+            context.lineTo(position, height);
+            context.stroke();
+        }
+        context.restore();
+    },
+
+    _updateMarkerHighlight: function()
+    {
+        var element = this._markerHighlighElement;
+        if (element.parentElement)
+            element.remove();
+        var markerIndex = this._highlightedMarkerIndex;
+        if (markerIndex === -1)
+            return;
+        var barX = this._timeToPosition(this._timelineData().markerTimestamps[markerIndex]);
+        element.title = this._dataProvider.markerTitle(markerIndex);
+        var style = element.style;
+        style.left = barX + "px";
+        style.backgroundColor = this._dataProvider.markerColor(markerIndex);
+        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._highlightedMarkerIndex = -1;
         this._highlightedEntryIndex = -1;
         this._selectedEntryIndex = -1;
         this._textWidth = {};
         this.update();
     },
 
     __proto__: WebInspector.HBox.prototype
 }