feat: navigation bar height

src/Console/Console.scss

@@ -35,6 +35,7 @@
       }
     }
     .icon-clear {
+      padding-right: 0px;
       left: 0;
     }
     .icon-search {

src/DevTools/DevTools.js

@@ -1,7 +1,6 @@
 import NavBar from './NavBar'
 import logger from '../lib/logger'
 import Tool from './Tool'
-import emitter from '../lib/emitter'
 import Settings from '../Settings/Settings'
 import {
   Emitter,
@@ -26,7 +25,6 @@ export default class DevTools extends Emitter {
     this.$container = $container
     this._isShow = false
     this._opacity = 1
-    this._scale = 1
     this._tools = {}
     this._isResizing = false
     this._resizeTimer = null
@@ -35,14 +33,12 @@ export default class DevTools extends Emitter {
 
     this._appendTpl()
     this._initNavBar()
-    this._registerListener()
     this._bindEvent()
   }
   show() {
     this._isShow = true
 
     this._$el.show()
-    this._navBar.resetStyle()
 
     // Need a delay after show to enable transition effect.
     setTimeout(() => {
@@ -146,14 +142,12 @@ export default class DevTools extends Emitter {
     const cfg = (this.config = Settings.createCfg('dev-tools', {
       transparency: 0.95,
       displaySize: 80,
-      tinyNavBar: !isMobile(),
       activeEruda: false,
       theme: 'Light'
     }))
 
     this._setTransparency(cfg.get('transparency'))
     this._setDisplaySize(cfg.get('displaySize'))
-    this.setNavBarHeight(cfg.get('tinyNavBar') ? 30 : 55)
     evalCss.setTheme(cfg.get('theme'))
 
     cfg.on('change', (key, val) => {
@@ -166,15 +160,12 @@ export default class DevTools extends Emitter {
           return activeEruda(val)
         case 'theme':
           return evalCss.setTheme(val)
-        case 'tinyNavBar':
-          return this.setNavBarHeight(val ? 30 : 55)
       }
     })
 
     settings
       .separator()
       .switch(cfg, 'activeEruda', 'Always Activated')
-      .switch(cfg, 'tinyNavBar', 'Tiny Navigation Bar')
       .select(cfg, 'theme', 'Theme', keys(evalCss.getThemes()))
       .range(cfg, 'transparency', 'Transparency', {
         min: 0.2,
@@ -188,29 +179,13 @@ export default class DevTools extends Emitter {
       })
       .separator()
   }
-  setNavBarHeight(height) {
-    this._navBarHeight = height
-    this._$el.css('paddingTop', height * this._scale)
-    this._navBar.setHeight(height * this._scale)
-  }
+
   destroy() {
     evalCss.remove(this._style)
-    this._unregisterListener()
     this.removeAll()
     this._navBar.destroy()
     this._$el.remove()
   }
-  _registerListener() {
-    this._scaleListener = scale => {
-      this._scale = scale
-      this.setNavBarHeight(this._navBarHeight)
-    }
-
-    emitter.on(emitter.SCALE, this._scaleListener)
-  }
-  _unregisterListener() {
-    emitter.off(emitter.SCALE, this._scaleListener)
-  }
   _setTransparency(opacity) {
     if (!isNum(opacity)) return
 

src/DevTools/DevTools.scss

@@ -10,6 +10,7 @@
   background: var(--background);
   z-index: 500;
   display: none;
+  padding-top: 40px !important;
   opacity: 0;
   transition: opacity $anim-duration, height $anim-duration;
   .tools {

src/DevTools/NavBar.js

@@ -11,14 +11,13 @@ export default class NavBar extends Emitter {
     $el.html('<div class="eruda-bottom-bar"></div>')
     this._$bottomBar = $el.find('.eruda-bottom-bar')
     this._len = 0
-    this._height = 55
 
     this._bindEvent()
   }
   add(name) {
     this._len++
     this._$el.prepend(`<div class="eruda-nav-bar-item">${name}</div>`)
-    this.resetStyle()
+    this._resetBottomBar()
   }
   remove(name) {
     this._len--
@@ -28,10 +27,6 @@ export default class NavBar extends Emitter {
     })
     this._resetBottomBar()
   }
-  setHeight(height) {
-    this._height = height
-    this.resetStyle()
-  }
   activateTool(name) {
     const self = this
 
@@ -84,23 +79,6 @@ export default class NavBar extends Emitter {
       left: li.offsetLeft
     })
   }
-  resetStyle() {
-    const height = this._height
-
-    this._$el.css('height', height)
-
-    const $el = this._$el
-
-    $el.css({
-      height: height + 2
-    })
-    $el.find('.eruda-nav-bar-item').css({
-      height: height,
-      lineHeight: height
-    })
-
-    this._resetBottomBar()
-  }
   _bindEvent() {
     const self = this
 

src/DevTools/NavBar.scss

@@ -1,8 +1,7 @@
 @import '../style/variable';
 @import '../style/mixin';
 
-$height: 55px;
-$item-width: 69px;
+$height: 40px;
 
 .container {
   .nav-bar {
@@ -17,8 +16,8 @@ $item-width: 69px;
     .nav-bar-item {
       cursor: pointer;
       display: inline-block;
-      height: $height;
-      line-height: $height;
+      height: $height - 2;
+      line-height: $height - 2;
       padding: 0 10px;
       color: var(--foreground);
       font-size: $font-size-s;

src/Sources/Sources.scss

@@ -56,7 +56,7 @@
     }
   }
   .json {
-    padding: $padding;
+    padding: 0 $padding;
     * {
       user-select: text;
     }