Changeset 112528 in webkit

Timestamp:

Mar 29, 2012 6:44:43 AM (12 years ago)

Author:

caseq@chromium.org

Message:

Web Inspector: use canvas to render bars in "vertical overview" mode
​https://bugs.webkit.org/show_bug.cgi?id=82606

Reviewed by Pavel Feldman.

• inspector/front-end/TimelineOverviewPane.js: Use canvas instead of DOM for rendering vertical overview bars.

(WebInspector.TimelineVerticalOverview):
(WebInspector.TimelineVerticalOverview.prototype.update):
(WebInspector.TimelineVerticalOverview.prototype._renderBars):
(WebInspector.TimelineVerticalOverview.prototype._renderBar):
(WebInspector.TimelineVerticalOverview.prototype.getWindowTimes):

• inspector/front-end/timelinePanel.css: Drop styles previously used for DOM-based vertical overview rendering.

(.timeline-vertical-overview-bars):

Location:

trunk/Source/WebCore

Files:

• ChangeLog (modified) (1 diff)
• inspector/front-end/TimelineOverviewPane.js (modified) (4 diffs)
• inspector/front-end/timelinePanel.css (modified) (1 diff)

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2012-03-29  Andrey Kosyakov  <caseq@chromium.org>
+
+        Web Inspector: use canvas to render bars in "vertical overview" mode
+        https://bugs.webkit.org/show_bug.cgi?id=82606
+
+        Reviewed by Pavel Feldman.
+
+        * inspector/front-end/TimelineOverviewPane.js: Use canvas instead of DOM for rendering vertical overview bars.
+        (WebInspector.TimelineVerticalOverview):
+        (WebInspector.TimelineVerticalOverview.prototype.update):
+        (WebInspector.TimelineVerticalOverview.prototype._renderBars):
+        (WebInspector.TimelineVerticalOverview.prototype._renderBar):
+        (WebInspector.TimelineVerticalOverview.prototype.getWindowTimes):
+        * inspector/front-end/timelinePanel.css: Drop styles previously used for DOM-based vertical overview rendering.
+        (.timeline-vertical-overview-bars):
+
 2012-03-29  Andrey Kosyakov  <caseq@chromium.org>
 

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

@@ -801 +801 @@
 WebInspector.TimelineVerticalOverview = function(model) {
     WebInspector.View.call(this);
-    this.element = document.createElement("div");
+    this.element = document.createElement("canvas");
     this.element.className = "timeline-vertical-overview-bars fill";
+    this._model = model;
     this.reset();
-    this._model = model;
+
+    this._maxInnerBarWidth = 10;
+    this._context = this.element.getContext("2d");
+    this._fillStyles = {};
+    this._fillStyles.loading = this._context.createLinearGradient(0, 0, this._maxInnerBarWidth, 0);
+    this._fillStyles.loading.addColorStop(0, "rgb(201, 220, 245)");
+    this._fillStyles.loading.addColorStop(1, "rgb(109, 157, 222)");
+    this._fillStyles.scripting = this._context.createLinearGradient(0, 0, this._maxInnerBarWidth, 0);
+    this._fillStyles.scripting.addColorStop(0, "rgb(251, 222, 168)");
+    this._fillStyles.scripting.addColorStop(1, "rgb(234, 182, 77)");
+    this._fillStyles.rendering = this._context.createLinearGradient(0, 0, this._maxInnerBarWidth, 0);
+    this._fillStyles.rendering.addColorStop(0, "rgb(213, 185, 236)");
+    this._fillStyles.rendering.addColorStop(1, "rgb(137, 62, 200)");
+
+    this._borderStyles = {};
+    this._borderStyles.loading = "rgb(106, 152, 213)";
+    this._borderStyles.scripting = "rgb(223, 175, 77)";
+    this._borderStyles.rendering = "rgb(130, 59, 190)";
 }
 
@@ -835 +853 @@
         this._recordsPerBar = Math.max(1, recordCount * minBarWidth / this.element.clientWidth);
         var numberOfBars = Math.ceil(recordCount / this._recordsPerBar);
-
         this._barTimes = [];
         this._longestBarTime = 0;
-        this.element.removeChildren();
-        var padding = this.element.createChild("div", "padding");
-
-        var statistics = frameCount ? this._aggregateFrames(records, numberOfBars) : this._aggregateRecords(records, numberOfBars);
+        var barHeights = frameCount ? this._aggregateFrames(records, numberOfBars) : this._aggregateRecords(records, numberOfBars);
+
         const paddingTop = 4;
         var scale = (this.element.clientHeight - paddingTop) / this._longestBarTime;
 
-        for (var i = 0; i < statistics.length; ++i)
-            this.element.insertBefore(this._buildBar(statistics[i], scale), padding);
+        this._renderBars(barHeights, scale);
     },
 
