chore: small changes

src/DevTools/DevTools.hbs

@@ -1,4 +1,7 @@
 <div {{{class 'dev-tools'}}}>
-  <div {{{class 'nav-bar'}}}></div>
+  <div {{{class 'nav-bar-container'}}}>
+    <div {{{class 'nav-bar'}}}></div>
+    <div class="eruda-bottom-bar"></div>
+  </div>
   <div {{{class 'tools'}}}></div>
 </div>

src/DevTools/DevTools.js

@@ -10,7 +10,6 @@ import {
   last,
   each,
   isNum,
-  safeStorage,
   $,
   throttle
 } from '../lib/util'
@@ -143,7 +142,6 @@ export default class DevTools extends Emitter {
     const cfg = (this.config = Settings.createCfg('dev-tools', {
       transparency: 1,
       displaySize: 80,
-      activeEruda: false,
       theme: 'Light'
     }))
 
@@ -157,8 +155,6 @@ export default class DevTools extends Emitter {
           return this._setTransparency(val)
         case 'displaySize':
           return this._setDisplaySize(val)
-        case 'activeEruda':
-          return activeEruda(val)
         case 'theme':
           return evalCss.setTheme(val)
       }
@@ -166,7 +162,6 @@ export default class DevTools extends Emitter {
 
     settings
       .separator()
-      .switch(cfg, 'activeEruda', 'Always Activated')
       .select(cfg, 'theme', 'Theme', keys(evalCss.getThemes()))
       .range(cfg, 'transparency', 'Transparency', {
         min: 0.2,
@@ -207,7 +202,7 @@ export default class DevTools extends Emitter {
     this._$tools = this._$el.find('.eruda-tools')
   }
   _initNavBar() {
-    this._navBar = new NavBar(this._$el.find('.eruda-nav-bar'))
+    this._navBar = new NavBar(this._$el.find('.eruda-nav-bar-container'))
     this._navBar.on('showTool', name => this.showTool(name))
   }
   _bindEvent() {
@@ -270,7 +265,3 @@ export default class DevTools extends Emitter {
     }
   }
 }
-
-const localStore = safeStorage('local')
-
-const activeEruda = flag => localStore.setItem('active-eruda', flag)

src/DevTools/NavBar.js

@@ -7,8 +7,7 @@ export default class NavBar extends Emitter {
 
     this._style = evalCss(require('./NavBar.scss'))
 
-    this._$el = $el
-    $el.html('<div class="eruda-bottom-bar"></div>')
+    this._$el = $el.find('.eruda-nav-bar')
     this._$bottomBar = $el.find('.eruda-bottom-bar')
     this._len = 0
 
@@ -69,21 +68,24 @@ export default class NavBar extends Emitter {
   }
   resetBottomBar() {
     const $bottomBar = this._$bottomBar
+    const $el = this._$el
 
-    const li = this._$el.find('.eruda-active').get(0)
+    const li = $el.find('.eruda-active').get(0)
 
     if (!li) return
 
     $bottomBar.css({
       width: li.offsetWidth,
-      left: li.offsetLeft
+      left: li.offsetLeft - $el.get(0).scrollLeft
     })
   }
   _bindEvent() {
     const self = this
 
-    this._$el.on('click', '.eruda-nav-bar-item', function() {
-      self.emit('showTool', $(this).text())
-    })
+    this._$el
+      .on('click', '.eruda-nav-bar-item', function() {
+        self.emit('showTool', $(this).text())
+      })
+      .on('scroll', () => this.resetBottomBar())
   }
 }

src/DevTools/NavBar.scss

@@ -4,15 +4,19 @@
 $height: 40px;
 
 .container {
-  .nav-bar {
+  .nav-bar-container {
     @include absolute(100%, $height);
-    @include overflow-auto(x);
-    border-top: 1px solid var(--border);
-    border-bottom: 1px solid var(--border);
     z-index: 100;
-    background: var(--darker-background);
-    font-size: 0;
-    white-space: nowrap;
+    .nav-bar {
+      @include overflow-auto(x);
+      border-top: 1px solid var(--border);
+      border-bottom: 1px solid var(--border);
+      width: 100%;
+      height: 100%;
+      background: var(--darker-background);
+      font-size: 0;
+      white-space: nowrap;
+    }
     .nav-bar-item {
       cursor: pointer;
       display: inline-block;
@@ -35,7 +39,7 @@ $height: 40px;
     }
     .bottom-bar {
       transition: left $anim-duration, width $anim-duration;
-      height: 3px;
+      height: 1px;
       background: var(--accent);
       position: absolute;
       bottom: 0;

src/style/variable.scss

@@ -4,6 +4,7 @@ $font-size: 14px;
 $font-size-s: 12px;
 $font-size-l: 16px;
 
-$font-family: 'Helvetica Neue', Helvetica, Arial, sans-seri;
+$font-family: '.SFNSDisplay-Regular', 'Helvetica Neue', 'Lucida Grande',
+  'Segoe UI', Tahoma, sans-seri;
 
 $anim-duration: 0.3s;