renamed wtree and mtree to watch-tree and model-tree respectively

js/directives/modelTree.js

@@ -1,12 +1,12 @@
 // model tree
-panelApp.directive('batMtree', function($compile) {
+panelApp.directive('batModelTree', function($compile) {
   return {
     restrict: 'E',
     terminal: true,
     scope: {
-      val: '=val',
-      edit: '=edit',
-      inspect: '=inspect'
+      val: '=',
+      edit: '=',
+      inspect: '='
     },
     link: function (scope, element, attrs) {
       // this is more complicated then it should be
@@ -15,15 +15,15 @@ panelApp.directive('batMtree', function($compile) {
         '<div class="scope-branch">' +
           '<a href ng-click="inspect()">Scope ({{val.id}})</a> | ' +
           '<a href ng-click="showState = !showState">toggle</a>' +
-          '<div ng-class="{hidden: showState}">' +
+          '<div ng-hide="showState">' +
             '<ul>' +
               '<li ng-repeat="(key, item) in val.locals">' +
                 '{{key}}' +
-                '<input ng-class="{hidden: !item}" ng-model="item" ng-change="edit()()">' +
+                '<input ng-show="item" ng-model="item" ng-change="edit()()">' +
               '</li>' +
             '</ul>' +
             '<div ng-repeat="child in val.children">' +
-              '<bat-mtree val="child" inspect="inspect" edit="edit"></bat-mtree>' +
+              '<bat-model-tree val="child" inspect="inspect" edit="edit"></bat-model-tree>' +
             '</div>' +
           '</div>' +
         '</div>');

js/directives/watcherTree.js

@@ -1,5 +1,5 @@
 // watchers tree
-panelApp.directive('batWtree', function($compile) {
+panelApp.directive('batWatcherTree', function($compile) {
   return {
     restrict: 'E',
     terminal: true,
@@ -14,18 +14,18 @@ panelApp.directive('batWtree', function($compile) {
         '<div class="scope-branch">' +
           '<a href ng-click="inspect()">Scope ({{val.id}})</a> | ' +
           '<a href ng-click="showState = !showState">toggle</a>' +
-          '<div ng-class="{hidden: showState}">' +
+          '<div ng-hide="showState">' +
             '<ul>' +
               '<li ng-repeat="item in val.watchers">' +
-                '<a href ng-class="{hidden: item.split(\'\n\').length < 2}" ng-click="showState = !showState">toggle</a> ' +
-                '<code ng-class="{hidden: showState && item.split(\'\n\').length > 1}">{{item | first}}</code>' +
-                '<pre ng-class="{hidden: !showState || item.split(\'\n\').length < 2}">' +
+                '<a href ng-hide="item.split(\'\n\').length < 2" ng-click="showState = !showState">toggle</a> ' +
+                '<code ng-hide="showState && item.split(\'\n\').length > 1">{{item | first}}</code>' +
+                '<pre ng-hide="!showState || item.split(\'\n\').length < 2">' +
                   '{{item}}' +
                 '</pre>' +
               '</li>' +
             '</ul>' +
             '<div ng-repeat="child in val.children">' +
-              '<bat-wtree val="child" inspect="inspect"></bat-wtree>' +
+              '<bat-watcher-tree val="child" inspect="inspect"></bat-watcher-tree>' +
             '</div>' +
           '</div>' +
         '</div>');

panel.html

@@ -17,10 +17,10 @@
   <script src="js/panelApp.js"></script>
 
   <script src="js/directives/d3.js"></script>
-  <script src="js/directives/mtree.js"></script>
+  <script src="js/directives/modelTree.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/directives/watcherTree.js"></script>
 
   <script src="js/filters/first.js"></script>
   <script src="js/filters/sortByTime.js"></script>

panes/model.html

@@ -4,6 +4,6 @@
     <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>
+    <bat-model-tree val="trees[selectedRoot]" inspect="inspect" edit="edit"></bat-model-tree>
   </pre>
 </div>

panes/perf.html

@@ -14,7 +14,7 @@
     <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>
+        <bat-watcher-tree val="trees[selectedRoot]" inspect="inspect"></bat-watcher-tree>
       </div>
       <div class="well well-bottom">
         <label for="select-root" ng-class="{hidden: roots.length <= 1}">Root