From 00f9dc11de28d8aef617ade09d0e8344f11991cd Mon Sep 17 00:00:00 2001
From: surunzi <surunzi@foxmail.com>
Date: Wed, 13 Dec 2017 21:25:12 +0800
Subject: [PATCH] Dev: Optimize nav bar item display

---
 src/DevTools/NavBar.js | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/src/DevTools/NavBar.js b/src/DevTools/NavBar.js
index 3ec7939..4a1b578 100644
--- a/src/DevTools/NavBar.js
+++ b/src/DevTools/NavBar.js
@@ -52,6 +52,7 @@ export default class NavBar extends util.Emitter
             {
                 $this.addClass('eruda-active');
                 self._resetBottomBar();
+                self._scrollItemToView();
             } else
             {
                 $this.rmClass('eruda-active');
@@ -63,6 +64,30 @@ export default class NavBar extends util.Emitter
         util.evalCss.remove(this._style);
         this._$el.remove();
     }
+    _scrollItemToView() 
+    {
+        let $el = this._$el,
+            li = $el.find('.eruda-active').get(0),
+            container = $el.get(0);
+        
+        let itemLeft = li.offsetLeft,
+            itemWidth = li.offsetWidth,
+            containerWidth = container.offsetWidth,
+            scrollLeft = container.scrollLeft,
+            targetScrollLeft;
+        
+        if (itemLeft < scrollLeft) 
+        {
+            targetScrollLeft = itemLeft;
+        } else if (itemLeft + itemWidth > containerWidth + scrollLeft) 
+        {
+            targetScrollLeft = itemLeft + itemWidth - containerWidth;
+        }
+
+        if (!util.isNum(targetScrollLeft)) return;
+
+        container.scrollLeft = targetScrollLeft;
+    }
     _resetBottomBar() 
     {
         let $bottomBar = this._$bottomBar;