Permalink
Browse files

major overhaul

  • Loading branch information...
1 parent 3800d92 commit 4682d4baf262fd7e1260e383dcfd401e4065b36b @btford btford committed Mar 22, 2013
View
@@ -37,6 +37,12 @@ body {
margin: 0;
}
+bat-scope-tree .selected {
+ font-weight: bold;
+ text-decoration: underline;
+ color: #333;
+}
+
/*
* Slider widget style based on jquery-ui-bootstrap
* http://addyosmani.github.com/jquery-ui-bootstrap
@@ -1,4 +1,4 @@
-panelApp.controller('DepsCtrl', function DepsCtrl($scope, appDeps, poll) {
+angular.module('panelApp').controller('DepsCtrl', function DepsCtrl($scope, appDeps) {
$scope.$on('poll', function () {
appDeps.get(function (deps) {
$scope.$apply(function () {
@@ -1,25 +1,36 @@
-
-panelApp.controller('ModelCtrl', function ModelCtrl($scope, appContext, appModel, poll) {
+angular.module('panelApp').controller('ModelCtrl', function ModelCtrl($scope, appContext, appModel) {
$scope.inspect = function () {
appContext.inspect(this.val.id);
};
+ $scope.select = function () {
+ $scope.selectedScope = this.val.id;
+ };
// TODO: fix this
$scope.edit = function () {
appContext.executeOnScope(this.val.id, function (scope, elt, args) {
- scope[args.name] = args.value;
- scope.$apply();
+ scope.$apply(function () {
+ scope[args.name] = args.value;
+ });
}, {
name: this.key,
value: JSON.parse(this.item)
});
};
$scope.roots = [];
+ $scope.model = null;
+
$scope.selectedRoot = null;
+ $scope.selectedScope = null;
+
+ $scope.enableInspector = appModel.enableInspector;
+
$scope.$on('poll', function () {
+
+ // get the list of root scopes
appModel.getRootScopes(function (rootScopes) {
$scope.$apply(function () {
$scope.roots = rootScopes;
@@ -28,13 +39,30 @@ panelApp.controller('ModelCtrl', function ModelCtrl($scope, appContext, appModel
} else if (!$scope.selectedRoot) {
$scope.selectedRoot = $scope.roots[0];
}
+ if ($scope.selectedRoot && !$scope.selectedScope) {
+ $scope.selectedScope = $scope.selectedRoot;
+ }
});
});
- appModel.getModelTree($scope.selectedRoot, function (tree) {
- $scope.$apply(function () {
- $scope.tree = tree;
+
+ // get scope tree
+ if ($scope.selectedRoot) {
+ appModel.getScopeTree($scope.selectedRoot, function (tree) {
+ $scope.$apply(function () {
+ $scope.tree = tree;
+ });
});
- });
+ }
+
+ // get models on the selected scope
+ if ($scope.selectedScope) {
+ appModel.getModel($scope.selectedScope, function (model) {
+ $scope.$apply(function () {
+ $scope.model = model;
+ });
+ });
+ }
});
+
});
@@ -1,4 +1,4 @@
-panelApp.controller('OptionsCtrl', function OptionsCtrl($scope, appInfo, appHighlight) {
+angular.module('panelApp').controller('OptionsCtrl', function OptionsCtrl($scope, appInfo, appHighlight) {
$scope.debugger = {
scopes: false,
@@ -1,4 +1,4 @@
-panelApp.controller('PerfCtrl', function PerfCtrl($scope, appContext, appPerf, appModel, appWatch, filesystem, poll) {
+angular.module('panelApp').controller('PerfCtrl', function PerfCtrl($scope, appContext, appPerf, appModel, appWatch, filesystem) {
$scope.histogram = [];
View
@@ -1,6 +1,6 @@
// D3 visualization
// TODO: D3 as a service
-panelApp.directive('batD3', function () {
+angular.module('panelApp').directive('batD3', function () {
return {
restrict: 'E',
terminal: true,
View
@@ -1,4 +1,4 @@
-panelApp.directive('batJsonTree', function($compile) {
+angular.module('panelApp').directive('batJsonTree', function($compile) {
return {
restrict: 'E',
terminal: true,
@@ -12,29 +12,53 @@ panelApp.directive('batJsonTree', function($compile) {
var buildDom = function (object) {
var html = '';
- if (object == undefined) {
- html += 'null';
+ var prop;
+ if (object === undefined) {
+ html += '<i>undefined</i>';
+ } else if (object === null) {
+ html += '<i>null</i>';
} else if (object instanceof Array) {
var i;
- html += '<div class="scope-branch">[';
- for (i = 0; i < object.length; i++) {
- html += buildDom(object[i]) + ', ';
+ html += '<div class="scope-branch">[ ';
+ if (object.length > 0) {
+ html += buildDom(object[i]);
+ for (i = 1; i < object.length; i++) {
+ html += ',' + buildDom(object[i]);
+ }
}
html += ']</div>';
} else if (object instanceof Object) {
+ html += ' { ';
for (prop in object) {
if (object.hasOwnProperty(prop)) {
html += '<div class="scope-branch">' + prop + ': ' + buildDom(object[prop]) + '</div>';
}
}
+ html += ' } ';
} else {
html += '<span>' + object.toString() + '</span>';
}
return html;
};
+ var isEmpty = function (object) {
+ var prop;
+ for (prop in object) {
+ if (object.hasOwnProperty(prop)) {
+ return false;
+ }
+ }
+ return true;
+ };
+
scope.$watch('val', function (newVal, oldVal) {
- element.html(buildDom(newVal));
+ if (newVal === null) {
+ element.html('<div class="alert alert-info">Select a scope to view its models.</div>');
+ } else if (isEmpty(newVal)) {
+ element.html('<pre>{ This scope has no models }</pre>');
+ } else {
+ element.html('<pre>' + buildDom(newVal) + '</pre>');
+ }
});
}
};
View
@@ -1,43 +0,0 @@
-panelApp.directive('batModelTree', function ($compile) {
-
- // make toggle settings persist across $compile
- var modelState = {};
- var scopeState = {};
-
- return {
- restrict: 'E',
- terminal: true,
- scope: {
- val: '=',
- edit: '=',
- inspect: '='
- },
- link: function (scope, element, attrs) {
- // this is more complicated then it should be
- // see: https://github.com/angular/angular.js/issues/898
- element.append(
- '<div class="scope-branch">' +
- '<a href ng-click="inspect()">Scope ({{val.id}})</a>' +
- '<span ng-show="val.children.length"> | <a href ng-click="scopeState[val.id] = !scopeState[val.id]">scopes</a></span>' +
- '<span ng-show="val.locals"> | <a href ng-click="modelState[val.id] = !modelState[val.id]">models</a></span>' +
-
- '<div ng-show="modelState[val.id]">' +
- '<bat-json-tree val="val.locals" ></bat-json-tree>' +
- '</div>' +
-
- '<div ng-hide="scopeState[val.id]">' +
- '<div ng-repeat="child in val.children">' +
- '<bat-model-tree val="child" inspect="inspect" edit="edit"></bat-model-tree>' +
- '</div>' +
- '</div>' +
-
- '</div>');
-
- var childScope = scope.$new();
- childScope.modelState = modelState;
- childScope.scopeState = scopeState;
-
- $compile(element.contents())(childScope);
- }
- };
-});
View
@@ -0,0 +1,46 @@
+angular.module('panelApp').directive('batScopeTree', function ($compile) {
+
+ // make toggle settings persist across $compile
+ var modelState = {};
+ var scopeState = {};
+
+ var selected = null;
+
+ var template =
+ '<div class="scope-branch">' +
+ '<a href ng-click="inspect()">&lt;</a> ' +
+ '<a href ng-click="select()" ng-class="{selected: selectedScope == val.id}">Scope ({{val.id}})</a>' +
+ '<div ng-repeat="child in val.children">' +
+ '<bat-scope-tree ' +
+ 'val="child" ' +
+ 'inspect="inspect" ' +
+ 'select="select" ' +
+ 'selected-scope="selectedScope">' +
+ '</bat-scope-tree>' +
+ '</div>' +
+ '</div>';
+
+ return {
+ restrict: 'E',
+ terminal: true,
+ scope: {
+ val: '=',
+ select: '=',
+ selectedScope: '=',
+ inspect: '='
+ },
+ link: function (scope, element, attrs) {
+ // this is more complicated then it should be
+ // see: https://github.com/angular/angular.js/issues/898
+ element.append(template);
+
+ var childScope = scope.$new();
+
+ childScope.select = scope.select;
+ //childScope.selectedScope = scope.selectedScope;
+ childScope.inspect = scope.inspect;
+
+ $compile(element.contents())(childScope);
+ }
+ };
+});
View
@@ -1,5 +1,5 @@
// range slider
-panelApp.directive('batSlider', function($compile) {
+angular.module('panelApp').directive('batSlider', function($compile) {
return {
restrict: 'E',
terminal: true,
View
@@ -1,4 +1,4 @@
-panelApp.directive('batTabs', function ($compile, $templateCache, $http) {
+angular.module('panelApp').directive('batTabs', function ($compile, $templateCache, $http) {
return {
restrict: 'E',
transclude: true,
@@ -1,5 +1,5 @@
// watchers tree
-panelApp.directive('batWatcherTree', function($compile) {
+angular.module('panelApp').directive('batWatcherTree', function($compile) {
// make toggle settings persist across $compile
var scopeState = {};
View
@@ -1,5 +1,5 @@
// returns the first line of a multi-line string
-panelApp.filter('first', function () {
+angular.module('panelApp').filter('first', function () {
return function (input, output) {
return input.split("\n")[0];
};
View
@@ -1,5 +1,5 @@
// returns the number's first 4 decimals
-panelApp.filter('precision', function () {
+angular.module('panelApp').filter('precision', function () {
return function (input, output) {
return input.toPrecision(4);
};
View
@@ -1,6 +1,6 @@
// Sort watchers by time
// Used by the performance tab
-panelApp.filter('sortByTime', function () {
+angular.module('panelApp').filter('sortByTime', function () {
return function (input, min, max) {
var copy = input.slice(0);
Oops, something went wrong.

0 comments on commit 4682d4b

Please sign in to comment.