Add: Elements parent references

src/Elements/BottomBar.hbs

@@ -1,7 +1,4 @@
 <div class="eruda-bottom-bar">
-    <div class="eruda-btn eruda-back" ontouchstart>
-        <span class="eruda-icon eruda-icon-chevron-left"></span>
-    </div>
     <div class="eruda-btn eruda-select" ontouchstart>
         <span class="eruda-icon eruda-icon-hand-pointer-o"></span>
     </div>

src/Elements/Elements.es6

@@ -86,7 +86,6 @@ export default class Elements extends Tool
             parent = this._parent,
             select = this._select;
 
-
         this._$el.on('click', '.eruda-child', function ()
         {
             var idx = util.$(this).data('idx'),
@@ -139,12 +138,20 @@ export default class Elements extends Tool
                 sources.set('json', data);
                 parent.showTool('sources');
             }
+        }).on('click', '.eruda-parent', function ()
+        {
+            let idx = util.$(this).data('idx'),
+                curEl = self._curEl,
+                el = curEl.parentNode;
+
+            while (idx-- && el.parentNode) el = el.parentNode;
+
+            !isElExist(el) ? self._render() : self._setElAndRender(el);
         }).on('click', '.toggle-all-computed-style', () => this._toggleAllComputedStyle());
 
         var $bottomBar = this._$el.find('.eruda-bottom-bar');
 
-        $bottomBar.on('click', '.eruda-back', () => this._back())
-                  .on('click', '.eruda-refresh', () => this._render())
+        $bottomBar.on('click', '.eruda-refresh', () => this._render())
                   .on('click', '.eruda-highlight', () => this._toggleHighlight())
                   .on('click', '.eruda-select', () => this._toggleSelect())
                   .on('click', '.eruda-reset', () => this._setElAndRender(this._htmlEl));
@@ -215,6 +222,7 @@ export default class Elements extends Tool
 
         var {className, id, attributes, tagName} = el;
 
+        ret.parents = getParents(el);
         ret.children = formatChildNodes(el.childNodes);
         ret.attributes = formatAttr(attributes);
         ret.name = formatElName({tagName, id, className, attributes});
@@ -288,7 +296,7 @@ function processStyleRule(val)
 
 const isElExist = val => util.isEl(val) && val.parentNode;
 
-function formatElName(data)
+function formatElName(data, {noAttr = false} = {})
 {
     var {id, className, attributes} = data;
 
@@ -305,12 +313,15 @@ function formatElName(data)
         });
     }
 
-    util.each(attributes, (attr) =>
+    if (!noAttr)
     {
-        var name = attr.name;
-        if (name === 'id' || name === 'class' || name === 'style') return;
-        ret += ` ${name}="${attr.value}"`;
-    });
+        util.each(attributes, (attr) =>
+        {
+            var name = attr.name;
+            if (name === 'id' || name === 'class' || name === 'style') return;
+            ret += ` ${name}="${attr.value}"`;
+        });
+    }
 
     return ret;
 }
@@ -364,6 +375,25 @@ function formatChildNodes(nodes)
     return ret;
 }
 
+function getParents(el)
+{
+    var ret = [],
+        i = 0,
+        parent = el.parentNode;
+
+    while (parent && parent.nodeType === 1)
+    {
+        ret.push({
+            text: formatElName(parent, {noAttr: true}),
+            idx: i++
+        });
+
+        parent = parent.parentNode;
+    }
+
+    return ret.reverse();
+}
+
 function getInlineStyle(style)
 {
     var ret = {

src/Elements/Elements.hbs

@@ -1,4 +1,14 @@
-<div class="eruda-breadcrumb" ontouchstart>
+{{#if parents}}
+    <ul class="eruda-parents">
+        {{#each parents}}
+            <li>
+                <div class="eruda-parent" data-idx="{{idx}}">{{{text}}}</div>
+                <span class="eruda-icon-chevron-right"></span>
+            </li>
+        {{/each}}
+    </ul>
+{{/if}}
+<div class="eruda-breadcrumb">
     {{{name}}}
 </div>
 {{#if children}}

src/Elements/Elements.scss

@@ -9,6 +9,27 @@
             @include overflow-auto(y);
             height: 100%;
         }
+        .parents {
+            @include overflow-auto(x);
+            background: #fff;
+            padding: $padding;
+            white-space: nowrap;
+            border-bottom: 1px solid $gray-light;
+            cursor: pointer;
+            font-size: $font-size-s;
+            li {
+                display: inline-block;
+                .parent {
+                    display: inline-block;
+                }
+                &:last-child {
+                    margin-right: 0;
+                }
+            }
+            .icon-chevron-right {
+                font-size: 8px;
+            }
+        }
         .breadcrumb {
             @include breadcrumb();
             cursor: pointer;
@@ -180,7 +201,7 @@
                 color: $gray;
                 font-size: 14px;
                 line-height: 40px;
-                width: 20%;
+                width: 25%;
                 display: inline-block;
                 transition: background $anim-duration, color $anim-duration;
                 &:active {

test/index.html

@@ -9,7 +9,7 @@
     <script src="assets/eruda.js"></script>
 </head>
 <body>
-    <div id="test-element" class="border" style="color:red">
+    <div id="test-element" class="border super-long1 super-long2 super-long-class-name" style="color:red">
         <!-- This is a comment -->
         <div class="child-one" style="background-image: url(http://7xn2zy.com1.z0.glb.clouddn.com/blog_elf.jpg); color: rgb(255, 80, 0);">One</div>
         <div class="child-two">Two</div>
@@ -78,7 +78,7 @@
         setTimeout(function () {
             eruda.init({container: el});
             init();
-            eruda.get('console').log('shit');
+            eruda.get('console').log('test');
         }, 1000);
     </script>
     <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script>