replace legacy logic with brand new PrivateIcon state logic

- transitory state: tabs are responsible but still looks ugly.
Auditors: @NejcZdovc, @luixxiul
Test plan: npm run test -- --grep="Tabs content - PrivateIcon"

app/common/state/tabContentState/privateState.js

@@ -3,6 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 // State helpers
+const tabUIState = require('../tabUIState')
 const frameStateUtil = require('../../../../js/state/frameStateUtil')
 
 module.exports.isPrivateTab = (state, frameKey) => {
@@ -17,3 +18,19 @@ module.exports.isPrivateTab = (state, frameKey) => {
 
   return !!frame.get('isPrivate')
 }
+
+module.exports.showPrivateIcon = (state, frameKey) => {
+  const frame = frameStateUtil.getFrameByKey(state, frameKey)
+
+  if (frame == null) {
+    if (process.env.NODE_ENV !== 'test') {
+      console.error('Unable to find frame for showPrivateIcon method')
+    }
+    return false
+  }
+
+  return (
+    module.exports.isPrivateTab(state, frameKey) &&
+    tabUIState.showTabEndIcon(state, frameKey)
+  )
+}

app/renderer/components/styles/global.js

@@ -176,6 +176,7 @@ const globalStyles = {
     defaultTabPadding: '0 4px',
     defaultIconPadding: '2px',
     iconSize: '16px',
+    sessionIconSize: '15px',
     closeIconSize: '13px',
     narrowIconSize: '12px',
     dialogWidth: '422px',

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

@@ -1,6 +1,6 @@
 /* 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')
@@ -9,68 +9,61 @@ const {StyleSheet, css} = require('aphrodite/no-important')
 const ReduxComponent = require('../../reduxComponent')
 const TabIcon = require('./tabIcon')
 
-// State
-const tabUIState = require('../../../../common/state/tabUIState')
-
-// Utils
+// State helpers
+const privateState = require('../../../../common/state/tabContentState/privateState')
 const frameStateUtil = require('../../../../../js/state/frameStateUtil')
+const tabState = require('../../../../common/state/tabState')
 
 // Styles
+const {theme} = require('../../styles/theme')
 const globalStyles = require('../../styles/global')
 const privateSvg = require('../../../../extensions/brave/img/tabs/private.svg')
 
 class PrivateIcon extends React.Component {
   mergeProps (state, ownProps) {
     const currentWindow = state.get('currentWindow')
-    const frameKey = ownProps.frameKey
-    const hasSeconardImage = tabUIState.hasVisibleSecondaryIcon(currentWindow, ownProps.frameKey)
+    const tabId = ownProps.tabId
+    const frameKey = frameStateUtil.getFrameKeyByTabId(currentWindow, tabId)
 
     const props = {}
-    // used in renderer
+    props.isPinned = tabState.isTabPinned(state, tabId)
     props.isActive = frameStateUtil.isFrameKeyActive(currentWindow, frameKey)
-
-    // used in functions
-    props.showPrivateIcon = ownProps.isPrivateTab && hasSeconardImage
-    props.frameKey = frameKey
+    props.showPrivateIcon = privateState.showPrivateIcon(currentWindow, frameKey)
+    props.tabId = tabId
 
     return props
   }
 
   render () {
-    if (!this.props.showPrivateIcon) {
+    if (this.props.isPinned || !this.props.showPrivateIcon) {
       return null
     }
-    const privateStyles = StyleSheet.create({
-      icon: {
-        backgroundColor: this.props.isActive ? globalStyles.color.white100 : globalStyles.color.black100
+
+    const privateProps = StyleSheet.create({
+      private__icon_color: {
+        backgroundColor: this.props.isActive
+          ? theme.tab.content.icon.private.background.active
+          : theme.tab.content.icon.private.background.notActive
       }
     })
 
     return <TabIcon
       data-test-id='privateIcon'
-      className={css(styles.icon, styles.secondaryIcon, privateStyles.icon)}
+      className={css(styles.private__icon, privateProps.private__icon_color)}
     />
   }
 }
 
 module.exports = ReduxComponent.connect(PrivateIcon)
 
 const styles = StyleSheet.create({
-  icon: {
-    width: globalStyles.spacing.iconSize,
-    minWidth: globalStyles.spacing.iconSize,
-    height: globalStyles.spacing.iconSize,
-    backgroundSize: globalStyles.spacing.iconSize,
-    fontSize: globalStyles.fontSize.tabIcon,
-    backgroundPosition: 'center',
-    backgroundRepeat: 'no-repeat',
-    paddingLeft: globalStyles.spacing.defaultIconPadding,
-    paddingRight: globalStyles.spacing.defaultIconPadding
-  },
-
-  secondaryIcon: {
+  private__icon: {
+    boxSizing: 'border-box',
     WebkitMaskRepeat: 'no-repeat',
     WebkitMaskPosition: 'center',
-    WebkitMaskImage: `url(${privateSvg})`
+    WebkitMaskImage: `url(${privateSvg})`,
+    WebkitMaskSize: globalStyles.spacing.sessionIconSize,
+    width: globalStyles.spacing.sessionIconSize,
+    height: globalStyles.spacing.sessionIconSize
   }
 })

app/renderer/components/tabs/tab.js

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