diff --git a/app/common/constants/appEnums.js b/app/common/constants/appEnums.js
new file mode 100644
index 00000000000..e68bafec08d
--- /dev/null
+++ b/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
+}
diff --git a/app/extensions/brave/img/tabs/new_session.svg b/app/extensions/brave/img/tabs/new_session.svg
new file mode 100644
index 00000000000..bf4f691fffc
--- /dev/null
+++ b/app/extensions/brave/img/tabs/new_session.svg
@@ -0,0 +1,17 @@
+
+
+
diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
index 11368431acf..11b3ae28e89 100644
--- a/app/renderer/components/styles/global.js
+++ b/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',
diff --git a/app/renderer/components/tabContent.js b/app/renderer/components/tabContent.js
index df7ed0755d2..09e6e802438 100644
--- a/app/renderer/components/tabContent.js
+++ b/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
+ style={tabIconStyle}>{this.props.symbolContent}
: null
}
@@ -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
- ?
- : 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
+ ?
+ : 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',
diff --git a/js/components/tab.js b/js/components/tab.js
index 721cba52ad9..10586c81242 100644
--- a/js/components/tab.js
+++ b/js/components/tab.js
@@ -287,6 +287,8 @@ class Tab extends ImmutableComponent {
)
- 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(
)
- 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(
)
- 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(
+
+ )
+ assert.equal(wrapper.props().symbolContent, 3)
+ })
+ it('should show max partition number even if session is bigger', function () {
+ const wrapper = shallow(
+
+ )
+ assert.equal(wrapper.props().symbolContent, tabs.MAX_ALLOWED_NEW_SESSIONS)
})
})