release: v2.9.1

src/Elements/Detail.js

@@ -231,10 +231,12 @@ export default class Detail {
       <span class="${c('element-name')}">${data.name}</span>
       <span class="${c('icon-refresh refresh')}"></span>
     </div>
-    ${attribute}
-    ${styles}
-    ${computedStyle}
-    ${listeners}`
+    <div class="${c('element')}">
+      ${attribute}
+      ${styles}
+      ${computedStyle}
+      ${listeners}
+    </div>`
 
     this._$container.html(html).show()
   }

src/Elements/Elements.js

@@ -51,7 +51,7 @@ export default class Elements extends Tool {
     super.show()
 
     if (!this._curNode) {
-      this._setNode(document.body)
+      this.select(document.body)
     }
   }
   // To be removed in 3.0.0
@@ -59,6 +59,7 @@ export default class Elements extends Tool {
     return this.select(node)
   }
   select(node) {
+    this._domViewer.select(node)
     this._setNode(node)
     this.emit('change', node)
     return this
@@ -155,7 +156,7 @@ export default class Elements extends Tool {
       }
 
       if (isElExist(node)) {
-        self._setNode(node)
+        self.select(node)
       }
     })
 
@@ -226,7 +227,6 @@ export default class Elements extends Tool {
     if (node === this._curNode) return
 
     this._curNode = node
-    this._domViewer.select(node)
     this._renderCrumbs()
 
     const parentQueue = []

src/Elements/Elements.scss

@@ -52,7 +52,6 @@
   }
   .detail {
     @include absolute();
-    @include overflow-auto(y);
     z-index: 10;
     padding-top: 40px;
     display: none;
@@ -74,6 +73,10 @@
         right: 0;
       }
     }
+    .element {
+      @include overflow-auto(y);
+      height: 100%;
+    }
   }
   .section {
     border-bottom: 1px solid var(--border);

src/style/luna.scss

@@ -235,7 +235,8 @@
     }
     &.luna-dom-viewer-selected:focus {
       .luna-dom-viewer-selection {
-        background: var(--contrast);
+        background: var(--accent);
+        opacity: 0.2;
       }
     }
   }