Del: Hardcode navBar style #32

src/DevTools/DevTools.es6

@@ -25,8 +25,17 @@ export default class DevTools extends util.Emitter
         this._isShow = true;
 
         this._$el.show();
+        /* When hidden, navBar style is not calculated correctly.
+         * Also it's needed to call twice to get things right in chrome, how odd!
+         */
+        this._navBar.resetStyle();
+        this._navBar.resetStyle();
+
         // Need a delay after show to enable transition effect.
-        setTimeout(() => this._$el.css('opacity', this._opacity), 50);
+        setTimeout(() => 
+        {
+            this._$el.css('opacity', this._opacity)
+        }, 50);
 
         return this;
     }
@@ -112,7 +121,7 @@ export default class DevTools extends util.Emitter
 
         this._setTransparency(cfg.get('transparency'));
         this._setDisplaySize(cfg.get('displaySize'));
-        this._setNavBarHeight(cfg.get('tinyNavBar') ? 30 : 55);
+        this.setNavBarHeight(cfg.get('tinyNavBar') ? 30 : 55);
 
         cfg.on('change', (key, val) =>
         {
@@ -121,11 +130,11 @@ export default class DevTools extends util.Emitter
                 case 'transparency': return this._setTransparency(val);
                 case 'displaySize': return this._setDisplaySize(val);
                 case 'activeEruda': return activeEruda(val);
-                case 'tinyNavBar': return this._setNavBarHeight(val ? 30 : 55);
+                case 'tinyNavBar': return this.setNavBarHeight(val ? 30 : 55);
             }
         });
     }
-    _setNavBarHeight(height)
+    setNavBarHeight(height)
     {
         this._$el.css('paddingTop', height);
         this._navBar.setHeight(height);

src/DevTools/NavBar.es6

@@ -19,43 +19,65 @@ export default class NavBar extends util.Emitter
     }
     add(name)
     {
-        let $bottomBar = this._$bottomBar;
-
         this._len++;
         this._$ul.prepend(`<li>${name}</li>`);
-        $bottomBar.css('left', util.pxToNum($bottomBar.css('left')) + ITEM_WIDTH);
-        this._resetStyle();
+        this.resetStyle();
     }
     setHeight(height)
     {
         this._height = height;
-        this._resetStyle();
+        this.resetStyle();
     }
     activeTool(name)
     {
         let self = this;
 
-        this._$ul.find('li').each(function (idx)
+        this._$ul.find('li').each(function ()
         {
             let $this = util.$(this);
 
             if ($this.text() === name)
             {
                 $this.addClass('eruda-active');
-                self._$bottomBar.css('left', ITEM_WIDTH * idx);
+                self._resetBottomBar();
             } else
             {
                 $this.rmClass('eruda-active');
             }
         });
     }
-    _resetStyle()
+    _resetBottomBar() 
+    {
+        let $bottomBar = this._$bottomBar;
+
+        let li = this._$ul.find('.eruda-active').get(0);
+
+        if (!li) return;
+        
+        $bottomBar.css({
+            width: li.offsetWidth,
+            left: li.offsetLeft
+        });
+    }
+    resetStyle()
     {
         let height = this._height;
 
         this._$el.css('height', height);
-        this._$ul.css({width: this._len * ITEM_WIDTH});
-        this._$ul.find('li').css({
+        
+        let $ul = this._$ul,
+            $li = $ul.find('li');
+
+        let ulWidth = 0;
+
+        $li.each(function ()
+        {
+            ulWidth += this.offsetWidth;
+        });
+        $ul.css({width: ulWidth});
+        this._resetBottomBar();
+
+        $ul.find('li').css({
             'height': height,
             'lineHeight': height
         });
@@ -70,5 +92,3 @@ export default class NavBar extends util.Emitter
         });
     }
 }
-
-const ITEM_WIDTH = 69;

src/DevTools/NavBar.scss

@@ -18,7 +18,7 @@ $item-width: 69px;
                 display: inline-block;
                 height: $height;
                 line-height: $height;
-                width: $item-width;
+                padding: 0 10px;
                 color: #fff;
                 font-size: $font-size-s;
                 text-align: center;
@@ -33,13 +33,12 @@ $item-width: 69px;
             }
         }
         .bottom-bar {
-            transition: left $anim-duration;
+            transition: left $anim-duration, width $anim-duration;
             height: 3px;
             background: #fff;
             position: absolute;
             bottom: 0;
             left: 0;
-            width: $item-width;
         }
     }
 }

src/EntryBtn/EntryBtn.es6

@@ -27,7 +27,7 @@ export default class EntryBtn extends util.Emitter
     {
         let cfg = this.config,
             pos = cfg.get('pos'),
-            defPos = getDefPos();
+            defPos = this._getDefPos();
 
         let outOfRange = pos.x > defPos.x + 10 ||
                          pos.x < 0 ||
@@ -81,15 +81,16 @@ export default class EntryBtn extends util.Emitter
 
         cfg.set(util.defaults(cfg.get(), {
             rememberPos: true,
-            pos: getDefPos()
+            pos: this._getDefPos()
         }));
     }
-}
+    _getDefPos() 
+    {
+        let minWidth = this._$el.get(0).offsetWidth + 10;
 
-let getDefPos = () =>
-{
-    return {
-        x: window.innerWidth - 50,
-        y: window.innerHeight - 50
-    };
-};
+        return {
+            x: window.innerWidth - minWidth,
+            y: window.innerHeight - minWidth
+        };
+    } 
+}