Web Inspector: Timeline memory graph would have been more useful if it had used minUs...
authorloislo@chromium.org <loislo@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 9 Feb 2012 13:04:13 +0000 (13:04 +0000)
committerloislo@chromium.org <loislo@chromium.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 9 Feb 2012 13:04:13 +0000 (13:04 +0000)
https://bugs.webkit.org/show_bug.cgi?id=78222

Reviewed by Pavel Feldman.

* inspector/front-end/TimelineOverviewPane.js:
(WebInspector.HeapGraph):
(WebInspector.HeapGraph.prototype.update):
* inspector/front-end/timelinePanel.css:
(.memory-graph-label):
(.max.memory-graph-label):
(.min.memory-graph-label):

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

Source/WebCore/ChangeLog
Source/WebCore/inspector/front-end/TimelineOverviewPane.js
Source/WebCore/inspector/front-end/timelinePanel.css

index 0d0bd5e70c2e7b6f51e3a2a82eaccbce7566f3d4..b15d4c227947a7f14e89b0ac0223f7aec16acfea 100644 (file)
@@ -1,3 +1,18 @@
+2012-02-09  Ilya Tikhonovsky  <loislo@chromium.org>
+
+        Web Inspector: Timeline memory graph would have been more useful if it had used minUsedHeapSize as the lower bound. Currently it uses zero as the lower bound.
+        https://bugs.webkit.org/show_bug.cgi?id=78222
+
+        Reviewed by Pavel Feldman.
+
+        * inspector/front-end/TimelineOverviewPane.js:
+        (WebInspector.HeapGraph):
+        (WebInspector.HeapGraph.prototype.update):
+        * inspector/front-end/timelinePanel.css:
+        (.memory-graph-label):
+        (.max.memory-graph-label):
+        (.min.memory-graph-label):
+
 2012-02-09  Alexander Pavlov  <apavlov@chromium.org>
 
         Web Inspector: Update protocol and UI to follow bug 77204 (Kill per-Attribute style declarations)
index fe68aa28bfcb4f2c97c5368907b45ffc8eae8147..8718f19e08b0c5856ba3ca850c592a03d582bb99 100644 (file)
@@ -524,12 +524,17 @@ WebInspector.HeapGraph = function() {
     this._canvas = document.createElement("canvas");
 
     this._maxHeapSizeLabel = document.createElement("div");
+    this._maxHeapSizeLabel.addStyleClass("max");
     this._maxHeapSizeLabel.addStyleClass("memory-graph-label");
+    this._minHeapSizeLabel = document.createElement("div");
+    this._minHeapSizeLabel.addStyleClass("min");
+    this._minHeapSizeLabel.addStyleClass("memory-graph-label");
 
     this._element = document.createElement("div");
     this._element.addStyleClass("hidden");
     this._element.appendChild(this._canvas);
     this._element.appendChild(this._maxHeapSizeLabel);
+    this._element.appendChild(this._minHeapSizeLabel);
 }
 
 WebInspector.HeapGraph.prototype = {
@@ -560,30 +565,33 @@ WebInspector.HeapGraph.prototype = {
         if (!records.length)
             return;
 
-        var maxTotalHeapSize = 0;
+        const lowerOffset = 3;
+        var maxUsedHeapSize = 0;
+        var minUsedHeapSize = 100000000000;
         var minTime;
         var maxTime;
         this._forAllRecords(records, function(r) {
-            if (r.totalHeapSize && r.totalHeapSize > maxTotalHeapSize)
-                maxTotalHeapSize = r.totalHeapSize;
+            maxUsedHeapSize = Math.max(maxUsedHeapSize, r.usedHeapSize || maxUsedHeapSize);
+            minUsedHeapSize = Math.min(minUsedHeapSize, r.usedHeapSize || minUsedHeapSize);
 
             if (typeof minTime === "undefined" || r.startTime < minTime)
                 minTime = r.startTime;
             if (typeof maxTime === "undefined" || r.endTime > maxTime)
                 maxTime = r.endTime;
         });
+        minUsedHeapSize = Math.min(minUsedHeapSize, maxUsedHeapSize);
 
         var width = this._canvas.width;
-        var height = this._canvas.height;
+        var height = this._canvas.height - lowerOffset;
         var xFactor = width / (maxTime - minTime);
-        var yFactor = height / maxTotalHeapSize;
+        var yFactor = height / (maxUsedHeapSize - minUsedHeapSize);
 
         var histogram = new Array(width);
         this._forAllRecords(records, function(r) {
             if (!r.usedHeapSize)
                 return;
              var x = Math.round((r.endTime - minTime) * xFactor);
-             var y = Math.round(r.usedHeapSize * yFactor);
+             var y = Math.round((r.usedHeapSize - minUsedHeapSize) * yFactor);
              histogram[x] = Math.max(histogram[x] || 0, y);
         });
 
@@ -620,7 +628,8 @@ WebInspector.HeapGraph.prototype = {
         ctx.fill();
         ctx.closePath();
 
-        this._maxHeapSizeLabel.textContent = Number.bytesToString(maxTotalHeapSize);
+        this._maxHeapSizeLabel.textContent = Number.bytesToString(maxUsedHeapSize);
+        this._minHeapSizeLabel.textContent = Number.bytesToString(minUsedHeapSize);
     },
 
     _clear: function(ctx) {
index f81afef3f52cadfd22a3d2cc652d0bb3762c049a..3dc8c115f76eecad8e21c6c86eb708f1cb99845d 100644 (file)
 
 .memory-graph-label {
     position: absolute;
-    top: 5px;
     left: 5px;
     font-size: 9px;
     color: rgb(50%, 50%, 50%);
     white-space: nowrap;
 }
 
+.max.memory-graph-label {
+    top: 5px;
+}
+
+.min.memory-graph-label {
+    bottom: 5px;
+}
+
 #timeline-memory-splitter {
     position: absolute;
     z-index: 5;