From ddeb75c3dad54c53973911e4778741e6c0200028 Mon Sep 17 00:00:00 2001
From: Gyandeep Singh <gyandeeps@gmail.com>
Date: Tue, 20 Dec 2016 11:12:20 -0600
Subject: [PATCH] Update: Keep tabs same size when closing (fixes #6088) Same
 behavior as chrome

---
 js/actions/windowActions.js     | 14 ++++++++++++++
 js/components/main.js           |  1 +
 js/components/tab.js            |  4 +++-
 js/components/tabs.js           | 19 ++++++++++++++++++-
 js/components/tabsToolbar.js    |  1 +
 js/constants/windowConstants.js |  4 +++-
 js/stores/windowStore.js        |  8 ++++++++
 7 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/js/actions/windowActions.js b/js/actions/windowActions.js
index 2878948a432..797f72c0357 100644
--- a/js/actions/windowActions.js
+++ b/js/actions/windowActions.js
@@ -1198,6 +1198,20 @@ const windowActions = {
       tabId,
       notify
     })
+  },
+
+  onTabClose: function (data) {
+    dispatch({
+      actionType: windowConstants.WINDOW_TAB_CLOSE,
+      data
+    })
+  },
+
+  onTabMouseLeave: function (data) {
+    dispatch({
+      actionType: windowConstants.WINDOW_TAB_MOUSE_LEAVE,
+      data
+    })
   }
 }
 
diff --git a/js/components/main.js b/js/components/main.js
index 9bcf83ec46b..35f1cc1b571 100644
--- a/js/components/main.js
+++ b/js/components/main.js
@@ -1180,6 +1180,7 @@ class Main extends ImmutableComponent {
           tabsPerTabPage={tabsPerPage}
           tabPageIndex={this.props.windowState.getIn(['ui', 'tabs', 'tabPageIndex'])}
           previewTabPageIndex={this.props.windowState.getIn(['ui', 'tabs', 'previewTabPageIndex'])}
+          fixTabWidth={this.props.windowState.getIn(['ui', 'tabs', 'fixTabWidth'])}
           tabs={this.props.windowState.get('tabs')}
           sites={appStateSites}
           key='tab-bar'
diff --git a/js/components/tab.js b/js/components/tab.js
index 20ef799e872..21e04505349 100644
--- a/js/components/tab.js
+++ b/js/components/tab.js
@@ -105,6 +105,7 @@ class Tab extends ImmutableComponent {
 
   onCloseFrame (event) {
     event.stopPropagation()
+    this.props.onFrameClose(this.tabNode.parentNode.getBoundingClientRect())
     windowActions.closeFrame(windowStore.getFrames(), this.frame)
   }
 
@@ -196,8 +197,9 @@ class Tab extends ImmutableComponent {
         draggingOverRight: this.isDraggingOverRight,
         isDragging: this.isDragging,
         isPinned: this.isPinned,
-        partOfFullPageSet: this.props.partOfFullPageSet
+        partOfFullPageSet: this.props.partOfFullPageSet || !!this.props.tabWidth
       })}
