DevTools: Update flamechart highlight on pan/zoom/scroll.

third_party/WebKit/Source/devtools/front_end/ui_lazy/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 429 matching lines @@
      * @return {number}
      */
     boundarySpan: function()
     {
         return this._maximumBoundaries - this._minimumBoundaries;
     }
 }
 
 WebInspector.FlameChart.prototype = {
     /**
+     * @override
+     */
+    willHide: function()
+    {
+        this.hideHighlight();
+    },
+
+    /**
      * @param {number} entryIndex
      */
     highlightEntry: function(entryIndex)
     {
-        this._entryInfo.removeChildren();
-        this._innerHighlightEntry(entryIndex);
+        if (this._highlightedEntryIndex === entryIndex)
+            return;
+        this._highlightedEntryIndex = entryIndex;
+        this._updateElementPosition(this._highlightElement, this._highlightedEntryIndex);
     },
 
     hideHighlight: function()
     {
         this._entryInfo.removeChildren();
         this._canvas.style.cursor = "default";
         this._highlightedEntryIndex = -1;
         this._updateElementPosition(this._highlightElement, this._highlightedEntryIndex);
     },
 
@@ skipping 66 matching lines @@
     {
         if (this._muteAnimation || this._timeWindowLeft === 0 || this._timeWindowRight === Infinity || (startTime === 0 && endTime === Infinity) || (startTime === Infinity && endTime === Infinity)) {
             // Initial setup.
             this._timeWindowLeft = startTime;
             this._timeWindowRight = endTime;
             this.scheduleUpdate();
             return;
         }
 
         this._cancelAnimation();
+        this._updateHighlight();
         this._cancelWindowTimesAnimation = WebInspector.animateFunction(this.element.window(), this._animateWindowTimes.bind(this),
             [{from: this._timeWindowLeft, to: startTime}, {from: this._timeWindowRight, to: endTime}], 5,
             this._animationCompleted.bind(this));
         this._pendingAnimationTimeLeft = startTime;
         this._pendingAnimationTimeRight = endTime;
     },
 
     /**
      * @param {number} startTime
      * @param {number} endTime
      */
     _animateWindowTimes: function(startTime, endTime)
     {
         this._timeWindowLeft = startTime;
         this._timeWindowRight = endTime;
+        this._updateHighlight();
         this.update();
     },
 
     _animationCompleted: function()
     {
         delete this._cancelWindowTimesAnimation;
+        this._updateHighlight();
     },
 
     /**
      * @param {!MouseEvent} event
      */
     _initMaxDragOffset: function(event)
     {
         this._maxDragOffsetSquared = 0;
         this._dragStartX = event.pageX;
         this._dragStartY = event.pageY;
@@ skipping 29 matching lines @@
         if (!this._timelineData() || this._timeWindowRight === Infinity)
             return false;
         this._isDragging = true;
         this._initMaxDragOffset(event);
         this._dragStartPointX = event.pageX;
         this._dragStartPointY = event.pageY;
         this._dragStartScrollTop = this._vScrollElement.scrollTop;
         this._dragStartWindowLeft = this._timeWindowLeft;
         this._dragStartWindowRight = this._timeWindowRight;
         this._canvas.style.cursor = "";
+        this.hideHighlight();
         return true;
     },
 
     /**
      * @param {!MouseEvent} event
      */
     _canvasDragging: function(event)
     {
         var pixelShift = this._dragStartPointX - event.pageX;
         this._dragStartPointX = event.pageX;
         this._muteAnimation = true;
         this._handlePanGesture(pixelShift * this._pixelToTime);
         this._muteAnimation = false;
 
         var pixelScroll = this._dragStartPointY - event.pageY;
         this._vScrollElement.scrollTop = this._dragStartScrollTop + pixelScroll;
         this._updateMaxDragOffset(event);
     },
 
     _endCanvasDragging: function()
     {
         this._isDragging = false;
+        this._updateHighlight();
     },
 
     /**
      * @param {!MouseEvent} event
      * @return {boolean}
      */
     _startRangeSelection: function(event)
     {
         if (!event.shiftKey)
             return false;
         this._isDragging = true;
         this._initMaxDragOffset(event);
         this._selectionOffsetShiftX = event.offsetX - event.pageX;
         this._selectionOffsetShiftY = event.offsetY - event.pageY;
         this._selectionStartX = event.offsetX;
         var style = this._selectionOverlay.style;
         style.left = this._selectionStartX + "px";
         style.width = "1px";
         this._selectedTimeSpanLabel.textContent = "";
         this._selectionOverlay.classList.remove("hidden");
+        this.hideHighlight();
         return true;
     },
 
     _endRangeSelection: function()
     {
         this._isDragging = false;
         this._flameChartDelegate.endRangeSelection();
+        this._updateHighlight();
     },
 
     _hideRangeSelection: function()
     {
         this._selectionOverlay.classList.add("hidden");
     },
 
     /**
      * @param {!MouseEvent} event
      */
@@ skipping 21 matching lines @@
         this._selectedTimeSpanLabel.textContent = Number.preciseMillisToString(timeSpan, 2);
     },
 
     /**
      * @param {!Event} event
      */
     _onMouseMove: function(event)
     {
         this._lastMouseOffsetX = event.offsetX;
         this._lastMouseOffsetY = event.offsetY;
-
         if (!this._enabled())
             return;
-
         if (this._isDragging)
             return;
+        this._updateHighlight();
+    },
 
