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

Commit

Permalink
Merge pull request #8266 from brave/redux-navbar
Browse files Browse the repository at this point in the history 
convert navigationBar to redux component
  • Loading branch information
@bridiver
bridiver authored Apr 13, 2017
2 parents 7d5560f + 0c842ef commit 03a2b59
Show file tree
Hide file tree
Showing 10 changed files with 129 additions and 103 deletions.
2 changes: 1 addition & 1 deletion app/common/state/siteSettingsState.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
const appConfig = require('../../../js/constants/appConfig')
const siteSettings = require('../../../js/state/siteSettings')

module.exports.isNoScriptEnabled = (settings, state) => {
module.exports.isNoScriptEnabled = (state, settings) => {
return siteSettings.activeSettings(settings, state, appConfig).noScript === true
}
12 changes: 10 additions & 2 deletions app/common/state/tabState.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -288,6 +288,9 @@ const tabState = {
},

isShowingMessageBox: (state, tabId) => {
if (tabId === tabState.TAB_ID_NONE) {
return false
}
return tabState.getTabPropertyByTabId(state, tabId, 'messageBoxDetail') || false
},

Expand All @@ -309,9 +312,14 @@ const tabState = {
}
},

getActiveTabId: (state) => {
getActiveTab: (state, windowId = windowState.getActiveWindowId(state)) => {
state = validateState(state)
const tab = state.get('tabs').find((tab) => tab.get('active') === true)
windowId = validateId('windowId', windowId)
return state.get('tabs').find((tab) => tab.get('active') === true && tab.get('windowId') === windowId)
},

getActiveTabId: (state, windowId = windowState.getActiveWindowId(state)) => {
const tab = tabState.getActiveTab(state, windowId)
return tab ? tab.get('tabId') : tabState.TAB_ID_NONE
},

Expand Down
13 changes: 13 additions & 0 deletions app/common/state/windowState.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,9 @@ const validateAction = function (action) {
}

const api = {
WINDOW_ID_NONE: -1,
WINDOW_ID_CURRENT: -2,

getWindowIndex: (state, windowValue) => {
state = validateState(state)

Expand Down Expand Up @@ -68,6 +71,16 @@ const api = {
}
},

getActiveWindow: (state) => {
state = validateState(state)
return state.get('windows').find((win) => win.get('focused') === true)
},

getActiveWindowId: (state) => {
const win = api.getActiveWindow(state)
return (win && win.get('windowId')) || api.WINDOW_ID_NONE
},

getByWindowId: (state, windowId) => {
state = validateState(state)
windowId = validateId('windowId', windowId)
Expand Down
5 changes: 2 additions & 3 deletions app/importer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ const getSetting = require('../js/settings').getSetting
const locale = require('./locale')
const tabMessageBox = require('./browser/tabMessageBox')
const {makeImmutable} = require('./common/state/immutableUtil')
const tabState = require('./common/state/tabState')

var isMergeFavorites = false
var isImportingBookmarks = false
Expand Down Expand Up @@ -229,9 +230,7 @@ importer.on('add-cookies', (e, cookies) => {
})

const getActiveTabId = () => {
const tabs = makeImmutable(AppStore.getState()).get('tabs')
const activeTab = tabs.find((tab) => tab.get('active'))
return activeTab && activeTab.get('id')
return tabState.getActiveTabId(AppStore.getState())
}

const showImportWarning = function () {
Expand Down
84 changes: 39 additions & 45 deletions app/renderer/components/navigation/navigationBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

const React = require('react')
const Immutable = require('immutable')
const ImmutableComponent = require('./../../../../js/components/immutableComponent')
const ReduxComponent = require('../reduxComponent')

const cx = require('../../../../js/lib/classSet')
const UrlBar = require('./urlBar')
Expand All @@ -14,7 +14,7 @@ const siteTags = require('../../../../js/constants/siteTags')
const messages = require('../../../../js/constants/messages')
const settings = require('../../../../js/constants/settings')
const ipc = require('electron').ipcRenderer
const {isSourceAboutUrl, getBaseUrl} = require('../../../../js/lib/appUrlUtil')
const {isSourceAboutUrl} = require('../../../../js/lib/appUrlUtil')
const AddEditBookmarkHanger = require('../addEditBookmarkHanger')
const siteUtil = require('../../../../js/state/siteUtil')
const eventUtil = require('../../../../js/lib/eventUtil')
Expand All @@ -24,10 +24,15 @@ const windowStore = require('../../../../js/stores/windowStore')
const contextMenus = require('../../../../js/contextMenus')
const LongPressButton = require('./../../../../js/components/longPressButton')
const PublisherToggle = require('../publisherToggle')
const {getCurrentWindowId} = require('../../currentWindow')

class NavigationBar extends ImmutableComponent {
constructor () {
super()
// State
const tabState = require('../../../common/state/tabState')
const frameStateUtil = require('../../../../js/state/frameStateUtil')

class NavigationBar extends React.Component {
constructor (props) {
super(props)
this.onToggleBookmark = this.onToggleBookmark.bind(this)
this.onStop = this.onStop.bind(this)
this.onReload = this.onReload.bind(this)
Expand Down Expand Up @@ -121,34 +126,38 @@ class NavigationBar extends ImmutableComponent {
)
}

get locationId () {
return getBaseUrl(this.props.location)
}

get publisherId () {
return this.props.locationInfo && this.props.locationInfo.getIn([this.locationId, 'publisher'])
}

get visiblePublisher () {
const hostPattern = UrlUtil.getHostPattern(this.publisherId)
const hostSettings = this.props.siteSettings.get(hostPattern)
const ledgerPaymentsShown = hostSettings && hostSettings.get('ledgerPaymentsShown')
return typeof ledgerPaymentsShown === 'boolean'
? ledgerPaymentsShown
: true
}

get isPublisherButtonEnabled () {
return getSetting(settings.PAYMENTS_ENABLED) &&
UrlUtil.isHttpOrHttps(this.props.location) &&
this.visiblePublisher
}

componentDidMount () {
ipc.on(messages.SHORTCUT_ACTIVE_FRAME_BOOKMARK, () => this.onToggleBookmark())
ipc.on(messages.SHORTCUT_ACTIVE_FRAME_REMOVE_BOOKMARK, () => this.onToggleBookmark())
}

mergeProps (state, dispatchProps, ownProps) {
const windowState = state.get('currentWindow')
const activeFrame = frameStateUtil.getActiveFrame(windowState) || Immutable.Map()
const activeTabId = tabState.getActiveTabId(state, getCurrentWindowId())
const props = {}

props.navbar = activeFrame.get('navbar')
props.sites = state.get('sites')
props.activeFrameKey = activeFrame.get('key')
props.location = activeFrame.get('location') || ''
props.title = activeFrame.get('title') || ''
props.partitionNumber = activeFrame.get('partitionNumber') || 0
props.isSecure = activeFrame.getIn(['security', 'isSecure'])
props.loading = activeFrame.get('loading')
props.bookmarkDetail = windowState.get('bookmarkDetail')
props.mouseInTitlebar = windowState.getIn(['ui', 'mouseInTitlebar'])
props.enableNoScript = ownProps.enableNoScript
props.settings = state.get('settings')
props.menubarVisible = ownProps.menubarVisible
props.siteSettings = state.get('siteSettings')
props.synopsis = state.getIn(['publisherInfo', 'synopsis']) || new Immutable.Map()
props.activeTabShowingMessageBox = tabState.isShowingMessageBox(state, activeTabId)
props.locationInfo = state.get('locationInfo')

return props
}

render () {
if (this.props.activeFrameKey === undefined ||
this.props.siteSettings === undefined) {
Expand Down Expand Up @@ -214,26 +223,11 @@ class NavigationBar extends ImmutableComponent {
: null
}
</div>
<UrlBar ref='urlBar'
activeFrameKey={this.props.activeFrameKey}
canGoForward={this.props.canGoForward}
searchDetail={this.props.searchDetail}
loading={this.loading}
location={this.props.location}
title={this.props.title}
history={this.props.history}
isSecure={this.props.isSecure}
hasLocationValueSuffix={this.props.hasLocationValueSuffix}
startLoadTime={this.props.startLoadTime}
endLoadTime={this.props.endLoadTime}
<UrlBar
titleMode={this.titleMode}
urlbar={this.props.navbar.get('urlbar')}
onStop={this.onStop}
menubarVisible={this.props.menubarVisible}
noBorderRadius={this.isPublisherButtonEnabled}
activeTabShowingMessageBox={this.props.activeTabShowingMessageBox}
enableNoScript={this.props.enableNoScript}
scriptsBlocked={this.props.scriptsBlocked}
/>
{
isSourceAboutUrl(this.props.location)
Expand All @@ -253,4 +247,4 @@ class NavigationBar extends ImmutableComponent {
}
}

module.exports = NavigationBar
module.exports = ReduxComponent.connect(NavigationBar)
35 changes: 4 additions & 31 deletions app/renderer/components/navigation/navigator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
* You can obtain one at http://mozilla.org/MPL/2.0/. */

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

// Actions
Expand Down Expand Up @@ -31,7 +30,6 @@ const {getCurrentWindowId, isMaximized} = require('../../currentWindow')
const {makeImmutable} = require('../../../common/state/immutableUtil')
const platformUtil = require('../../../common/lib/platformUtil')
const {braveShieldsEnabled} = require('../../../common/state/shieldState')
const tabUtil = require('../../lib/tabUtil')
const eventUtil = require('../../../../js/lib/eventUtil')
const {isNavigatableAboutPage, getBaseUrl} = require('./../../../../js/lib/appUrlUtil')
const frameStateUtil = require('../../../../js/state/frameStateUtil')
Expand All @@ -57,8 +55,8 @@ class Navigator extends ImmutableComponent {

onNav (e, navCheckProp, navType, navAction) {
const activeFrame = frameStateUtil.getActiveFrame(this.props.windowState)
const activeTabId = tabUtil.activeTabId(this.props.windowState)
const activeTab = activeFrame ? this.props.appState.get('tabs').find((tab) => tab.get('tabId') === activeTabId) : null
const activeTab = tabState.getActiveTab(this.props.appState)
const activeTabId = tabState.getActiveTabId(this.props.appState)
const isNavigable = isNavigatableAboutPage(getBaseUrl(activeFrame.get('location')))
if (e && eventUtil.isForSecondaryAction(e) && isNavigable) {
if (activeTab && activeTab.get(navCheckProp)) {
Expand Down Expand Up @@ -96,7 +94,7 @@ class Navigator extends ImmutableComponent {
}

get extensionButtons () {
const activeTabId = tabUtil.activeTabId(this.props.windowState)
const activeTabId = tabState.getActiveTabId(this.props.appState)
const enabledExtensions = extensionState.getEnabledExtensions(this.props.appState)
const extensionBrowserActions = enabledExtensions
.map((extension) => extensionState.getBrowserActionByTabId(this.props.appState, extension.get('id'), activeTabId))
Expand Down Expand Up @@ -178,7 +176,6 @@ class Navigator extends ImmutableComponent {
const activeFrame = frameStateUtil.getActiveFrame(this.props.windowState)
const totalBlocks = activeFrame ? this.getTotalBlocks(activeFrame) : false
const contextMenuDetail = this.props.windowState.get('contextMenuDetail')
const noScriptIsVisible = this.props.windowState.getIn(['ui', 'noScriptInfo', 'isVisible'])
const braverySettings = siteSettings.activeSettings(this.props.activeSiteSettings, this.props.appState, appConfig)
const shieldEnabled = braveShieldsEnabled(activeFrame)

Expand Down Expand Up @@ -235,32 +232,8 @@ class Navigator extends ImmutableComponent {
</div>
</div>
<NavigationBar
navbar={activeFrame && activeFrame.get('navbar')}
sites={this.props.appState.get('sites')}
canGoForward={activeTab && activeTab.get('canGoForward')}
activeFrameKey={(activeFrame && activeFrame.get('key')) || undefined}
location={(activeFrame && activeFrame.get('location')) || ''}
title={(activeFrame && activeFrame.get('title')) || ''}
scriptsBlocked={activeFrame && activeFrame.getIn(['noScript', 'blocked'])}
partitionNumber={(activeFrame && activeFrame.get('partitionNumber')) || 0}
history={(activeFrame && activeFrame.get('history')) || new Immutable.List()}
suggestionIndex={(activeFrame && activeFrame.getIn(['navbar', 'urlbar', 'suggestions', 'selectedIndex'])) || 0}
isSecure={activeFrame ? activeFrame.getIn(['security', 'isSecure']) : null}
hasLocationValueSuffix={activeFrame && activeFrame.getIn(['navbar', 'urlbar', 'suggestions', 'urlSuffix'])}
startLoadTime={(activeFrame && activeFrame.get('startLoadTime')) || undefined}
endLoadTime={(activeFrame && activeFrame.get('endLoadTime')) || undefined}
loading={activeFrame && activeFrame.get('loading')}
bookmarkDetail={this.props.windowState.get('bookmarkDetail')}
mouseInTitlebar={this.props.windowState.getIn(['ui', 'mouseInTitlebar'])}
searchDetail={this.props.windowState.get('searchDetail')}
enableNoScript={siteSettingsState.isNoScriptEnabled(this.props.activeSiteSettings, this.props.appState)}
settings={this.props.appState.get('settings')}
noScriptIsVisible={noScriptIsVisible}
enableNoScript={siteSettingsState.isNoScriptEnabled(this.props.appState, this.props.activeSiteSettings)}
menubarVisible={this.props.customTitlebar.menubarVisible}
siteSettings={this.props.appState.get('siteSettings')}
synopsis={this.props.appState.getIn(['publisherInfo', 'synopsis']) || new Immutable.Map()}
activeTabShowingMessageBox={activeTabShowingMessageBox}
locationInfo={this.props.appState.get('locationInfo')}
/>
<div className='topLevelEndButtons'>
<div className={cx({
Expand Down
60 changes: 54 additions & 6 deletions app/renderer/components/navigation/urlBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@

const React = require('react')

const ImmutableComponent = require('../../../../js/components/immutableComponent')
const ReduxComponent = require('../reduxComponent')
const {StyleSheet, css} = require('aphrodite')
const Immutable = require('immutable')

const windowActions = require('../../../../js/actions/windowActions')
const appActions = require('../../../../js/actions/appActions')
Expand All @@ -18,20 +19,26 @@ const ipc = require('electron').ipcRenderer
const UrlBarSuggestions = require('./urlBarSuggestions')
const UrlBarIcon = require('./urlBarIcon')
const messages = require('../../../../js/constants/messages')
const siteSettings = require('../../../../js/state/siteSettings')
const {getSetting} = require('../../../../js/settings')
const settings = require('../../../../js/constants/settings')
const contextMenus = require('../../../../js/contextMenus')
const windowStore = require('../../../../js/stores/windowStore')
const UrlUtil = require('../../../../js/lib/urlutil')
const {eventElHasAncestorWithClasses, isForSecondaryAction} = require('../../../../js/lib/eventUtil')
const {isUrl, isIntermediateAboutPage} = require('../../../../js/lib/appUrlUtil')
const {getBaseUrl, isUrl, isIntermediateAboutPage} = require('../../../../js/lib/appUrlUtil')
const {getCurrentWindowId} = require('../../currentWindow')

// Icons
const iconNoScript = require('../../../../img/url-bar-no-script.svg')

class UrlBar extends ImmutableComponent {
constructor () {
super()
// State
const frameStateUtil = require('../../../../js/state/frameStateUtil')
const tabState = require('../../../common/state/tabState')

class UrlBar extends React.Component {
constructor (props) {
super(props)
this.onFocus = this.onFocus.bind(this)
this.onBlur = this.onBlur.bind(this)
this.onKeyDown = this.onKeyDown.bind(this)
Expand Down Expand Up @@ -505,6 +512,47 @@ class UrlBar extends ImmutableComponent {
contextMenus.onUrlBarContextMenu(this.props.searchDetail, this.activeFrame, e)
}

mergeProps (state, dispatchProps, ownProps) {
const windowState = state.get('currentWindow')
const activeFrame = frameStateUtil.getActiveFrame(windowState) || Immutable.Map()
const activeTabId = tabState.getActiveTabId(state, getCurrentWindowId())

const location = activeFrame.get('location') || ''
const baseUrl = getBaseUrl(location)

// TODO(bridiver) - this definitely needs a helper
const publisherId = state.getIn(['locationInfo', baseUrl, 'publisher'])
const hostPattern = UrlUtil.getHostPattern(publisherId)
const hostSettings = siteSettings.getSiteSettingsForHostPattern(state.get('settings'), hostPattern)
const ledgerPaymentsShown = hostSettings && hostSettings.get('ledgerPaymentsShown')
const visiblePublisher = typeof ledgerPaymentsShown === 'boolean' ? ledgerPaymentsShown : true
const isPublisherButtonEnabled = getSetting(settings.PAYMENTS_ENABLED) &&
UrlUtil.isHttpOrHttps(location) && visiblePublisher

const props = {}

props.activeFrameKey = activeFrame.get('key')
props.location = location
props.title = activeFrame.get('title') || ''
props.scriptsBlocked = activeFrame.getIn(['noScript', 'blocked'])
props.history = activeFrame.get('history') || new Immutable.List()
props.isSecure = activeFrame.getIn(['security', 'isSecure'])
props.hasLocationValueSuffix = activeFrame.getIn(['navbar', 'urlbar', 'suggestions', 'urlSuffix'])
props.startLoadTime = activeFrame.get('startLoadTime')
props.endLoadTime = activeFrame.get('endLoadTime')
props.loading = activeFrame.get('loading')
props.searchDetail = windowState.get('searchDetail')
props.enableNoScript = ownProps.enableNoScript
props.noScriptIsVisible = windowState.getIn(['ui', 'noScriptInfo', 'isVisible']) || false
props.menubarVisible = ownProps.menubarVisible
props.activeTabShowingMessageBox = tabState.isShowingMessageBox(state, activeTabId)
props.noBorderRadius = isPublisherButtonEnabled
props.urlbar = activeFrame.getIn(['navbar', 'urlbar'])
props.onStop = ownProps.onStop
props.titleMode = ownProps.titleMode
return props
}

render () {
return <form
className={cx({
Expand Down Expand Up @@ -605,4 +653,4 @@ const styles = StyleSheet.create({
}
})

module.exports = UrlBar
module.exports = ReduxComponent.connect(UrlBar)
Loading

0 comments on commit 03a2b59

Please sign in to comment.