Update UI spec for private tabs

- Close #7943
- Auditors: @bsclifton

app/renderer/components/styles/tab.js

@@ -100,16 +100,9 @@ const styles = StyleSheet.create({
 
  activePrivateTab: {
  background: globalStyles.color.privateTabBackgroundActive,
- color: '#fff'
- },
-
- private: {
- background: globalStyles.color.privateTabBackground,
- color: '#fff',
 
  ':hover': {
- background: globalStyles.color.privateTabBackgroundActive,
- color: '#fff'
+ background: globalStyles.color.privateTabBackgroundActive
  }
  },
 

app/renderer/components/tabContent.js

@@ -12,6 +12,7 @@ const {tabs} = require('../../../js/constants/config')
 const {hasBreakpoint, hasRelativeCloseIcon, hasFixedCloseIcon} = require('../lib/tabUtil')
 
 const newSessionSvg = require('../../extensions/brave/img/tabs/new_session.svg')
+const privateSvg = require('../../extensions/brave/img/tabs/private.svg')
 const closeTabSvg = require('../../extensions/brave/img/tabs/close_btn_normal.svg')
 const closeTabHoverSvg = require('../../extensions/brave/img/tabs/close_btn_hover.svg')
 
@@ -142,8 +143,15 @@ class PrivateIcon extends ImmutableComponent {
  }
 
  render () {
+ const privateStyles = StyleSheet.create({
+ icon: {
+ WebkitMaskImage: `url(${privateSvg})`,
+ backgroundColor: this.props.isActive ? globalStyles.color.white100 : globalStyles.color.black100
+ }
+ })
  return this.props.tab.get('isPrivate') && !this.props.tab.get('hoverState') && !this.narrowView
- ? <TabIcon className={css(styles.icon)} symbol={globalStyles.appIcons.private} />
+ ? <TabIcon data-test-id='privateIcon'
+ className={css(styles.icon, styles.secondaryIcon, privateStyles.icon)} />
  : null
  }
 }
@@ -214,8 +222,9 @@ class TabTitle extends ImmutableComponent {
 
  get themeColor () {
  const themeColor = this.props.tab.get('themeColor') || this.props.tab.get('computedThemeColor')
- const defaultColor = this.props.tab.get('isPrivate') ? globalStyles.color.white100 : globalStyles.color.black100
  const activeNonPrivateTab = !this.props.tab.get('isPrivate') && this.props.isActive
+ const activePrivateTab = this.props.tab.get('isPrivate') && this.props.isActive
+ const defaultColor = activePrivateTab ? globalStyles.color.white100 : globalStyles.color.black100
 
  return activeNonPrivateTab && this.props.paintTabs && !!themeColor
  ? getTextColorForBackground(themeColor)
@@ -296,6 +305,11 @@ const styles = StyleSheet.create({
  fontSize: '16px'
  },
 
+ secondaryIcon: {
+ WebkitMaskRepeat: 'no-repeat',
+ WebkitMaskPosition: 'center'
+ },
+
  newSession: {
  position: 'relative',
  backgroundImage: `url(${newSessionSvg})`,

js/components/tab.js

@@ -232,7 +232,8 @@ class Tab extends ImmutableComponent {
 
  render () {
  const playIndicatorBreakpoint = this.mediumView || this.narrowView
- const perPageStyles = StyleSheet.create({
+ // we don't want themeColor if tab is private
+ const perPageStyles = !this.props.tab.get('isPrivate') && StyleSheet.create({
  themeColor: {
  color: this.themeColor ? getTextColorForBackground(this.themeColor) : 'inherit',
  background: this.themeColor ? this.themeColor : 'inherit',
@@ -260,8 +261,6 @@ class Tab extends ImmutableComponent {
  isWindows() && styles.tabForWindows,
  this.isPinned && styles.isPinned,
  this.props.isActive && styles.active,
- this.props.tab.get('isPrivate') && styles.private,
- this.props.isActive && this.props.tab.get('isPrivate') && styles.activePrivateTab,
  playIndicatorBreakpoint && this.canPlayAudio && styles.narrowViewPlayIndicator,
  this.props.isActive && this.themeColor && perPageStyles.themeColor,
  // Private color should override themeColor
@@ -306,7 +305,10 @@ class Tab extends ImmutableComponent {
  pageTitle={this.displayValue}
  />
  </div>
- <PrivateIcon tab={this.props.tab} />
+ <PrivateIcon
+ tab={this.props.tab}
+ isActive={this.props.isActive}
+ />
  <NewSessionIcon
  isActive={this.props.isActive}
  paintTabs={this.props.paintTabs}

test/unit/app/renderer/tabContentTest.js

@@ -18,6 +18,7 @@ describe('tabContent components', function () {
  mockery.registerMock('../../extensions/brave/img/tabs/new_session.svg')
  mockery.registerMock('../../extensions/brave/img/tabs/close_btn_normal.svg')
  mockery.registerMock('../../extensions/brave/img/tabs/close_btn_hover.svg')
+ mockery.registerMock('../../extensions/brave/img/tabs/private.svg')
  mockery.enable({
  warnOnReplace: false,
  warnOnUnregistered: false,
@@ -167,7 +168,7 @@ describe('tabContent components', function () {
  })}
  />
  )
- assert.equal(wrapper.props().symbol, globalStyles.appIcons.private)
+ assert.equal(wrapper.props()['data-test-id'], 'privateIcon')
  })
  it('should not show private icon if current tab is not private', function () {
  const wrapper = shallow(
@@ -178,7 +179,7 @@ describe('tabContent components', function () {
  })}
  />
  )
- assert.notEqual(wrapper.props().symbol, globalStyles.appIcons.private)
+ assert.notEqual(wrapper.props()['data-test-id'], 'privateIcon')
  })
  it('should not show private icon if mouse is over tab (avoid icon overflow)', function () {
  const wrapper = shallow(
@@ -190,7 +191,7 @@ describe('tabContent components', function () {
  })}
  />
  )
- assert.notEqual(wrapper.props().symbol, globalStyles.appIcons.private)
+ assert.notEqual(wrapper.props()['data-test-id'], 'privateIcon')
  })
  it('should not show private icon if tab size is too small', function () {
  const wrapper = shallow(
@@ -203,7 +204,7 @@ describe('tabContent components', function () {
  })}
  />
  )
- assert.notEqual(wrapper.props().symbol, globalStyles.appIcons.private)
+ assert.notEqual(wrapper.props()['data-test-id'], 'privateIcon')
  })
  })