refactored and generalized options tab and related services

js/controllers/OptionsCtrl.js

@@ -1,4 +1,4 @@
-panelApp.controller('OptionsCtrl', function OptionsCtrl($scope, appContext, chromeExtension) {
+panelApp.controller('OptionsCtrl', function OptionsCtrl($scope, appContext, appHighlight) {
 
   $scope.debugger = {
     scopes: false,
@@ -6,99 +6,17 @@ panelApp.controller('OptionsCtrl', function OptionsCtrl($scope, appContext, chro
     app: false
   };
 
-  //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 () {
-        var addCssRule = function (selector, rule) {
-          var styleSheet = document.styleSheets[document.styleSheets.length - 1];
-          styleSheet.insertRule(selector + '{' + rule + '}', styleSheet.cssRules.length);
-        };
-        addCssRule('.ng-scope', 'border: 1px solid red');
-      });
-    } else {
-      chromeExtension.eval(function () {
-        removeCssRule = function (selector, rule) {
-          var styleSheet = document.styleSheets[document.styleSheets.length - 1];
-
-          var i;
-          for (i = styleSheet.cssRules.length - 1; i >= 0; i -= 1) {
-            if (styleSheet.cssRules[i].cssText === selector + ' { ' + rule + '; }') {
-              styleSheet.deleteRule(i);
-            }
-          }
-        };
-        removeCssRule('.ng-scope', 'border: 1px solid red');
-      });
-    }
-  });
-
-  $scope.$watch('debugger.bindings', function (newVal, oldVal) {
-    if (newVal) {
-      chromeExtension.eval(function () {
-        var addCssRule = function (selector, rule) {
-          var styleSheet = document.styleSheets[document.styleSheets.length - 1];
-          styleSheet.insertRule(selector + '{' + rule + '}', styleSheet.cssRules.length);
-        };
-        addCssRule('.ng-binding', 'border: 1px solid blue');
-      });
-    } else {
-      chromeExtension.eval(function () {
-        removeCssRule = function (selector, rule) {
-          var styleSheet = document.styleSheets[document.styleSheets.length - 1];
-
-          var i;
-          for (i = styleSheet.cssRules.length - 1; i >= 0; i -= 1) {
-            if (styleSheet.cssRules[i].cssText === selector + ' { ' + rule + '; }') {
-              styleSheet.deleteRule(i);
-            }
-          }
-        };
-        removeCssRule('.ng-binding', 'border: 1px solid blue');
-      });
-    }
-  });
-
-  $scope.$watch('debugger.app', function (newVal, oldVal) {
-    if (newVal) {
-      chromeExtension.eval(function () {
-        var addCssRule = function (selector, rule) {
-          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');
-      });
-    } else {
-      chromeExtension.eval(function () {
-        removeCssRule = function (selector, rule) {
-          var styleSheet = document.styleSheets[document.styleSheets.length - 1];
-
-          var i;
-          for (i = styleSheet.cssRules.length - 1; i >= 0; i -= 1) {
-            if (styleSheet.cssRules[i].cssText === selector + ' { ' + rule + '; }') {
-              styleSheet.deleteRule(i);
-            }
-          }
-        };
-        removeCssRule('[ng-app]', 'border: 1px solid green');
-      });
-    }
+  ['scopes', 'bindings', 'app'].forEach(function (thing) {
+    $scope.$watch('debugger.' + thing, function (val) {
+      appHighlight[thing](val);
+    });
   });
 
-  chromeExtension.eval(function () {
-    return window.angular.version.full +
-      ' ' +
-      window.angular.version.codeName;
-  }, function (version) {
+  appContext.getAngularVersion(function (version) {
     $scope.version = version;
   });
 
   appContext.getAngularSrc(function (status) {
     $scope.status = status;
   });
-  
 });

js/services/appContext.js

@@ -174,6 +174,11 @@ panelApp.factory('appContext', function(chromeExtension) {
   };
   getDebugData();
 
+  // Helpers
+  // =======
+
+
+
 
   // Public API
   // ==========
@@ -222,6 +227,15 @@ panelApp.factory('appContext', function(chromeExtension) {
       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) {" +
@@ -248,7 +262,27 @@ panelApp.factory('appContext', function(chromeExtension) {
 
     // Actions
     // -------
-    
+
+    addCssRule: function (args) {
+      chromeExtension.eval(function (window, args) {
+        var styleSheet = document.styleSheets[document.styleSheets.length - 1];
+        styleSheet.insertRule(args.selector + '{' + args.style + '}', styleSheet.cssRules.length);
+      }, args);
+    },
+
+    removeCssRule: function (args) {
+      chromeExtension.eval(function (window, args) {
+        helpers.removeCssRule(selector, style);
+        var styleSheet = document.styleSheets[document.styleSheets.length - 1];
+        var i;
+        for (i = styleSheet.cssRules.length - 1; i >= 0; i -= 1) {
+          if (styleSheet.cssRules[i].cssText === args.selector + ' { ' + args.style + '; }') {
+            styleSheet.deleteRule(i);
+          }
+        }
+      }, args);
+    },
+
     clearHistogram: function (cb) {
       chromeExtension.eval(function (window) {
         window.__ngDebug.watchExp = {};

js/services/appHighlight.js

@@ -0,0 +1,39 @@
+// Service for highlighting parts of the application
+panelApp.factory('appHighlight', function (appContext) {
+
+  //TODO: improve look of highlighting; for instance, if an element is bound and a scope,
+  // you will only see the most recently applied outline
+  var styles = {
+    scopes: {
+      selector: '.ng-scope',
+      style: 'border: 1px solid red'
+    },
+    bindings: {
+      selector: '.ng-binding',
+      style: 'border: 1px solid blue'
+    },
+    app: {
+      selector: '[ng-app]',
+      style: 'border: 1px solid green'
+    }
+  };
+
+  var api = {};
+
+  for (i in styles) {
+    if (styles.hasOwnProperty(i)) {
+      // create closure around "styles"
+      (function () {
+        var style = styles[i];
+        api[i] = function (setting) {
+          if (setting) {
+            appContext.addCssRule(style);
+          } else {
+            appContext.removeCssRule(style);
+          }
+        }
+      }());
+    }
+  }
+  return api;
+});

panel.html

@@ -28,6 +28,7 @@
   <script src="js/services/chromeExtension.js"></script>
   <script src="js/services/d3.js"></script>
   <script src="js/services/filesystem.js"></script>
+  <script src="js/services/appHighlight.js"></script>
 
   <script src="js/controllers/DepsCtrl.js"></script>
   <script src="js/controllers/OptionsCtrl.js"></script>