Changeset 146448 in webkit

Timestamp:

Mar 21, 2013, 1:02:10 AM (12 years ago)

Author:

loislo@chromium.org

Message:

Web Inspector: Flame Chart. draw background for the FlameChart overview pane with the CPU aggregated data.
​https://bugs.webkit.org/show_bug.cgi?id=112823

Reviewed by Yury Semikhatsky.

The idea of the patch is to collect the data about stack depth for the each X
and draw a line with help of this data.

• inspector/front-end/FlameChart.js:

(WebInspector.FlameChart):
(WebInspector.FlameChart.prototype.onResize):
(WebInspector.FlameChart.prototype._drawOverviewCanvas):
(WebInspector.FlameChart.prototype.update):

Location:

trunk/Source/WebCore

Files:

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

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2013-03-20  Ilya Tikhonovsky  <loislo@chromium.org>
+
+        Web Inspector: Flame Chart. draw background for the FlameChart overview pane with the CPU aggregated data.
+        https://bugs.webkit.org/show_bug.cgi?id=112823
+
+        Reviewed by Yury Semikhatsky.
+
+        The idea of the patch is to collect the data about stack depth for the each X
+        and draw a line with help of this data.
+
+        * inspector/front-end/FlameChart.js:
+        (WebInspector.FlameChart):
+        (WebInspector.FlameChart.prototype.onResize):
+        (WebInspector.FlameChart.prototype._drawOverviewCanvas):
+        (WebInspector.FlameChart.prototype.update):
+
 2013-03-21  Eugene Klyuchnikov  <eustas@chromium.org>
 

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

@@ -46 +46 @@
     this._overviewCalculator = new WebInspector.FlameChart.OverviewCalculator();
     this._overviewGrid.addEventListener(WebInspector.OverviewGrid.Events.WindowChanged, this._onWindowChanged, this);
+    this._overviewCanvas = this._overviewContainer.createChild("canvas");
 
     this._chartContainer = this.element.createChild("div", "chart-container");
@@ -433 +434 @@
     onResize: function()
     {
+        this._updateOverviewCanvas = true;
         this._hidePopover();
         this._scheduleUpdate();
+    },
+
+    _drawOverviewCanvas: function(width, height)
+    {
+        this._overviewCanvas.width = width;
+        this._overviewCanvas.height = height;
+
+        if (!this._timelineData)
+            return;
+
+        var nodeCount = this._timelineData.nodeCount;
+        var depths = this._timelineData.depths;
+        var startTimes = this._timelineData.startTimes;
+        var durations = this._timelineData.durations;
+        var drawData = new Uint8Array(width);
+        var scaleFactor = width / this._timelineData.totalTime;
+
+        for (var nodeIndex = 0; nodeIndex < nodeCount; ++nodeIndex) {
+            var start = Math.floor(startTimes[nodeIndex] * scaleFactor);
+            var finish = Math.floor((startTimes[nodeIndex] + durations[nodeIndex]) * scaleFactor);
+            for (var x = start; x < finish; ++x)
+                drawData[x] = Math.max(drawData[x], depths[nodeIndex] + 1);
+        }
+
+        var context = this._overviewCanvas.getContext("2d");
+        var yScaleFactor = 2;
+        context.lineWidth = 0.5;
+        context.strokeStyle = "rgba(20,0,0,0.8)";
+        context.fillStyle="rgba(214,225,254, 0.8)";
+        context.moveTo(0, height - 1);
+        for (var x = 0; x < width; ++x)
+            context.lineTo(x, height - drawData[x] * yScaleFactor - 1);
+        context.moveTo(width - 1, height - 1);
+        context.moveTo(0, height - 1);
+        context.fill();
+        context.stroke();
+        context.closePath();
     },
 
@@ -497 +536 @@
             this._overviewGrid.updateDividers(this._overviewCalculator);
         }
+        if (this._updateOverviewCanvas) {
+            this._drawOverviewCanvas(this._overviewContainer.clientWidth, this._overviewContainer.clientHeight);
+            this._updateOverviewCanvas = false;
+        }
     },