@@ -953 +967 @@
     },
 
-    _buildBar: function(statistics, scale)
-    {
-        var outer = document.createElement("div");
-        outer.className = "timeline-bar-vertical";
-        var categories = Object.keys(statistics);
-        for (var i = 0; i < categories.length; ++i) {
+    _renderBars: function(allBarHeights, scale)
+    {
+        // Use real world, 1:1 coordinates in canvas. This will also take care of clearing it.
+        this.element.width = this.element.clientWidth;
+        this.element.height = this.element.clientHeight;
+
+        const maxPadding = 5;
+        this._actualBarWidth = Math.min((this.element.width - 2 * maxPadding) / allBarHeights.length, this._maxInnerBarWidth + maxPadding);
+        var padding = Math.min(Math.floor(this._actualBarWidth / 3), maxPadding);
+
+        for (var i = 0; i < allBarHeights.length; ++i)
+            this._renderBar(maxPadding + this._actualBarWidth * i, this._actualBarWidth - padding , allBarHeights[i], scale);
+    },
+
+    _renderBar: function(left, width, barHeights, scale)
+    {
+        var categories = Object.keys(barHeights);
+        if (!categories.length)
+            return;
+        for (var i = 0, bottomOffset = this.element.height; i < categories.length; ++i) {
             var category = categories[i];
-            var duration = statistics[category];
+            var duration = barHeights[category];
+
             if (!duration)
                 continue;
-            var bar = outer.createChild("div", "timeline-" + category);
-            bar.style.height = (statistics[category] * scale) + "px";
-        }
-        return outer;
+            var height = duration * scale;
+
+            this._context.save();
+            this._context.translate(Math.floor(left) + 0.5, 0);
+            this._context.scale(width / this._maxInnerBarWidth, 1);
+            this._context.fillStyle = this._fillStyles[category];
+            this._context.fillRect(0, bottomOffset - height, this._maxInnerBarWidth, height);
+            this._context.restore();
+
+            this._context.strokeStyle = this._borderStyles[category];
+            this._context.strokeRect(Math.floor(left) + 0.5, Math.floor(bottomOffset - height) + 0.5, Math.floor(width), Math.floor(height));
+            bottomOffset -= height - 1;
+        }
     },
 
@@ -975 +1013 @@
         var rightOffset = windowRight * windowSpan;
         var bars = this.element.children;
-        var offset0 = bars[0] ? bars[0].offsetLeft : 4;
-        var barWidth = 9;
-        if (bars.length > 2) {
-            var offset1 = bars[bars.length - 2].offsetLeft;
-            barWidth = (offset1 - offset0) / (bars.length - 2);
-        }
-        var firstBar = Math.floor(Math.max(leftOffset - offset0, 0) / barWidth);
-        var lastBar = Math.min(Math.ceil((rightOffset - offset0 - 2) / barWidth), this._barTimes.length - 1);
+        var firstBar = Math.floor(Math.max(leftOffset, 0) / this._actualBarWidth);
+        var lastBar = Math.min(Math.ceil((rightOffset - 2) / this._actualBarWidth), this._barTimes.length - 1);
         const snapToRightTolerancePixels = 3;
         return {

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

@@ -587 +587 @@
 
 .timeline-vertical-overview-bars {
-    display: -webkit-box;
-    -webkit-box-align: end;
-    background-color: white;
-    padding-left: 4px;
-    padding-right: 4px;
     z-index: 200;
     background-color: rgba(255, 255, 255, 0.8);
-}
-
-.timeline-vertical-overview-bars .padding {
-    -webkit-box-flex: 100000;
-}
-
-.timeline-vertical-overview-bars .timeline-bar-vertical {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-box-pack: end;
-    width: 12px;
-    padding-right: 2px;
-    -webkit-box-flex: 1;
-}
-
-.timeline-bar-vertical div:first-child {
-    -webkit-border-top-left-radius: 2px;
-    -webkit-border-top-right-radius: 2px;
-}
-
-.timeline-bar-vertical .timeline-loading {
-    background: -webkit-linear-gradient(left, rgb(201, 220, 245), rgb(109, 157, 222));
-    border: solid 1px rgb(106, 152, 213);
-}
-
-.timeline-bar-vertical .timeline-scripting {
-    background: -webkit-linear-gradient(left, rgb(251, 222, 168), rgb(234, 182, 77));
-    border: solid 1px rgb(223, 175, 77);
-}
-
-.timeline-bar-vertical .timeline-rendering {
-    background: -webkit-linear-gradient(left, rgb(213, 185, 236), rgb(137, 62, 200));
-    border: solid 1px rgb(130, 59, 190);
+    width: 100%;
+    height: 100%;
 }