Merge pull request #14478 from brave/fix/14477-tab-close-move-mouse-w…

…idth Move tabs toolbar mouseleave handler to parent element
brave · Jun 21, 2018 · de04be9 · de04be9
1 parent c08a89c
commit de04be9
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 13 deletions.
diff --git a/app/renderer/components/tabs/tabs.js b/app/renderer/components/tabs/tabs.js
@@ -45,17 +45,6 @@ class Tabs extends React.Component {
     this.onPrevPage = this.onPrevPage.bind(this)
     this.onNextPage = this.onNextPage.bind(this)
     this.onNewTabLongPress = this.onNewTabLongPress.bind(this)
-    this.onMouseLeave = this.onMouseLeave.bind(this)
-  }
-
-  onMouseLeave () {
-    if (this.props.fixTabWidth == null) {
-      return
-    }
-
-    windowActions.onTabMouseLeave({
-      fixTabWidth: null
-    })
   }
 
   onPrevPage () {
@@ -157,7 +146,6 @@ class Tabs extends React.Component {
     props.shouldAllowWindowDrag = windowState.shouldAllowWindowDrag(state, currentWindow, activeFrame, isFocused(state))
 
     // used in other functions
-    props.fixTabWidth = currentWindow.getIn(['ui', 'tabs', 'fixTabWidth'])
     props.tabPageIndex = currentWindow.getIn(['ui', 'tabs', 'tabPageIndex'])
     props.dragWindowId = dragData.get('windowId')
     props.totalPages = totalPages
@@ -170,7 +158,6 @@ class Tabs extends React.Component {
     this.tabRefs = []
     return <div className={css(styles.tabs)}
       data-test-id='tabs'
-      onMouseLeave={this.onMouseLeave}
     >
       <span className={css(
         styles.tabs__tabStrip,

diff --git a/app/renderer/components/tabs/tabsToolbar.js b/app/renderer/components/tabs/tabsToolbar.js
@@ -11,6 +11,9 @@ const ReduxComponent = require('../reduxComponent')
 const Tabs = require('./tabs')
 const PinnedTabs = require('./pinnedTabs')
 
+// Actions
+const windowActions = require('../../../../js/actions/windowActions')
+
 // Utils
 const contextMenus = require('../../../../js/contextMenus')
 const frameStateUtil = require('../../../../js/state/frameStateUtil')
@@ -22,6 +25,7 @@ class TabsToolbar extends React.Component {
   constructor (props) {
     super(props)
     this.onContextMenu = this.onContextMenu.bind(this)
+    this.onMouseLeave = this.onMouseLeave.bind(this)
   }
 
   onContextMenu (e) {
@@ -38,6 +42,16 @@ class TabsToolbar extends React.Component {
     )
   }
 
+  onMouseLeave () {
+    if (this.props.fixTabWidth == null) {
+      return
+    }
+
+    windowActions.onTabMouseLeave({
+      fixTabWidth: null
+    })
+  }
+
   mergeProps (state, ownProps) {
     const currentWindow = state.get('currentWindow')
     const activeFrame = frameStateUtil.getActiveFrame(currentWindow) || Immutable.Map()
@@ -52,6 +66,7 @@ class TabsToolbar extends React.Component {
     props.activeFrameKey = activeFrame.get('key')
     props.activeFrameLocation = activeFrame.get('location', '')
     props.activeFrameTitle = activeFrame.get('title', '')
+    props.fixTabWidth = currentWindow.getIn(['ui', 'tabs', 'fixTabWidth'])
 
     return props
   }
@@ -64,6 +79,7 @@ class TabsToolbar extends React.Component {
       )}
       data-test-id='tabsToolbar'
       onContextMenu={this.onContextMenu}
+      onMouseLeave={this.onMouseLeave}
     >
       {
         this.props.hasPinnedTabs