TimelineFlameChart: selectRecord implementation

Source/devtools/front_end/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 13 matching lines @@
  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
 /**
  * @interface
  */
-WebInspector.TimeRangeController = function() { }
+WebInspector.FlameChartDelegate = function() { }
 
-WebInspector.TimeRangeController.prototype = {
+WebInspector.FlameChartDelegate.prototype = {
     /**
      * @param {number} startTime
      * @param {number} endTime
      */
-    requestWindowTimes: function(startTime, endTime) { }
+    requestWindowTimes: function(startTime, endTime) { },
 }
 
 /**
  * @constructor
  * @extends {WebInspector.View}
  * @param {!WebInspector.FlameChartDataProvider} dataProvider
  */
 WebInspector.FlameChart = function(dataProvider)
 {
     WebInspector.View.call(this);
@@ skipping 101 matching lines @@
     prepareHighlightedEntryInfo: function(entryIndex) { },
 
     /**
      * @param {number} entryIndex
      * @return {boolean}
      */
     canJumpToEntry: function(entryIndex) { },
 
     /**
      * @param {number} entryIndex
-     * @return {?Object}
-     */
-    entryData: function(entryIndex) { },
-
-    /**
-     * @param {number} entryIndex
      * @return {?string}
      */
     entryTitle: function(entryIndex) { },
 
     /**
      * @param {number} entryIndex
      * @return {?string}
      */
     entryFont: function(entryIndex) { },
 
@@ skipping 10 matching lines @@
     textColor: function(entryIndex) { },
 
     /**
      * @return {number}
      */
     textBaseline: function() { },
 
     /**
      * @return {number}
      */
-    textPadding: function() { }
+    textPadding: function() { },
+
+    /**
+     * @return {!{startTimeOffset: number, endTimeOffset: number}}
+     */
+    highlightTimeRange: function(entryIndex) { }
 }
 
 /**
  * @constructor
  * @implements {WebInspector.TimelineGrid.Calculator}
  */
 WebInspector.FlameChart.Calculator = function()
 {
     this._paddingLeft = 0;
 }
@@ skipping 206 matching lines @@
     _createColor: function(index, sat)
     {
         var hue = (index * 7 + 12 * (index % 2)) % 360;
         return "hsla(" + hue + ", " + sat + "%, 66%, 0.7)";
     }
 }
 
 /**
  * @constructor
  * @extends {WebInspector.View}
- * @implements {WebInspector.TimeRangeController}
+ * @implements {WebInspector.FlameChartDelegate}
  * @param {!WebInspector.FlameChartDataProvider} dataProvider
  */
 WebInspector.FlameChart.OverviewPane = function(dataProvider)
 {
     WebInspector.View.call(this);
     this.element.classList.add("flame-chart-overview-pane");
     this._overviewContainer = this.element.createChild("div", "overview-container");
     this._overviewGrid = new WebInspector.OverviewGrid("flame-chart");
     this._overviewGrid.element.classList.add("fill");
     this._overviewCanvas = this._overviewContainer.createChild("canvas", "flame-chart-overview-canvas");
@@ skipping 131 matching lines @@
     context.lineTo(canvasWidth + 1, canvasHeight - 1);
     context.fill();
     context.stroke();
     context.closePath();
 }
 
 /**
  * @constructor
  * @extends {WebInspector.View}
  * @param {!WebInspector.FlameChartDataProvider} dataProvider
- * @param {!WebInspector.TimeRangeController} timeRangeController
+ * @param {!WebInspector.FlameChartDelegate} flameChartDelegate
  * @param {boolean} isTopDown
  * @param {boolean} timeBasedWindow
  */
