futher refactoring or services

js/controllers/DepsCtrl.js

@@ -1,6 +1,9 @@
-panelApp.controller('DepsCtrl', function DepsCtrl($scope, appContext) {
-  appContext.watchPoll(function () {
-    $scope.deps = appContext.getDeps();
+panelApp.controller('DepsCtrl', function DepsCtrl($scope, appDeps, poll) {
+  $scope.$on('poll', function () {
+    appDeps.get(function (deps) {
+      $scope.$apply(function () {
+        $scope.deps = deps;
+      });
+    });
   });
-  $scope.deps = appContext.getDeps();
 });

js/controllers/ModelCtrl.js

@@ -1,10 +1,11 @@
 
-panelApp.controller('ModelCtrl', function ModelCtrl($scope, appContext) {
+panelApp.controller('ModelCtrl', function ModelCtrl($scope, appContext, appModel, poll) {
 
   $scope.inspect = function () {
     appContext.inspect(this.val.id);
   };
 
+  // TODO: fix this
   $scope.edit = function () {
     appContext.executeOnScope(this.val.id, function (scope, elt, args) {
       scope[args.name] = args.value;
@@ -16,30 +17,24 @@ panelApp.controller('ModelCtrl', function ModelCtrl($scope, appContext) {
   };
 
   $scope.roots = [];
-
-
-  var updateTree = function () {
-    var roots = appContext.getListOfRoots();
-    if (!roots) {
-      return;
-    }
-    
-    $scope.tree = appContext.getModelTree($scope.selectedRoot);
-
-    $scope.roots.length = roots.length;
-    roots.forEach(function (item, i) {
-      $scope.roots[i] = {
-        label: item,
-        value: item
-      };
+  $scope.selectedRoot = null;
+
+  $scope.$on('poll', function () {
+    appModel.getRootScopes(function (rootScopes) {
+      $scope.$apply(function () {
+        $scope.roots = rootScopes;
+        if ($scope.roots.length === 0) {
+          $scope.selectedRoot = null;
+        } else if (!$scope.selectedRoot) {
+          $scope.selectedRoot = $scope.roots[0];
+        }
+      });
     });
-    if (roots.length === 0) {
-      $scope.selectedRoot = null;
-    } else if (!$scope.selectedRoot) {
-      $scope.selectedRoot = $scope.roots[0].value;
-    }
-    $scope.$apply();
-  };
+    appModel.getModelTree($scope.selectedRoot, function (tree) {
+      $scope.$apply(function () {
+        $scope.tree = tree;
+      });
+    });
+  });
 
-  appContext.watchPoll(updateTree);
 });

js/controllers/OptionsCtrl.js

@@ -1,4 +1,4 @@
-panelApp.controller('OptionsCtrl', function OptionsCtrl($scope, appContext, appHighlight) {
+panelApp.controller('OptionsCtrl', function OptionsCtrl($scope, appInfo, appHighlight) {
 
   $scope.debugger = {
     scopes: false,
@@ -12,12 +12,29 @@ panelApp.controller('OptionsCtrl', function OptionsCtrl($scope, appContext, appH
     });
   });
 
-  appContext.getAngularVersion(function (version) {
-    $scope.version = version;
+  appInfo.getAngularVersion(function (version) {
+    $scope.$apply(function () {
+      $scope.version = version;
+    });
   });
-  /*
-  appContext.getAngularSrc(function (status) {
-    $scope.status = status;
+
+  appInfo.getAngularSrc(function (status) {
+    $scope.$apply(function () {
+      switch(status) {
+        case 'good':
+          $scope.status = 'success';
+          $scope.explain = 'CDN detected';
+          break;
+        case 'bad':
+          $scope.status = 'important';
+          $scope.explain = 'You are using the old code.angularjs.org links, which are slow! You should switch to the new CDN link. See <a target="_blank" href="http://blog.angularjs.org/2012/07/angularjs-now-hosted-on-google-cdn.html">this post</a> for more info';
+          break;
+        case 'info':
+          $scope.status = 'info';
+          $scope.explain = 'You may want to use the CDN-hosted AngularJS files. See <a target="_blank" href="http://blog.angularjs.org/2012/07/angularjs-now-hosted-on-google-cdn.html">this post</a> for more info';
+          break;
+      }
+    });
   });
-  */
+
 });

js/controllers/PerfCtrl.js

@@ -1,4 +1,4 @@
-panelApp.controller('PerfCtrl', function PerfCtrl($scope, appContext, appPerf, filesystem) {
+panelApp.controller('PerfCtrl', function PerfCtrl($scope, appContext, appPerf, appModel, appWatch, filesystem, poll) {
 
   $scope.histogram = [];
 
@@ -15,22 +15,6 @@ panelApp.controller('PerfCtrl', function PerfCtrl($scope, appContext, appPerf, f
     filesystem.exportJSON('file.json', $scope.histogram);
   };
 
-  // TODO: remove this (newVal === oldVal ?)
-  var first = true;
-
-  appContext.getDebug(function (result) {
-    $scope.enable = result;
-
-    $scope.$watch('enable', function (newVal, oldVal) {
-      // prevent refresh on initial pageload
-      if (first) {
-        first = false;
-      } else {
-        appContext.setDebug(newVal);
-      }
-    });
-  });
-
   $scope.$watch('log', function (newVal, oldVal) {
     appContext.setLog(newVal);
   });
@@ -39,30 +23,25 @@ panelApp.controller('PerfCtrl', function PerfCtrl($scope, appContext, appPerf, f
     appContext.inspect(this.val.id);
   };
 
-  var updateTree = function () {
+  $scope.$on('poll', function () {
     appPerf.get(function (histogram) {
-      $scope.histogram = histogram;
+      $scope.$apply(function () {
+        $scope.histogram = histogram;
+      });
     });
-    
-    var roots = appContext.getListOfRoots();
-    if (!roots) {
-      return;
-    }
-    
-    $scope.tree = appContext.getWatchTree($scope.selectedRoot);
-
-    $scope.roots.length = roots.length;
-    roots.forEach(function (item, i) {
-      $scope.roots[i] = {
-        label: item,
-        value: item
-      };
+    appModel.getRootScopes(function (rootScopes) {
+      $scope.$apply(function () {
+        $scope.roots = rootScopes;
+        if ($scope.roots.length === 0) {
+          $scope.selectedRoot = null;
+        } else if (!$scope.selectedRoot) {
+          $scope.selectedRoot = $scope.roots[0];
+        }
+      });
     });
-    if (roots.length === 0) {
-      $scope.selectedRoot = null;
-    } else if (!$scope.selectedRoot) {
-      $scope.selectedRoot = $scope.roots[0].value;
-    }
-  };
-  appContext.watchPoll(updateTree);
+    appWatch.getWatchTree($scope.selectedRoot, function (tree) {
+      $scope.tree = tree;
+    });
+  });
+
 });

js/services/appContext.js

@@ -1,43 +1,6 @@
 // Service for running code in the context of the application being debugged
 panelApp.factory('appContext', function (chromeExtension) {
 
-  // Private vars
-  // ============
-
-  var _debugCache = {},
-    _scopeCache = {},
-    _watchCache = {},
-    _pollListeners = [],
-    _pollInterval = 500;
-
-
-  // TODO: make this private and have it automatically poll?
-  var getDebugData = function (callback) {
-    chromeExtension.eval(function (window) {
-      if (!window.__ngDebug) {
-        return {};
-      }
-      return {
-        deps: window.__ngDebug.getDeps(),
-        roots: window.__ngDebug.getRootScopeIds()
-      };
-    },
-    function (data) {
-      if (data) {
-        _debugCache = data;
-      }
-      _pollListeners.forEach(function (fn) {
-        fn();
-      });
-
-      // poll every 500 ms
-      setTimeout(getDebugData, _pollInterval);
-    });
-  };
-  getDebugData();
-
-
-
   // Public API
   // ==========
   return {
@@ -66,74 +29,6 @@ panelApp.factory('appContext', function (chromeExtension) {
       "}", args, cb);
     },
 
-    // Getters
-    // -------
-
-    getListOfRoots: function () {
-      return _debugCache.roots;
-    },
-
-    getModelTree: function (id) {
-      chromeExtension.eval("function (window, args) {" +
-        "return window.__ngDebug.getScopeTree(args.id);" +
-      "}", {id: id}, function (tree) {
-        if (tree) {
-          _scopeCache[id] = tree;
-        }
-      });
-      return _scopeCache[id];
-    },
-
-    getWatchTree: function (id) {
-      chromeExtension.eval("function (window, args) {" +
-        "return window.__ngDebug.getWatchTree(args.id);" +
-      "}", {id: id}, function (tree) {
-        if (tree) {
-          _watchCache[id] = tree;
-        }
-      });
-      return _watchCache[id];
-    },
-
-    getDeps: function () {
-      return _debugCache.deps;
-    },
-
-    getAngularVersion: function (cb) {
-      chromeExtension.eval(function () {
-        return window.angular.version.full +
-          ' ' +
-          window.angular.version.codeName;
-      }, cb);
-    },
-
-    getAngularSrc: function (cb) {
-      chromeExtension.eval("function (window, args) {" +
-        "if (!window.angular) {" +
-          "return 'info';" +
-        "}" +
-        "var elts = window.angular.element('script[src]');" +
-        "var re = /\/angular(-\d+(\.(\d+))+(rc)?)?(\.min)?\.js$/;" +
-        "var elt;" +
-        "for (i = 0; i < elts.length; i++) {" +
-          "elt = elts[i];" +
-          "if (re.exec(elt.src)) {" +
-            "if (elt.src.indexOf('code.angularjs.org') !== -1) {" +
-              "return 'error';" +
-            "} else if (elt.src.indexOf('ajax.googleapis.com') !== -1) {" +
-              "return 'good';" +
-            "} else {" +
-              "return 'info';" +
-            "}" +
-          "}" +
-        "}" +
-        "return 'info';" +
-      "}", cb);
-    },
-
-    // Actions
-    // -------
-
     refresh: function (cb) {
       chromeExtension.eval(function (window) {
         window.document.location.reload();
@@ -178,11 +73,6 @@ panelApp.factory('appContext', function (chromeExtension) {
       '}');
     },
 
-    // takes # of milliseconds
-    setPollInterval: function (setting) {
-      _pollInterval = setting;
-    },
-
     // Registering events
     // ------------------
 
@@ -205,10 +95,6 @@ panelApp.factory('appContext', function (chromeExtension) {
       port.onDisconnect.addListener(function (a) {
         console.log(a);
       });
-    },
-
-    watchPoll: function (fn) {
-      _pollListeners.push(fn);
     }
 
   };

js/services/appDeps.js

@@ -0,0 +1,26 @@
+// Service for retrieving and caching application dependencies
+panelApp.factory('appDeps', function (chromeExtension, appContext) {
+
+  var _depsCache = [];
+
+  // clear cache on page refresh
+  appContext.watchRefresh(function () {
+    _depsCache = [];
+  });
+
+  return {
+    get: function (callback) {
+      chromeExtension.eval(function (window) {
+        if (window.__ngDebug) {
+          return window.__ngDebug.getDeps();
+        }
+      },
+      function (data) {
+        if (data) {
+          _depsCache = data;
+        }
+        callback(_depsCache);
+      });
+    }
+  };
+});

js/services/appInfo.js

@@ -0,0 +1,67 @@
+// Service for running code in the context of the application being debugged
+panelApp.factory('appInfo', function (chromeExtension, appContext) {
+
+  var _versionCache = null,
+    _srcCache = null;
+
+  // clear cache on page refresh
+  appContext.watchRefresh(function () {
+    _versionCache = null;
+    _srcCache = null;
+  });
+
+  return {
+    getAngularVersion: function (callback) {
+      if (_versionCache) {
+        setTimeout(function () {
+          callback(_versionCache);
+        }, 0);
+      } else {
+        chromeExtension.eval(function () {
+          return window.angular.version.full +
+            ' ' +
+            window.angular.version.codeName;
+        }, function (data) {
+          _versionCache = data;
+          callback(_versionCache);
+        });
+      }
+    },
+
+    getAngularSrc: function (callback) {
+      if (_srcCache) {
+        setTimeout(function () {
+          callback(_srcCache);
+        }, 0);
+      } else {
+        chromeExtension.eval(function (window, args) {
+          if (!window.angular) {
+            return 'info';
+          }
+          var elts = window.angular.element('script[src]');
+          var re = /\/angular(-\d+(\.(\d+))+(rc)?)?(\.min)?\.js$/;
+          var elt;
+          for (i = 0; i < elts.length; i++) {
+            elt = elts[i];
+            if (re.exec(elt.src)) {
+              if (elt.src.indexOf('code.angularjs.org') !== -1) {
+                return 'error';
+              } else if (elt.src.indexOf('ajax.googleapis.com') !== -1) {
+                return 'good';
+              } else {
+                return 'info';
+              }
+            }
+          }
+          return 'info';
+        }, function (src) {
+          if (src) {
+            _srcCache = src;
+          }
+          callback(_srcCache);
+        });
+      }
+    }
+
+  };
+});

js/services/appModel.js

@@ -0,0 +1,44 @@
+// Service for running code in the context of the application being debugged
+panelApp.factory('appModel', function (chromeExtension, appContext) {
+
+  var _scopeCache = {},
+    _rootScopeCache = [];
+
+
+  // clear cache on page refresh
+  appContext.watchRefresh(function () {
+    _scopeCache = {};
+    _rootScopeCache = [];
+  });
+
+  return {
+    getRootScopes: function (callback) {
+      chromeExtension.eval(function (window) {
+        if (!window.__ngDebug) {
+          return;
+        }
+        return window.__ngDebug.getRootScopeIds();
+      },
+      function (data) {
+        if (data) {
+          _rootScopeCache = data;
+        }
+        callback(_rootScopeCache);
+      });
+    },
+
+    getModelTree: function (id, callback) {
+      if (!id) {
+        return;
+      }
+      chromeExtension.eval(function (window, args) {
+        return window.__ngDebug.getScopeTree(args.id);
+      }, {id: id}, function (tree) {
+        if (tree) {
+          _scopeCache[id] = tree;
+        }
+        callback(_scopeCache[id]);
+      });
+    }
+  };
+});

js/services/appPerf.js

@@ -1,10 +1,21 @@
 // Service for retrieving and caching performance data
-panelApp.factory('appPerf', function (chromeExtension) {
+panelApp.factory('appPerf', function (chromeExtension, appContext) {
 
   var _histogramCache = [],
     _watchNameToPerf = {},
     _totalCache = 0;
 
+  var clear = function () {
+    _histogramCache = [];
+    _watchNameToPerf = {};
+    _totalCache = 0;
+  };
+
+  // clear cache on page refresh
+  appContext.watchRefresh(function () {
+    clear();
+  });
+
   var getHistogramData = function (callback) {
     chromeExtension.eval(function (window) {
       if (!window.__ngDebug) {
@@ -46,8 +57,6 @@ panelApp.factory('appPerf', function (chromeExtension) {
         callback(_histogramCache);
       });
     },
-    clear: function () {
-      _histogramCache = [];
-    }
+    clear: clear
   };
 });

js/services/appWatch.js

@@ -0,0 +1,22 @@
+// Service for running code in the context of the application being debugged
+panelApp.factory('appWatch', function (chromeExtension) {
+
+  var _watchCache = {};
+
+  // Public API
+  // ==========
+  return {
+
+    getWatchTree: function (id, callback) {
+      chromeExtension.eval("function (window, args) {" +
+        "return window.__ngDebug.getWatchTree(args.id);" +
+      "}", {id: id}, function (tree) {
+        if (tree) {
+          _watchCache[id] = tree;
+        }
+        callback(_watchCache[id]);
+      });
+    }
+
+  };
+});

js/services/poll.js

@@ -0,0 +1,11 @@
+// Service for broadcasting poll events
+panelApp.factory('poll', function ($rootScope) {
+
+  setInterval(function () {
+    $rootScope.$broadcast('poll');
+  }, 500);
+
+  return {
+    setInterval: function (int) {}
+  };
+});

panel.html

@@ -28,10 +28,15 @@
 
   <script src="js/services/appContext.js"></script>
   <script src="js/services/appCss.js"></script>
+  <script src="js/services/appDeps.js"></script>
   <script src="js/services/appHighlight.js"></script>
+  <script src="js/services/appInfo.js"></script>
+  <script src="js/services/appModel.js"></script>
   <script src="js/services/appPerf.js"></script>
+  <script src="js/services/appWatch.js"></script>
   <script src="js/services/chromeExtension.js"></script>
   <script src="js/services/filesystem.js"></script>
+  <script src="js/services/poll.js"></script>
 
   <script src="js/controllers/DepsCtrl.js"></script>
   <script src="js/controllers/ModelCtrl.js"></script>
@@ -41,7 +46,7 @@
 </head>
 <body>
   <bat-tabs>
-    <bat-pane title="Model" src="panes/model.html"></bat-pane>
+    <bat-pane title="Models" src="panes/model.html"></bat-pane>
     <bat-pane title="Performance" src="panes/perf.html"></bat-pane>
     <bat-pane title="Dependencies" src="panes/deps.html"></bat-pane>
     <bat-pane title="Options" src="panes/options.html"></bat-pane>

panes/model.html

@@ -1,7 +1,11 @@
 <div ng-controller="ModelCtrl">
   <h2>Models</h2>
-  <div ng-hide="roots.length <= 1">
-    <label for="select-root">Root <select id="select-root" ng-options="p.value as p.label for p in roots" ng-model="selectedRoot"></select></label>
+  <div ng-show="roots.length > 1">
+    <label for="select-root">Root
+      <select
+        ng-options="root.toString() for root in roots"
+        ng-model="selectedRoot"></select>
+    </label>
   </div>
   <pre>
     <bat-model-tree val="tree" inspect="inspect" edit="edit"></bat-model-tree>

panes/options.html

@@ -23,10 +23,7 @@
     <h2>Info</h2>
     <div class="well">
       <p>Angular version: {{version}}</p>
-      <!--
-        <p>Angular CDN status: {{status}}</p>
-        <p><button ng-click="check">check</button></p>
-      -->
+      <p>Angular CDN status: <span class="label" ng-class="'label-' + status" ng-bind-html-unsafe="explain"></span></p>
     </div>
   </div>
 

panes/perf.html

@@ -18,7 +18,7 @@
       </div>
       <div class="well well-bottom">
         <label for="select-root" ng-hide="roots.length <= 1">Root
-          <select id="select-root" ng-options="p.value as p.label for p in roots" ng-model="selectedRoot"></select>
+          <select id="select-root" ng-options="p for p in roots" ng-model="selectedRoot"></select>
         </label>
       </div>
     </div>