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

Fix brave#11434

The tabs are meant to stay the same size until mouseout, according to brave#6088 and implemented in brave#6342. They were sometimes growing (or shrinking) on click and then shrinking further on mouseout due to the size being calculated at the wrong time

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

@@ -61,6 +61,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
   }
 
@@ -356,7 +357,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>
   }