-        var inDividersBar = event.offsetY < WebInspector.FlameChart.DividersBarHeight;
-        this._highlightedMarkerIndex = inDividersBar ? this._markerIndexAtPosition(event.offsetX) : -1;
+    _updateHighlight: function()
+    {
+        var inDividersBar = this._lastMouseOffsetY < WebInspector.FlameChart.DividersBarHeight;
+        this._highlightedMarkerIndex = inDividersBar ? this._markerIndexAtPosition(this._lastMouseOffsetX) : -1;
         this._updateMarkerHighlight();
 
         var entryIndex = this._coordinatesToEntryIndex(this._lastMouseOffsetX, this._lastMouseOffsetY);
         if (entryIndex === -1) {
             this.hideHighlight();
             return;
         }
-        this._updateEntryInfo(entryIndex);
-
+        this._updatePopover(entryIndex);
         this._canvas.style.cursor = this._dataProvider.canJumpToEntry(entryIndex) ? "pointer" : "default";
-        this._innerHighlightEntry(entryIndex);
+        this.highlightEntry(entryIndex);
     },
 
     _onMouseOut: function()
     {
+        this._lastMouseOffsetX = -1;
+        this._lastMouseOffsetY = -1;
         this.hideHighlight();
     },
 
     /**
      * @param {number} entryIndex
      */
-    _updateEntryInfo: function(entryIndex)
+    _updatePopover: function(entryIndex)
     {
         if (entryIndex !== this._highlightedEntryIndex) {
             this._entryInfo.removeChildren();
             var entryInfo = this._dataProvider.prepareHighlightedEntryInfo(entryIndex);
             if (entryInfo)
                 this._entryInfo.appendChild(this._buildEntryInfo(entryInfo));
         }
         var mouseX = this._lastMouseOffsetX;
         var mouseY = this._lastMouseOffsetY;
         var parentWidth = this._entryInfo.parentElement.clientWidth;
         var parentHeight = this._entryInfo.parentElement.clientHeight;
         var infoWidth = this._entryInfo.clientWidth;
         var infoHeight = this._entryInfo.clientHeight;
         var /** @const */ offsetX = 10;
         var /** @const */ offsetY = 6;
         var x;
         var y;
         for (var quadrant = 0; quadrant < 4; ++quadrant) {
             var dx = quadrant & 2 ? -offsetX - infoWidth  : offsetX;
             var dy = quadrant & 1 ? -offsetY - infoHeight : offsetY;
             x = Number.constrain(mouseX + dx, 0, parentWidth - infoWidth);
             y = Number.constrain(mouseY + dy, 0, parentHeight - infoHeight);
             if (x >= mouseX || mouseX >= x + infoWidth || y >= mouseY || mouseY >= y + infoHeight)
                 break;
         }
         this._entryInfo.style.left = x + "px";
         this._entryInfo.style.top = y + "px";
     },
 
-    /**
-     * @param {number} entryIndex
-     */
-    _innerHighlightEntry: function(entryIndex)
-    {
-        if (this._highlightedEntryIndex === entryIndex)
-            return;
-        this._highlightedEntryIndex = entryIndex;
-        this._updateElementPosition(this._highlightElement, this._highlightedEntryIndex);
-    },
-
     _onClick: function()
     {
         this.focus();
         // 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.
         const clickThreshold = 5;
         if (this._maxDragOffset() > clickThreshold)
             return;
         this._hideRangeSelection();
@@ skipping 185 matching lines @@
         return (x + this._pixelWindowLeft - this._paddingLeft) * this._pixelToTime + this._minimumBoundary;
     },
 
     /**
      * @param {number} x
      * @param {number} y
      * @return {number}
      */
     _coordinatesToEntryIndex: function(x, y)
     {
+        if (x < 0 || y < 0)
+            return -1;
         y += this._scrollTop;
         var timelineData = this._timelineData();
         if (!timelineData)
             return -1;
         var cursorTime = this._cursorTime(x);
         var cursorLevel;
         var offsetFromLevel;
         if (this._isTopDown) {
             cursorLevel = Math.floor((y - WebInspector.FlameChart.DividersBarHeight) / this._barHeight);
             offsetFromLevel = y - WebInspector.FlameChart.DividersBarHeight - cursorLevel * this._barHeight;
@@ skipping 577 matching lines @@
 
     update: function()
     {
         this._updateTimerId = 0;
         if (!this._timelineData())
             return;
         this._resetCanvas();
         this._updateBoundaries();
         this._calculator._updateBoundaries(this);
         this._draw(this._offsetWidth, this._offsetHeight);
+        if (!this._isDragging)
+            this._updateHighlight();
     },
 
     reset: function()
     {
         this._vScrollElement.scrollTop = 0;
         this._highlightedMarkerIndex = -1;
         this._highlightedEntryIndex = -1;
         this._selectedEntryIndex = -1;
         this._textWidth = {};
         this.update();
     },
 
     _enabled: function()
     {
         return this._rawTimelineDataLength !== 0;
     },
 
     __proto__: WebInspector.HBox.prototype
 }