-WebInspector.FlameChart.MainPane = function(dataProvider, timeRangeController, isTopDown, timeBasedWindow)
+WebInspector.FlameChart.MainPane = function(dataProvider, flameChartDelegate, isTopDown, timeBasedWindow)
 {
     WebInspector.View.call(this);
     this.element.classList.add("flame-chart-main-pane");
-    this._timeRangeController = timeRangeController;
+    this._flameChartDelegate = flameChartDelegate;
     this._isTopDown = isTopDown;
     this._timeBasedWindow = timeBasedWindow;
 
     this._timelineGrid = new WebInspector.TimelineGrid();
     this.element.appendChild(this._timelineGrid.element);
     this._calculator = new WebInspector.FlameChart.Calculator();
 
     this._canvas = this.element.createChild("canvas");
     this._canvas.addEventListener("mousemove", this._onMouseMove.bind(this));
     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._entryInfo = this.element.createChild("div", "profile-entry-info");
     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 = 15;
     this._highlightedEntryIndex = -1;
+    this._selectedEntryIndex = -1;
 }
 
 WebInspector.FlameChart.MainPane.prototype = {
     /**
      * @return {?WebInspector.FlameChart.TimelineData}
      */
     _timelineData: function()
     {
         return this._dataProvider.timelineData();
     },
@@ skipping 50 matching lines @@
         var windowShift = pixelShift / this._totalPixels;
         var windowTime = this._windowWidth * this._totalTime;
         var timeShift = windowTime * pixelShift / this._pixelWindowWidth;
         timeShift = Number.constrain(
             timeShift,
             this._zeroTime - this._dragStartWindowLeft,
             this._zeroTime + this._totalTime - this._dragStartWindowRight
         );
         var windowLeft = this._dragStartWindowLeft + timeShift;
         var windowRight = this._dragStartWindowRight + timeShift;
-        this._timeRangeController.requestWindowTimes(windowLeft, windowRight);
+        this._flameChartDelegate.requestWindowTimes(windowLeft, windowRight);
         this._wasDragged = true;
     },
 
     _endCanvasDragging: function()
     {
         this._isDragging = false;
     },
 
     /**
      * @param {?MouseEvent} event
      */
     _onMouseMove: function(event)
     {
         if (this._isDragging)
             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";
 
         this._highlightedEntryIndex = entryIndex;
 
-        this._updateHighlightElement();
+        this._updateElementPosition(this._highlightElement, this._highlightedEntryIndex);
         this._entryInfo.removeChildren();
 
         if (this._highlightedEntryIndex === -1)
             return;
 
         if (!this._isDragging) {
             var entryInfo = this._dataProvider.prepareHighlightedEntryInfo(this._highlightedEntryIndex);
             if (entryInfo)
                 this._entryInfo.appendChild(this._buildEntryInfo(entryInfo));
         }
     },
 
     _onClick: function()
     {
         // onClick comes after dragStart and dragEnd events.
         // So if there was drag (mouse move) in the middle of that events
         // we skip the click. Otherwise we jump to the sources.
         if (this._wasDragged)
             return;
         if (this._highlightedEntryIndex === -1)
             return;
-        var data = this._dataProvider.entryData(this._highlightedEntryIndex);
-        if (data)
-            this.dispatchEventToListeners(WebInspector.FlameChart.Events.EntrySelected, data);
+        this.dispatchEventToListeners(WebInspector.FlameChart.Events.EntrySelected, this._highlightedEntryIndex);
     },
 
     /**
      * @param {?MouseEvent} e
      */
     _onMouseWheel: function(e)
     {
         var windowLeft = this._timeWindowLeft ? this._timeWindowLeft : this._dataProvider.zeroTime();
         var windowRight = this._timeWindowRight !== Infinity ? this._timeWindowRight : this._dataProvider.zeroTime() + this._dataProvider.totalTime();
 
         if (e.wheelDeltaY) {
             const mouseWheelZoomSpeed = 1 / 120;
             var zoom = Math.pow(1.2, -e.wheelDeltaY * mouseWheelZoomSpeed) - 1;
             var cursorTime = this._cursorTime(e.offsetX);
             windowLeft += (windowLeft - cursorTime) * zoom;
             windowRight += (windowRight - cursorTime) * zoom;
         } else {
             var shift = e.wheelDeltaX * this._pixelToTime;
             shift = Number.constrain(shift, this._zeroTime - windowLeft, this._totalTime + this._zeroTime - windowRight);
             windowLeft += shift;
             windowRight += shift;
         }
         windowLeft = Number.constrain(windowLeft, this._zeroTime, this._totalTime + this._zeroTime);
         windowRight = Number.constrain(windowRight, this._zeroTime, this._totalTime + this._zeroTime);
-        this._timeRangeController.requestWindowTimes(windowLeft, windowRight);
+        this._flameChartDelegate.requestWindowTimes(windowLeft, windowRight);
     },
 
     /**
      * @param {number} x
      * @return {number}
      */
     _cursorTime: function(x)
     {
         return (x + this._pixelWindowLeft - this._paddingLeft) * this._pixelToTime + this._zeroTime;
     },
 
     /**
      * @param {!number} x
      * @param {!number} y
      */
     _coordinatesToEntryIndex: function(x, y)
     {
         var timelineData = this._timelineData();
         if (!timelineData)
             return -1;
-        var cursorTime = this._cursorTime(x);
-        var cursorLevel = this._isTopDown ? Math.floor(y / this._barHeight - 1) : Math.floor((this._canvas.height / window.devicePixelRatio - y) / this._barHeight);
+        var cursorTimeOffset = this._cursorTime(x) - this._zeroTime;
+        var cursorLevel = this._isTopDown ? Math.floor((y - WebInspector.FlameChart.DividersBarHeight) / this._barHeight) : Math.floor((this._canvas.height / window.devicePixelRatio - y) / this._barHeight);
         var entryOffsets = timelineData.entryOffsets;
         var entryTotalTimes = timelineData.entryTotalTimes;
         var entryLevels = timelineData.entryLevels;
         var length = entryOffsets.length;
         for (var i = 0; i < length; ++i) {
-            if (cursorTime < entryOffsets[i])
+            if (cursorTimeOffset < entryOffsets[i])
                 return -1;
-            if (cursorTime < (entryOffsets[i] + entryTotalTimes[i])
+            if (cursorTimeOffset < (entryOffsets[i] + entryTotalTimes[i])
                 && cursorLevel === entryLevels[i])
                 return i;
         }
         return -1;
     },
 
     /**
      * @param {!number} height
      * @param {!number} width
      */
@@ skipping 108 matching lines @@
                 barRight = this._offsetToPosition(entryOffset + entryTotalTimes[entryIndex]);
                 barWidth = Math.max(barRight - barX, minWidth);
                 barLevel = entryLevels[entryIndex];
                 barY = this._levelToHeight(barLevel);
                 context.rect(barX, barY, barWidth, this._barHeight);
                 if (barWidth > minTextWidth)
                     titleIndexes[lastTitleIndex++] = entryIndex;
             }
             context.fill();
         }
