DevTools Heap profiler: make use of SummaryBar introduced in WebKit inspector.

BUG=none
TEST=none

Review URL: http://codereview.chromium.org/173605

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@24729 0039d316-1c4b-4281-b951-d872f2087c98

2 files changed, 68 insertions, 43 deletions

diff --git a/webkit/glue/devtools/js/devtools.css b/webkit/glue/devtools/js/devtools.css
index b1df617..eb649c5 100644
--- a/webkit/glue/devtools/js/devtools.css
+++ b/webkit/glue/devtools/js/devtools.css
@@ -72,6 +72,28 @@ body.attached #toolbar {
     position: absolute;
     left: 0;
     right: 0;
-    top: 93px;
+    top: 0;
+    bottom: 93px;
+}
+
+#heap-snapshot-summary {
+    position: absolute;
+    padding-top: 20px;
     bottom: 0;
+    left: 0;
+    right: 0;
+    height: 93px;
+    margin-left: -1px;
+    border-left: 1px solid rgb(102, 102, 102);
+    background-color: rgb(101, 111, 130);
+    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
+    background-repeat: repeat-x;
+    background-position: top;
+    text-align: center;
+    text-shadow: black 0 1px 1px;
+    white-space: nowrap;
+    color: white;
+    -webkit-background-size: 1px 6px;
+    -webkit-background-origin: padding;
+    -webkit-background-clip: padding;
 }
diff --git a/webkit/glue/devtools/js/heap_profiler_panel.js b/webkit/glue/devtools/js/heap_profiler_panel.js
index 67b0922..a1b3fb9 100644
--- a/webkit/glue/devtools/js/heap_profiler_panel.js
+++ b/webkit/glue/devtools/js/heap_profiler_panel.js
@@ -192,19 +192,14 @@ WebInspector.HeapSnapshotView = function(parent, snapshot)
     this.showCountDeltaAsPercent = true;
     this.showSizeDeltaAsPercent = true;
 
-    this.summaryElement = document.createElement("div");
-    this.summaryElement.id = "resources-summary";
-    this.element.appendChild(this.summaryElement);
+    // TODO(mnaganov): Fix in WebKit: SummaryBar must not use global resourceCategories.
+    WebInspector.resourceCategories["code"] = {title: WebInspector.UIString("Code")};
+    WebInspector.resourceCategories["data"] = {title: WebInspector.UIString("Objects and Data")};
 
-    this.summaryGraphElement = document.createElement("canvas");
-    this.summaryGraphElement.setAttribute("width", "450");
-    this.summaryGraphElement.setAttribute("height", "38");
-    this.summaryGraphElement.id = "resources-summary-graph";
-    this.summaryElement.appendChild(this.summaryGraphElement);
-
-    this.legendElement = document.createElement("div");
-    this.legendElement.id = "resources-graph-legend";
-    this.summaryElement.appendChild(this.legendElement);
+    this.summaryBar = new WebInspector.SummaryBar(this.summaryColors, this.summaryOrder);
+    this.summaryBar.element.id = "heap-snapshot-summary";
+    this.summaryBar.calculator = new WebInspector.HeapSummaryCalculator(snapshot.used);
+    this.element.appendChild(this.summaryBar.element);
 
     var columns = { "cons": { title: WebInspector.UIString("Constructor"), disclosure: true, sortable: true },
                     "count": { title: WebInspector.UIString("Count"), width: "54px", sortable: true },
@@ -238,6 +233,11 @@ WebInspector.HeapSnapshotView = function(parent, snapshot)
 };
 
 WebInspector.HeapSnapshotView.prototype = {
+
+    summaryColors: {data: {r: 47, g: 102, b: 236}, code: {r: 255, g: 121, b: 0}, other: {r: 186, g: 186, b: 186}},
+
+    summaryOrder: ["code", "data", "other"],
+
     get statusBarItems()
     {
         return [this.baseSelectElement, this.percentButton.element];
@@ -403,49 +403,52 @@ WebInspector.HeapSnapshotView.prototype = {
 
     _updateSummaryGraph: function()
     {
+        this.summaryBar.calculator.showAsPercent = this._isShowingAsPercent;
+        this.summaryBar.update(this.snapshot.lowlevels);
+    }
+};
+
+WebInspector.HeapSnapshotView.prototype.__proto__ = WebInspector.View.prototype;
+
+WebInspector.HeapSummaryCalculator = function(total)
+{
+    this.total = total;
+}
+
+WebInspector.HeapSummaryCalculator.prototype = {
+    computeSummaryValues: function(lowLevels)
+    {
         function highFromLow(type) {
             if (type == "CODE_TYPE" || type == "SHARED_FUNCTION_INFO_TYPE" || type == "SCRIPT_TYPE") return "code";
             if (type == "STRING_TYPE" || type == "HEAP_NUMBER_TYPE" || type.match(/^JS_/) || type.match(/_ARRAY_TYPE$/)) return "data";
             return "other";
         }
-        var lowLevels = this.snapshot.lowlevels;
         var highLevels = {data: 0, code: 0, other: 0};
         for (var item in lowLevels) {
             var highItem = highFromLow(item);
             highLevels[highItem] += lowLevels[item].size;
         }
+        return {categoryValues: highLevels};
+    },
 
-        var colors = {data: [47, 102, 236], code: [255, 121, 0], other: [186, 186, 186]};
-        var titles = {data: WebInspector.UIString("Objects and Data"), code: WebInspector.UIString("Code"), other: WebInspector.UIString("Other")};
-        var itemsOrder = ["code", "data", "other"];
-        var fillSegments = [];
-        this.legendElement.removeChildren();
-        for (var i = 0; i < itemsOrder.length; ++i) {
-            var highItem = itemsOrder[i];
-            var colorString = "rgb(" + colors[highItem].join(",") + ")";
-            var size = highLevels[highItem];
-            fillSegments.push({color: colorString, value: size});
-  
-            var sizeStr;
-            if (this._isShowingAsPercent)
-                sizeStr = WebInspector.UIString("%.2f%%", size / this.snapshot.used * 100.0);
-            else
-                sizeStr = Number.bytesToString(size);
-            var legendLabel = this._makeLegendElement(titles[highItem], sizeStr, colorString);
-            this.legendElement.appendChild(legendLabel);
-        }
-        this._drawSummaryGraph(fillSegments);
-    }
-};
+    formatValue: function(value)
+    {
+        if (this.showAsPercent)
+            return WebInspector.UIString("%.2f%%", value / this.total * 100.0);
+        else
+            return Number.bytesToString(value);
+    },
 
-// Import summary graph drawing functions from ResourcesPanel.
-// TODO(mnaganov): Refactor ResourcesPanel to make this functionality public.
-WebInspector.HeapSnapshotView.prototype._drawSwatch = WebInspector.ResourcesPanel.prototype._drawSwatch;
-WebInspector.HeapSnapshotView.prototype._drawSummaryGraph = WebInspector.ResourcesPanel.prototype._drawSummaryGraph;
-WebInspector.HeapSnapshotView.prototype._fadeOutRect = WebInspector.ResourcesPanel.prototype._fadeOutRect;
-WebInspector.HeapSnapshotView.prototype._makeLegendElement = WebInspector.ResourcesPanel.prototype._makeLegendElement;
+    get showAsPercent()
+    {
+        return this._showAsPercent;
+    },
 
-WebInspector.HeapSnapshotView.prototype.__proto__ = WebInspector.View.prototype;
+    set showAsPercent(x)
+    {
+        this._showAsPercent = x;
+    }
+}
 
 WebInspector.HeapSnapshotSidebarTreeElement = function(snapshot)
 {