refactored performance caching to seperate service

js/controllers/PerfCtrl.js

@@ -1,4 +1,4 @@
-panelApp.controller('PerfCtrl', function PerfCtrl($scope, appContext, filesystem) {
+panelApp.controller('PerfCtrl', function PerfCtrl($scope, appContext, appPerf, filesystem) {
 
   $scope.histogram = [];
 
@@ -8,7 +8,7 @@ panelApp.controller('PerfCtrl', function PerfCtrl($scope, appContext, filesystem
   $scope.max = 100;
 
   $scope.clearHistogram = function () {
-    appContext.clearHistogram();
+    appPerf.clear();
   };
 
   $scope.exportData = function () {
@@ -40,7 +40,10 @@ panelApp.controller('PerfCtrl', function PerfCtrl($scope, appContext, filesystem
   };
 
   var updateTree = function () {
-    $scope.histogram = appContext.getHistogram();
+    appPerf.get(function (histogram) {
+      $scope.histogram = histogram;
+    });
+    
     var roots = appContext.getListOfRoots();
     if (!roots) {
       return;

js/services/appContext.js

@@ -19,14 +19,12 @@ panelApp.factory('appContext', function (chromeExtension) {
       }
       return {
         deps: window.__ngDebug.getDeps(),
-        watchPerf: window.__ngDebug.getWatchPerf(),
         roots: window.__ngDebug.getRootScopeIds()
       };
     },
     function (data) {
       if (data) {
         _debugCache = data;
-        _incomingHistogramData = data.watchPerf;
       }
       _pollListeners.forEach(function (fn) {
         fn();
@@ -39,35 +37,6 @@ panelApp.factory('appContext', function (chromeExtension) {
   getDebugData();
 
 
-  var _histogramCache = [];
-  var _incomingHistogramData = [];
-  var _watchNameToPerf = {};
-  var _totalCache = 0;
-
-  var processHistogram = function () {
-    if (_incomingHistogramData.length === 0) {
-      return;
-    }
-
-    _incomingHistogramData.forEach(function (info) {
-      _totalCache += info.time;
-
-      if (_watchNameToPerf[info.name]) {
-        _watchNameToPerf[info.name].time += info.time;
-      } else {
-        _watchNameToPerf[info.name] = info;
-        _histogramCache.push(info);
-      }
-    });
-
-    // recalculate all percentages
-    _histogramCache.forEach(function (item) {
-      item.percent = (100 * item.time / _totalCache).toPrecision(3);
-    });
-
-    // clear the incoming queue
-    _incomingHistogramData = [];
-  };
 
   // Public API
   // ==========
@@ -100,11 +69,6 @@ panelApp.factory('appContext', function (chromeExtension) {
     // Getters
     // -------
 
-    getHistogram: function () {
-      processHistogram();
-      return _histogramCache;
-    },
-
     getListOfRoots: function () {
       return _debugCache.roots;
     },
@@ -170,12 +134,6 @@ panelApp.factory('appContext', function (chromeExtension) {
     // Actions
     // -------
 
-    clearHistogram: function (cb) {
-      chromeExtension.eval(function (window) {
-        window.__ngDebug.watchPerf = {};
-      }, cb);
-    },
-    
     refresh: function (cb) {
       chromeExtension.eval(function (window) {
         window.document.location.reload();

js/services/appPerf.js

@@ -0,0 +1,53 @@
+// Service for retrieving and caching performance data
+panelApp.factory('appPerf', function (chromeExtension) {
+
+  var _histogramCache = [],
+    _watchNameToPerf = {},
+    _totalCache = 0;
+
+  var getHistogramData = function (callback) {
+    chromeExtension.eval(function (window) {
+      if (!window.__ngDebug) {
+        return {};
+      }
+      return window.__ngDebug.getWatchPerf();
+    },
+    function (data) {
+      if (data && data.length) {
+        updateHistogram(data);
+      }
+      callback();
+    });
+  };
+
+  var updateHistogram = function (data) {
+    data.forEach(function (info) {
+      _totalCache += info.time;
+
+      if (_watchNameToPerf[info.name]) {
+        _watchNameToPerf[info.name].time += info.time;
+      } else {
+        _watchNameToPerf[info.name] = info;
+        _histogramCache.push(info);
+      }
+    });
+
+    // recalculate all percentages
+    _histogramCache.forEach(function (item) {
+      item.percent = (100 * item.time / _totalCache).toPrecision(3);
+    });
+  };
+
+  // Public API
+  // ==========
+  return {
+    get: function (callback) {
+      getHistogramData(function () {
+        callback(_histogramCache);
+      });
+    },
+    clear: function () {
+      _histogramCache = [];
+    }
+  };
+});

panel.html

@@ -29,6 +29,7 @@
   <script src="js/services/appContext.js"></script>
   <script src="js/services/appCss.js"></script>
   <script src="js/services/appHighlight.js"></script>
+  <script src="js/services/appPerf.js"></script>
   <script src="js/services/chromeExtension.js"></script>
   <script src="js/services/filesystem.js"></script>