Dev: Refactoring

src/Elements/Elements.es6

@@ -304,12 +304,15 @@ function formatChildNodes(nodes)
 
     for (let i = 0, len = nodes.length; i < len; i++)
     {
-        var child = nodes[i];
-        if (child.nodeType === 3)
+        var child = nodes[i],
+            nodeType = child.nodeType;
+
+        if (nodeType === 3 || nodeType === 8)
         {
             var val = child.nodeValue.trim();
             if (val !== '') ret.push({
                 text: val,
+                isCmt: nodeType === 8,
                 idx: i
             });
             continue;
@@ -317,7 +320,7 @@ function formatChildNodes(nodes)
 
         var isSvg = !util.isStr(child.className);
 
-        if (child.nodeType === 1 &&
+        if (nodeType === 1 &&
             child.id !== 'eruda' &&
             (isSvg || child.className.indexOf('eruda') < 0))
         {

src/Elements/Elements.hbs

@@ -4,7 +4,7 @@
 {{#if children}}
     <ul class="eruda-children">
         {{#each children}}
-            <li class="eruda-child" data-idx="{{idx}}">{{{text}}}</li>
+            <li class="eruda-child {{#if isCmt}}eruda-green{{/if}}" data-idx="{{idx}}">{{{text}}}</li>
         {{/each}}
     </ul>
 {{/if}}

src/Elements/Elements.scss

@@ -1,40 +1,38 @@
 @import "../style/variable";
+@import "../style/mixin";
 
 .dev-tools { .tools {
     .elements {
         padding-bottom: 40px;
         font-size: 14px;
         .show-area {
-            overflow-y: auto;
-            -webkit-overflow-scrolling: touch;
+            @include overflow-auto(y);
             height: 100%;
         }
         .breadcrumb {
             background: #fff;
-            padding: $common-padding;
+            padding: $padding;
             margin-bottom: 10px;
             word-break: break-all;
         }
         .section {
             h2 {
                 background: $blue;
-                padding: $common-padding;
+                padding: $padding;
                 color: #fff;
-                font-size: 14px;
+                font-size: $font-size;
             }
             margin-bottom: 10px;
         }
         .children {
             background: #fff;
             margin-bottom: 10px !important;
+            border-bottom: 1px solid $gray-light;
             li {
-                padding: $common-padding;
-                overflow-x: auto;
-                -webkit-overflow-scrolling: touch;
-                border-top: 1px solid $gray;
-                &:last-child {
-                    border-bottom: 1px solid $gray;
-                }
+                @include overflow-auto(x);
+                padding: $padding;
+                border-top: 1px solid $gray-light;
+                white-space: nowrap;
             }
         }
         .attributes {
@@ -53,7 +51,7 @@
         .text-content {
             background: #fff;
             .content {
-                padding: $common-padding;
+                padding: $padding;
                 overflow-x: auto;
                 -webkit-overflow-scrolling: touch;
             }
@@ -87,11 +85,11 @@
             background: #fff;
             font-size: 12px;
             .style-wrapper {
-                padding: $common-padding;
+                padding: $padding;
                 .style-rules {
                     box-shadow: $box-shadow;
                     border: 1px solid $gray;
-                    padding: $common-padding;
+                    padding: $padding;
                     background: #fff;
                     margin-bottom: 10px;
                     .rule {
@@ -111,18 +109,18 @@
             background: #fff;
             font-size: 12px;
             .listener-wrapper {
-                padding: $common-padding;
+                padding: $padding;
                 .listener {
                     box-shadow: $box-shadow;
                     margin-bottom: 10px;
                     background: #fff;
                     .listener-type {
-                        padding: $common-padding;
+                        padding: $padding;
                         background: $blue;
                         color: #fff;
                     }
                     .listener-content li {
-                        padding: $common-padding;
+                        padding: $padding;
                         border: 1px solid $gray;
                         border-top: none;
                         overflow-x: auto;
@@ -142,6 +140,7 @@
             bottom: 0;
             width: 100%;
             font-size: 0;
+            border-top: 1px solid $gray-light;
             .btn {
                 text-align: center;
                 color: $gray;