wip

css/panel.css

@@ -344,6 +344,99 @@ li .status:empty {
 }
 
 
+
+/* */
+
+.source-code {
+  font-family: Menlo, monospace;
+  font-size: 11px;
+  /*white-space: pre-wrap;*/
+}
+
+.source-code li {
+  display: list-item;
+  text-align: -webkit-match-parent;
+}
+
+.outline-disclosure,
+.outline-disclosure ol {
+  list-style-type: none;
+  -webkit-padding-start: 12px;
+  margin: 0;
+}
+
+.outline-disclosure ol.children.expanded {
+  display: block;
+}
+
+.outline-disclosure > ol {
+  position: relative;
+  padding: 2px 6px !important;
+  margin: 0;
+  cursor: default;
+  min-width: 100%;
+}
+
+.outline-disclosure li {
+  padding: 0 0 0 14px;
+  margin-top: 1px;
+  margin-left: -2px;
+  word-wrap: break-word;
+}
+
+.outline-disclosure li.selected .selection {
+  display: block;
+  background-color: rgb(212, 212, 212);
+}
+
+.elements-tree-outline li.parent::before {
+  top: 0 !important;
+}
+.outline-disclosure li.parent::before {
+  -webkit-mask-position: -4px -96px;
+  background-color: rgb(110, 110, 110);
+}
+.outline-disclosure li.parent::before {
+  -webkit-user-select: none;
+  -webkit-mask-image: url(../img/statusbarButtonGlyphs.png);
+  -webkit-mask-size: 320px 120px;
+  content: "a";
+  color: transparent;
+  text-shadow: none;
+  position: relative;
+  top: 2px;
+  margin-right: 1px;
+  height: 12px;
+}
+.outline-disclosure li.parent::before {
+  float: left;
+  width: 8px;
+  padding-right: 2px;
+}
+
+.webkit-html-tag {
+  color: rgb(136, 18, 128);
+}
+
+.webkit-html-attribute-name {
+  color: rgb(153, 69, 0);
+}
+
+.webkit-html-attribute-value {
+  color: rgb(26, 26, 166);
+}
+
+.webkit-html-doctype {
+  color: rgb(192, 192, 192);
+}
+
+.webkit-html-comment {
+  color: rgb(35, 110, 37);
+}
+
+
+
+
 /* bat-json-tree */
 
 bat-json-tree {

js/directives/scopeTree.js

@@ -6,19 +6,75 @@ angular.module('panelApp').directive('batScopeTree', function ($compile) {
 
   var selected = null;
 
+
+  var maybe = function (fn) {
+    return function (val) {
+      if (val === (void 0)) {
+        return;
+      }
+      return fn.apply(this, arguments);
+    };
+  };
+
+  var repeaterPredicate = function (child) {
+    return child.name && child.name['ng-repeat'];
+  };
+
+  var notRepeatedPredicate = function (child) {
+    return !repeaterPredicate(child);
+  };
+
+  var name = function (name) {
+    if (!name) {
+      return '???';
+    }
+    if (name['ng-repeat']) {
+      return name.lhs;
+    }
+    var n = '';
+    [
+      'ng-app',
+      'ng-controller'
+    ].
+    forEach(function (prop) {
+      if (name[prop]) {
+        n += prop + '="' + name[prop] + '"';
+      }
+    });
+    if (n.length === 0) {
+      n += name.tag;
+      if (name.classes.length > 0) {
+        n += '.' + name.classes.join('.');
+      }
+    }
+    return n;
+  };
+
   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>' +
+    '<ol class="children expanded">' +
+      '<span ng-click="select()" ng-class="{selected: selectedScope == val}">' +
+        '<span class="webkit-html-tag">{{c}}</span> ' +
+        '<span class="webkit-html-attribute">{{name(val.name)}}</span> ' +
+        '<span class="webkit-html-tag">{{xc}}</span>' +
+      '</span>' +
+      '<div ng-repeat="(repeat, children) in grouped">' +
+        '<span class="webkit-html-comment">&lt;!-- {{repeat}} --&gt;</span>' +
+          '<bat-scope-tree ' +
+            'ng-repeat="child in children" ' +
+            'val="child" ' +
+            'inspect="inspect" ' +
+            'select="select" ' +
+            'selected-scope-id="selectedScope.id">' +
+          '</bat-scope-tree>' +
       '</div>' +
-    '</div>';
+      '<bat-scope-tree ' +
+        'ng-repeat="child in ungrouped" ' +
+        'val="child" ' +
+        'inspect="inspect" ' +
+        'select="select" ' +
+        'selected-scope-id="selectedScope.id">' +
+      '</bat-scope-tree>' +
+    '</ol>';
 
   return {
     restrict: 'E',
@@ -26,7 +82,7 @@ angular.module('panelApp').directive('batScopeTree', function ($compile) {
     scope: {
       val: '=',
       select: '=',
-      selectedScope: '=',
+      selectedScopeId: '=',
       inspect: '='
     },
     link: function (scope, element, attrs) {
@@ -34,8 +90,32 @@ angular.module('panelApp').directive('batScopeTree', function ($compile) {
       // see: https://github.com/angular/angular.js/issues/898
       element.append(template);
 
+      scope.name = name;
+      scope.c = '{{';
+      scope.xc = '}}';
+
       var childScope = scope.$new();
 
+      childScope.ungrouped = [];
+      childScope.grouped = {};
+
+      childScope.$watch('val.children', function (newChildren) {
+        if (!newChildren) {
+          return;
+        }
+        var grouped = childScope.grouped;
+        newChildren.
+          filter(repeaterPredicate).
+          forEach(function (child) {
+            var repOver = child.name['ng-repeat'];
+            grouped[repOver] = grouped[repOver] || [];
+            grouped[repOver].push(child);
+          }, {});
+
+        childScope.ungrouped = newChildren.filter(notRepeatedPredicate);
+      });
+
+
       childScope.select = scope.select;
       //childScope.selectedScope = scope.selectedScope;
       childScope.inspect = scope.inspect;

js/inject/debug.js

@@ -163,6 +163,7 @@ var instument = function (window) {
   // Utils
   // =====
 
+  // this is silly
   var getWatchTree = function (id) {
     var traverse = function (sc) {
       var tree = {
@@ -189,9 +190,14 @@ var instument = function (window) {
 
 
   var getScopeTree = function (id) {
+
+    var names = api.niceNames();
+
     var traverse = function (sc) {
       var tree = {
         id: sc.$id,
+        name: names[sc.$id],
+        watchers: debug.watchers[sc.$id],
         children: []
       };
 
@@ -273,6 +279,50 @@ var instument = function (window) {
     }
   };
 
+  var summarizeObject = function (obj) {
+    var summary = {}, keys;
+    if (obj instanceof Array) {
+      keys = obj.map(function (e, i) { return i; });
+    } else if (typeof obj === 'object') {
+      keys = Object.keys(obj);
+    } else {
+      return '=' + obj.toString().substr(0, 10);
+    }
+
+    var id;
+
+    if (keys.some(function (key) {
+      var lowKey = key.toLowerCase();
+      if (lowKey.indexOf('name') !== -1 ||
+          lowKey.indexOf('id') !== -1) {
+        return id = key;
+      }
+    })) {
+      return '.' + id + '="' + obj[id].toString() + '"';
+    }
+
+    if (keys.length > 5) {
+      keys = keys.slice(0, 5);
+    }
+
+    keys.forEach(function (key) {
+      var val = obj[key];
+      if (val instanceof Array) {
+        summary[key] = '[ … ]';
+      } else if (typeof val === 'object') {
+        summary[key] = '{ … }';
+      } else if (typeof val === 'function') {
+        summary[key] = 'fn';
+      } else {
+        summary[key] = obj[key].toString()
+        if (summary[key].length > 10) {
+          summary[key] = summary[key].substr(0, 10) + '…';
+        }
+      }
+    });
+    return '=' + JSON.stringify(summary);
+  }
+
 
   // Public API
   // ==========
@@ -289,6 +339,50 @@ var instument = function (window) {
 
     fireCustomEvent: fireCustomEvent,
 
+    niceNames: function () {
+      var ngScopeElts = document.getElementsByClassName('ng-scope');
+      ngScopeElts = Array.prototype.slice.call(ngScopeElts);
+      return ngScopeElts.
+        reduce(function (acc, elt) {
+          var $elt = angular.element(elt);
+          var scope = $elt.scope();
+
+          var name = {};
+
+          [
+            'ng-app',
+            'ng-controller',
+            'ng-repeat'
+          ].
+          forEach(function (attr) {
+            var val = $elt.attr(attr),
+              className = $elt[0].className;
+            if (val) {
+              name[attr] = val;
+              if (attr === 'ng-repeat') {
+                var lhs = /(.+) in/.exec(val);
+                lhs = lhs[1];
+                name.lhs = lhs + summarizeObject(scope[lhs]);
+              }
+            } else if (className.indexOf(attr) !== -1) {
+              val = (new RegExp(attr + ': ([a-zA-Z0-9]+);')).exec(className);
+              val = val[1];
+              name[attr] = val;
+            }
+          });
+
+          if (Object.keys(name).length === 0) {
+            name.tag = $elt[0].tagName.toLowerCase();
+            name.classes = $elt[0].className.
+              replace(/(\W*ng-scope\W*)/, ' ').
+              split(' ').
+              filter(function (i) { return i; });
+          }
+          acc[scope.$id] = name;
+          return acc;
+        }, {});
+    },
+
     getModel: function (id, path) {
 
       // lol chrome

panes/model.html

@@ -21,13 +21,128 @@
     <div class="span6">
       <button class="btn" ng-click="enableInspector()">Enable Inspector</button>
     </div>
+
+
+    <div class="source-code">
+      <ol class="elements-tree-outline">
+
+        <li>
+          <span class="highlight"><span class="webkit-html-doctype">&lt;!DOCTYPE html&gt;</span></span>
+        </li>
+        <li>
+          <span class="highlight"><span class="webkit-html-comment">&lt;!--[if lt IE 7]&gt; &lt;html class="no-js lt-ie9 lt-ie8 lt-ie7 ng-app: docsApp;" lang="en" ng-controller="DocsController"&gt; &lt;![endif]--&gt;</span></span>
+        </li>
+        <li>
+          <span class="highlight"><span class="webkit-html-comment">&lt;!--[if IE 7]&gt;    &lt;html class="no-js lt-ie9 lt-ie8 ng-app: docsApp;" lang="en" ng-controller="DocsController"&gt; &lt;![endif]--&gt;</span></span>
+        </li>
+        <li>
+          <span class="highlight"><span class="webkit-html-comment">&lt;!--[if IE 8]&gt;    &lt;html class="no-js lt-ie9 ng-app: docsApp;" lang="en" ng-controller="DocsController"&gt; &lt;![endif]--&gt;</span></span>
+        </li>
+        <li>
+          <span class="highlight"><span class="webkit-html-comment">&lt;!--[if gt IE 8]&gt;&lt;!--&gt;</span></span>
+        </li>
+        <li class="parent expanded">
+          <span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">html</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">class</span>=​"<span class="webkit-html-attribute-value">no-js ng-app:​ docsApp;​ ng-scope</span>"</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">lang</span>=​"<span class="webkit-html-attribute-value">en</span>"</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">ng-controller</span>=​"<span class="webkit-html-attribute-value">DocsController</span>"</span>&gt;</span>​</span>
+        </li>
+        <ol class="children expanded">
+          <li>
+            <span class="highlight"><span class="webkit-html-comment">&lt;!--&lt;![endif]--&gt;</span></span>
+          </li>
+          <li class="parent">
+            <span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">head</span>&gt;</span>​<span class="webkit-html-text-node bogus">…</span>​<span class="webkit-html-tag">&lt;<span>/head</span>&gt;</span>​</span>
+          </li>
+          <li class="parent expanded">
+            <span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">body</span>&gt;</span>​</span>
+          </li>
+          <ol class="children expanded">
+            <li class="parent expanded">
+              <span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">header</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">class</span>=​"<span class="webkit-html-attribute-value">header</span>"</span>&gt;</span>​</span>
+            </li>
+            <ol class="children expanded">
+              <li class="parent">
+                <span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">div</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">class</span>=​"<span class="webkit-html-attribute-value">navbar navbar-fixed-top</span>"</span>&gt;</span>​<span class="webkit-html-text-node bogus">…</span>​<span class="webkit-html-tag">&lt;<span>/div</span>&gt;</span>​</span>
+              </li>
+              <li>
+                <span class="highlight"><span class="webkit-html-tag close">&lt;<span>/header</span>&gt;</span>​</span>
+              </li>
+            </ol>
+            <li class="parent expanded">
+              <span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">div</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">role</span>=​"<span class="webkit-html-attribute-value">main</span>"</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">class</span>=​"<span class="webkit-html-attribute-value">container</span>"</span>&gt;</span>​</span>
+            </li>
+            <ol class="children expanded">
+              <li>
+                <span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">div</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">class</span>=​"<span class="webkit-html-attribute-value">row clear-navbar</span>"</span>&gt;</span>​<span class="webkit-html-tag">&lt;<span>/div</span>&gt;</span>​</span>
+              </li>
+              <li class="parent selected">
+                <span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">div</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">class</span>=​"<span class="webkit-html-attribute-value">row</span>"</span>&gt;</span>​<span class="webkit-html-text-node bogus">…</span>​<span class="webkit-html-tag">&lt;<span>/div</span>&gt;</span>​</span>
+              </li>
+              <ol class="children">
+                <li class="parent">
+                  <span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">div</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">class</span>=​"<span class="webkit-html-attribute-value">span12</span>"</span>&gt;</span>​<span class="webkit-html-text-node bogus">…</span>​<span class="webkit-html-tag">&lt;<span>/div</span>&gt;</span>​</span>
+                </li>
+                <ol class="children">
+                  <li>
+<span class="highlight"><span class="webkit-html-comment">&lt;!--[if lt IE 7]&gt;
+&lt;p class="alert alert-error"&gt;Your browser is &lt;em&gt;ancient!&lt;/em&gt;
+&lt;a href="http://browsehappy.com/"&gt;Upgrade to a different browser&lt;/a&gt; or
+&lt;a href="http://www.google.com/chromeframe/?redirect=true"&gt;install Google Chrome Frame&lt;/a&gt; to
+experience this site.
+&lt;/p&gt;
+&lt;![endif]--&gt;</span></span>
+                  </li>
+                  <li>
+                    <span class="highlight"><span class="webkit-html-comment">&lt;!--[if lt IE 9]&gt;
+&lt;div class="alert"&gt;
+You are using an old version of Internet Explorer.
+For better and safer browsing experience please &lt;a href="http://www.microsoft.com/IE9"&gt;upgrade IE&lt;/a&gt;
+or install &lt;a href="http://google.com/chrome"&gt;Google Chrome browser&lt;/a&gt;.
+&lt;/div&gt;
+&lt;![endif]--&gt;</span></span>
+                  </li>
+                  <li>
+                    <span class="highlight"><span class="webkit-html-tag close">&lt;<span>/div</span>&gt;</span>​</span>
+                  </li>
+                </ol>
+                <li><span class="highlight"><span class="webkit-html-tag close">&lt;<span>/div</span>&gt;</span>​</span></li>
+              </ol>
+              <li class="parent">
+                <span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">div</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">class</span>=​"<span class="webkit-html-attribute-value">row</span>"</span>&gt;</span>​<span class="webkit-html-text-node bogus">…</span>​<span class="webkit-html-tag">&lt;<span>/div</span>&gt;</span>​</span>
+              </li>
+              <li>
+                <span class="highlight"><span class="webkit-html-tag close">&lt;<span>/div</span>&gt;</span>​</span>
+              </li>
+            </ol>
+            <li>
+              <span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">div</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">id</span>=​"<span class="webkit-html-attribute-value">fader</span>"</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">ng-show</span>=​"<span class="webkit-html-attribute-value">subpage</span>"</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">style</span>=​"<span class="webkit-html-attribute-value">display:​ none;​</span>"</span>&gt;</span>​<span class="webkit-html-tag">&lt;<span>/div</span>&gt;</span>​</span>
+            </li>
+            <li class="parent">
+              <span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">div</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">id</span>=​"<span class="webkit-html-attribute-value">subpage</span>"</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">ng-show</span>=​"<span class="webkit-html-attribute-value">subpage</span>"</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">style</span>=​"<span class="webkit-html-attribute-value">display:​ none;​</span>"</span>&gt;</span>​<span class="webkit-html-text-node bogus">…</span>​<span class="webkit-html-tag">&lt;<span>/div</span>&gt;</span>​</span>
+            </li>
+            <li class="parent">
+              <span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">footer</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">class</span>=​"<span class="webkit-html-attribute-value">footer</span>"</span>&gt;</span>​<span class="webkit-html-text-node bogus">…</span>​<span class="webkit-html-tag">&lt;<span>/footer</span>&gt;</span>​</span>
+            </li>
+            <li class="parent">
+              <span class="highlight"><span class="webkit-html-tag">&lt;<span class="webkit-html-tag-name">div</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">id</span>=​"<span class="webkit-html-attribute-value">__ngDebugElement</span>"</span> <span class="webkit-html-attribute"><span class="webkit-html-attribute-name">style</span>=​"<span class="webkit-html-attribute-value">display:​ none;​</span>"</span>&gt;</span>​<span class="webkit-html-text-node bogus">…</span>​<span class="webkit-html-tag">&lt;<span>/div</span>&gt;</span>​</span>
+            </li>
+            <li>
+              <span class="highlight"><span class="webkit-html-tag close">&lt;<span>/body</span>&gt;</span>​</span>
+            </li>
+          </ol>
+          <li><span class="highlight"><span class="webkit-html-tag close">&lt;<span>/html</span>&gt;</span>​</span></li>
+        </ol>
+      </ol>
+
+
+
+
+    </div>
   </div>
 
   <div bat-vertical-right>
     <div class="sidebar-pane-stack fill visible">
 
       <!-- not sure about this -->
-      <div class="sidebar-pane-title" tabindex="0">Computed Style
+      <div class="sidebar-pane-title">Computed Style
         <div class="sidebar-pane-toolbar">
           <label class="sidebar-pane-subtitle">
             <input type="checkbox">Show inherited
@@ -35,7 +150,7 @@
         </div>
       </div>
 
-      <div class="sidebar-pane-title" tabindex="0">Models</div>
+      <div class="sidebar-pane-title">Models</div>
 
       <div class="sidebar-pane visible">
         <div class="body">