DevTools: [TrackingHeapProfiler] Provide a chart with living heap date at recording time.

Source/devtools/front_end/HeapSnapshotView.js

Index: Source/devtools/front_end/HeapSnapshotView.js
diff --git a/Source/devtools/front_end/HeapSnapshotView.js b/Source/devtools/front_end/HeapSnapshotView.js
index 71a100baff9a1a88d2cb5717630e0c6347720d57..1d5fb917abe53293fdb1ae448fc06c9d70c99dc3 100644
--- a/Source/devtools/front_end/HeapSnapshotView.js
+++ b/Source/devtools/front_end/HeapSnapshotView.js
@@ -775,6 +775,7 @@ WebInspector.HeapSnapshotProfileType = function()
 }
 
 WebInspector.HeapSnapshotProfileType.TypeId = "HEAP";
+WebInspector.HeapSnapshotProfileType.HeapStatsUpdate = "HeapStatsUpdate";
 
 WebInspector.HeapSnapshotProfileType.prototype = {
     /**
@@ -870,6 +871,9 @@ WebInspector.HeapSnapshotProfileType.prototype = {
      */
     lastSeenObjectId: function(lastSeenObjectId, timestamp)
     {
+        if (!this._profileSamples)
+            return;
+
         this._profileSamples.ids[this._currentIndex] = lastSeenObjectId;
         this._profileSamples.timestamps[this._currentIndex] = timestamp;
         if (!this._profileSamples.max[this._currentIndex]) {
@@ -877,6 +881,7 @@ WebInspector.HeapSnapshotProfileType.prototype = {
             this._profileSamples.sizes[this._currentIndex] = 0;
         }
         ++this._currentIndex;
+        this.dispatchEventToListeners(WebInspector.HeapSnapshotProfileType.HeapStatsUpdate, this._profileSamples);
     },
 
     get  treeItemTitle()
@@ -1013,6 +1018,11 @@ WebInspector.TrackingHeapSnapshotProfileType = function(profilesPanel, profileTy
 WebInspector.TrackingHeapSnapshotProfileType.TypeId = "HEAP-RECORD";
 
 WebInspector.TrackingHeapSnapshotProfileType.prototype = {
+    hasTemporaryView: function()
+    {
+        return true;
+    },
+
     get buttonTooltip()
     {
         return this._recording ? WebInspector.UIString("Stop recording heap profile.") : WebInspector.UIString("Start recording heap profile.");
@@ -1110,6 +1120,11 @@ WebInspector.HeapProfileHeader.prototype = {
      */
     createView: function(profilesPanel)
     {
+        if (this._profileType.id === WebInspector.TrackingHeapSnapshotProfileType.TypeId) {
+            var view = new WebInspector.HeapTrackingOverviewGrid(this);
+            this._profileType._parentType.addEventListener(WebInspector.HeapSnapshotProfileType.HeapStatsUpdate, view._onHeapStatsUpdate.bind(view));
+            return view;
+        }
         return new WebInspector.HeapSnapshotView(profilesPanel, this);
     },
 
@@ -1337,7 +1352,7 @@ WebInspector.HeapSnapshotLoadFromFileDelegate.prototype = {
 /**
  * @constructor
  * @extends {WebInspector.View}
- * @param {!WebInspector.HeapProfileHeader} heapProfileHeader
+ * @param {?WebInspector.HeapProfileHeader} heapProfileHeader
  */
 WebInspector.HeapTrackingOverviewGrid = function(heapProfileHeader)
 {
@@ -1352,10 +1367,14 @@ WebInspector.HeapTrackingOverviewGrid = function(heapProfileHeader)
     this._overviewCalculator = new WebInspector.HeapTrackingOverviewGrid.OverviewCalculator();
     this._overviewGrid.addEventListener(WebInspector.OverviewGrid.Events.WindowChanged, this._onWindowChanged, this);
 
-    this._profileSamples = heapProfileHeader._profileSamples;
-    var timestamps = this._profileSamples.timestamps;
-    var startTime = timestamps[0];
-    this._totalTime = timestamps[timestamps.length - 1] - startTime;
+    this._minimumTimeDelta = 60000;
+    if (heapProfileHeader && heapProfileHeader._profileSamples) {
+        this._profileSamples = heapProfileHeader._profileSamples;
+        var timestamps = this._profileSamples.timestamps;
+        var startTime = timestamps[0];
+        this._totalTime = timestamps[timestamps.length - 1] - startTime;
+    } else
+        this._resetTrackingData();
     this._windowLeft = 0.0;
     this._windowRight = 1.0;
 }
@@ -1363,12 +1382,20 @@ WebInspector.HeapTrackingOverviewGrid = function(heapProfileHeader)
 WebInspector.HeapTrackingOverviewGrid.IdsRangeChanged = "IdsRangeChanged";
 
 WebInspector.HeapTrackingOverviewGrid.prototype = {
+    _resetTrackingData: function(profileSamples)
+    {
+        this._totalTime = this._minimumTimeDelta;
+        this._profileSamples = profileSamples;
+    },
+
     /**
       * @param {number} width
       * @param {number} height
       */
     _drawOverviewCanvas: function(width, height)
     {
+        if (!this._profileSamples)
+            return;
         var sizes = this._profileSamples.sizes;
         var usedSizes = this._profileSamples.max;
         var timestamps = this._profileSamples.timestamps;
@@ -1385,7 +1412,7 @@ WebInspector.HeapTrackingOverviewGrid.prototype = {
             var size = 0;
             var currentX = 0;
             for (var i = 1; i < timestamps.length; ++i) {
-                var x  = Math.floor((timestamps[i] - startTime) * scaleFactor) ;
+                var x  = Math.floor((timestamps[i] - startTime) * scaleFactor);
                 if (x !== currentX) {
                     if (size)
                         callback(currentX, size);
@@ -1414,10 +1441,20 @@ WebInspector.HeapTrackingOverviewGrid.prototype = {
         this._overviewCanvas.style.height = height + "px";
         var yScaleFactor = height / (maxUsedSize * 1.1);
         var startTime = timestamps[0];
+        var endTime = timestamps[timestamps.length - 1];
 
         var context = this._overviewCanvas.getContext("2d");
         context.scale(window.devicePixelRatio, window.devicePixelRatio);
 
+        context.beginPath();
+        context.lineWidth = 2;
+        context.strokeStyle = "rgba(192, 192, 192, 0.6)";
+        var currentX  = Math.floor((endTime - startTime) * scaleFactor);
+        context.moveTo(currentX, height - 1);
+        context.lineTo(currentX, 0);
+        context.stroke();
+        context.closePath();
+
         /**
           * @param {number} x
           * @param {number} size
@@ -1455,6 +1492,15 @@ WebInspector.HeapTrackingOverviewGrid.prototype = {
             this._updateGridTimerId = setTimeout(this._updateGrid.bind(this), 10);
     },
 
+    _onHeapStatsUpdate: function(event)
+    {
+        this._profileSamples = event.data;
+        var timestamps = this._profileSamples.timestamps;
+        if (this._totalTime < timestamps[timestamps.length - 1] - timestamps[0])
+            this._totalTime *= 2;
+        this._scheduleUpdate();
+    },
+
     _scheduleUpdate: function()
     {
         if (this._updateTimerId)
@@ -1478,14 +1524,13 @@ WebInspector.HeapTrackingOverviewGrid.prototype = {
         this._updateBoundaries();
         this._overviewCalculator._updateBoundaries(this);
         this._overviewGrid.updateDividers(this._overviewCalculator);
-        if (this._updateOverviewCanvas || updateOverviewCanvas) {
-            this._drawOverviewCanvas(this._overviewContainer.clientWidth, this._overviewContainer.clientHeight - 20);
-            this._updateOverviewCanvas = false;
-        }
+        this._drawOverviewCanvas(this._overviewContainer.clientWidth, this._overviewContainer.clientHeight - 20);
     },
 
     _updateGrid: function()
     {
+        if (!this._profileSamples)
+            return;
         this._updateGridTimerId = 0;
         this._updateBoundaries();
         var ids = this._profileSamples.ids;