replace legacy logic with brand new CloseTabIcon state logic

- transitory state: closeTabIcon are unresponsible at this point
- this also tricks the default icon with a filter to remove fetching two icons
Auditors: @NejcZdovc, @luixxiul
Test plan: npm run test -- --grep="Tabs content - CloseTabIcon"

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

@@ -1,30 +1,29 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this file,
- * You can obtain one at http://mozilla.org/MPL/2.0/. */
+* License, v. 2.0. If a copy of the MPL was not distributed with this file,
+* You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const React = require('react')
 const {StyleSheet, css} = require('aphrodite/no-important')
-const Immutable = require('immutable')
 
 // Components
 const ReduxComponent = require('../../reduxComponent')
 const TabIcon = require('./tabIcon')
 
 // State helpers
-const closeState = require('../../../../common/state/tabContentState/closeState')
 const tabState = require('../../../../common/state/tabState')
+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')
 
-// Utils
-const frameStateUtil = require('../../../../../js/state/frameStateUtil')
-
 // Styles
-const globalStyles = require('../../styles/global')
-const closeTabHoverSvg = require('../../../../extensions/brave/img/tabs/close_btn_hover.svg')
-const closeTabSvg = require('../../../../extensions/brave/img/tabs/close_btn_normal.svg')
+const {theme} = require('../../styles/theme')
+const {spacing} = require('../../styles/global')
+const {opacityIncreaseKeyframes} = require('../../styles/animations')
+const closeTabSvg = require('../../../../extensions/brave/img/tabs/close_btn.svg')
 
 class CloseTabIcon extends React.Component {
   constructor (props) {
@@ -49,33 +48,33 @@ class CloseTabIcon extends React.Component {
 
   mergeProps (state, ownProps) {
     const currentWindow = state.get('currentWindow')
-    const frameKey = ownProps.frameKey
-    const frame = frameStateUtil.getFrameByKey(currentWindow, frameKey) || Immutable.Map()
-    const tabId = frame.get('tabId', tabState.TAB_ID_NONE)
-    const isPinnedTab = tabState.isTabPinned(state, tabId)
+    const tabId = ownProps.tabId
+    const frameKey = frameStateUtil.getFrameKeyByTabId(currentWindow, tabId)
+    const isPinned = tabState.isTabPinned(state, tabId)
 
     const props = {}
-    // used in renderer
-    props.showCloseIcon = !isPinnedTab &&
-      (
-        closeState.deprecatedHasRelativeCloseIcon(currentWindow, frameKey) ||
-        closeState.deprecatedHasFixedCloseIcon(currentWindow, frameKey)
-      )
-
-    // used in functions
-    props.frameKey = frameKey
+    props.isPinned = isPinned
     props.fixTabWidth = ownProps.fixTabWidth
+    props.hasFrame = frameStateUtil.hasFrame(currentWindow, frameKey)
+    props.centralizeTabIcons = tabUIState.centralizeTabIcons(currentWindow, frameKey, isPinned)
+    props.showCloseIcon = closeState.showCloseTabIcon(currentWindow, frameKey)
     props.tabId = tabId
-    props.hasFrame = !frame.isEmpty()
 
     return props
   }
 
   render () {
+    if (this.props.isPinned || !this.props.showCloseIcon) {
+      return null
+    }
+
     return <TabIcon
       data-test-id='closeTabIcon'
       data-test2-id={this.props.showCloseIcon ? 'close-icon-on' : 'close-icon-off'}
-      className={css(this.props.showCloseIcon && styles.closeTab)}
+      className={css(
+        styles.closeTab__icon,
+        this.props.centralizeTabIcons && styles.closeTab__icon__centered
+      )}
       l10nId='closeTabButton'
       onClick={this.onClick}
       onDragStart={this.onDragStart}
@@ -87,25 +86,36 @@ class CloseTabIcon extends React.Component {
 module.exports = ReduxComponent.connect(CloseTabIcon)
 
 const styles = StyleSheet.create({
-  closeTab: {
-    position: 'relative',
-    paddingLeft: globalStyles.spacing.defaultIconPadding,
-    paddingRight: globalStyles.spacing.defaultIconPadding,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    minWidth: globalStyles.spacing.closeIconSize,
-    width: globalStyles.spacing.closeIconSize,
-    height: globalStyles.spacing.closeIconSize,
-    border: '0',
-    zIndex: globalStyles.zindex.zindexTabs,
+  closeTab__icon: {
+    opacity: 0,
+    willChange: 'opacity',
+    animationName: opacityIncreaseKeyframes,
+    animationTimingFunction: 'linear',
+    animationDuration: '100ms',
+    animationDelay: '25ms',
+    animationFillMode: 'forwards',
+    boxSizing: 'border-box',
     backgroundImage: `url(${closeTabSvg})`,
-    backgroundRepeat: 'no-repeat',
-    backgroundSize: globalStyles.spacing.closeIconSize,
+    backgroundSize: spacing.closeIconSize,
+    // mask icon to gray to avoid calling another icon on hover
+    transition: 'filter 150ms linear',
+    filter: theme.tab.content.icon.close.filter,
     backgroundPosition: 'center center',
+    backgroundRepeat: 'no-repeat',
+    width: spacing.closeIconSize,
+    height: spacing.closeIconSize,
 
     ':hover': {
-      backgroundImage: `url(${closeTabHoverSvg})`
+      filter: 'none'
     }
+  },
+
+  closeTab__icon__centered: {
+    position: 'absolute',
+    margin: 'auto',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0
   }
 })

app/renderer/components/tabs/tab.js

@@ -372,10 +372,7 @@ class Tab extends React.Component {
         </div>
         <PrivateIcon isPrivateTab={this.props.isPrivateTab} frameKey={this.props.frameKey} />
         <NewSessionIcon frameKey={this.props.frameKey} />
-        <CloseTabIcon
-          frameKey={this.props.frameKey}
-          fixTabWidth={this.fixTabWidth}
-        />
+        <CloseTabIcon tabId={this.props.tabId} fixTabWidth={this.fixTabWidth} />
       </div>
     </div>
   }