Web Inspector: Flame Chart. Provide node context info in a popover when mouse hovers...

https://bugs.webkit.org/show_bug.cgi?id=111442

Reviewed by Yury Semikhatsky.

FlameChart is a canvas so it is not possible to attach the popover to the items on it.
It would be a bit tricky to support an offset due to complex behaviour of the popover.
The simplest solution is to create a fake anchor element and move it to the right position.

* inspector/front-end/FlameChart.js:
(WebInspector.FlameChart):
(WebInspector.FlameChart.prototype._getPopoverAnchor):
(WebInspector.FlameChart.prototype._showPopover):
(WebInspector.FlameChart.prototype._onMouseMove):
(WebInspector.FlameChart.prototype.findNodeCallback):
(WebInspector.FlameChart.prototype._coordinatesToNode):
(WebInspector.FlameChart.prototype.onResize):
* inspector/front-end/flameChart.css:
(.flame-chart .item-anchor):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@144888 268f45cc-cd09-0410-ab3c-d52691b4dbfc

diff --git a/Source/WebCore/ChangeLog b/Source/WebCore/ChangeLog
index 4f3e047..a6426ad 100644 (file)
--- a/Source/WebCore/ChangeLog
+++ b/Source/WebCore/ChangeLog
@@ -1,3 +1,25 @@
+2013-03-05  Ilya Tikhonovsky  <loislo@chromium.org>
+
+        Web Inspector: Flame Chart. Provide node context info in a popover when mouse hovers over a flame chart item.
+        https://bugs.webkit.org/show_bug.cgi?id=111442
+
+        Reviewed by Yury Semikhatsky.
+
+        FlameChart is a canvas so it is not possible to attach the popover to the items on it.
+        It would be a bit tricky to support an offset due to complex behaviour of the popover.
+        The simplest solution is to create a fake anchor element and move it to the right position.
+
+        * inspector/front-end/FlameChart.js:
+        (WebInspector.FlameChart):
+        (WebInspector.FlameChart.prototype._getPopoverAnchor):
+        (WebInspector.FlameChart.prototype._showPopover):
+        (WebInspector.FlameChart.prototype._onMouseMove):
+        (WebInspector.FlameChart.prototype.findNodeCallback):
+        (WebInspector.FlameChart.prototype._coordinatesToNode):
+        (WebInspector.FlameChart.prototype.onResize):
+        * inspector/front-end/flameChart.css:
+        (.flame-chart .item-anchor):
+
 2013-03-05  Csaba Osztrogonác  <ossy@webkit.org>
 
         Unreviewed buildfix after r144787. Add missing USE(GRAPHICS_SURFACE) guards.

diff --git a/Source/WebCore/inspector/front-end/FlameChart.js b/Source/WebCore/inspector/front-end/FlameChart.js
index c4b316e..ad2e03e 100644 (file)
--- a/Source/WebCore/inspector/front-end/FlameChart.js
+++ b/Source/WebCore/inspector/front-end/FlameChart.js
@@ -46,6 +46,10 @@ WebInspector.FlameChart = function(cpuProfileView)
     this._minWidth = 3;
     this.element.onmousemove = this._onMouseMove.bind(this);
     this.element.onclick = this._onClick.bind(this);
+    this._popoverHelper = new WebInspector.PopoverHelper(this.element, this._getPopoverAnchor.bind(this), this._showPopover.bind(this));
+    this._anchorElement = this.element.createChild("span");
+    this._anchorElement.className = "item-anchor";
+    this._linkifier = new WebInspector.Linkifier();
 }
 
 WebInspector.FlameChart.Events = {
@@ -53,6 +57,29 @@ WebInspector.FlameChart.Events = {
 }
 
 WebInspector.FlameChart.prototype = {
+    _getPopoverAnchor: function()
+    {
+        if (!this._highlightedNode)
+            return null;
+        return this._anchorElement;
+    },
+
+    _showPopover: function(anchor, popover)
+    {
+        var node = this._highlightedNode;
+        var contentHelper = new WebInspector.PopoverContentHelper(node.functionName);
+        contentHelper.appendTextRow(WebInspector.UIString("Total time"), Number.secondsToString(node.totalTime / 1000, true));
+        contentHelper.appendTextRow(WebInspector.UIString("Self time"), Number.secondsToString(node.selfTime / 1000, true));
+        if (node.numberOfCalls)
+            contentHelper.appendTextRow(WebInspector.UIString("Number of calls"), node.numberOfCalls);
+        if (node.url) {
+            var link = this._linkifier.linkifyLocation(node.url, node.lineNumber);
+            contentHelper.appendElementRow("Location", link);
+        }
+
+        popover.show(contentHelper._contentTable, anchor);
+    },
+
     _onClick: function(e)
     {
         if (!this._highlightedNode)
@@ -63,10 +90,14 @@ WebInspector.FlameChart.prototype = {
     _onMouseMove: function(e)
     {
         var node = this._coordinatesToNode(e.offsetX, e.offsetY);
-        if (node !== this._highlightedNode) {
-            this._highlightedNode = node;
-            this.update();
-        }
+        if (typeof node === 'undefined' && !this._highlightedNode)
+            return;
+        if (node === this._highlightedNode)
+            return;
+        if (this._highlightedNode)
+            this._popoverHelper.hidePopover();
+        this._highlightedNode = node;
+        this.update();
     },
 
     /**
@@ -82,8 +113,14 @@ WebInspector.FlameChart.prototype = {
 
         function findNodeCallback(offset, level, node)
         {
-            if (cursorLevel > level && cursorLevel < level + 1 && cursorOffset > offset && cursorOffset < offset + node.totalTime)
+            if (cursorLevel > level && cursorLevel < level + 1 && cursorOffset > offset && cursorOffset < offset + node.totalTime) {
                 cursorNode = node;
+                var style = this._anchorElement.style;
+                style.width = Math.floor(node.totalTime * this._xScaleFactor) + "px";
+                style.height = this._yScaleFactor + "px";
+                style.left = Math.floor(offset * this._xScaleFactor) + "px";
+                style.top = Math.floor(this._canvas.height - (level + 1) * this._yScaleFactor) + "px";
+            }
         }
         this._forEachNode(findNodeCallback.bind(this));
         return cursorNode;
@@ -92,6 +129,7 @@ WebInspector.FlameChart.prototype = {
     onResize: function()
     {
         this.draw(this.element.clientWidth, this.element.clientHeight);
+        this._popoverHelper.hidePopover();
     },
 
     /**

diff --git a/Source/WebCore/inspector/front-end/flameChart.css b/Source/WebCore/inspector/front-end/flameChart.css
index 6776a64..9f52ef0 100644 (file)
--- a/Source/WebCore/inspector/front-end/flameChart.css
+++ b/Source/WebCore/inspector/front-end/flameChart.css
@@ -2,3 +2,8 @@
     height: 100%;
     overflow: hidden;
 }
+
+.flame-chart .item-anchor {
+    position: absolute;
+    z-index: -100;
+}