Update: Keep tabs same size when closing (fixes #6088)

js/actions/windowActions.js

@@ -1215,6 +1215,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
+    })
   }
 }
 

js/components/main.js

@@ -1177,6 +1177,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'

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({

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} />)
         }
         {(() => {

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}

js/constants/windowConstants.js

@@ -89,7 +89,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)

js/stores/windowStore.js

@@ -753,6 +753,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
   }