From 4612fbe753049aaf41eab32ac0c9da264723f2b1 Mon Sep 17 00:00:00 2001 From: Brian Ford Date: Wed, 25 Jul 2012 14:37:54 -0700 Subject: [PATCH] code cleanup, work on issuing warning for code.angularjs.org hosed ang.js --- js/controllers/OptionsCtrl.js | 11 ++++++++- js/directives/d3.js | 35 +++++++++++++++++++------- js/inject/debug.js | 46 ++++++++--------------------------- js/services/appContext.js | 24 ++++++++++++++++++ manifest.json | 2 +- panel.html | 11 ++++++--- 6 files changed, 78 insertions(+), 51 deletions(-) diff --git a/js/controllers/OptionsCtrl.js b/js/controllers/OptionsCtrl.js index 52fd65b..1520e22 100644 --- a/js/controllers/OptionsCtrl.js +++ b/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; + }); + }); diff --git a/js/directives/d3.js b/js/directives/d3.js index 70d35b7..d266220 100644 --- a/js/directives/d3.js +++ b/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), diff --git a/js/inject/debug.js b/js/inject/debug.js index 5140975..318081f 100644 --- a/js/inject/debug.js +++ b/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) { diff --git a/js/services/appContext.js b/js/services/appContext.js index 670a24b..962daea 100644 --- a/js/services/appContext.js +++ b/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 // ------- diff --git a/manifest.json b/manifest.json index dfc126c..62aff9f 100644 --- a/manifest.json +++ b/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" }, diff --git a/panel.html b/panel.html index 8f3e260..52c8487 100644 --- a/panel.html +++ b/panel.html @@ -76,12 +76,13 @@

Watch Tree

-
+
+ +
+
- -
@@ -154,7 +155,9 @@

Info

- Angular version: {{version}} +

Angular version: {{version}}

+

Angular CDN status: {{status}}

+