Merge pull request #11436 from petemill/fix-mouse-tab-close-size

Fix bug affecting width of tabs when closing them with the mouse

app/renderer/components/tabs/content/closeTabIcon.js

@@ -15,10 +15,6 @@ const tabUIState = require('../../../../common/state/tabUIState')
 const closeState = require('../../../../common/state/tabContentState/closeState')
 const frameStateUtil = require('../../../../../js/state/frameStateUtil')
 
-// Actions
-const windowActions = require('../../../../../js/actions/windowActions')
-const appActions = require('../../../../../js/actions/appActions')
-
 // Styles
 const {theme} = require('../../styles/theme')
 const {spacing, zindex} = require('../../styles/global')
@@ -28,20 +24,9 @@ const closeTabSvg = require('../../../../extensions/brave/img/tabs/close_btn.svg
 class CloseTabIcon extends React.Component {
   constructor (props) {
     super(props)
-    this.onClick = this.onClick.bind(this)
     this.onDragStart = this.onDragStart.bind(this)
   }
 
-  onClick (event) {
-    event.stopPropagation()
-    if (this.props.hasFrame) {
-      windowActions.onTabClosedWithMouse({
-        fixTabWidth: this.props.fixTabWidth
-      })
-      appActions.tabCloseRequested(this.props.tabId)
-    }
-  }
-
   onDragStart (event) {
     event.preventDefault()
   }
@@ -54,12 +39,10 @@ class CloseTabIcon extends React.Component {
 
     const props = {}
     props.isPinned = isPinned
-    props.fixTabWidth = ownProps.fixTabWidth
+    props.onClick = ownProps.onClick
     props.hasFrame = frameStateUtil.hasFrame(currentWindow, frameKey)
     props.centralizeTabIcons = tabUIState.centralizeTabIcons(currentWindow, frameKey, isPinned)
     props.showCloseIcon = closeState.showCloseTabIcon(currentWindow, frameKey)
-    props.tabId = tabId
-
     return props
   }
 
@@ -76,7 +59,7 @@ class CloseTabIcon extends React.Component {
         this.props.centralizeTabIcons && styles.closeTab__icon_centered
       )}
       l10nId='closeTabButton'
-      onClick={this.onClick}
+      onClick={this.props.onClick}
       onDragStart={this.onDragStart}
       draggable='true'
     />

app/renderer/components/tabs/tab.js

@@ -63,6 +63,7 @@ class Tab extends React.Component {
     this.onDragOver = this.onDragOver.bind(this)
     this.onClickTab = this.onClickTab.bind(this)
     this.onObserve = this.onObserve.bind(this)
+    this.onTabClosedWithMouse = this.onTabClosedWithMouse.bind(this)
     this.tabNode = null
     this.mouseTimeout = null
   }
@@ -372,7 +373,7 @@ class Tab extends React.Component {
         </div>
         <PrivateIcon tabId={this.props.tabId} />
         <NewSessionIcon tabId={this.props.tabId} />
-        <CloseTabIcon tabId={this.props.tabId} fixTabWidth={this.fixTabWidth} />
+        <CloseTabIcon tabId={this.props.tabId} onClick={this.onTabClosedWithMouse} />
       </div>
     </div>
   }