From d363f82e175d311c5c10c3d9edd87c0c5d0ee917 Mon Sep 17 00:00:00 2001 From: NejcZdovc Date: Sun, 11 Jun 2017 13:09:02 -0700 Subject: [PATCH] Refactors UrlBarIcon into redux Resolves #9340 Auditors: @bsclifton @bridiver Test Plan: --- app/renderer/components/navigation/urlBar.js | 26 +----- .../components/navigation/urlBarIcon.js | 91 ++++++++++++++---- .../components/navigation/urlBarIconTest.js | 92 +++++++++++++------ 3 files changed, 137 insertions(+), 72 deletions(-) diff --git a/app/renderer/components/navigation/urlBar.js b/app/renderer/components/navigation/urlBar.js index 163906fc193..9c70db6cd2b 100644 --- a/app/renderer/components/navigation/urlBar.js +++ b/app/renderer/components/navigation/urlBar.js @@ -428,17 +428,16 @@ class UrlBar extends React.Component { mergeProps (state, ownProps) { const currentWindow = state.get('currentWindow') const activeFrame = frameStateUtil.getActiveFrame(currentWindow) || Immutable.Map() - const activeTabId = activeFrame.get('tabId') || tabState.TAB_ID_NONE + const activeTabId = activeFrame.get('tabId', tabState.TAB_ID_NONE) const location = tabState.getVisibleURL(state, activeTabId) const frameLocation = activeFrame.get('location') || '' const displayEntry = tabState.getVisibleEntry(state, activeTabId) || Immutable.Map() const displayURL = tabState.getVisibleVirtualURL(state, activeTabId) || '' const hostValue = displayEntry.get('host', '') - const protocol = displayEntry.get('protocol', '') const baseUrl = getBaseUrl(location) - const urlbar = activeFrame.getIn(['navbar', 'urlbar']) || Immutable.Map() + const urlbar = activeFrame.getIn(['navbar', 'urlbar'], Immutable.Map()) const urlbarLocation = urlbar.get('location') const selectedIndex = urlbar.getIn(['suggestions', 'selectedIndex']) const allSiteSettings = siteSettingsState.getAllSiteSettings(state, activeFrame.get('isPrivate')) @@ -464,8 +463,6 @@ class UrlBar extends React.Component { searchURL = provider.get('search') } - const isHTTPPage = protocol === 'http' || protocol === 'https' - const props = {} props.activeTabId = activeTabId @@ -473,18 +470,16 @@ class UrlBar extends React.Component { props.frameLocation = frameLocation props.displayURL = displayURL props.hostValue = hostValue - props.title = activeFrame.get('title') || '' + props.title = activeFrame.get('title', '') props.scriptsBlocked = activeFrame.getIn(['noScript', 'blocked']) props.enableNoScript = siteSettingsState.isNoScriptEnabled(state, braverySettings) props.showNoScriptInfo = props.enableNoScript && props.scriptsBlocked && props.scriptsBlocked.size - props.isSecure = activeFrame.getIn(['security', 'isSecure']) props.hasSuggestionMatch = urlbar.getIn(['suggestions', 'hasSuggestionMatch']) props.startLoadTime = activeFrame.get('startLoadTime') props.endLoadTime = activeFrame.get('endLoadTime') props.loading = activeFrame.get('loading') props.noScriptIsVisible = currentWindow.getIn(['ui', 'noScriptInfo', 'isVisible']) || false props.menubarVisible = ownProps.menubarVisible - props.activeTabShowingMessageBox = tabState.isShowingMessageBox(state, activeTabId) props.noBorderRadius = isPublisherButtonEnabled props.onStop = ownProps.onStop props.titleMode = ownProps.titleMode @@ -498,9 +493,7 @@ class UrlBar extends React.Component { props.isActive = urlbar.get('active') props.isSelected = urlbar.get('selected') props.isFocused = urlbar.get('focused') - props.isHTTPPage = isHTTPPage props.isWideURLbarEnabled = getSetting(settings.WIDE_URL_BAR) - props.activateSearchEngine = activateSearchEngine props.searchSelectEntry = urlbarSearchDetail props.autocompleteEnabled = urlbar.getIn(['suggestions', 'autocompleteEnabled']) props.searchURL = searchURL @@ -519,21 +512,10 @@ class UrlBar extends React.Component { noBorderRadius: this.props.noBorderRadius })} action='#' - id='urlbar' - ref='urlbar'> + id='urlbar'>
{ diff --git a/app/renderer/components/navigation/urlBarIcon.js b/app/renderer/components/navigation/urlBarIcon.js index 39e9bfa8f9c..753ddc59c47 100644 --- a/app/renderer/components/navigation/urlBarIcon.js +++ b/app/renderer/components/navigation/urlBarIcon.js @@ -3,32 +3,45 @@ * You can obtain one at http://mozilla.org/MPL/2.0/. */ const React = require('react') -const ImmutableComponent = require('../immutableComponent') +const Immutable = require('immutable') + +// Components +const ReduxComponent = require('../reduxComponent') + +// Actions const windowActions = require('../../../../js/actions/windowActions') -const cx = require('../../../../js/lib/classSet') + +// Constants const dragTypes = require('../../../../js/constants/dragTypes') + +// State +const tabState = require('../../../common/state/tabState') + +// Utils +const cx = require('../../../../js/lib/classSet') const dndData = require('../../../../js/dndData') +const UrlUtil = require('../../../../js/lib/urlutil') +const frameStateUtil = require('../../../../js/state/frameStateUtil') const {isSourceAboutUrl} = require('../../../../js/lib/appUrlUtil') const {isPotentialPhishingUrl} = require('../../../../js/lib/urlutil') -const windowStore = require('../../../../js/stores/windowStore') -const {getActiveFrame} = require('../../../../js/state/frameStateUtil') + const searchIconSize = 16 -class UrlBarIcon extends ImmutableComponent { - constructor () { - super() +class UrlBarIcon extends React.Component { + constructor (props) { + super(props) this.onClick = this.onClick.bind(this) this.onDragStart = this.onDragStart.bind(this) } + get iconCssClasses () { - if (isPotentialPhishingUrl(this.props.location)) { + if (this.props.isPotentialPhishingUrl) { return ['fa-exclamation-triangle', 'insecure-color'] } else if (this.isSearch) { return ['fa-search'] - } else if (this.isAboutPage && !this.props.titleMode) { + } else if (this.props.isAboutPage && !this.props.titleMode) { return ['fa-list'] } else if (this.props.isHTTPPage && !this.props.active) { - // NOTE: EV style not approved yet; see discussion at https://github.com/brave/browser-laptop/issues/791 if (this.props.isSecure === true) { return ['fa-lock'] } else if (this.props.isSecure === false || this.props.isSecure === 2) { @@ -37,8 +50,10 @@ class UrlBarIcon extends ImmutableComponent { return ['fa-unlock'] } } + return [] } + /** * search icon: * - does not show when in title mode @@ -50,50 +65,85 @@ class UrlBarIcon extends ImmutableComponent { const defaultToSearch = (!this.props.isHTTPPage || this.props.active) && !this.props.titleMode && - !this.isAboutPage + !this.props.isAboutPage return showSearch || defaultToSearch } - get isAboutPage () { - return isSourceAboutUrl(this.props.location) && - this.props.location !== 'about:newtab' - } + get iconClasses () { if (this.props.activateSearchEngine) { - return cx({urlbarIcon: true}) + return cx({ + urlbarIcon: true + }) } + const iconClasses = { urlbarIcon: true, fa: true } + this.iconCssClasses.forEach((iconClass) => { iconClasses[iconClass] = true }) return cx(iconClasses) } + get iconStyles () { if (!this.props.activateSearchEngine) { return {} } return { - backgroundImage: `url(${this.props.searchSelectEntry.get('image')})`, + backgroundImage: `url(${this.props.searchSelectImage})`, backgroundSize: searchIconSize, width: searchIconSize, height: searchIconSize } } + onClick () { if (isSourceAboutUrl(this.props.location)) { return } + windowActions.setSiteInfoVisible(true) } + onDragStart (e) { dndData.setupDataTransferURL(e.dataTransfer, this.props.location, this.props.title) - const activeFrame = getActiveFrame(windowStore.state) - dndData.setupDataTransferBraveData(e.dataTransfer, dragTypes.TAB, activeFrame) + dndData.setupDataTransferBraveData(e.dataTransfer, dragTypes.TAB, this.props.activeFrame) } + + mergeProps (state, ownProps) { + const currentWindow = state.get('currentWindow') + const activeFrame = frameStateUtil.getActiveFrame(currentWindow) || Immutable.Map() + const urlBar = activeFrame.getIn(['navbar', 'urlbar'], Immutable.Map()) + const activeTabId = activeFrame.get('tabId', tabState.TAB_ID_NONE) + const location = tabState.getVisibleURL(state, activeTabId) + const displayURL = tabState.getVisibleVirtualURL(state, activeTabId) || '' + const urlBarLocation = urlBar.get('location') + + const props = {} + // used in renderer + props.activateSearchEngine = urlBar.getIn(['searchDetail', 'activateSearchEngine']) + props.active = urlBar.get('active') + props.isSecure = activeFrame.getIn(['security', 'isSecure']) + props.isHTTPPage = UrlUtil.isHttpOrHttps(location) + props.location = displayURL + props.searchSelectImage = urlBar.getIn(['searchDetail', 'image'], '') + props.titleMode = ownProps.titleMode + props.isSearching = displayURL !== urlBarLocation + props.activeTabShowingMessageBox = tabState.isShowingMessageBox(state, activeTabId) + props.isAboutPage = isSourceAboutUrl(props.location) && props.location !== 'about:newtab' + props.isPotentialPhishingUrl = isPotentialPhishingUrl(props.location) + + // used in other functions + props.title = activeFrame.get('title', '') + props.activeFrame = activeFrame // TODO (nejc) only primitives + + return props + } + render () { // allow click and drag (unless tab is showing a message box) const props = {} @@ -102,6 +152,7 @@ class UrlBarIcon extends ImmutableComponent { props.onClick = this.onClick props.onDragStart = this.onDragStart } + return - ) + appStore.state = fakeAppStoreRenderer + windowStore.state = defaultWindowStore + const wrapper = mount() assert.equal(wrapper.find('span[draggable]').length, 1) }) it('shows site information when clicked', function () { const spy = sinon.spy(windowActions, 'setSiteInfoVisible') - const wrapper = mount( - - ) + const wrapper = mount() wrapper.find('[data-test-id="urlBarIcon"]').simulate('click') assert.equal(spy.calledOnce, true) windowActions.setSiteInfoVisible.restore() }) describe('when active tab is showing a message box', function () { - const props2 = Object.assign({}, props) - before(function () { - props2.activeTabShowingMessageBox = true + appStore.state = fakeAppStoreRenderer.setIn(['tabs', 0, 'messageBoxDetail'], true) + windowStore.state = defaultWindowStore }) it('does not set element as draggable', function () { - const wrapper = mount( - - ) + const wrapper = mount() assert.equal(wrapper.find('span[draggable]').length, 0) }) it('does not respond to clicks', function () { const spy = sinon.spy(windowActions, 'setSiteInfoVisible') - const wrapper = mount( - - ) + const wrapper = mount() wrapper.find('[data-test-id="urlBarIcon"]').simulate('click') assert.equal(spy.notCalled, true) windowActions.setSiteInfoVisible.restore()