DevTools Heap profiler: add a bar with Code / Objects and Data / Others size distribution.

This helps to reveal memory size occupied by compiled code and engine's data. And this is also an eye candy.

BUG=none
TEST=none

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

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

4 files changed, 90 insertions, 3 deletions

diff --git a/webkit/glue/devtools/js/devtools.css b/webkit/glue/devtools/js/devtools.css
index f57464c..f542d2a 100644
--- a/webkit/glue/devtools/js/devtools.css
+++ b/webkit/glue/devtools/js/devtools.css
@@ -72,5 +72,10 @@ body.attached #toolbar {
 
 .heap-snapshot-view .data-grid {
     border: none;
-    height: 100%;
+    max-height: 100%;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 93px;
+    bottom: 0;
 }
diff --git a/webkit/glue/devtools/js/devtools_host_stub.js b/webkit/glue/devtools/js/devtools_host_stub.js
index b53c990..0c84e5e 100644
--- a/webkit/glue/devtools/js/devtools_host_stub.js
+++ b/webkit/glue/devtools/js/devtools_host_stub.js
@@ -41,6 +41,10 @@ RemoteDebuggerAgentStub.prototype.StartProfiling = function(modules) {
           'heap-sample-begin,"Heap","allocated",' +
               (new Date()).getTime() + '\n' +
           'heap-sample-stats,"Heap","allocated",10000,1000\n';
+      this.heapProfLog_ +=
+          'heap-sample-item,STRING_TYPE,100,1000\n' +
+          'heap-sample-item,CODE_TYPE,10,200\n' +
+          'heap-sample-item,MAP_TYPE,20,350\n';
       var sample = RemoteDebuggerAgentStub.HeapSamples[this.heapProfSample_];
       if (++this.heapProfSample_ == RemoteDebuggerAgentStub.HeapSamples.length)
           this.heapProfSample_ = 0;
diff --git a/webkit/glue/devtools/js/heap_profiler_panel.js b/webkit/glue/devtools/js/heap_profiler_panel.js
index 49f34b3..36dd3ab 100644
--- a/webkit/glue/devtools/js/heap_profiler_panel.js
+++ b/webkit/glue/devtools/js/heap_profiler_panel.js
@@ -194,6 +194,20 @@ 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);
+
+    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);
+
     var columns = { "cons": { title: WebInspector.UIString("Constructor"), disclosure: true, sortable: true },
                     "count": { title: WebInspector.UIString("Count"), width: "54px", sortable: true },
                     "size": { title: WebInspector.UIString("Size"), width: "72px", sort: "descending", sortable: true },
@@ -261,6 +275,8 @@ WebInspector.HeapSnapshotView.prototype = {
         var count = children.length;
         for (var index = 0; index < count; ++index)
             this.dataGrid.appendChild(children[index]);
+
+        this._updateSummaryGraph();
     },
 
     refreshShowAsPercents: function()
@@ -276,6 +292,7 @@ WebInspector.HeapSnapshotView.prototype = {
             child.refresh();
             child = child.traverseNextNode(false, null, true);
         }
+        this._updateSummaryGraph();
     },
 
     _changeBase: function() {
@@ -384,9 +401,52 @@ WebInspector.HeapSnapshotView.prototype = {
             this.percentButton.title = WebInspector.UIString("Show counts and sizes as percentages.");
             this.percentButton.toggled = false;
         }
+    },
+
+    _updateSummaryGraph: function()
+    {
+        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;
+        }
+
+        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);
     }
 };
 
+// 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;
+
 WebInspector.HeapSnapshotView.prototype.__proto__ = WebInspector.View.prototype;
 
 WebInspector.HeapSnapshotSidebarTreeElement = function(snapshot)
diff --git a/webkit/glue/devtools/js/profiler_processor.js b/webkit/glue/devtools/js/profiler_processor.js
index 556841d..65cbeee 100644
--- a/webkit/glue/devtools/js/profiler_processor.js
+++ b/webkit/glue/devtools/js/profiler_processor.js
@@ -177,13 +177,14 @@ devtools.profiler.Processor = function() {
           processor: this.processHeapSampleBegin_ },
       'heap-sample-stats': { parsers: [null, null, parseInt, parseInt],
           processor: this.processHeapSampleStats_ },
+      'heap-sample-item': { parsers: [null, parseInt, parseInt],
+          processor: this.processHeapSampleItem_ },
       'heap-js-cons-item': { parsers: [null, parseInt, parseInt],
           processor: this.processHeapJsConsItem_ },
       'heap-sample-end': { parsers: [null, null],
           processor: this.processHeapSampleEnd_ },
       // Not used in DevTools Profiler.
       'shared-library': null,
-      'heap-sample-item': null,
       // Obsolete row types.
       'code-allocate': null,
       'begin-code-region': null,
@@ -388,6 +389,7 @@ devtools.profiler.Processor.prototype.processHeapSampleBegin_ = function(
   this.currentHeapSnapshot_ = {
       number: this.heapSnapshotId_++,
       entries: {},
+      lowlevels: {},
       ticks: ticks
   };
 };
@@ -401,6 +403,15 @@ devtools.profiler.Processor.prototype.processHeapSampleStats_ = function(
 };
 
 
+devtools.profiler.Processor.prototype.processHeapSampleItem_ = function(
+    item, number, size) {
+  if (!this.currentHeapSnapshot_) return;
+  this.currentHeapSnapshot_.lowlevels[item] = {
+    type: item, count: number, size: size
+  };
+};
+
+
 devtools.profiler.Processor.prototype.processHeapJsConsItem_ = function(
     item, number, size) {
   if (!this.currentHeapSnapshot_) return;
@@ -413,8 +424,15 @@ devtools.profiler.Processor.prototype.processHeapJsConsItem_ = function(
 devtools.profiler.Processor.prototype.processHeapSampleEnd_ = function(
     space, state) {
   if (space != 'Heap') return;
-  WebInspector.panels.heap.addSnapshot(this.currentHeapSnapshot_);
+  var snapshot = this.currentHeapSnapshot_;
   this.currentHeapSnapshot_ = null;
+  // For some reason, 'used' from 'heap-sample-stats' sometimes differ from
+  // the sum of objects sizes. To avoid discrepancy, we re-calculate 'used'.
+  snapshot.used = 0;
+  for (var item in snapshot.lowlevels) {
+      snapshot.used += snapshot.lowlevels[item].size;
+  }
+  WebInspector.panels.heap.addSnapshot(snapshot);
 };