Changeset 147224 in webkit

Timestamp:

Mar 29, 2013 9:47:27 AM (11 years ago)

Author:

loislo@chromium.org

Message:

Web Inspector: Flame Chart. Remove hopping ancorElement and use anchorBox instead.
​https://bugs.webkit.org/show_bug.cgi?id=113579

Reviewed by Pavel Feldman.

Initially I made a fake anchor element and moved it according to the highlighted element position.
It was a hack and after ​http://trac.webkit.org/changeset/147209 I'm able to remove it.

Drive by fix: the code was moved from onMouseMove to getPopoverAnchor.

• inspector/front-end/FlameChart.js:

(WebInspector.FlameChart):
(WebInspector.FlameChart.prototype._getPopoverAnchor):
-(WebInspector.FlameChart.prototype._onMouseMove)

• inspector/front-end/flameChart.css:

Location:

trunk/Source/WebCore

Files:

• ChangeLog (modified) (1 diff)
• inspector/front-end/FlameChart.js (modified) (3 diffs)
• inspector/front-end/flameChart.css (modified) (1 diff)

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2013-03-29  Ilya Tikhonovsky  <loislo@chromium.org>
+
+        Web Inspector: Flame Chart. Remove hopping ancorElement and use anchorBox instead.
+        https://bugs.webkit.org/show_bug.cgi?id=113579
+
+        Reviewed by Pavel Feldman.
+
+        Initially I made a fake anchor element and moved it according to the highlighted element position.
+        It was a hack and after http://trac.webkit.org/changeset/147209 I'm able to remove it.
+
+        Drive by fix: the code was moved from onMouseMove to getPopoverAnchor.
+
+        * inspector/front-end/FlameChart.js:
+        (WebInspector.FlameChart):
+        (WebInspector.FlameChart.prototype._getPopoverAnchor):
+        -(WebInspector.FlameChart.prototype._onMouseMove)
+        * inspector/front-end/flameChart.css:
+
 2013-03-29  Kondapally Kalyan  <kalyan.kondapally@intel.com>
 

trunk/Source/WebCore/inspector/front-end/FlameChart.js

@@ -62 +62 @@
     this._minWidth = 1;
     this._paddingLeft = 15;
-    this._canvas.addEventListener("mousemove", this._onMouseMove.bind(this), false);
     this._canvas.addEventListener("mousewheel", this._onMouseWheel.bind(this), false);
     this.element.addEventListener("click", this._onClick.bind(this), false);
     this._popoverHelper = new WebInspector.PopoverHelper(this._chartContainer, this._getPopoverAnchor.bind(this), this._showPopover.bind(this));
     this._popoverHelper.setTimeout(250);
-    this._anchorElement = this._chartContainer.createChild("span");
-    this._anchorElement.className = "item-anchor";
+    this._anchorBox = new AnchorBox(0, 0, 0, 0);
     this._linkifier = new WebInspector.Linkifier();
     this._highlightedNodeIndex = -1;
@@ -394 +392 @@
     },
 
-    _getPopoverAnchor: function()
-    {
-        if (this._highlightedNodeIndex === -1 || this._isDragging)
+    _getPopoverAnchor: function(element, event)
+    {
+        if (this._isDragging)
             return null;
-        return this._anchorElement;
+
+        var nodeIndex = this._coordinatesToNodeIndex(event.offsetX, event.offsetY);
+
+        this._highlightedNodeIndex = nodeIndex;
+        this.update();
+
+        if (nodeIndex === -1)
+            return null;
+
+        var timelineEntries = this._timelineData.entries;
+
+        var anchorLeft = Math.floor(timelineEntries[nodeIndex].startTime * this._timeToPixel - this._pixelWindowLeft + this._paddingLeft);
+        var anchorTop = Math.floor(this._canvas.height - (timelineEntries[nodeIndex].depth + 1) * this._barHeight);
+
+        var anchorWidth = Math.floor(timelineEntries[nodeIndex].duration * this._timeToPixel);
+        if (anchorLeft < 0) {
+            anchorWidth += anchorLeft;
+            anchorLeft = 0;
+        }
+
+        anchorLeft = Number.constrain(anchorLeft, 0, this._canvas.width);
+        anchorWidth = Number.constrain(anchorWidth, 0, this._canvas.width - anchorLeft);
+
+        var canvasOffsetLeft = event.pageX - event.offsetX;
+        var canvasOffsetTop = event.pageY - event.offsetY;
+        return new AnchorBox(anchorLeft + canvasOffsetLeft, anchorTop + canvasOffsetTop, anchorWidth, this._barHeight);
     },
 
@@ -433 +456 @@
         var node = this._timelineData.entries[this._highlightedNodeIndex].node;
         this.dispatchEventToListeners(WebInspector.FlameChart.Events.SelectedNode, node);
-    },
-
-    _onMouseMove: function(e)
-    {
-        if (this._isDragging)
-            return;
-        var nodeIndex = this._coordinatesToNodeIndex(e.offsetX, e.offsetY);
-        if (nodeIndex === this._highlightedNodeIndex)
-            return;
-        this._highlightedNodeIndex = nodeIndex;
-        this.update();
-
-        if (nodeIndex === -1)
-            return;
-
-        var timelineEntries = this._timelineData.entries;
-
-        var anchorLeft = Math.floor(timelineEntries[nodeIndex].startTime * this._timeToPixel - this._pixelWindowLeft);
-        anchorLeft = Number.constrain(anchorLeft, 0, this._canvas.width);
-
-        var anchorWidth = Math.floor(timelineEntries[nodeIndex].duration * this._timeToPixel);
-
-        anchorWidth = Number.constrain(anchorWidth, 0, this._canvas.width - anchorLeft);
-
-        var style = this._anchorElement.style;
-        style.width = anchorWidth + "px";
-        style.height = this._barHeight + "px";
-        style.left = anchorLeft + "px";
-        style.top = Math.floor(this._canvas.height - (timelineEntries[nodeIndex].depth + 1) * this._barHeight) + "px";
     },
 

trunk/Source/WebCore/inspector/front-end/flameChart.css

@@ -1 @@
-.chart-container .item-anchor {
-    position: absolute;
-    z-index: -100;
-}
-
 .overview-container {
     overflow: hidden;