+
         context.textBaseline = "alphabetic";
         context.fillStyle = "#333";
         this._dotsWidth = context.measureText("\u2026").width;
 
         for (i = 0; i < lastTitleIndex; ++i) {
             entryIndex = titleIndexes[i];
             text = this._dataProvider.entryTitle(entryIndex);
             if (!text || !text.length)
                 continue;
             font = this._dataProvider.entryFont(entryIndex);
@@ skipping 10 matching lines @@
                 context.font = font;
                 lastUsedFont = font;
             }
             textColor = this._dataProvider.textColor(entryIndex);
             if (textColor !== lastTextColor) {
                 context.fillStyle = textColor;
                 lastTextColor = textColor;
             }
             context.fillText(title, xText + textPadding, textBaseHeight - entryLevels[entryIndex] * this._barHeightDelta);
         }
-        this._updateHighlightElement();
+        this._updateElementPosition(this._highlightElement, this._highlightedEntryIndex);
+        this._updateElementPosition(this._selectedElement, this._selectedEntryIndex);
     },
 
-    _updateHighlightElement: function()
+    setSelectedEntry: function(entryIndex)
     {
-        if (this._highlightElement.parentElement)
-            this._highlightElement.remove();
-        var entryIndex = this._highlightedEntryIndex;
+        this._selectedEntryIndex = entryIndex;
+        this._updateElementPosition(this._selectedElement, this._selectedEntryIndex);
+    },
+
+    _updateElementPosition: function(element, entryIndex)
+    {
+        if (element.parentElement)
+            element.remove();
         if (entryIndex === -1)
             return;
         var timelineData = this._timelineData();
-        var entryOffset = timelineData.entryOffsets[entryIndex];
-        var barX = this._offsetToPosition(entryOffset);
-        var barRight = this._offsetToPosition(entryOffset + timelineData.entryTotalTimes[entryIndex]);
+        var timeRange = this._dataProvider.highlightTimeRange(entryIndex);
+        var barX = this._offsetToPosition(timeRange.startTimeOffset);
+        var barRight = this._offsetToPosition(timeRange.endTimeOffset);
         var barWidth = Math.max(barRight - barX, this._minWidth);
-
-        var style = this._highlightElement.style;
+        var barY = this._levelToHeight(timelineData.entryLevels[entryIndex]);
+        var style = element.style;
         style.left = barX + "px";
+        style.top = barY + "px";
         style.width = barWidth + "px";
-        style.top = this._levelToHeight(timelineData.entryLevels[entryIndex]) + "px";
         style.height = this._barHeight + "px";
-        this.element.appendChild(this._highlightElement);
+        this.element.appendChild(element);
     },
 
     _offsetToPosition: function(offset)
     {
         return Math.floor(offset * this._timeToPixel) - this._pixelWindowLeft + this._paddingLeft;
     },
 
     _levelToHeight: function(level)
     {
          return this._baseHeight - level * this._barHeightDelta;
@@ skipping 104 matching lines @@
             this._timelineGrid.showDividers();
         else
             this._timelineGrid.hideDividers();
         this.draw(this.element.clientWidth, this.element.clientHeight);
         this._calculator._updateBoundaries(this);
         this._timelineGrid.element.style.width = this.element.clientWidth;
         var offsets = this._dataProvider.dividerOffsets(this._calculator.minimumBoundary(), this._calculator.maximumBoundary());
         this._timelineGrid.updateDividers(this._calculator, offsets, true);
     },
 
+    reset: function()
+    {
+        this._highlightedEntryIndex = -1;
+        this._selectedEntryIndex = -1;
+        this.update();
+    },
+
     __proto__: WebInspector.View.prototype
 }