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

Commit

Permalink
Part II
Browse files Browse the repository at this point in the history
  • Loading branch information
@NejcZdovc
NejcZdovc committed Apr 25, 2017
1 parent dc32e49 commit 7e416ab
Show file tree
Hide file tree
Showing 5 changed files with 57 additions and 72 deletions.
8 changes: 8 additions & 0 deletions app/common/state/tabState.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -363,6 +363,14 @@ const tabState = {
state = tabState.removeTabField(state, 'messageBoxDetail')
state = tabState.removeTabField(state, 'frame')
return state.delete('tabs')
},

getPageIndex: (windowState) => {
const tabPageIndex = windowState.getIn(['ui', 'tabs', 'tabPageIndex'])
const previewTabPageIndex = windowState.getIn(['ui', 'tabs', 'previewTabPageIndex'])

return previewTabPageIndex !== undefined
? previewTabPageIndex : tabPageIndex
}
}

Expand Down
63 changes: 30 additions & 33 deletions app/renderer/components/tabs/tab.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
* You can obtain one at http://mozilla.org/MPL/2.0/. */

const React = require('react')
const Immutable = require('immutable')
const {StyleSheet, css} = require('aphrodite')
const ipc = require('electron').ipcRenderer

Expand All @@ -23,7 +24,6 @@ const windowActions = require('../../../../js/actions/windowActions')
const windowStore = require('../../../../js/stores/windowStore')

// State
const {frameOptsFromFrame} = require('../../../../js/state/frameStateUtil')
const tabState = require('../../../common/state/tabState')

