chore: small changes

src/Elements/Detail.js

@@ -42,7 +42,8 @@ export default class Detail {
     this._enableObserver()
     this._render()
   }
-  hide() {
+  hide = () => {
+    this._$container.hide()
     this._disableObserver()
   }
   destroy() {
@@ -211,8 +212,10 @@ export default class Detail {
       </div>`
     }
 
-    const html = `<div class="${c('breadcrumb')}">
-      ${data.name}
+    const html = `<div class="${c('control')}">
+      <span class="${c('icon-arrow-left back')}"></span>
+      <span class="${c('element-name')}">${data.name}</span>
+      <span class="${c('icon-refresh refresh')}"></span>
     </div>
     ${attribute}
     ${styles}
@@ -314,7 +317,7 @@ export default class Detail {
           devtools.showTool('sources')
         }
       })
-      .on('click', '.eruda-breadcrumb', () => {
+      .on('click', c('.element-name'), () => {
         const sources = devtools.get('sources')
 
         if (sources) {
@@ -322,6 +325,11 @@ export default class Detail {
           devtools.showTool('sources')
         }
       })
+      .on('click', c('.back'), this.hide)
+      .on('click', c('.refresh'), () => {
+        this._render()
+        devtools.notify('Refreshed')
+      })
   }
   _initObserver() {
     this._observer = new MutationObserver((mutations) => {

src/Elements/Elements.scss

@@ -48,24 +48,31 @@
     @include absolute();
     @include overflow-auto(y);
     z-index: 10;
+    padding-top: 40px;
     display: none;
     background: var(--background);
-  }
-  .breadcrumb {
-    @include breadcrumb();
-    cursor: pointer;
-    transition: background-color $anim-duration, color $anim-duration;
-    &:active {
-      background: var(--highlight);
-      color: var(--select-foreground);
-      span {
-        color: var(--select-foreground);
+    .control {
+      padding: 10px 35px;
+      .element-name {
+        font-size: $font-size-s;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        width: 100%;
+        display: inline-block;
+      }
+      .icon-arrow-left {
+        left: 0;
+      }
+      .icon-refresh {
+        right: 0;
       }
     }
   }
   .section {
     border-bottom: 1px solid var(--border);
     color: var(--foreground);
+    margin: 10px 0;
     h2 {
       @include right-btn();
       color: var(--primary);
@@ -73,7 +80,7 @@
       border-top: 1px solid var(--border);
       padding: $padding;
       font-size: $font-size;
-      transition: background $anim-duration;
+      transition: background-color $anim-duration;
       &.active-effect {
         cursor: pointer;
       }
@@ -82,7 +89,6 @@
         color: var(--select-foreground);
       }
     }
-    margin-bottom: 10px;
   }
   .attributes {
     font-size: $font-size-s;

src/style/style.scss

@@ -51,6 +51,7 @@
 
 .icon-disabled {
   opacity: 0.5;
+  pointer-events: none;
   cursor: default !important;
   &:active {
     color: inherit !important;