diff --git a/js/controllers/OptionsCtrl.js b/js/controllers/OptionsCtrl.js
index b12e37e..1b0e930 100644
--- a/js/controllers/OptionsCtrl.js
+++ b/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;
});
-
});
diff --git a/js/services/appContext.js b/js/services/appContext.js
index 0c28edb..7de9038 100644
--- a/js/services/appContext.js
+++ b/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 = {};
diff --git a/js/services/appHighlight.js b/js/services/appHighlight.js
new file mode 100644
index 0000000..96778a3
--- /dev/null
+++ b/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;
+});
diff --git a/panel.html b/panel.html
index a48f6bf..531a907 100644
--- a/panel.html
+++ b/panel.html
@@ -28,6 +28,7 @@
+