// Constants
Expand Down Expand Up @@ -57,7 +57,7 @@ class Tab extends React.Component {
this.onUpdateTabSize = this.onUpdateTabSize.bind(this)
}
get frame () {
return windowStore.getFrame(this.props.tab.get('frameKey'))
return windowStore.getFrame(this.props.frameKey)
}
get isPinned () {
return !!this.props.tab.get('pinnedLocation')
Expand All @@ -66,7 +66,7 @@ class Tab extends React.Component {
get draggingOverData () {
const draggingOverData = this.props.dragData && this.props.dragData.get('dragOverData')
if (!draggingOverData ||
draggingOverData.get('draggingOverKey') !== this.props.tab.get('frameKey') ||
draggingOverData.get('draggingOverKey') !== this.props.frameKey ||
draggingOverData.get('draggingOverWindowId') !== getCurrentWindowId()) {
return
}
Expand All @@ -89,7 +89,7 @@ class Tab extends React.Component {
get isDragging () {
const sourceDragData = dnd.getInterBraveDragData()
return sourceDragData &&
sourceDragData.get('key') === this.props.tab.get('frameKey') &&
sourceDragData.get('key') === this.props.frameKey &&
sourceDragData.get('draggingOverWindowId') === getCurrentWindowId()
}

Expand Down Expand Up @@ -154,8 +154,11 @@ class Tab extends React.Component {

onTabClosedWithMouse (event) {
event.stopPropagation()
if (this.props.onTabClosedWithMouse && this.frame && !this.frame.isEmpty()) {
this.props.onTabClosedWithMouse(this.tabNode.parentNode.getBoundingClientRect())
if (this.frame && !this.frame.isEmpty()) {
const rect = this.tabNode.parentNode.getBoundingClientRect()
windowActions.onTabClosedWithMouse({
fixTabWidth: rect.width
})
windowActions.closeFrame(this.frame)
}
}
Expand Down Expand Up @@ -275,11 +278,27 @@ class Tab extends React.Component {
const currentWindow = state.get('currentWindow')
const activeFrame = frameStateUtil.getActiveFrame(currentWindow)
const frame = frameStateUtil.getFrameByKey(currentWindow, ownProps.frameKey)
const tab = tabState.getByTabId(state, frame.get('tabId'))
const tab = frame.get('tabId')
? tabState.getByTabId(state, frame.get('tabId'))
: Immutable.Map()

const notifications = state.get('notifications')
const notificationOrigins = notifications ? notifications.map(bar => bar.get('frameOrigin')) : false

const notificationBarActive = tab.get('location') && notificationOrigins &&
notificationOrigins.includes(UrlUtil.getUrlOrigin(tab.get('location')))

if (getSetting(settings.PAYMENTS_ENABLED)) {
// TODO (nejc) check if needed
const presentP = tab.get('url') === 'about:preferences#payments'
ipc.send(messages.LEDGER_PAYMENTS_PRESENT, presentP)
}

const props = {}
props.tab = tab
props.isActive = activeFrame.get('key') === tab.get('frameKey')
props.notificationBarActive = notificationBarActive
props.totalTabs = state.get('tabs').size
props.isActive = activeFrame.get('key') === ownProps.frameKey
props.paintTabs = getSetting(settings.PAINT_TABS)
props.previewTabs = getSetting(settings.SHOW_TAB_PREVIEWS)
props.dragData = state.getIn(['dragData', 'type']) === dragTypes.TAB && state.get('dragData')
Expand All @@ -288,14 +307,12 @@ class Tab extends React.Component {
props.hasTabInFullScreen = currentWindow.get('frames')
.map((frame) => frame.get('isFullScreen'))
.some(fullScreenMode => fullScreenMode === true)
props.playIndicatorBreakpoint = Tab.mediumView || Tab.narrowView

return Object.assign({}, ownProps, props)
}

render () {
const notificationBarActive = !!this.props.notificationBarActive &&
this.props.notificationBarActive.includes(UrlUtil.getUrlOrigin(this.props.tab.get('location')))
const playIndicatorBreakpoint = this.mediumView || this.narrowView
// we don't want themeColor if tab is private
const perPageStyles = !this.props.tab.get('isPrivate') && StyleSheet.create({
themeColor: {
Expand All @@ -320,7 +337,7 @@ class Tab extends React.Component {
onMouseEnter={this.onMouseEnter}
onMouseLeave={this.onMouseLeave}>
{
this.props.isActive && notificationBarActive
this.props.isActive && this.props.notificationBarActive
? <NotificationBarCaret />
: null
}
Expand All @@ -330,7 +347,7 @@ class Tab extends React.Component {
isWindows() && styles.tabForWindows,
this.isPinned && styles.isPinned,
this.props.isActive && styles.active,
playIndicatorBreakpoint && this.canPlayAudio && styles.narrowViewPlayIndicator,
this.props.playIndicatorBreakpoint && this.canPlayAudio && styles.narrowViewPlayIndicator,
this.props.isActive && this.themeColor && perPageStyles.themeColor,
// Private color should override themeColor
this.props.tab.get('isPrivate') && styles.private,
Expand Down Expand Up @@ -397,24 +414,4 @@ class Tab extends React.Component {
}
}

const paymentsEnabled = () => {
const getSetting = require('../../../../js/settings').getSetting
const settings = require('../../../../js/constants/settings')
return getSetting(settings.PAYMENTS_ENABLED)
}

windowStore.addChangeListener(() => {
if (paymentsEnabled()) {
const windowState = windowStore.getState()
const tabs = windowState && windowState.get('tabs')
if (tabs) {
try {
const presentP = tabs.some((tab) => {
return tab.get('location') === 'about:preferences#payments'
})
ipc.send(messages.LEDGER_PAYMENTS_PRESENT, presentP)
} catch (ex) { }
}
}
})
module.exports = ReduxComponent.connect(Tab)
22 changes: 6 additions & 16 deletions app/renderer/components/tabs/tabs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ const windowActions = require('../../../../js/actions/windowActions')
// Store
const windowStore = require('../../../../js/stores/windowStore')

// State
const tabState = require('../../../common/state/tabState.js')

// Constants
const dragTypes = require('../../../../js/constants/dragTypes')
const settings = require('../../../../js/constants/settings.js')
Expand All @@ -39,7 +42,6 @@ class Tabs extends React.Component {
this.onNewTabLongPress = this.onNewTabLongPress.bind(this)
this.wasNewTabClicked = this.wasNewTabClicked.bind(this)
this.onMouseLeave = this.onMouseLeave.bind(this)
this.onTabClosedWithMouse = this.onTabClosedWithMouse.bind(this)
}

onMouseLeave () {
Expand All @@ -48,12 +50,6 @@ class Tabs extends React.Component {
})
}

onTabClosedWithMouse (rect) {
windowActions.onTabClosedWithMouse({
fixTabWidth: rect.width
})
}

onPrevPage () {
if (this.props.tabPageIndex === 0) {
return
Expand Down Expand Up @@ -140,14 +136,13 @@ class Tabs extends React.Component {
props.previewTabPageIndex = currentWindow.getIn(['ui', 'tabs', 'previewTabPageIndex'])
props.tabsPerTabPage = Number(getSetting(settings.TABS_PER_PAGE))
props.fixTabWidth = currentWindow.getIn(['ui', 'tabs', 'fixTabWidth'])
props.pageIndex = tabState.getPageIndex(currentWindow)

return Object.assign({}, ownProps, props)
}

render () {
this.tabRefs = []
const index = this.props.previewTabPageIndex !== undefined
? this.props.previewTabPageIndex : this.props.tabPageIndex
return <div className='tabs'
onMouseLeave={this.props.fixTabWidth ? this.onMouseLeave : null}>
<span className={cx({
Expand All @@ -158,7 +153,7 @@ class Tabs extends React.Component {
onDragOver={this.onDragOver}
onDrop={this.onDrop}>
{(() => {
if (index > 0) {
if (this.props.pageIndex > 0) {
return <span
className='prevTab fa fa-caret-left'
onClick={this.onPrevPage} />
Expand All @@ -171,15 +166,10 @@ class Tabs extends React.Component {
key={'tab-' + tab.get('frameKey')}
ref={(node) => this.tabRefs.push(node)}
frameKey={tab.get('frameKey')}
onTabClosedWithMouse={this.onTabClosedWithMouse}
tabWidth={this.props.fixTabWidth}
hasTabInFullScreen={this.props.hasTabInFullScreen}
notificationBarActive={this.props.notificationBarActive}
totalTabs={this.props.tabs.size}
partOfFullPageSet={this.props.partOfFullPageSet} />)
}
{(() => {
if (this.props.currentTabs.size >= this.props.tabsPerTabPage && this.totalPages > index + 1) {
if (this.props.currentTabs.size >= this.props.tabsPerTabPage && this.totalPages > this.props.pageIndex + 1) {
return <span
className='nextTab fa fa-caret-right'
onClick={this.onNextPage} />
Expand Down
22 changes: 13 additions & 9 deletions app/renderer/components/tabs/tabsToolbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ const ReduxComponent = require('../reduxComponent')
const Tabs = require('./tabs')
const PinnedTabs = require('./pinnedTabs')

// State
const tabState = require('../../../common/state/tabState.js')

// Constants
const settings = require('../../../../js/constants/settings.js')

Expand All @@ -31,27 +34,30 @@ class TabsToolbar extends React.Component {
contextMenus.onTabsToolbarContextMenu(this.props.activeFrame, undefined, undefined, e)
}

onHamburgerMenu (e) {
const activeFrame = frameStateUtil.getActiveFrame(this.props.windowState)
contextMenus.onHamburgerMenu((activeFrame && activeFrame.get('location')) || '', e)
}

mergeProps (state, dispatchProps, ownProps) {
const currentWindow = state.get('currentWindow')
const pageIndex = tabState.getPageIndex(currentWindow)

const props = {}
props.tabPageIndex = currentWindow.getIn(['ui', 'tabs', 'tabPageIndex'])
props.previewTabPageIndex = currentWindow.getIn(['ui', 'tabs', 'previewTabPageIndex'])

props.tabsPerTabPage = Number(getSetting(settings.TABS_PER_PAGE))
props.tabs = currentWindow.get('tabs')
props.activeFrame = frameStateUtil.getActiveFrame(currentWindow)
props.startingFrameIndex = pageIndex * props.tabsPerTabPage

return Object.assign({}, ownProps, props)
}

render () {
const index = this.props.previewTabPageIndex !== undefined
? this.props.previewTabPageIndex : this.props.tabPageIndex
const startingFrameIndex = index * this.props.tabsPerTabPage
const pinnedTabs = this.props.tabs.filter((tab) => tab.get('pinnedLocation'))
const unpinnedTabs = this.props.tabs.filter((tab) => !tab.get('pinnedLocation'))
const currentTabs = unpinnedTabs
.slice(startingFrameIndex, startingFrameIndex + this.props.tabsPerTabPage)
.slice(this.props.startingFrameIndex, this.props.startingFrameIndex + this.props.tabsPerTabPage)
return <div className='tabsToolbar'
onContextMenu={this.onContextMenu}>
{
Expand All @@ -67,13 +73,11 @@ class TabsToolbar extends React.Component {
shouldAllowWindowDrag={this.props.shouldAllowWindowDrag}
currentTabs={currentTabs}
partOfFullPageSet={currentTabs.size === this.props.tabsPerTabPage}
fixTabWidth={this.props.fixTabWidth}
notificationBarActive={this.props.notificationBarActive}
/>
<div className='tabsToolbarButtons'>
<span data-l10n-id='menuButton'
className='navbutton menuButton'
onClick={this.props.onMenu}
onClick={this.onHamburgerMenu.bind(this)}
/>
</div>
</div>
Expand Down
14 changes: 0 additions & 14 deletions js/components/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,6 @@ class Main extends ImmutableComponent {
this.onHideNoScript = this.onHideNoScript.bind(this)
this.onHideReleaseNotes = this.onHideReleaseNotes.bind(this)
this.onHideCheckDefaultBrowserDialog = this.onHideCheckDefaultBrowserDialog.bind(this)
this.onHamburgerMenu = this.onHamburgerMenu.bind(this)
this.onTabContextMenu = this.onTabContextMenu.bind(this)
this.onFind = this.onFind.bind(this)
this.onFindHide = this.onFindHide.bind(this)
Expand Down Expand Up @@ -537,11 +536,6 @@ class Main extends ImmutableComponent {
}
}

onHamburgerMenu (e) {
const activeFrame = frameStateUtil.getActiveFrame(this.props.windowState)
contextMenus.onHamburgerMenu((activeFrame && activeFrame.get('location')) || '', e)
}

onHideSiteInfo () {
windowActions.setSiteInfoVisible(false)
}
Expand Down Expand Up @@ -734,7 +728,6 @@ class Main extends ImmutableComponent {

const notifications = this.props.appState.get('notifications')
const hasNotifications = notifications && notifications.size
const notificationBarOrigin = notifications.map(bar => bar.get('frameOrigin'))

return <div id='window'
className={cx({
Expand Down Expand Up @@ -896,13 +889,6 @@ class Main extends ImmutableComponent {
<TabsToolbar
key='tab-bar'
shouldAllowWindowDrag={shouldAllowWindowDrag}
onMenu={this.onHamburgerMenu}
notificationBarActive={notificationBarOrigin}
hasTabInFullScreen={
sortedFrames
.map((frame) => frame.get('isFullScreen'))
.some(fullScreenMode => fullScreenMode === true)
}
/>
{
hasNotifications && activeFrame
Expand Down

0 comments on commit 7e416ab

Please sign in to comment.