Dev: Elements safe check nodes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eruda",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Console for mobile JavaScript",
   "main": "index.js",
   "scripts": {

src/DevTools/DevTools.es6

@@ -16,7 +16,7 @@ export default class DevTools extends util.Emitter
     {
         super();
 
-        this._$parent = $parent;
+        this.$parent = $parent;
         this._isShow = false;
         this._opacity = 1;
         this._tools = {};
@@ -153,7 +153,7 @@ export default class DevTools extends util.Emitter
     }
     _appendTpl()
     {
-        var $parent = this._$parent;
+        var $parent = this.$parent;
 
         $parent.append(require('./DevTools.hbs')());
 

src/Elements/Elements.es6

@@ -26,7 +26,7 @@ export default class Elements extends Tool
         $el.append(require('./BottomBar.hbs')());
 
         this._bindEvent();
-        this._htmlEl = document.getElementsByTagName('html')[0];
+        this._htmlEl = document.documentElement;
         this._initHighlight();
         this._setEl(this._htmlEl);
     }
@@ -40,7 +40,10 @@ export default class Elements extends Tool
     {
         if (this._curEl === this._htmlEl) return;
 
-        var parent = this._curEl.parentNode;
+        var parentQueue = this._curParentQueue;
+
+        var parent = parentQueue.shift();
+        while (!isElExist(parent)) parent = parentQueue.shift();
 
         this._setEl(parent);
     }
@@ -55,6 +58,8 @@ export default class Elements extends Tool
             var curEl = self._curEl,
                 el = curEl.childNodes[idx];
 
+            if (!isElExist(el)) self._render();
+
             if (el.nodeType === 3)
             {
                 var parent = self._parent,
@@ -103,7 +108,7 @@ export default class Elements extends Tool
     }
     _initHighlight()
     {
-        this._highlight = new Highlight();
+        this._highlight = new Highlight(this._parent.$parent);
     }
     _toggleHighlight()
     {
@@ -119,6 +124,16 @@ export default class Elements extends Tool
         this._rmDefComputedStyle = true;
         window.$0 = el;
 
+        var parentQueue = [];
+
+        var parent = el.parentNode;
+        while (parent)
+        {
+            parentQueue.push(parent);
+            parent = parent.parentNode;
+        }
+        this._curParentQueue = parentQueue;
+
         this._render();
     }
     _getData()
@@ -153,11 +168,18 @@ export default class Elements extends Tool
     }
     _render()
     {
+        if (!isElExist(this._curEl)) return this._back();
+
         this._highlight[this._highlightElement ? 'show' : 'hide']();
         this._$showArea.html(this._tpl(this._getData()));
     }
 }
 
+function isElExist(val)
+{
+    return util.isEl(val) && val.parentNode;
+}
+
 function formatElName(data)
 {
     var {

src/Elements/Highlight.es6

@@ -4,9 +4,9 @@ require('./Highlight.scss');
 
 export default class Highlight
 {
-    constructor()
+    constructor($container)
     {
-        this._appendTpl();
+        this._appendTpl($container);
     }
     setEl(el)
     {
@@ -86,9 +86,9 @@ export default class Highlight
             height: bh - pt - pb
         });
     }
-    _appendTpl()
+    _appendTpl($container)
     {
-        util.$('body').append(require('./Highlight.hbs')());
+        $container.append(require('./Highlight.hbs')());
 
         this._$el = util.$('.eruda-elements-highlight');
         this._$margin = this._$el.find('.eruda-margin');

src/Elements/Highlight.scss

@@ -4,7 +4,7 @@
     left: 0;
     right: 0;
     opacity: .5;
-    z-index: 10000;
+    z-index: -100;
     .margin {
         position: absolute;
         background: #e8925b;

src/index.es6

@@ -61,8 +61,12 @@ settings.separator()
 function appendContainer()
 {
     if (eruda) eruda.destroy();
-    util.$('body').append('<div id="eruda" class="eruda-container"></div>');
-    $container = util.$('#eruda');
+
+    var containerNode = document.createElement('div');
+    containerNode.id = 'eruda';
+    containerNode.className = 'eruda-container';
+    document.documentElement.appendChild(containerNode);
+    $container = util.$(containerNode);
 }
 
 module.exports = {

src/lib/util.js

@@ -909,6 +909,30 @@ module.exports = (function ()
         return exports;
     })({});
 
+    /* ------------------------------ isEl ------------------------------ */
+
+    var isEl = _.isEl = (function (exports)
+    {
+        /* Check if value is a DOM element.
+         *
+         * |Name  |Type   |Desc                          |
+         * |---------------------------------------------|
+         * |val   |*      |Value to check                |
+         * |return|boolean|True if value is a DOM element|
+         *
+         * ```javascript
+         * isEl(document.body); // -> true
+         * ```
+         */
+
+        exports = function (val)
+        {
+            return !!(val && val.nodeType === 1);
+        };
+
+        return exports;
+    })({});
+
     /* ------------------------------ isErr ------------------------------ */
 
     var isErr = _.isErr = (function (exports)
@@ -1805,7 +1829,7 @@ module.exports = (function ()
             if (!elDisplay[nodeName])
             {
                 el = document.createElement(nodeName);
-                document.body.appendChild(el);
+                document.documentElement.appendChild(el);
                 display = getComputedStyle(el, '').getPropertyValue("display");
                 el.parentNode.removeChild(el);
                 display == "none" && (display = "block");

test/index.html

@@ -5,6 +5,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <title>Eruda</title>
     <link rel="stylesheet" href="style.css">
+    <script>
+        (function () {
+            var src = '../dist/eruda.js';
+            if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return;
+            document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
+        })();
+    </script>
 </head>
 <body>
     <div id="test-element" class="border" style="color:red">
@@ -21,12 +28,5 @@
             <img src="http://7xn2zy.com1.z0.glb.clouddn.com/blog_elf.jpg">
         </div>
     </div>
-    <script>
-        (function () {
-            var src = '../dist/eruda.js';
-            if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return;
-            document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
-        })();
-    </script>
 </body>
 </html>