Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

refactored panes, renamed TreeCtrl to ModelCtrl

  • Loading branch information...
commit 0ce8346444b3ab78d5d1f70f3a8c58c5fb69aaa7 1 parent da354bc
@btford btford authored
View
2  js/controllers/TreeCtrl.js → js/controllers/ModelCtrl.js
@@ -1,5 +1,5 @@
-panelApp.controller('TreeCtrl', function TreeCtrl($scope, appContext) {
+panelApp.controller('ModelCtrl', function ModelCtrl($scope, appContext) {
$scope.inspect = function () {
appContext.inspect(this.val.id);
View
5 js/controllers/TabCtrl.js
@@ -1,5 +0,0 @@
-// TODO: call this AppCtrl?
-// this acts as the top level ctrl
-panelApp.controller('TabCtrl', function TabCtrl($scope) {
- $scope.selectedTab = 'Model';
-});
View
51 js/directives/tabs.js
@@ -0,0 +1,51 @@
+panelApp.directive('batTabs', function() {
+ return {
+ restrict: 'E',
+ transclude: true,
+ scope: {},
+ controller: function($scope, $element) {
+ var panes = $scope.panes = [];
+
+ $scope.select = function(pane) {
+ angular.forEach(panes, function(pane) {
+ pane.selected = false;
+ });
+ pane.selected = true;
+ }
+
+ this.addPane = function(pane) {
+ if (panes.length === 0) {
+ $scope.select(pane);
+ }
+ panes.push(pane);
+ }
+ },
+ template:
+ '<div class="container-fluid">' +
+ '<div class="row-fluid">' +
+ '<ul class="nav nav-tabs span12">' +
+ '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+
+ '<a href="" ng-click="select(pane)">{{pane.title}}</a>' +
+ '</li>' +
+ '</ul>' +
+ '</div>' +
+ '<div class="row-fluid" ng-transclude></div>' +
+ '</div>',
+ replace: true
+ };
+}).
+directive('batPane', function() {
+ return {
+ require: '^batTabs',
+ restrict: 'E',
+ transclude: true,
+ scope: { title: '@' },
+ link: function(scope, element, attrs, tabsCtrl) {
+ tabsCtrl.addPane(scope);
+ },
+ template:
+ '<div class="row-fluid" ng-show="selected" ng-transclude>' +
+ '</div>',
+ replace: true
+ };
+});
View
188 panel.html
@@ -19,187 +19,41 @@
<script src="js/directives/d3.js"></script>
<script src="js/directives/mtree.js"></script>
<script src="js/directives/slider.js"></script>
+ <script src="js/directives/tabs.js"></script>
<script src="js/directives/wtree.js"></script>
<script src="js/filters/first.js"></script>
<script src="js/filters/sortByTime.js"></script>
<script src="js/services/appContext.js"></script>
+ <script src="js/services/appHighlight.js"></script>
<script src="js/services/chromeExtension.js"></script>
<script src="js/services/d3.js"></script>
<script src="js/services/filesystem.js"></script>
- <script src="js/services/appHighlight.js"></script>
<script src="js/controllers/DepsCtrl.js"></script>
+ <script src="js/controllers/ModelCtrl.js"></script>
<script src="js/controllers/OptionsCtrl.js"></script>
<script src="js/controllers/PerfCtrl.js"></script>
- <script src="js/controllers/TabCtrl.js"></script>
- <script src="js/controllers/TreeCtrl.js"></script>
</head>
-<body ng-controller="TabCtrl" class="container-fluid">
-
- <div class="row-fluid">
- <ul class="nav nav-tabs span12">
- <li ng-repeat="tabId in ['Model', 'Performance', 'Dependencies', 'Options', 'Help']"
- ng-class="{active: selectedTab == tabId}"
- ng-click="$parent.selectedTab = tabId">
-
- <a href>{{tabId}}</a>
- </li>
- </ul>
- </div>
-
-
- <div ng-class="{hidden: selectedTab != 'Model'}" ng-controller="TreeCtrl" class="row-fluid">
- <h2>Model Tree</h2>
- <div ng-class="{hidden: roots.length <= 1}">
- <label for="select-root">Root <select id="select-root" ng-options="p.value as p.label for p in roots" ng-model="selectedRoot"></select></label>
- </div>
- <pre>
- <bat-mtree val="trees[selectedRoot]" inspect="inspect" edit="edit"></mtree>
- </pre>
- </div>
-
-
- <div ng-class="{hidden: selectedTab != 'Performance'}" ng-controller="PerfCtrl" class="row-fluid">
-
- <h2>Performance</h2>
- <form class="well form-inline" class="row-fluid">
- <label class="checkbox span4" for="extra">
- <input type="checkbox" ng-model="enable" id="extra"> Enable <span class="label label-important">Causes tab to refresh <i class="icon-refresh icon-white"></i></span>
- </label>
- <label class="checkbox span4" for="log">
- <input type="checkbox" ng-model="log" id="log"> Log to console
- </label>
- </form>
-
- <div ng-class="{hidden: !enable}" class="row-fluid">
- <div class="span6">
- <h3>Watch Tree</h3>
- <div class="well well-top" style="height: 400px; overflow-y: auto;">
- <bat-wtree val="trees[selectedRoot]" inspect="inspect"></wtree>
- </div>
- <div class="well well-bottom">
- <label for="select-root" ng-class="{hidden: roots.length <= 1}">Root
- <select id="select-root" ng-options="p.value as p.label for p in roots" ng-model="selectedRoot"></select>
- </label>
- </div>
- </div>
-
- <div class="span6">
- <h3>Watch Expressions</h3>
-
- <div class="well well-top" style="height: 400px; overflow-y: auto;">
- <div ng-repeat="watch in histogram|sortByTime:min:max">
- <span style="font-family: monospace;">{{watch.name | first}} </span>
- <span> | {{watch.percent}}% | {{watch.time}}ms</span>
- <div class="progress">
- <div ng-style="{width: (watch.percent) + '%'}" class= "bar">
- </div>
- </div>
- </div>
- </div>
-
- <div class="well well-bottom">
- <form class="form-inline">
- <label>Filter expressions</label>
- <bat-slider minimum="min" maximum="max"></slider>
- </form>
- <button class="btn btn-success" ng-click="exportData()"><i class="icon-download-alt icon-white"></i> Save Data as JSON</button>
- <button class="btn btn-danger" ng-click="clearHistogram()">Clear Data</button>
- </div>
-
- </div>
-
- </div>
- </div>
-
- <div ng-class="{hidden: selectedTab != 'Dependencies'}" ng-controller="DepsCtrl" class="row-fluid">
- <div class="span12">
- <h2>Service Dependencies</h2>
- <div class="well">
- <bat-d3 val="deps"></d3>
- </div>
- </div>
- </div>
-
- <div ng-class="{hidden: selectedTab != 'Options'}" ng-controller="OptionsCtrl" class="row-fluid">
-
- <div class="span6">
- <h2>Options</h2>
- <form class="well">
-
- <label class="checkbox" for="app">
- <input type="checkbox" ng-model="debugger.app" id="app"> Show applications
- </label>
-
- <label class="checkbox" for="bindings">
- <input type="checkbox" ng-model="debugger.bindings" id="bindings"> Show bindings
- </label>
-
- <label class="checkbox" for="scopes">
- <input type="checkbox" ng-model="debugger.scopes" id="scopes"> Show scopes
- </label>
-
- </form>
- </div>
-
- <div class="span6">
- <h2>Info</h2>
- <div class="well">
- <p>Angular version: {{version}}</p>
- <p>Angular CDN status: {{status}}</p>
- <p><button ng-click="check">check</button></p>
- </div>
- </div>
-
- </div>
-
- <div ng-class="{hidden: selectedTab != 'Help'}" class="row-fluid">
- <h2>Using the Batarang</h2>
-
- <p>First, navigate Chrome Canary to the AngularJS application that you want to debug. <a target="_blank" href="https://developers.google.com/chrome-developer-tools/docs/overview#access">Open the Developer Tools</a>. There should be an AngularJS icon. Click on it to open he AngularJS Batarang.</p>
-
- <p>The Batarang has four tabs: Model, Performance, Options, and Help.</p>
-
- <h3>Model</h3>
-
- <p><img src="img/model-tree.png" alt="Batarang screenshot" title="" /></p>
-
- <p>Starting at the top of this tab, there is the root selection. If the application has only one <code>ng-app</code> declaration (as most applications do) then you will not see the option to change roots.</p>
-
- <p>Below that is a tree showing how scopes are nested, and which models are attached to them. Clicking on a scope name will take you to the Elements tab, and show you the DOM element associated with that scope. Models and methods attached to each scope are listed with bullet points on the tree. Just the name of methods attached to a scope are shown. Models with a simple value and complex objects are shown as JSON. You can edit either, and the changes will be reflected in the application being debugged.</p>
-
- <h3>Performance</h3>
-
- <p><img src="img/performance.png" alt="Batarang performance tab screenshot" title="" /></p>
-
- <p>The performance tab must be enabled separately because it causes code to be injected into AngularJS to track and report performance metrics. There is also an option to output performance metrics to the console.</p>
-
- <p>Below that is a tree of watched expressions, showing which expressions are attached to which scopes. Much like the model tree, you can collapse sections by clicking on "toggle" and you can inspect the element that a scope is attached to by clicking on the scope name.</p>
-
- <p>Underneath that is a graph showing the relative performance of all of the application's expressions. This graph will update as you interact with the application.</p>
-
- <h3>Options</h3>
-
- <p><img src="img/options.png" alt="Batarang options tab screenshot" title="" /></p>
-
- <p>Last, there is the options tab. The options tab has two checkboxes: one for "show scopes" and one for "show bindings." Each of these options, when enabled, highlights the respective feature of the application being debugged; scopes will have a red outline, and bindings will have a blue outline.</p>
-
- <h3>Elements</h3>
-
- <p><img src="img/inspect.png" alt="Batarang console screenshot" title="" /></p>
-
- <p>The Batarang also hooks into some of the existing features of the Chrome developer tools. For AngularJS applications, there is now a properties pane on in the Elements tab. Much like the model tree in the AngularJS tab, you can use this to inspect the models attached to a given element's scope.</p>
-
- <h3>Console</h3>
-
- <p><img src="img/console.png" alt="Batarang console screenshot" title="" /></p>
-
- <p>The Batarang exposes some convenient features to the Chrome developer tools console. To access the scope of an element selected in the Elements tab of the developer tools, in console, you can type <code>$scope</code>. If you change value of some model on <code>$scope</code> and want to have this change reflected in the running application, you need to call <code>$scope.$apply()</code> after making the change.</p>
-
- </div>
-
+<body>
+ <bat-tabs>
+ <bat-pane title="Model">
+ <ng-include src="'panes/model.html'"></ng-include>
+ </bat-pane>
+ <bat-pane title="Performance">
+ <ng-include src="'panes/perf.html'"></ng-include>
+ </bat-pane>
+ <bat-pane title="Dependencies">
+ <ng-include src="'panes/deps.html'"></ng-include>
+ </bat-pane>
+ <bat-pane title="Options">
+ <ng-include src="'panes/options.html'"></ng-include>
+ </bat-pane>
+ <bat-pane title="Help">
+ <ng-include src="'panes/help.html'"></ng-include>
+ </bat-pane>
+ </bat-tabs>
</body>
</html>
View
8 panes/deps.html
@@ -0,0 +1,8 @@
+<div ng-controller="DepsCtrl">
+ <div class="span12">
+ <h2>Service Dependencies</h2>
+ <div class="well">
+ <bat-d3 val="deps"></bat-d3>
+ </div>
+ </div>
+</div>
View
41 panes/help.html
@@ -0,0 +1,41 @@
+<h2>Using the Batarang</h2>
+
+<p>First, navigate Chrome Canary to the AngularJS application that you want to debug. <a target="_blank" href="https://developers.google.com/chrome-developer-tools/docs/overview#access">Open the Developer Tools</a>. There should be an AngularJS icon. Click on it to open he AngularJS Batarang.</p>
+
+<p>The Batarang has four tabs: Model, Performance, Options, and Help.</p>
+
+<h3>Model</h3>
+
+<p><img src="/img/model-tree.png" alt="Batarang screenshot" title="" /></p>
+
+<p>Starting at the top of this tab, there is the root selection. If the application has only one <code>ng-app</code> declaration (as most applications do) then you will not see the option to change roots.</p>
+
+<p>Below that is a tree showing how scopes are nested, and which models are attached to them. Clicking on a scope name will take you to the Elements tab, and show you the DOM element associated with that scope. Models and methods attached to each scope are listed with bullet points on the tree. Just the name of methods attached to a scope are shown. Models with a simple value and complex objects are shown as JSON. You can edit either, and the changes will be reflected in the application being debugged.</p>
+
+<h3>Performance</h3>
+
+<p><img src="/img/performance.png" alt="Batarang performance tab screenshot" title="" /></p>
+
+<p>The performance tab must be enabled separately because it causes code to be injected into AngularJS to track and report performance metrics. There is also an option to output performance metrics to the console.</p>
+
+<p>Below that is a tree of watched expressions, showing which expressions are attached to which scopes. Much like the model tree, you can collapse sections by clicking on "toggle" and you can inspect the element that a scope is attached to by clicking on the scope name.</p>
+
+<p>Underneath that is a graph showing the relative performance of all of the application's expressions. This graph will update as you interact with the application.</p>
+
+<h3>Options</h3>
+
+<p><img src="/img/options.png" alt="Batarang options tab screenshot" title="" /></p>
+
+<p>Last, there is the options tab. The options tab has two checkboxes: one for "show scopes" and one for "show bindings." Each of these options, when enabled, highlights the respective feature of the application being debugged; scopes will have a red outline, and bindings will have a blue outline.</p>
+
+<h3>Elements</h3>
+
+<p><img src="/img/inspect.png" alt="Batarang console screenshot" title="" /></p>
+
+<p>The Batarang also hooks into some of the existing features of the Chrome developer tools. For AngularJS applications, there is now a properties pane on in the Elements tab. Much like the model tree in the AngularJS tab, you can use this to inspect the models attached to a given element's scope.</p>
+
+<h3>Console</h3>
+
+<p><img src="/img/console.png" alt="Batarang console screenshot" title="" /></p>
+
+<p>The Batarang exposes some convenient features to the Chrome developer tools console. To access the scope of an element selected in the Elements tab of the developer tools, in console, you can type <code>$scope</code>. If you change value of some model on <code>$scope</code> and want to have this change reflected in the running application, you need to call <code>$scope.$apply()</code> after making the change.</p>
View
9 panes/model.html
@@ -0,0 +1,9 @@
+<div ng-controller="ModelCtrl">
+ <h2>Model Tree</h2>
+ <div ng-class="{hidden: roots.length <= 1}">
+ <label for="select-root">Root <select id="select-root" ng-options="p.value as p.label for p in roots" ng-model="selectedRoot"></select></label>
+ </div>
+ <pre>
+ <bat-mtree val="trees[selectedRoot]" inspect="inspect" edit="edit"></bat-mtree>
+ </pre>
+</div>
View
31 panes/options.html
@@ -0,0 +1,31 @@
+<div ng-controller="OptionsCtrl">
+
+ <div class="span6">
+ <h2>Options</h2>
+ <form class="well">
+
+ <label class="checkbox" for="app">
+ <input type="checkbox" ng-model="debugger.app" id="app"> Show applications
+ </label>
+
+ <label class="checkbox" for="bindings">
+ <input type="checkbox" ng-model="debugger.bindings" id="bindings"> Show bindings
+ </label>
+
+ <label class="checkbox" for="scopes">
+ <input type="checkbox" ng-model="debugger.scopes" id="scopes"> Show scopes
+ </label>
+
+ </form>
+ </div>
+
+ <div class="span6">
+ <h2>Info</h2>
+ <div class="well">
+ <p>Angular version: {{version}}</p>
+ <p>Angular CDN status: {{status}}</p>
+ <p><button ng-click="check">check</button></p>
+ </div>
+ </div>
+
+</div>
View
51 panes/perf.html
@@ -0,0 +1,51 @@
+<div ng-controller="PerfCtrl">
+
+ <h2>Performance</h2>
+ <form class="well form-inline" class="row-fluid">
+ <label class="checkbox span4" for="extra">
+ <input type="checkbox" ng-model="enable" id="extra"> Enable <span class="label label-important">Causes tab to refresh <i class="icon-refresh icon-white"></i></span>
+ </label>
+ <label class="checkbox span4" for="log">
+ <input type="checkbox" ng-model="log" id="log"> Log to console
+ </label>
+ </form>
+
+ <div ng-class="{hidden: !enable}" class="row-fluid">
+ <div class="span6">
+ <h3>Watch Tree</h3>
+ <div class="well well-top" style="height: 400px; overflow-y: auto;">
+ <bat-wtree val="trees[selectedRoot]" inspect="inspect"></bat-wtree>
+ </div>
+ <div class="well well-bottom">
+ <label for="select-root" ng-class="{hidden: roots.length <= 1}">Root
+ <select id="select-root" ng-options="p.value as p.label for p in roots" ng-model="selectedRoot"></select>
+ </label>
+ </div>
+ </div>
+
+ <div class="span6">
+ <h3>Watch Expressions</h3>
+
+ <div class="well well-top" style="height: 400px; overflow-y: auto;">
+ <div ng-repeat="watch in histogram|sortByTime:min:max">
+ <span style="font-family: monospace;">{{watch.name | first}} </span>
+ <span> | {{watch.percent}}% | {{watch.time}}ms</span>
+ <div class="progress">
+ <div ng-style="{width: (watch.percent) + '%'}" class= "bar">
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="well well-bottom">
+ <form class="form-inline">
+ <label>Filter expressions</label>
+ <bat-slider minimum="min" maximum="max"></slider>
+ </form>
+ <button class="btn btn-success" ng-click="exportData()"><i class="icon-download-alt icon-white"></i> Save Data as JSON</button>
+ <button class="btn btn-danger" ng-click="clearHistogram()">Clear Data</button>
+ </div>
+
+ </div>
+ </div>
+</div>
View
6 test/TreeCtrlSpec.js
@@ -1,4 +1,4 @@
-describe('panelApp:TreeCtrl', function () {
+describe('panelApp:ModelCtrl', function () {
beforeEach(module('panelApp'));
beforeEach(module(function($provide) {
@@ -6,7 +6,7 @@ describe('panelApp:TreeCtrl', function () {
$provide.factory('chromeExtension', createChromeExtensionMock);
}));
- describe('TreeCtrl', function() {
+ describe('ModelCtrl', function() {
var ctrl,
$scope,
appContext,
@@ -22,7 +22,7 @@ describe('panelApp:TreeCtrl', function () {
//inspect.reset();
appContext = _appContext_;
chromeExtension = _chromeExtension_;
- ctrl = $controller('TreeCtrl', {$scope: $scope});
+ ctrl = $controller('ModelCtrl', {$scope: $scope});
}));
it('should call inspect when there is an element to inspect', function () {
Please sign in to comment.
Something went wrong with that request. Please try again.