Dev: Small changes

src/DevTools/DevTools.es6

@@ -88,6 +88,9 @@ export default class DevTools extends util.Emitter
     }
     showTool(name)
     {
+        if (this._curTool === name) return;
+        this._curTool = name;
+
         var tools = this._tools;
 
         var tool = tools[name];
@@ -139,7 +142,7 @@ export default class DevTools extends util.Emitter
     }
     _setTransparency(flag)
     {
-        this._opacity = flag ? 0.9 : 1;
+        this._opacity = flag ? 0.7 : 1;
         if (this._isShow) this._$el.css({opacity: this._opacity});
     }
     _setHalfScreen(flag)

src/DevTools/NavBar.es6

@@ -16,14 +16,14 @@ export default class NavBar extends util.Emitter
     add(name)
     {
         this._len++;
-        this._$el.prepend(`<li class="${name}">${name}</li>`)
-                 .css({width: this._len * 69});
+        this._$el.prepend(`<li class="${name}">${name}</li>`);
+        this._resetWidth();
     }
     remove(name)
     {
         this._len--;
         this._$el.find(`li.${name}`).remove();
-        this._$el.css({width: this._len * 69});
+        this._resetWidth();
     }
     destroy()
     {
@@ -37,9 +37,19 @@ export default class NavBar extends util.Emitter
         {
             var $this = util.$(this);
 
-            $this[$this.text() === name ? 'addClass' : 'rmClass']('eruda-active');
+            if ($this.text() === name)
+            {
+                $this.addClass('eruda-active');
+            } else
+            {
+                $this.rmClass('eruda-active');
+            }
         });
     }
+    _resetWidth()
+    {
+        this._$el.css({width: this._len * 69});
+    }
     _bindEvent()
     {
         var self = this;

src/DevTools/NavBar.scss

@@ -9,6 +9,7 @@
         -webkit-overflow-scrolling: touch;
         left: 0;
         top: 0;
+        box-shadow: $box-shadow;
         z-index: 100;
         background: $blue;
         ul {
@@ -24,9 +25,11 @@
                 text-align: center;
                 opacity: 0.5;
                 text-transform: capitalize;
+                transition: all .3s;
                 &.active {
                     color: #fff;
                     opacity: 1;
+                    background: $blue-light;
                     border-bottom: 3px solid #fff;
                 }
             }