diff --git a/js/services/appContext.js b/js/services/appContext.js
index dd149fa..a5e1e7a 100644
--- a/js/services/appContext.js
+++ b/js/services/appContext.js
@@ -1,5 +1,5 @@
// Service for doing stuff in the context of the application being debugged
-panelApp.factory('appContext', function(chromeExtension) {
+panelApp.factory('appContext', function (chromeExtension) {
// Private vars
// ============
@@ -260,25 +260,6 @@ 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) {
- 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 = {};
@@ -304,12 +285,12 @@ panelApp.factory('appContext', function(chromeExtension) {
setDebug: function (setting) {
if (setting) {
chromeExtension.eval(function (window) {
- window.document.cookie = '__ngDebug=true;'
+ window.document.cookie = '__ngDebug=true;';
window.document.location.reload();
});
} else {
chromeExtension.eval(function (window) {
- window.document.cookie = '__ngDebug=false;'
+ window.document.cookie = '__ngDebug=false;';
window.document.location.reload();
});
}
diff --git a/js/services/appCss.js b/js/services/appCss.js
new file mode 100644
index 0000000..26611d7
--- /dev/null
+++ b/js/services/appCss.js
@@ -0,0 +1,23 @@
+// Service for injecting CSS into the application
+panelApp.factory('appCss', function (chromeExtension) {
+ return {
+ 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) {
+ 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);
+ }
+ };
+});
diff --git a/js/services/appHighlight.js b/js/services/appHighlight.js
index 96778a3..fe66104 100644
--- a/js/services/appHighlight.js
+++ b/js/services/appHighlight.js
@@ -1,5 +1,5 @@
// Service for highlighting parts of the application
-panelApp.factory('appHighlight', function (appContext) {
+panelApp.factory('appHighlight', function (appCss) {
//TODO: improve look of highlighting; for instance, if an element is bound and a scope,
// you will only see the most recently applied outline
@@ -27,9 +27,9 @@ panelApp.factory('appHighlight', function (appContext) {
var style = styles[i];
api[i] = function (setting) {
if (setting) {
- appContext.addCssRule(style);
+ appCss.addCssRule(style);
} else {
- appContext.removeCssRule(style);
+ appCss.removeCssRule(style);
}
}
}());
diff --git a/js/services/chromeExtension.js b/js/services/chromeExtension.js
index 9b1cce6..bc1e78f 100644
--- a/js/services/chromeExtension.js
+++ b/js/services/chromeExtension.js
@@ -1,3 +1,4 @@
+// abstraction layer for Chrome Extension APIs
panelApp.value('chromeExtension', {
sendRequest: function (requestName, cb) {
chrome.extension.sendRequest({
diff --git a/panel.html b/panel.html
index b1fa2d3..03dd221 100644
--- a/panel.html
+++ b/panel.html
@@ -26,6 +26,7 @@
+