+      style={this.props.tabWidth ? { flex: `0 0 ${this.props.tabWidth}px` } : {}}
       onMouseEnter={this.props.previewTabs ? this.onMouseEnter : null}
       onMouseLeave={this.props.previewTabs ? this.onMouseLeave : null}>
       <div className={cx({
diff --git a/js/components/tabs.js b/js/components/tabs.js
index a9e37c39d61..f6a6a6ffbb8 100644
--- a/js/components/tabs.js
+++ b/js/components/tabs.js
@@ -27,6 +27,20 @@ class Tabs extends ImmutableComponent {
     this.onNextPage = this.onNextPage.bind(this)
     this.onNewTabLongPress = this.onNewTabLongPress.bind(this)
     this.wasNewTabClicked = this.wasNewTabClicked.bind(this)
+    this.onMouseLeave = this.onMouseLeave.bind(this)
+    this.onFrameClose = this.onFrameClose.bind(this)
+  }
+
+  onMouseLeave () {
+    windowActions.onTabMouseLeave({
+      fixTabWidth: null
+    })
+  }
+
+  onFrameClose (rect) {
+    windowActions.onTabClose({
+      fixTabWidth: rect.width
+    })
   }
 
   onPrevPage () {
@@ -100,7 +114,8 @@ class Tabs extends ImmutableComponent {
     this.tabRefs = []
     const index = this.props.previewTabPageIndex !== undefined
       ? this.props.previewTabPageIndex : this.props.tabPageIndex
-    return <div className='tabs'>
+    return <div className='tabs'
+      onMouseLeave={this.props.fixTabWidth ? this.onMouseLeave : null}>
       <span className={cx({
         tabStripContainer: true,
         isPreview: this.props.previewTabPageIndex !== undefined,
@@ -125,6 +140,8 @@ class Tabs extends ImmutableComponent {
                 paintTabs={this.props.paintTabs}
                 previewTabs={this.props.previewTabs}
                 isActive={this.props.activeFrameKey === tab.get('frameKey')}
+                onFrameClose={this.onFrameClose}
+                tabWidth={this.props.fixTabWidth}
                 partOfFullPageSet={this.props.partOfFullPageSet} />)
         }
         {(() => {
diff --git a/js/components/tabsToolbar.js b/js/components/tabsToolbar.js
index ea42d611981..d6723051625 100644
--- a/js/components/tabsToolbar.js
+++ b/js/components/tabsToolbar.js
@@ -69,6 +69,7 @@ class TabsToolbar extends ImmutableComponent {
         previewTabPageIndex={this.props.previewTabPageIndex}
         startingFrameIndex={startingFrameIndex}
         partOfFullPageSet={currentTabs.size === this.props.tabsPerTabPage}
+        fixTabWidth={this.props.fixTabWidth}
       />
       <TabsToolbarButtons
         noFrames={currentTabs.size === 0}
diff --git a/js/constants/windowConstants.js b/js/constants/windowConstants.js
index 94a924bd818..3f5d1d7b580 100644
--- a/js/constants/windowConstants.js
+++ b/js/constants/windowConstants.js
@@ -88,7 +88,9 @@ const windowConstants = {
   WINDOW_WIDEVINE_SITE_ACCESSED_WITHOUT_INSTALL: _,
   WINDOW_WIDEVINE_PANEL_DETAIL_CHANGED: _,
   WINDOW_AUTOFILL_SELECTION_CLICKED: _,
-  WINDOW_AUTOFILL_POPUP_HIDDEN: _
+  WINDOW_AUTOFILL_POPUP_HIDDEN: _,
+  WINDOW_TAB_CLOSE: _,
+  WINDOW_TAB_MOUSE_LEAVE: _
 }
 
 module.exports = mapValuesByKeys(windowConstants)
diff --git a/js/stores/windowStore.js b/js/stores/windowStore.js
index 92cbe47d31d..94f1bd9d5ae 100644
--- a/js/stores/windowStore.js
+++ b/js/stores/windowStore.js
@@ -743,6 +743,14 @@ const doAction = (action) => {
     case appConstants.APP_NEW_TAB:
       newFrame(action.frameProps, action.frameProps.get('disposition') === 'foreground-tab')
       break
+    case windowConstants.WINDOW_TAB_CLOSE:
+      windowState = windowState.setIn(['ui', 'tabs', 'fixTabWidth'], action.data.fixTabWidth)
+      windowStore.emitChanges()
+      break
+    case windowConstants.WINDOW_TAB_MOUSE_LEAVE:
+      windowState = windowState.setIn(['ui', 'tabs', 'fixTabWidth'], action.data.fixTabWidth)
+      windowStore.emitChanges()
+      break
     default:
       break
   }