Add session-tab icon numbers

app/common/constants/appEnums.js

@@ -0,0 +1,11 @@
+/* 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/. */
+
+const tabs = {
+  MAX_ALLOWED_NEW_SESSIONS: 9
+}
+
+module.exports = {
+  tabs
+}

app/renderer/components/styles/global.js

@@ -9,7 +9,7 @@ const globalStyles = {
       largeMedium: '83px',
       medium: '66px',
       mediumSmall: '53px',
-      small: '42px',
+      small: '46px',
       extraSmall: '33px',
       smallest: '19px'
     }
@@ -166,7 +166,6 @@ const globalStyles = {
     closeTab: 'fa fa-times-circle',
     defaultIcon: 'fa fa-file-o',
     loading: 'fa fa-spinner fa-spin',
-    newSession: 'fa fa-user',
     private: 'fa fa-eye',
     refresh: 'fa fa-refresh',
     remove: 'fa fa-times',

app/renderer/components/tabContent.js

@@ -8,6 +8,9 @@ const {StyleSheet, css} = require('aphrodite/no-important')
 const globalStyles = require('./styles/global')
 const {isWindows} = require('../../common/lib/platformUtil')
 const {getTextColorForBackground} = require('../../../js/lib/color')
+const {tabs} = require('../../common/constants/appEnums')
+
+const newSessionSvg = require('../../extensions/brave/img/tabs/new_session.svg')
 
 /**
  * Boilerplate component for all tab icons
@@ -17,13 +20,15 @@ class TabIcon extends ImmutableComponent {
     const tabIconStyle = {
       // Currently it's not possible to concatenate Aphrodite generated classes
       // and pre-built classes using default Aphrodite API, so we keep with inline-style
-      fontSize: 'inherit',
+      fontSize: this.props.symbolContent ? '8px' : 'inherit',
       display: 'flex',
       alignSelf: 'center',
       width: globalStyles.spacing.iconSize,
       height: globalStyles.spacing.iconSize,
       alignItems: 'center',
-      justifyContent: 'center'
+      justifyContent: this.props.symbolContent ? 'flex-end' : 'center',
+      fontWeight: this.props.symbolContent ? 'bold' : 'normal',
+      color: this.props.symbolContent ? globalStyles.color.black100 : 'inherit'
     }
     return <div
       className={this.props.className}
@@ -36,7 +41,7 @@ class TabIcon extends ImmutableComponent {
           data-test-id={this.props['data-test-id']}
           data-l10n-id={this.props.l10nId}
           data-l10n-args={JSON.stringify(this.props.l10nArgs || {})}
-          style={tabIconStyle} />
+          style={tabIconStyle}>{this.props.symbolContent}</span>
         : null
       }
     </div>
@@ -128,10 +133,39 @@ class NewSessionIcon extends ImmutableComponent {
     return sizes.includes(this.props.tabProps.get('breakpoint'))
   }
 
+  get partitionNumber () {
+    return this.props.tabProps.get('partitionNumber')
+  }
+
+  get partitionIndicator () {
+    // For now due to UI limitations set session up to 9 visually
+    return this.partitionNumber > tabs.MAX_ALLOWED_NEW_SESSIONS
+      ? tabs.MAX_ALLOWED_NEW_SESSIONS
+      : this.partitionNumber
+  }
+
+  get iconColor () {
+    const themeColor = this.props.tabProps.get('themeColor') || this.props.tabProps.get('computedThemeColor')
+    return this.props.paintTabs && themeColor
+      ? getTextColorForBackground(themeColor)
+      : globalStyles.color.black100
+  }
+
   render () {
-    return this.props.tabProps.get('partitionNumber') && !this.props.tabProps.get('hoverState') && !this.narrowView
-    ? <TabIcon className={css(styles.icon)} symbol={globalStyles.appIcons.newSession} {...this.props} />
-    : null
+    const newSession = StyleSheet.create({
+      indicator: {
+        // Based on getTextColorForBackground() icons can be only black or white.
+        filter: this.props.isActive && this.iconColor === 'white' ? 'invert(100%)' : 'none'
+      }
+    })
+
+    return this.partitionNumber && !this.props.tabProps.get('hoverState') && !this.narrowView
+      ? <TabIcon symbol
+        data-test-id='newSessionIcon'
+        className={css(styles.icon, styles.newSession, newSession.indicator)}
+        symbolContent={this.partitionIndicator}
+        {...this.props} />
+      : null
   }
 }
 
@@ -244,6 +278,12 @@ const styles = StyleSheet.create({
     color: globalStyles.color.highlightBlue
   },
 
+  newSession: {
+    position: 'relative',
+    backgroundImage: `url(${newSessionSvg})`,
+    backgroundPosition: 'left'
+  },
+
   closeTab: {
     opacity: '0.7',
     position: 'absolute',

js/components/tab.js

@@ -287,6 +287,8 @@ class Tab extends ImmutableComponent {
         </div>
         <PrivateIcon tabProps={this.props.tab} />
         <NewSessionIcon
+          isActive={this.props.isActive}
+          paintTabs={this.props.paintTabs}
           tabProps={this.props.tab}
           l10nArgs={this.props.tab.get('partitionNumber')}
           l10nId='sessionInfoTab'

test/unit/app/renderer/tabContentTest.js

@@ -9,11 +9,13 @@ const Immutable = require('immutable')
 const assert = require('assert')
 const fakeElectron = require('../../lib/fakeElectron')
 const globalStyles = require('../../../../app/renderer/components/styles/global')
+const {tabs} = require('../../../../app/common/constants/appEnums')
 let Favicon, AudioTabIcon, PrivateIcon, NewSessionIcon, TabTitle, CloseTabIcon
 require('../../braveUnit')
 
 describe('tabContent components', function () {
   before(function () {
+    mockery.registerMock('../../extensions/brave/img/tabs/new_session.svg')
     mockery.enable({
       warnOnReplace: false,
       warnOnUnregistered: false,
@@ -209,11 +211,11 @@ describe('tabContent components', function () {
         <NewSessionIcon
           tabProps={
             Immutable.Map({
-              partitionNumber: true
+              partitionNumber: 1
             })}
         />
       )
-      assert.equal(wrapper.props().symbol, globalStyles.appIcons.newSession)
+      assert.equal(wrapper.props()['data-test-id'], 'newSessionIcon')
     })
     it('should not show new session icon if current tab is not private', function () {
       const wrapper = shallow(
@@ -224,32 +226,54 @@ describe('tabContent components', function () {
             })}
         />
       )
-      assert.notEqual(wrapper.props().symbol, globalStyles.appIcons.newSession)
+      assert.notEqual(wrapper.props()['data-test-id'], 'newSessionIcon')
     })
     it('should not show new session icon if mouse is over tab (avoid icon overflow)', function () {
       const wrapper = shallow(
         <NewSessionIcon
           tabProps={
             Immutable.Map({
-              isPrivate: true,
+              partitionNumber: 1,
               hoverState: true
             })}
         />
       )
-      assert.notEqual(wrapper.props().symbol, globalStyles.appIcons.newSession)
+      assert.notEqual(wrapper.props()['data-test-id'], 'newSessionIcon')
     })
     it('should not show new session icon if tab size is too small', function () {
       const wrapper = shallow(
         <NewSessionIcon
           tabProps={
             Immutable.Map({
-              isPrivate: true,
+              partitionNumber: 1,
               hoverState: true,
               breakpoint: 'small'
             })}
         />
       )
-      assert.notEqual(wrapper.props().symbol, globalStyles.appIcons.newSession)
+      assert.notEqual(wrapper.props()['data-test-id'], 'newSessionIcon')
+    })
+    it('should show partition number for new sessions', function () {
+      const wrapper = shallow(
+        <NewSessionIcon
+          tabProps={
+            Immutable.Map({
+              partitionNumber: 3
+            })}
+        />
+      )
+      assert.equal(wrapper.props().symbolContent, 3)
+    })
+    it('should show max partition number even if session is bigger', function () {
+      const wrapper = shallow(
+        <NewSessionIcon
+          tabProps={
+            Immutable.Map({
+              partitionNumber: 1000
+            })}
+        />
+      )
+      assert.equal(wrapper.props().symbolContent, tabs.MAX_ALLOWED_NEW_SESSIONS)
     })
   })