Add: Text node support

src/Elements/Elements.es6

@@ -50,9 +50,11 @@ export default class Elements extends Tool
         {
             var idx = util.$(this).data('idx');
 
-            var el = self._curEl.children[idx],
+            var el = self._curEl.childNodes[idx],
                 level = self._curLevel + 1;
 
+            if (el.nodeType !== 1) return;
+
             self._setEl(el, level);
         }).on('click', '.toggle-all-computed-style', () =>
         {
@@ -89,7 +91,6 @@ export default class Elements extends Tool
     _setEl(el, level)
     {
         this._curEl = el;
-        this._$curEl = util.$(el);
         this._curLevel = level;
         this._curCssStore = new CssStore(el);
         this._highlight.setEl(el);
@@ -107,15 +108,13 @@ export default class Elements extends Tool
         var {
                 className,
                 id,
-                children,
+                childNodes,
                 attributes,
-                textContent,
                 tagName
             } = el;
 
-        ret.children = formatChildren(children);
+        ret.children = formatChildNodes(childNodes);
         ret.attributes = formatAttr(attributes);
-        if (children.length === 0) ret.textContent = textContent;
         ret.name = formatElName(tagName, id, className, attributes) + '(' + this._curLevel + ')';
 
         if (needNoStyle(tagName)) return ret;
@@ -139,7 +138,7 @@ export default class Elements extends Tool
 
 function formatElName(tagName, id, className, attributes)
 {
-    var ret = tagName.toLowerCase();
+    var ret = '<span class="eruda-red">' + tagName.toLowerCase() + '</span>';
 
     if (id !== '') ret += '#' + id;
 
@@ -178,15 +177,29 @@ function formatAttr(attributes)
     return ret;
 }
 
-function formatChildren(children)
+function formatChildNodes(nodes)
 {
     var ret = [];
 
-    for (var i = 0, len = children.length; i < len; i++)
+    for (var i = 0, len = nodes.length; i < len; i++)
     {
-        var child = children[i];
-        if (child.id === 'eruda') break;
-        ret.push(formatElName(child.tagName, child.id, child.className, child.attributes));
+        var child = nodes[i];
+        if (child.nodeType === 3)
+        {
+            var val = util.trim(child.nodeValue);
+            if (val !== '') ret.push({
+                text: val,
+                idx: i
+            });
+            continue;
+        }
+        if (child.nodeType === 1 || child.id !== 'eruda')
+        {
+            ret.push({
+                text: formatElName(child.tagName, child.id, child.className, child.attributes),
+                idx: i
+            });
+        }
     }
 
     return ret;

src/Elements/Elements.hbs

@@ -1,10 +1,10 @@
 <div class="eruda-breadcrumb">
-    {{name}}
+    {{{name}}}
 </div>
 {{#if children}}
     <ul class="eruda-children">
         {{#each children}}
-            <li class="eruda-child" data-idx="{{@index}}">{{this}}</li>
+            <li class="eruda-child" data-idx="{{idx}}">{{{text}}}</li>
         {{/each}}
     </ul>
 {{/if}}
@@ -64,11 +64,3 @@
         </div>
     </div>
 {{/if}}
-{{#if textContent}}
-    <div class="eruda-text-content eruda-section">
-        <h2>Text</h2>
-        <div class="eruda-content">
-            {{textContent}}
-        </div>
-    </div>
-{{/if}}

src/Sources/Sources.es6

@@ -1,4 +1,6 @@
 import Tool from '../DevTools/Tool.es6'
+import TreeView from './TreeView.es6'
+import util from '../lib/util'
 
 require('./Sources.scss');
 
@@ -9,11 +11,8 @@ export default class Sources extends Tool
         super();
         this.name = 'sources';
 
-        this._data = {
-            type: ''
-        };
-
         this._loadTpl();
+        this._reset();
     }
     init($el)
     {
@@ -25,16 +24,40 @@ export default class Sources extends Tool
     {
         this._data = data;
     }
+    _reset()
+    {
+        this._data = {
+            type: 'html',
+            val: document.documentElement
+        };
+    }
     _loadTpl()
     {
-        this._emptyTpl = require('./empty.hbs');
+        this._htmlTpl = require('./html.hbs');
     }
     _render()
     {
         var data = this._data;
 
-        var tpl = this._emptyTpl;
-
-        this._$el.html(tpl(data));
+        switch (data.type)
+        {
+            case 'html': return this._renderHtml();
+        }
     }
+    _renderHtml()
+    {
+        var data = this._data;
+
+        var rootNode = data.val;
+
+        this._$el.html(this._htmlTpl);
+        new TreeView(this._$el.find('.eruda-tree'), getNodeChildren(rootNode));
+    }
+}
+
+function getNodeChildren(rootNode)
+{
+    var ret = [];
+
+    var children = rootNode.childNodes;
 }

src/Sources/TreeView.es6

@@ -0,0 +1,10 @@
+require('./TreeView.scss');
+
+export default class TreeView
+{
+    constructor($parent, initialData)
+    {
+        this._$parent = $parent;
+        this._data = initialData;
+    }
+}

src/Sources/empty.hbs

@@ -1,5 +0,0 @@
-<div class="eruda-empty">
-    <div class="eruda-content">
-        Used for displaying html, javaScript, css and image.
-    </div>
-</div>

src/Sources/html.hbs

@@ -0,0 +1,3 @@
+<div class="eruda-html">
+    <div class="eruda-tree"></div>
+</div>

src/style.scss

@@ -28,3 +28,11 @@
     }
 }
 
+.blue {
+    color: $blue;
+}
+
+.red {
+    color: $red;
+}
+

test/index.html

@@ -10,6 +10,13 @@
     <div id="test-element" class="border" style="color:red">
         <div class="child-one">One</div>
         <div class="child-two">Two</div>
+        <div class="child-three">
+            This is a very long text!
+            This is a very long text!
+            This is a very long text!
+            This is a very long text!
+            This is a very long text!
+        </div>
     </div>
     <script>
         (function () {