From 34adac79514dcc8a644a0d19dd76cd7857f8f388 Mon Sep 17 00:00:00 2001 From: Brian Ford Date: Tue, 13 Nov 2012 09:22:53 -0500 Subject: [PATCH] futher refactoring or services --- js/controllers/DepsCtrl.js | 11 ++-- js/controllers/ModelCtrl.js | 45 ++++++-------- js/controllers/OptionsCtrl.js | 31 ++++++--- js/controllers/PerfCtrl.js | 59 ++++++------------ js/services/appContext.js | 114 ---------------------------------- js/services/appDeps.js | 26 ++++++++ js/services/appInfo.js | 67 ++++++++++++++++++++ js/services/appModel.js | 44 +++++++++++++ js/services/appPerf.js | 17 +++-- js/services/appWatch.js | 22 +++++++ js/services/poll.js | 11 ++++ panel.html | 7 ++- panes/model.html | 8 ++- panes/options.html | 5 +- panes/perf.html | 2 +- 15 files changed, 267 insertions(+), 202 deletions(-) create mode 100644 js/services/appDeps.js create mode 100644 js/services/appInfo.js create mode 100644 js/services/appModel.js create mode 100644 js/services/appWatch.js create mode 100644 js/services/poll.js diff --git a/js/controllers/DepsCtrl.js b/js/controllers/DepsCtrl.js index 80c4278..cf71855 100644 --- a/js/controllers/DepsCtrl.js +++ b/js/controllers/DepsCtrl.js @@ -1,6 +1,9 @@ -panelApp.controller('DepsCtrl', function DepsCtrl($scope, appContext) { - appContext.watchPoll(function () { - $scope.deps = appContext.getDeps(); +panelApp.controller('DepsCtrl', function DepsCtrl($scope, appDeps, poll) { + $scope.$on('poll', function () { + appDeps.get(function (deps) { + $scope.$apply(function () { + $scope.deps = deps; + }); + }); }); - $scope.deps = appContext.getDeps(); }); diff --git a/js/controllers/ModelCtrl.js b/js/controllers/ModelCtrl.js index 6e99882..222117c 100644 --- a/js/controllers/ModelCtrl.js +++ b/js/controllers/ModelCtrl.js @@ -1,10 +1,11 @@ -panelApp.controller('ModelCtrl', function ModelCtrl($scope, appContext) { +panelApp.controller('ModelCtrl', function ModelCtrl($scope, appContext, appModel, poll) { $scope.inspect = function () { appContext.inspect(this.val.id); }; + // TODO: fix this $scope.edit = function () { appContext.executeOnScope(this.val.id, function (scope, elt, args) { scope[args.name] = args.value; @@ -16,30 +17,24 @@ panelApp.controller('ModelCtrl', function ModelCtrl($scope, appContext) { }; $scope.roots = []; - - - var updateTree = function () { - var roots = appContext.getListOfRoots(); - if (!roots) { - return; - } - - $scope.tree = appContext.getModelTree($scope.selectedRoot); - - $scope.roots.length = roots.length; - roots.forEach(function (item, i) { - $scope.roots[i] = { - label: item, - value: item - }; + $scope.selectedRoot = null; + + $scope.$on('poll', function () { + appModel.getRootScopes(function (rootScopes) { + $scope.$apply(function () { + $scope.roots = rootScopes; + if ($scope.roots.length === 0) { + $scope.selectedRoot = null; + } else if (!$scope.selectedRoot) { + $scope.selectedRoot = $scope.roots[0]; + } + }); }); - if (roots.length === 0) { - $scope.selectedRoot = null; - } else if (!$scope.selectedRoot) { - $scope.selectedRoot = $scope.roots[0].value; - } - $scope.$apply(); - }; + appModel.getModelTree($scope.selectedRoot, function (tree) { + $scope.$apply(function () { + $scope.tree = tree; + }); + }); + }); - appContext.watchPoll(updateTree); }); diff --git a/js/controllers/OptionsCtrl.js b/js/controllers/OptionsCtrl.js index 0126727..8e21d0f 100644 --- a/js/controllers/OptionsCtrl.js +++ b/js/controllers/OptionsCtrl.js @@ -1,4 +1,4 @@ -panelApp.controller('OptionsCtrl', function OptionsCtrl($scope, appContext, appHighlight) { +panelApp.controller('OptionsCtrl', function OptionsCtrl($scope, appInfo, appHighlight) { $scope.debugger = { scopes: false, @@ -12,12 +12,29 @@ panelApp.controller('OptionsCtrl', function OptionsCtrl($scope, appContext, appH }); }); - appContext.getAngularVersion(function (version) { - $scope.version = version; + appInfo.getAngularVersion(function (version) { + $scope.$apply(function () { + $scope.version = version; + }); }); - /* - appContext.getAngularSrc(function (status) { - $scope.status = status; + + appInfo.getAngularSrc(function (status) { + $scope.$apply(function () { + switch(status) { + case 'good': + $scope.status = 'success'; + $scope.explain = 'CDN detected'; + break; + case 'bad': + $scope.status = 'important'; + $scope.explain = 'You are using the old code.angularjs.org links, which are slow! You should switch to the new CDN link. See this post for more info'; + break; + case 'info': + $scope.status = 'info'; + $scope.explain = 'You may want to use the CDN-hosted AngularJS files. See this post for more info'; + break; + } + }); }); - */ + }); diff --git a/js/controllers/PerfCtrl.js b/js/controllers/PerfCtrl.js index a68b0d2..51a7e48 100644 --- a/js/controllers/PerfCtrl.js +++ b/js/controllers/PerfCtrl.js @@ -1,4 +1,4 @@ -panelApp.controller('PerfCtrl', function PerfCtrl($scope, appContext, appPerf, filesystem) { +panelApp.controller('PerfCtrl', function PerfCtrl($scope, appContext, appPerf, appModel, appWatch, filesystem, poll) { $scope.histogram = []; @@ -15,22 +15,6 @@ panelApp.controller('PerfCtrl', function PerfCtrl($scope, appContext, appPerf, f filesystem.exportJSON('file.json', $scope.histogram); }; - // TODO: remove this (newVal === oldVal ?) - var first = true; - - appContext.getDebug(function (result) { - $scope.enable = result; - - $scope.$watch('enable', function (newVal, oldVal) { - // prevent refresh on initial pageload - if (first) { - first = false; - } else { - appContext.setDebug(newVal); - } - }); - }); - $scope.$watch('log', function (newVal, oldVal) { appContext.setLog(newVal); }); @@ -39,30 +23,25 @@ panelApp.controller('PerfCtrl', function PerfCtrl($scope, appContext, appPerf, f appContext.inspect(this.val.id); }; - var updateTree = function () { + $scope.$on('poll', function () { appPerf.get(function (histogram) { - $scope.histogram = histogram; + $scope.$apply(function () { + $scope.histogram = histogram; + }); }); - - var roots = appContext.getListOfRoots(); - if (!roots) { - return; - } - - $scope.tree = appContext.getWatchTree($scope.selectedRoot); - - $scope.roots.length = roots.length; - roots.forEach(function (item, i) { - $scope.roots[i] = { - label: item, - value: item - }; + appModel.getRootScopes(function (rootScopes) { + $scope.$apply(function () { + $scope.roots = rootScopes; + if ($scope.roots.length === 0) { + $scope.selectedRoot = null; + } else if (!$scope.selectedRoot) { + $scope.selectedRoot = $scope.roots[0]; + } + }); }); - if (roots.length === 0) { - $scope.selectedRoot = null; - } else if (!$scope.selectedRoot) { - $scope.selectedRoot = $scope.roots[0].value; - } - }; - appContext.watchPoll(updateTree); + appWatch.getWatchTree($scope.selectedRoot, function (tree) { + $scope.tree = tree; + }); + }); + }); diff --git a/js/services/appContext.js b/js/services/appContext.js index 0bdb6f7..e9ba5fc 100644 --- a/js/services/appContext.js +++ b/js/services/appContext.js @@ -1,43 +1,6 @@ // Service for running code in the context of the application being debugged panelApp.factory('appContext', function (chromeExtension) { - // Private vars - // ============ - - var _debugCache = {}, - _scopeCache = {}, - _watchCache = {}, - _pollListeners = [], - _pollInterval = 500; - - - // TODO: make this private and have it automatically poll? - var getDebugData = function (callback) { - chromeExtension.eval(function (window) { - if (!window.__ngDebug) { - return {}; - } - return { - deps: window.__ngDebug.getDeps(), - roots: window.__ngDebug.getRootScopeIds() - }; - }, - function (data) { - if (data) { - _debugCache = data; - } - _pollListeners.forEach(function (fn) { - fn(); - }); - - // poll every 500 ms - setTimeout(getDebugData, _pollInterval); - }); - }; - getDebugData(); - - - // Public API // ========== return { @@ -66,74 +29,6 @@ panelApp.factory('appContext', function (chromeExtension) { "}", args, cb); }, - // Getters - // ------- - - getListOfRoots: function () { - return _debugCache.roots; - }, - - getModelTree: function (id) { - chromeExtension.eval("function (window, args) {" + - "return window.__ngDebug.getScopeTree(args.id);" + - "}", {id: id}, function (tree) { - if (tree) { - _scopeCache[id] = tree; - } - }); - return _scopeCache[id]; - }, - - getWatchTree: function (id) { - chromeExtension.eval("function (window, args) {" + - "return window.__ngDebug.getWatchTree(args.id);" + - "}", {id: id}, function (tree) { - if (tree) { - _watchCache[id] = tree; - } - }); - return _watchCache[id]; - }, - - getDeps: function () { - 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) {" + - "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 - // ------- - refresh: function (cb) { chromeExtension.eval(function (window) { window.document.location.reload(); @@ -178,11 +73,6 @@ panelApp.factory('appContext', function (chromeExtension) { '}'); }, - // takes # of milliseconds - setPollInterval: function (setting) { - _pollInterval = setting; - }, - // Registering events // ------------------ @@ -205,10 +95,6 @@ panelApp.factory('appContext', function (chromeExtension) { port.onDisconnect.addListener(function (a) { console.log(a); }); - }, - - watchPoll: function (fn) { - _pollListeners.push(fn); } }; diff --git a/js/services/appDeps.js b/js/services/appDeps.js new file mode 100644 index 0000000..eabf373 --- /dev/null +++ b/js/services/appDeps.js @@ -0,0 +1,26 @@ +// Service for retrieving and caching application dependencies +panelApp.factory('appDeps', function (chromeExtension, appContext) { + + var _depsCache = []; + + // clear cache on page refresh + appContext.watchRefresh(function () { + _depsCache = []; + }); + + return { + get: function (callback) { + chromeExtension.eval(function (window) { + if (window.__ngDebug) { + return window.__ngDebug.getDeps(); + } + }, + function (data) { + if (data) { + _depsCache = data; + } + callback(_depsCache); + }); + } + }; +}); diff --git a/js/services/appInfo.js b/js/services/appInfo.js new file mode 100644 index 0000000..4fc5048 --- /dev/null +++ b/js/services/appInfo.js @@ -0,0 +1,67 @@ +// Service for running code in the context of the application being debugged +panelApp.factory('appInfo', function (chromeExtension, appContext) { + + var _versionCache = null, + _srcCache = null; + + // clear cache on page refresh + appContext.watchRefresh(function () { + _versionCache = null; + _srcCache = null; + }); + + return { + getAngularVersion: function (callback) { + if (_versionCache) { + setTimeout(function () { + callback(_versionCache); + }, 0); + } else { + chromeExtension.eval(function () { + return window.angular.version.full + + ' ' + + window.angular.version.codeName; + }, function (data) { + _versionCache = data; + callback(_versionCache); + }); + } + }, + + getAngularSrc: function (callback) { + if (_srcCache) { + setTimeout(function () { + callback(_srcCache); + }, 0); + } else { + 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'; + }, function (src) { + if (src) { + _srcCache = src; + } + callback(_srcCache); + }); + } + } + + }; +}); diff --git a/js/services/appModel.js b/js/services/appModel.js new file mode 100644 index 0000000..3ff8874 --- /dev/null +++ b/js/services/appModel.js @@ -0,0 +1,44 @@ +// Service for running code in the context of the application being debugged +panelApp.factory('appModel', function (chromeExtension, appContext) { + + var _scopeCache = {}, + _rootScopeCache = []; + + + // clear cache on page refresh + appContext.watchRefresh(function () { + _scopeCache = {}; + _rootScopeCache = []; + }); + + return { + getRootScopes: function (callback) { + chromeExtension.eval(function (window) { + if (!window.__ngDebug) { + return; + } + return window.__ngDebug.getRootScopeIds(); + }, + function (data) { + if (data) { + _rootScopeCache = data; + } + callback(_rootScopeCache); + }); + }, + + getModelTree: function (id, callback) { + if (!id) { + return; + } + chromeExtension.eval(function (window, args) { + return window.__ngDebug.getScopeTree(args.id); + }, {id: id}, function (tree) { + if (tree) { + _scopeCache[id] = tree; + } + callback(_scopeCache[id]); + }); + } + }; +}); diff --git a/js/services/appPerf.js b/js/services/appPerf.js index a5ac748..35fa1c6 100644 --- a/js/services/appPerf.js +++ b/js/services/appPerf.js @@ -1,10 +1,21 @@ // Service for retrieving and caching performance data -panelApp.factory('appPerf', function (chromeExtension) { +panelApp.factory('appPerf', function (chromeExtension, appContext) { var _histogramCache = [], _watchNameToPerf = {}, _totalCache = 0; + var clear = function () { + _histogramCache = []; + _watchNameToPerf = {}; + _totalCache = 0; + }; + + // clear cache on page refresh + appContext.watchRefresh(function () { + clear(); + }); + var getHistogramData = function (callback) { chromeExtension.eval(function (window) { if (!window.__ngDebug) { @@ -46,8 +57,6 @@ panelApp.factory('appPerf', function (chromeExtension) { callback(_histogramCache); }); }, - clear: function () { - _histogramCache = []; - } + clear: clear }; }); diff --git a/js/services/appWatch.js b/js/services/appWatch.js new file mode 100644 index 0000000..3fbe700 --- /dev/null +++ b/js/services/appWatch.js @@ -0,0 +1,22 @@ +// Service for running code in the context of the application being debugged +panelApp.factory('appWatch', function (chromeExtension) { + + var _watchCache = {}; + + // Public API + // ========== + return { + + getWatchTree: function (id, callback) { + chromeExtension.eval("function (window, args) {" + + "return window.__ngDebug.getWatchTree(args.id);" + + "}", {id: id}, function (tree) { + if (tree) { + _watchCache[id] = tree; + } + callback(_watchCache[id]); + }); + } + + }; +}); diff --git a/js/services/poll.js b/js/services/poll.js new file mode 100644 index 0000000..6e280ab --- /dev/null +++ b/js/services/poll.js @@ -0,0 +1,11 @@ +// Service for broadcasting poll events +panelApp.factory('poll', function ($rootScope) { + + setInterval(function () { + $rootScope.$broadcast('poll'); + }, 500); + + return { + setInterval: function (int) {} + }; +}); diff --git a/panel.html b/panel.html index b486533..b014312 100644 --- a/panel.html +++ b/panel.html @@ -28,10 +28,15 @@ + + + + + @@ -41,7 +46,7 @@ - + diff --git a/panes/model.html b/panes/model.html index 17aac29..78a4cb5 100644 --- a/panes/model.html +++ b/panes/model.html @@ -1,7 +1,11 @@

Models

-
- +
+ 
     
diff --git a/panes/options.html b/panes/options.html
index da6c2c2..75d052e 100644
--- a/panes/options.html
+++ b/panes/options.html
@@ -23,10 +23,7 @@
     
Info

     

       
Angular version: {{version}}

-      
+      
Angular CDN status:
diff --git a/panes/perf.html b/panes/perf.html index 1091fe8..c3948a2 100644 --- a/panes/perf.html +++ b/panes/perf.html @@ -18,7 +18,7 @@