code cleanup, work on issuing warning for code.angularjs.org hosed ang.js

js/controllers/OptionsCtrl.js

@@ -6,7 +6,10 @@ panelApp.controller('OptionsCtrl', function OptionsCtrl($scope, appContext, chro
     app: false
   };
 
-  // TODO: refactor
+  //TODO: improve look of highlighting; for instance, if an element is bound and a scope,
+  // you will only see the most recently applied outline
+
+  // TODO: refactor; remove chromeExtension calls in favor of adding methods to appContext
   $scope.$watch('debugger.scopes', function (newVal, oldVal) {
     if (newVal) {
       chromeExtension.eval(function () {
@@ -66,6 +69,7 @@ panelApp.controller('OptionsCtrl', function OptionsCtrl($scope, appContext, chro
           var styleSheet = document.styleSheets[document.styleSheets.length - 1];
           styleSheet.insertRule(selector + '{' + rule + '}', styleSheet.cssRules.length);
         };
+        // TODO: rules for ng-app (is it added as a class?)
         addCssRule('[ng-app]', 'border: 1px solid green');
         //addCssRule('ng-app:', 'border: 1px solid green');
         addCssRule('[app-run]', 'border: 1px solid green');
@@ -96,4 +100,9 @@ panelApp.controller('OptionsCtrl', function OptionsCtrl($scope, appContext, chro
   }, function (version) {
     $scope.version = version;
   });
+
+  appContext.getAngularSrc(function (status) {
+    $scope.status = status;
+  });
+  
 });

js/directives/d3.js

@@ -55,7 +55,6 @@ panelApp.directive('d3', function($compile, d3) {
           toAdd.forEach(function (a) {
             classes.push({
               name: a,
-              size: 0,
               imports: []
             });
           });
@@ -123,21 +122,39 @@ panelApp.directive('d3', function($compile, d3) {
         .append("svg:g")
           .attr("transform", "translate(" + rx + "," + ry + ")");
 
-      svg.append("svg:path")
-          .attr("class", "arc")
-          .attr("d", d3.svg.arc().outerRadius(ry - 120).innerRadius(0).startAngle(0).endAngle(2 * Math.PI))
-          .on("mousedown", mousedown);
-
       // Render the data whenever "val" changes
       // --------------------------------------
       scope.$watch('val', function (newVal, oldVal) {
-        var classes = newVal;
+        var classes;
 
-        if (oldVal || !classes || classes.length === 0) {
+        if (!newVal || newVal.length === 0) {
+          svg.selectAll('*').remove();
           return;
         }
 
-        //div[0].innerHTML = '';
+        if (oldVal && oldVal.length === newVal.length) {
+          var changed = false;
+          for (i = 0; i < oldVal.length; i++) {
+            if (oldVal[i].name !== newVal[i].name || newVal[i].imports.length !== oldVal[i].imports.length) {
+              changed = true;
+              break;
+            }
+          }
+          if (!changed) {
+            return;
+          }
+        }
+        classes = newVal.slice(0);
+        classes.sort(function (a, b) {
+          return .5 - (a.name < b.name);
+        });
+
+        svg.selectAll('*').remove();
+
+        svg.append("svg:path")
+          .attr("class", "arc")
+          .attr("d", d3.svg.arc().outerRadius(ry - 120).innerRadius(0).startAngle(0).endAngle(2 * Math.PI))
+          .on("mousedown", mousedown);
 
         var nodes = cluster.nodes(packages.root(classes)),
             links = packages.imports(nodes),

js/inject/debug.js

@@ -117,49 +117,23 @@ var inject = function () {
         }());
       }
 
-      var module = angular.module;
-      angular.module = function (moduleName) {
-        //console.log(arguments);
-        var mod = module.apply(this, arguments);
-
-        var methods = [
-          'constant',
-          'controller',
-          'directive',
-          'factory',
-          'filter',
+      var ng = angular.module('ng');
+      ng.config(function ($provide) {
+        [
           'provider',
-          'service',
-          'value'
-        ];
-        methods.forEach(function (met) {
-          var temp = mod[met];
-          mod[met] = function (thingName, definition) {
-            var def;
-            if (typeof definition === 'function') {
-              def = annotate(definition);
-            } else {
-              def = definition.slice(0);
-              def.pop();
-            }
+          'factory',
+          'service'
+        ].forEach(function (met) {
+          var temp = $provide[met];
+          $provide[met] = function (thingName, definition) {
             debug.deps.push({
               name: thingName,
-              type: met,
-              size: def.length,
-              imports: def
+              imports: annotate(definition)
             });
-
             return temp.apply(this, arguments);
-          }
+          };
         });
 
-        //console.log(mod);
-        return mod;
-      };
-
-      var ng = angular.module('ng');
-      ng.config(function ($provide) {
-
         $provide.decorator('$rootScope', function ($delegate) {
           
           var watchFnToHumanReadableString = function (fn) {

js/services/appContext.js

@@ -229,6 +229,30 @@ panelApp.factory('appContext', function(chromeExtension) {
       return _debugCache.deps;
     },
 
+    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
     // -------
 

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "AngularJS Batarang",
   "version": "0.1",
-  "description": "Extends the Developer Tools, adding a tools for debugging and profiling AngularJS applications.",
+  "description": "Extends the Developer Tools, adding tools for debugging and profiling AngularJS applications.",
   "background": {
     "page": "background.html"
   },

panel.html

@@ -76,12 +76,13 @@
     <div ng-class="{hidden: !enable}" class="row-fluid">
       <div class="span6">
         <h3>Watch Tree</h3>
-        <div class="well" style="height: 400px; overflow-y: auto;">
+        <div class="well well-top" style="height: 400px; overflow-y: auto;">
+          <wtree val="trees[selectedRoot]" inspect="inspect"></wtree>
+        </div>
+        <div class="well well-bottom">
           <label for="select-root" ng-class="{hidden: roots.length <= 1}">Root 
             <select id="select-root" ng-options="p.value as p.label for p in roots" ng-model="selectedRoot"></select>
           </label>
-
-          <wtree val="trees[selectedRoot]" inspect="inspect"></wtree>
         </div>
       </div>
 
@@ -154,7 +155,9 @@
     <div class="span6">
       <h2>Info</h2>
       <div class="well">
-        Angular version: {{version}}
+        <p>Angular version: {{version}}</p>
+        <p>Angular CDN status: {{status}}</p>
+        <p><button ng-click="check">check</button></p>
       </div>
     </div>