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

Same behavior as chrome

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
+ })
  }
 }
 

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'

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

@@ -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)

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
  }