DevTools: Make tracking entry info on flame chart work with pan/zoom.

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 525 matching lines @@
     _animateWindowTimes: function(startTime, endTime)
     {
         this._timeWindowLeft = startTime;
         this._timeWindowRight = endTime;
         this.update();
     },
 
     _animationCompleted: function()
     {
         delete this._cancelWindowTimesAnimation;
+        this._highlightEntry(true);
     },
 
     /**
      * @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._highlightEntry(false);
         return true;
     },
 
     /**
      * @param {!MouseEvent} event
      */
     _canvasDragging: function(event)
     {
         var pixelShift = this._dragStartPointX - event.pageX;
         this._dragStartPointX = event.pageX;
@@ skipping 22 matching lines @@
         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._highlightEntry(false);
         return true;
     },
 
     _endRangeSelection: function()
     {
         this._isDragging = false;
         this._flameChartDelegate.endRangeSelection();
     },
 
     _hideRangeSelection: function()
@@ skipping 27 matching lines @@
         var timeSpan = this._rangeSelectionEnd - this._rangeSelectionStart;
         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;
 
         var inDividersBar = event.offsetY < WebInspector.FlameChart.DividersBarHeight;
         this._highlightedMarkerIndex = inDividersBar ? this._markerIndexAtPosition(event.offsetX) : -1;
         this._updateMarkerHighlight();
-        this._entryInfo.style.left = event.offsetX + "px";
-        this._entryInfo.style.top = event.offsetY + "px";
-
-        this._highlightEntry(this._coordinatesToEntryIndex(event.offsetX, event.offsetY));
+        this._highlightEntry(true);
     },
 
     _onMouseOut: function()
     {
-        this._highlightEntry(-1);
+        this._highlightEntry(false);
     },
 
     /**
-     * @param {number} entryIndex
+     * @param {boolean} show
      */
-    _highlightEntry: function(entryIndex)
+    _highlightEntry: function(show)

[caseq, 2015/11/24 00:40:55]

let's just split this into _hideHighlight() and _showHighlight() -- it looks
like this is doing totally unrelated things for two cases.

[alph, 2015/11/24 02:44:56]

Done.

     {
+        var entryIndex = show ? this._coordinatesToEntryIndex(this._lastMouseOffsetX, this._lastMouseOffsetY) : -1;
+        this._entryInfo.style.left = this._lastMouseOffsetX + "px";
+        this._entryInfo.style.top = this._lastMouseOffsetY + "px";
         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;
 
@@ skipping 786 matching lines @@
 
     _updateContentElementSize: function()
     {
         this._offsetWidth = this.contentElement.offsetWidth;
         this._offsetHeight = this.contentElement.offsetHeight;
     },
 
     _onScroll: function()
     {
         this._scrollTop = this._vScrollElement.scrollTop;
+        this._highlightEntry(true);
         this.scheduleUpdate();
     },
 
     scheduleUpdate: function()
     {
         if (this._updateTimerId || this._cancelWindowTimesAnimation)
             return;
         this._updateTimerId = this.element.window().requestAnimationFrame(this.update.bind(this));
     },
 
@@ skipping 18 matching lines @@
         this.update();
     },
 
     _enabled: function()
     {
         return this._rawTimelineDataLength !== 0;
     },
 
     __proto__: WebInspector.HBox.prototype
 }