Skip to content
This repository has been archived by the owner on Dec 11, 2019. It is now read-only.

Adjust min-threshold for closeTab #7799

Merged
merged 1 commit into from
Mar 21, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/renderer/components/styles/global.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const globalStyles = {
medium: '66px',
mediumSmall: '53px',
small: '46px',
extraSmall: '33px',
extraSmall: '40px',
smallest: '19px'
}
},
Expand Down
40 changes: 15 additions & 25 deletions app/renderer/components/tabContent.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ const globalStyles = require('./styles/global')
const {isWindows} = require('../../common/lib/platformUtil')
const {getTextColorForBackground} = require('../../../js/lib/color')
const {tabs} = require('../../../js/constants/config')
const {hasBreakpoint, hasRelativeCloseIcon, hasFixedCloseIcon} = require('../lib/tabUtil')

const newSessionSvg = require('../../extensions/brave/img/tabs/new_session.svg')

Expand Down Expand Up @@ -69,11 +70,16 @@ class Favicon extends ImmutableComponent {
return this.props.tab.get('breakpoint') === 'smallest'
}

get shouldHideFavicon () {
return (hasBreakpoint(this.props, 'extraSmall') && this.props.isActive) ||
this.props.tab.get('location') === 'about:newtab'
}

render () {
const iconStyles = StyleSheet.create({
favicon: {backgroundImage: `url(${this.favicon})`}
})
return this.props.tab.get('location') !== 'about:newtab'
return !this.shouldHideFavicon
? <TabIcon
data-test-favicon={this.favicon}
data-test-id={this.loadingIcon ? 'loading' : 'defaultIcon'}
Expand Down Expand Up @@ -197,15 +203,10 @@ class TabTitle extends ImmutableComponent {
return !!this.props.tab.get('pinnedLocation')
}

get hoveredOnNarrowView () {
const sizes = ['mediumSmall', 'small', 'extraSmall', 'smallest']
return this.props.tab.get('hoverState') && sizes.includes(this.props.tab.get('breakpoint'))
}

get shouldHideTitle () {
return (this.props.tab.get('breakpoint') === 'mediumSmall' && this.locationHasSecondaryIcon) ||
this.props.tab.get('breakpoint') === 'extraSmall' || this.props.tab.get('breakpoint') === 'smallest' ||
this.hoveredOnNarrowView
hasBreakpoint(this.props, ['extraSmall', 'smallest']) ||
hasFixedCloseIcon(this.props)
}

get themeColor () {
Expand All @@ -220,12 +221,6 @@ class TabTitle extends ImmutableComponent {

render () {
const titleStyles = StyleSheet.create({
reduceTitleSize: {
// include a margin gutter with same size
// as closeTabIcon to avoid title overflow
// when hovering over a tab
marginRight: `calc(${globalStyles.spacing.iconSize} + ${globalStyles.spacing.defaultIconPadding})`
},
gradientText: {
backgroundImage: `-webkit-linear-gradient(left,
${this.themeColor} 90%, ${globalStyles.color.almostInvisible} 100%)`
Expand All @@ -237,7 +232,6 @@ class TabTitle extends ImmutableComponent {
className={css(
styles.tabTitle,
titleStyles.gradientText,
this.props.tab.get('hoverState') && titleStyles.reduceTitleSize,
// Windows specific style
isWindows() && styles.tabTitleForWindows
)}>
Expand All @@ -252,13 +246,9 @@ class CloseTabIcon extends ImmutableComponent {
return !!this.props.tab.get('pinnedLocation')
}

get narrowView () {
const sizes = ['extraSmall', 'smallest']
return sizes.includes(this.props.tab.get('breakpoint'))
}

render () {
return this.props.tab.get('hoverState') && !this.narrowView && !this.isPinned
return !this.isPinned &&
(hasRelativeCloseIcon(this.props) || hasFixedCloseIcon(this.props))
? <TabIcon
data-test-id='closeTabIcon'
className={css(styles.closeTab)}
Expand Down Expand Up @@ -311,17 +301,17 @@ const styles = StyleSheet.create({

closeTab: {
opacity: '0.7',
position: 'absolute',
position: 'relative',
top: '0',
right: '0',
padding: '0 4px',
borderTopRightRadius: globalStyles.radius.borderRadius,
padding: '0',
borderRadius: globalStyles.radius.borderRadius,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: globalStyles.spacing.iconSize,
width: globalStyles.spacing.iconSize,
height: '100%',
height: globalStyles.spacing.iconSize,
border: '0',
zIndex: globalStyles.zindex.zindexTabs,

Expand Down
30 changes: 30 additions & 0 deletions app/renderer/lib/tabUtil.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,33 @@ module.exports.getTabBreakpoint = (tabWidth) => {

// Execute resize handler at a rate of 15fps
module.exports.tabUpdateFrameRate = 66

/**
* Check whether or not current breakpoint match defined criteria
* @param {Object} props - Object that hosts the tab breakpoint
* @param {Array} arr - Array of Strings including breakpoint names to check against
* @returns {Boolean} Whether or not the sizing criteria was match
*/
module.exports.hasBreakpoint = (props, arr) => {
arr = Array.isArray(arr) ? arr : [arr]
return arr.includes(props.tab.get('breakpoint'))
}

/**
* Check whether or not closeTab icon is relative to hover state
* @param {Object} props - Object that hosts the tab props
* @returns {Boolean} Whether or not the tab has a relative closeTab icon
*/
module.exports.hasRelativeCloseIcon = (props) => {
return props.tab.get('hoverState') &&
!module.exports.hasBreakpoint(props, ['small', 'extraSmall', 'smallest'])
}

/**
* Check whether or not closeTab icon is always visible (fixed) in tab
* @param {Object} props - Object that hosts the tab props
* @returns {Boolean} Whether or not the close icon is always visible (fixed)
*/
module.exports.hasFixedCloseIcon = (props) => {
return props.isActive && module.exports.hasBreakpoint(props, ['small', 'extraSmall'])
}
8 changes: 7 additions & 1 deletion js/components/tab.js
Original file line number Diff line number Diff line change
Expand Up @@ -289,7 +289,12 @@ class Tab extends ImmutableComponent {
this.narrowView && styles.tabIdNarrowView,
this.props.tab.get('breakpoint') === 'smallest' && styles.tabIdMinAllowedSize
)}>
<Favicon tab={this.props.tab} isLoading={this.loading} isPinned={this.isPinned} />
<Favicon
isActive={this.props.isActive}
tab={this.props.tab}
isLoading={this.loading}
isPinned={this.isPinned}
/>
<AudioTabIcon
tab={this.props.tab}
onClick={this.onMuteFrame.bind(this, !this.props.tab.get('audioMuted'))}
Expand All @@ -310,6 +315,7 @@ class Tab extends ImmutableComponent {
l10nId='sessionInfoTab'
/>
<CloseTabIcon
isActive={this.props.isActive}
tab={this.props.tab}
onClick={this.onTabClosedWithMouse.bind(this)}
l10nId='closeTabButton'
Expand Down
52 changes: 50 additions & 2 deletions test/unit/app/renderer/tabContentTest.js
Original file line number Diff line number Diff line change
Expand Up @@ -376,14 +376,62 @@ describe('tabContent components', function () {
<CloseTabIcon
tab={
Immutable.Map({
hoverState: false,
hoverState: true,
pinnedLocation: true
})}
/>
)
assert.notEqual(wrapper.props().symbol, globalStyles.appIcons.closeTab)
})
it('should not show closeTab icon if tab size is too small', function () {
it('should show closeTab icon if tab size is small and tab is active', function () {
const wrapper = shallow(
<CloseTabIcon isActive
tab={
Immutable.Map({
hoverState: false,
breakpoint: 'small'
})}
/>
)
assert.equal(wrapper.props().symbol, globalStyles.appIcons.closeTab)
})
it('should not show closeTab icon if tab size is small and tab is not active', function () {
const wrapper = shallow(
<CloseTabIcon isActive={false}
tab={
Immutable.Map({
hoverState: true,
breakpoint: 'small'
})}
/>
)
assert.notEqual(wrapper.props().symbol, globalStyles.appIcons.closeTab)
})
it('should show closeTab icon if tab size is extraSmall and tab is active', function () {
const wrapper = shallow(
<CloseTabIcon isActive
tab={
Immutable.Map({
hoverState: false,
breakpoint: 'extraSmall'
})}
/>
)
assert.equal(wrapper.props().symbol, globalStyles.appIcons.closeTab)
})
it('should not show closeTab icon if tab size is extraSmall and tab is not active', function () {
const wrapper = shallow(
<CloseTabIcon isActive={false}
tab={
Immutable.Map({
hoverState: true,
breakpoint: 'extraSmall'
})}
/>
)
assert.notEqual(wrapper.props().symbol, globalStyles.appIcons.closeTab)
})
it('should not show closeTab icon if tab size is the smallest size', function () {
const wrapper = shallow(
<CloseTabIcon
tab={
Expand Down