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

Source/devtools/front_end/HeapSnapshotView.js

 /*
  * Copyright (C) 2011 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 757 matching lines @@
  * @extends {WebInspector.ProfileType}
  * @implements {HeapProfilerAgent.Dispatcher}
  */
 WebInspector.HeapSnapshotProfileType = function()
 {
     WebInspector.ProfileType.call(this, WebInspector.HeapSnapshotProfileType.TypeId, WebInspector.UIString("Take Heap Snapshot"));
     InspectorBackend.registerHeapProfilerDispatcher(this);
 }
 
 WebInspector.HeapSnapshotProfileType.TypeId = "HEAP";
+WebInspector.HeapSnapshotProfileType.HeapStatsUpdate = "HeapStatsUpdate";
 
 WebInspector.HeapSnapshotProfileType.prototype = {
     /**
      * @override
      * @return {string}
      */
     fileExtension: function()
     {
         return ".heapsnapshot";
     },
@@ skipping 75 matching lines @@
         this._lastUpdatedIndex = index;
     },
 
     /**
      * @override
      * @param {number} lastSeenObjectId
      * @param {number} timestamp
      */
     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]) {
             this._profileSamples.max[this._currentIndex] = 0;
             this._profileSamples.sizes[this._currentIndex] = 0;
         }
         ++this._currentIndex;
+        this.dispatchEventToListeners(WebInspector.HeapSnapshotProfileType.HeapStatsUpdate, this._profileSamples);
     },
 
     get  treeItemTitle()
     {
         return WebInspector.UIString("HEAP SNAPSHOTS");
     },
 
     get description()
     {
         return WebInspector.UIString("Heap snapshot profiles show memory distribution among your page's JavaScript objects and related DOM nodes.");
@@ skipping 116 matching lines @@
 WebInspector.TrackingHeapSnapshotProfileType = function(profilesPanel, profileType)
 {
     WebInspector.ProfileType.call(this, WebInspector.TrackingHeapSnapshotProfileType.TypeId, WebInspector.UIString("Track Allocations"));
     this._profilesPanel = profilesPanel;
     this._parentType = profileType;
 }
 
 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.");
     },
 
     /**
      * @override
      * @return {boolean}
      */
     isInstantProfile: function()
@@ skipping 77 matching lines @@
     {
         return new WebInspector.ProfileSidebarTreeElement(this, WebInspector.UIString("Snapshot %d"), "heap-snapshot-sidebar-tree-item");
     },
 
     /**
      * @override
      * @param {!WebInspector.ProfilesPanel} profilesPanel
      */
     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);
     },
 
     /**
      * @override
      * @param {function(WebInspector.HeapSnapshotProxy):void} callback
      */
     load: function(callback)
     {
         if (this._snapshotProxy) {
@@ skipping 207 matching lines @@
             break;
         default:
             this._snapshotHeader.sidebarElement.subtitle = WebInspector.UIString("'%s' error %d", reader.fileName(), e.target.error.code);
         }
     }
 }
 
 /**
  * @constructor
  * @extends {WebInspector.View}
- * @param {!WebInspector.HeapProfileHeader} heapProfileHeader
+ * @param {?WebInspector.HeapProfileHeader} heapProfileHeader
  */
 WebInspector.HeapTrackingOverviewGrid = function(heapProfileHeader)
 {
     WebInspector.View.call(this);
     this.registerRequiredCSS("flameChart.css");
     this.element.id = "heap-recording-view";
 
     this._overviewContainer = this.element.createChild("div", "overview-container");
     this._overviewGrid = new WebInspector.OverviewGrid("heap-recording");
     this._overviewCanvas = this._overviewContainer.createChild("canvas", "heap-recording-overview-canvas");
     this._overviewContainer.appendChild(this._overviewGrid.element);
     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;
 }
 
 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;
 
         var scaleFactor = width / this._totalTime;
         var maxUsedSize = 0;
         var currentX = 0;
         /**
           * @param {Array.<number>} sizes
           * @param {function(number, number):void} callback
           */
         function aggregateAndCall(sizes, callback)
         {
             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);
                     size = 0;
                     currentX = x;
                 }
                 size += sizes[i];
             }
             callback(currentX, size);
         }
 
         /**
           * @param {number} x
           * @param {number} size
           */
         function maxUsedSizeCallback(x, size)
         {
             maxUsedSize = Math.max(maxUsedSize, size);
         }
 
         aggregateAndCall(usedSizes, maxUsedSizeCallback);
 
         this._overviewCanvas.width = width * window.devicePixelRatio;
         this._overviewCanvas.height = height * window.devicePixelRatio;
         this._overviewCanvas.style.width = width + "px";
         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
           */
         function drawBarCallback(x, size)
         {
             context.moveTo(x, height - 1);
             context.lineTo(x, Math.round(height - size * yScaleFactor - 1));
         }
 
@@ skipping 17 matching lines @@
         this._updateOverviewCanvas = true;
         this._scheduleUpdate();
     },
 
     _onWindowChanged: function()
     {
         if (!this._updateGridTimerId)
             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)
             return;
         this._updateTimerId = setTimeout(this.update.bind(this), 10);
     },
 
     _updateBoundaries: function()
     {
         this._windowLeft = this._overviewGrid.windowLeft();
         this._windowRight = this._overviewGrid.windowRight();
         this._windowWidth = this._windowRight - this._windowLeft;
     },
 
     /**
      * @param {boolean} updateOverviewCanvas
      */
     update: function(updateOverviewCanvas)
     {
         this._updateTimerId = null;
         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;
         var timestamps = this._profileSamples.timestamps;
         var sizes = this._profileSamples.sizes;
         var startTime = timestamps[0];
         var finishTime = timestamps[timestamps.length - 1];
         var timeRange = finishTime - startTime;
         var timeLeft = startTime + timeRange * this._windowLeft;
         var timeRight = startTime + timeRange * this._windowRight;
@@ skipping 65 matching lines @@
     zeroTime: function()
     {
         return this._minimumBoundaries;
     },
 
     boundarySpan: function()
     {
         return this._maximumBoundaries - this._minimumBoundaries;
     }
 }