code cleanup

js/controllers/OptionsCtrl.js

@@ -6,6 +6,7 @@ panelApp.controller('OptionsCtrl', function OptionsCtrl($scope, appContext, chro
     app: false
   };
 
+  // TODO: refactor
   $scope.$watch('debugger.scopes', function (newVal, oldVal) {
     if (newVal) {
       chromeExtension.eval(function () {

js/controllers/PerfCtrl.js

@@ -1,28 +1,5 @@
-panelApp.filter('sortByTime', function () {
-  return function (input, range) {
-    var copy = input.slice(0),
-      min = range[0],
-      max = range[1];
-
-    copy = copy.sort(function (a, b) {
-      return b.time - a.time;
-    });
-
-    if (typeof min !== 'number' || typeof max !== 'number') {
-      return copy;
-    }
-
-    var start = Math.floor(input.length * min/100);
-    var end = Math.ceil(input.length * max/100) - start;
-
-    return copy.splice(start, end);
-  };
-});
-
 panelApp.controller('PerfCtrl', function PerfCtrl($scope, appContext, filesystem) {
 
-  //$scope.enable = false;
-
   $scope.histogram = [];
   $scope.timeline = [];
 

js/directives/d3.js

@@ -1,6 +1,6 @@
 // D3 visualization
 // TODO: D3 as a service
-panelApp.directive('d3', function($compile) {
+panelApp.directive('d3', function($compile, d3) {
   return {
     restrict: 'E',
     terminal: true,
@@ -31,6 +31,8 @@ panelApp.directive('d3', function($compile) {
         return key.replace('$', 'dollar')
       }
 
+      // TODO: refactor the data transformation to make it faster
+      // For instance, build up the ideal structure in inject/degug.js
       var packages = {
         // Lazily construct the package hierarchy from class names.
         root: function(classes) {

js/filters/sortByTime.js

@@ -0,0 +1,22 @@
+// Sort watchers by time
+// Used by the performance tab
+panelApp.filter('sortByTime', function () {
+  return function (input, range) {
+    var copy = input.slice(0),
+      min = range[0],
+      max = range[1];
+
+    copy = copy.sort(function (a, b) {
+      return b.time - a.time;
+    });
+
+    if (typeof min !== 'number' || typeof max !== 'number') {
+      return copy;
+    }
+
+    var start = Math.floor(input.length * min/100);
+    var end = Math.ceil(input.length * max/100) - start;
+
+    return copy.splice(start, end);
+  };
+});

js/inject/debug.js

@@ -2,6 +2,9 @@ var inject = function () {
   document.head.appendChild((function () {
     var fn = function bootstrap (window) {
 
+      // Helper to determine if the root 'ng' module has been loaded
+      // window.angular may be available if the app is bootstrapped asynchronously, but 'ng' might
+      // finish loading later.
       var ngLoaded = function () {
         if (!window.angular) {
           return false;
@@ -43,6 +46,10 @@ var inject = function () {
       if (window.__ngDebug) {
         return;
       }
+
+      // Instrumentation
+      // ---------------
+
       //var bootstrap = window.angular.bootstrap;
       var debug = window.__ngDebug = {
         watchers: {},
@@ -51,16 +58,6 @@ var inject = function () {
         watchList: {},
         deps: []
       };
-      /*
-      var injector = angular.injector;
-      angular.injector = function () {
-        console.log(arguments);
-        var ret = injector.apply(this, arguments);
-
-        
-        return ret;
-      };
-      */
 
       var annotate = angular.injector().annotate;
 
@@ -151,13 +148,6 @@ var inject = function () {
               size: def.length,
               imports: def
             });
-            /*
-            console.log(
-              'module: ' + moduleName,
-              'type: ' + met,
-              thingName,
-              'requires: ' + def);
-            */
 
             return temp.apply(this, arguments);
           }
@@ -167,26 +157,6 @@ var inject = function () {
         return mod;
       };
 
-      /*
-      angular.providerHook(function (name, path, fn) {
-        var curDep = debug.deps;
-
-        var i;
-        for (i = path.length - 1; i >= 0; i -= 1) {
-          if (!curDep[path[i]]) {
-            curDep[path[i]] = {};
-          }
-          curDep = curDep[path[i]];
-        }
-
-        if ((path.length === 0 || path[0] !== name) && !curDep[name]) {
-          curDep[name] = {};
-        }
-        
-        return fn();
-      });
-*/
-
       var ng = angular.module('ng');
       ng.config(function ($provide) {
 
@@ -298,8 +268,9 @@ var inject = function () {
                 end: Math.round(end - firstLog)
               });
             }
-            //debug.dirty = true;
 
+            // If the debugging option is enabled, log to console
+            // --------------------------------------------------
             if (debug.log) {
               if (fn) {
                 if (fn.name) {
@@ -323,6 +294,7 @@ var inject = function () {
       });
     };
 
+    // Return a script element with the above code embedded in it
     var script = window.document.createElement('script');
     script.innerHTML = '(' + fn.toString() + '(window))';
     
@@ -333,45 +305,4 @@ var inject = function () {
 // only inject if cookie is set
 if (document.cookie.indexOf('__ngDebug=true') != -1) {
   document.addEventListener('DOMContentLoaded', inject);
-/*
-  (function () {
-
-
-    var hackBootstrap = function () {
-      var bootstrap = angular.bootstrap;
-      window.angular.bootstrap = function () {
-        inject();
-        bootstrap.apply(this, arguments);
-      };
-    };
-
-    // else, patch angular.bootstrap
-    if (window.angular) {
-      hackBootstrap();
-    } else {
-      // TODO: the AngularJS script it being asynchronously loaded and manually bootstrapped.
-      // Not sure what I can do here
-
-      // current strategy: run at DOMContentLoaded and hope for the best
-      document.addEventListener('DOMContentLoaded', function () {
-        var areWeThereYet = function (ev) {
-          if (ev.srcElement.tagName === 'SCRIPT') {
-            var oldOnload = ev.srcElement.onload;
-            ev.srcElement.onload = function () {
-              if (window.angular) {
-                document.removeEventListener('DOMNodeInserted', areWeThereYet);
-                hackBootstrap();
-              }
-              if (oldOnload) {
-                oldOnload.apply(this, arguments);
-              }
-            };
-          }
-        }
-        document.addEventListener('DOMNodeInserted', areWeThereYet);
-      });
-    }
-
-  }());
-*/
 }

js/services/appContext.js

@@ -181,6 +181,8 @@ panelApp.factory('appContext', function(chromeExtension) {
   // Public API
   // ==========
   return {
+    // Fix selection of scope
+    // https://github.com/angular/angularjs-batarang/issues/6
     executeOnScope: function(scopeId, fn, args, cb) {
       if (typeof args === 'function') {
         cb = args;
@@ -295,6 +297,9 @@ panelApp.factory('appContext', function(chromeExtension) {
     // ------------------
 
     // TODO: depreciate this; only poll from now on?
+    // There are some cases where you need to gather data on a once-per-bootstrap basis, for
+    // instance getting the version of AngularJS
+    
     // TODO: move to chromeExtension?
     watchRefresh: function (cb) {
       var port = chrome.extension.connect();

js/services/d3.js

@@ -0,0 +1,4 @@
+panelApp.factory('d3', function() {
+  // TODO: how should I reference the d3 global?
+  return d3;
+});

panel.html

@@ -22,9 +22,11 @@
   <script src="js/directives/wtree.js"></script>
 
   <script src="js/filters/first.js"></script>
+  <script src="js/filters/sortByTime.js"></script>
 
   <script src="js/services/appContext.js"></script>
   <script src="js/services/chromeExtension.js"></script>
+  <script src="js/services/d3.js"></script>
   <script src="js/services/filesystem.js"></script>
 
   <script src="js/controllers/DepsCtrl.js"></script>