DevTools: Fix scrolling of timeline flamechart

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 48 matching lines @@
     WebInspector.ChartViewport.call(this);
     this.registerRequiredCSS("ui_lazy/flameChart.css");
     this.contentElement.classList.add("flame-chart-main-pane");
     this._flameChartDelegate = flameChartDelegate;
     this._groupExpansionSetting = groupExpansionSetting;
     this._groupExpansionState = groupExpansionSetting && groupExpansionSetting.get() || {};
 
     this._dataProvider = dataProvider;
     this._calculator = new WebInspector.FlameChart.Calculator(dataProvider);
 
-    this._canvas = /** @type {!HTMLCanvasElement} */ (this.contentElement.createChild("canvas"));
+    this._canvas = /** @type {!HTMLCanvasElement} */ (this.viewportElement.createChild("canvas"));
     this._canvas.tabIndex = 1;
     this.setDefaultFocusedElement(this._canvas);
     this._canvas.addEventListener("mousemove", this._onMouseMove.bind(this), false);
     this._canvas.addEventListener("mouseout", this._onMouseOut.bind(this), false);
     this._canvas.addEventListener("click", this._onClick.bind(this), false);
     this._canvas.addEventListener("keydown", this._onKeyDown.bind(this), false);
 
-    this._entryInfo = this.contentElement.createChild("div", "flame-chart-entry-info");
-    this._markerHighlighElement = this.contentElement.createChild("div", "flame-chart-marker-highlight-element");
-    this._highlightElement = this.contentElement.createChild("div", "flame-chart-highlight-element");
-    this._selectedElement = this.contentElement.createChild("div", "flame-chart-selected-element");
+    this._entryInfo = this.viewportElement.createChild("div", "flame-chart-entry-info");
+    this._markerHighlighElement = this.viewportElement.createChild("div", "flame-chart-marker-highlight-element");
+    this._highlightElement = this.viewportElement.createChild("div", "flame-chart-highlight-element");
+    this._selectedElement = this.viewportElement.createChild("div", "flame-chart-selected-element");
 
     this._windowLeft = 0.0;
     this._windowRight = 1.0;
     this._timeWindowLeft = 0;
     this._timeWindowRight = Infinity;
     this._rangeSelectionStart = 0;
     this._rangeSelectionEnd = 0;
     this._barHeight = dataProvider.barHeight();
     this._paddingLeft = this._dataProvider.paddingLeft();
     var markerPadding = 2;
@@ skipping 400 matching lines @@
     {
         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);
     },
 
     _resetCanvas: function()
     {
         var ratio = window.devicePixelRatio;
         this._canvas.width = this._offsetWidth * ratio;
         this._canvas.height = this._offsetHeight * ratio;
         this._canvas.style.width = this._offsetWidth + "px";
@@ skipping 58 matching lines @@
     _onMouseMove: function(event)
     {
         this._lastMouseOffsetX = event.offsetX;
         this._lastMouseOffsetY = event.offsetY;
         if (!this._enabled())
             return;
         if (this.isDragging())
             return;
         if (this._coordinatesToGroupIndex(event.offsetX, event.offsetY) >= 0) {
             this.hideHighlight();
-            this._canvas.style.cursor = "pointer";
+            this.viewportElement.style.cursor = "pointer";
             return;
         }
         this._updateHighlight();
     },
 
     _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;
         }
+        if (this.isDragging())
+            return;
         this._updatePopover(entryIndex);
-        this._canvas.style.cursor = this._dataProvider.canJumpToEntry(entryIndex) ? "pointer" : "default";
+        this.viewportElement.style.cursor = this._dataProvider.canJumpToEntry(entryIndex) ? "pointer" : "default";
         this.highlightEntry(entryIndex);
     },
 
     _onMouseOut: function()
     {
         this._lastMouseOffsetX = -1;
         this._lastMouseOffsetY = -1;
         this.hideHighlight();
     },
 
@@ skipping 739 matching lines @@
             element.remove();
         var markerIndex = this._highlightedMarkerIndex;
         if (markerIndex === -1)
             return;
         var marker = this._timelineData().markers[markerIndex];
         var barX = this._timeToPositionClipped(marker.startTime());
         element.title = marker.title();
         var style = element.style;
         style.left = barX + "px";
         style.backgroundColor = marker.color();
-        this.contentElement.appendChild(element);
+        this.viewportElement.appendChild(element);
     },
 
     /**
      * @param {?WebInspector.FlameChart.TimelineData} timelineData
      */
     _processTimelineData: function(timelineData)
     {
         if (!timelineData) {
             this._timelineLevels = null;
             this._visibleLevelOffsets = null;
@@ skipping 20 matching lines @@
             levelIndexes[level][entryCounters[level]++] = i;
         }
         this._timelineLevels = levelIndexes;
         var groups = this._rawTimelineData.groups || [];
         for (var i = 0; i < groups.length; ++i) {
             var expanded = this._groupExpansionState[groups[i].name];
             if (expanded !== undefined)
                 groups[i].expanded = expanded;
         }
         this._updateLevelPositions();
+        this._updateHeight();
     },
 
     _updateLevelPositions: function()
     {
         var levelCount = this._dataProvider.maxStackDepth();
         var groups = this._rawTimelineData.groups || [];
         this._visibleLevelOffsets = new Uint32Array(levelCount + 1);
         this._visibleLevels = new Uint16Array(levelCount);
         this._groupOffsets = new Uint32Array(groups.length + 1);
 
@@ skipping 86 matching lines @@
         var barWidth = barRight - barX;
         var barCenter = barX + barWidth / 2;
         barWidth = Math.max(barWidth, elementMinWidth);
         barX = barCenter - barWidth / 2;
         var barY = this._levelToHeight(timelineData.entryLevels[entryIndex]) - this.scrollOffset();
         var style = element.style;
         style.left = barX + "px";
         style.top = barY + "px";
         style.width = barWidth + "px";
         style.height = this._barHeight - 1 + "px";
-        this.contentElement.appendChild(element);
+        this.viewportElement.appendChild(element);
     },
 
     /**
      * @param {number} time
      * @return {number}
      */
     _timeToPositionClipped: function(time)
     {
         return Number.constrain(this._timeToPosition(time), 0, this._offsetWidth);
     },
@@ skipping 144 matching lines @@
         this.update();
     },
 
     _enabled: function()
     {
         return this._rawTimelineDataLength !== 0;
     },
 
     __proto__: WebInspector.ChartViewport.prototype
 }