From d01daf45e0537be592fd6830f8e11b88f979e204 Mon Sep 17 00:00:00 2001 From: Brian Clifton Date: Tue, 11 Apr 2017 11:36:35 -0700 Subject: [PATCH] Move NoScript icon into URL bar. This fixes draggability dead area that was present Fixes https://github.com/brave/browser-laptop/issues/5792 Auditors: @bradleyrichter, @luixxiul Includes: Fix noscript tests Auditors: @diracdeltas --- .../components/navigation/navigationBar.js | 35 ++----------- app/renderer/components/navigation/urlBar.js | 50 ++++++++++++++++++- img/url-bar-no-script.svg | 20 ++++++++ less/navigationBar.less | 14 ------ test/lib/selectors.js | 2 +- .../navigation/navigationBarTest.js | 1 + 6 files changed, 73 insertions(+), 49 deletions(-) create mode 100644 img/url-bar-no-script.svg diff --git a/app/renderer/components/navigation/navigationBar.js b/app/renderer/components/navigation/navigationBar.js index 09b4e4abded..d7071f79075 100644 --- a/app/renderer/components/navigation/navigationBar.js +++ b/app/renderer/components/navigation/navigationBar.js @@ -7,7 +7,6 @@ const Immutable = require('immutable') const ImmutableComponent = require('./../../../../js/components/immutableComponent') const cx = require('../../../../js/lib/classSet') -const Button = require('./../../../../js/components/button') const UrlBar = require('./urlBar') const windowActions = require('../../../../js/actions/windowActions') const appActions = require('../../../../js/actions/appActions') @@ -34,7 +33,6 @@ class NavigationBar extends ImmutableComponent { this.onReload = this.onReload.bind(this) this.onHome = this.onHome.bind(this) this.onReloadLongPress = this.onReloadLongPress.bind(this) - this.onNoScript = this.onNoScript.bind(this) } get activeFrame () { @@ -151,21 +149,6 @@ class NavigationBar extends ImmutableComponent { ipc.on(messages.SHORTCUT_ACTIVE_FRAME_REMOVE_BOOKMARK, () => this.onToggleBookmark()) } - get showNoScriptInfo () { - return this.props.enableNoScript && this.props.scriptsBlocked && this.props.scriptsBlocked.size - } - - onNoScript () { - windowActions.setNoScriptVisible(!this.props.noScriptIsVisible) - } - - componentDidUpdate (prevProps) { - if (this.props.noScriptIsVisible && !this.showNoScriptInfo) { - // There are no blocked scripts, so hide the noscript dialog. - windowActions.setNoScriptVisible(false) - } - } - render () { if (this.props.activeFrameKey === undefined || this.props.siteSettings === undefined) { @@ -249,12 +232,12 @@ class NavigationBar extends ImmutableComponent { menubarVisible={this.props.menubarVisible} noBorderRadius={this.isPublisherButtonEnabled} activeTabShowingMessageBox={this.props.activeTabShowingMessageBox} + enableNoScript={this.props.enableNoScript} + scriptsBlocked={this.props.scriptsBlocked} /> { isSourceAboutUrl(this.props.location) - ?
- -
+ ? null :
{ } - { - !this.showNoScriptInfo - ? null - : -
} diff --git a/app/renderer/components/navigation/urlBar.js b/app/renderer/components/navigation/urlBar.js index 8756d7c3f40..5044c09cfef 100644 --- a/app/renderer/components/navigation/urlBar.js +++ b/app/renderer/components/navigation/urlBar.js @@ -3,11 +3,13 @@ * You can obtain one at http://mozilla.org/MPL/2.0/. */ const React = require('react') -const urlParse = require('../../../common/urlParse') const ImmutableComponent = require('../../../../js/components/immutableComponent') +const {StyleSheet, css} = require('aphrodite') + const windowActions = require('../../../../js/actions/windowActions') const appActions = require('../../../../js/actions/appActions') +const urlParse = require('../../../common/urlParse') const KeyCodes = require('../../../common/constants/keyCodes') const cx = require('../../../../js/lib/classSet') const debounce = require('../../../../js/lib/debounce') @@ -24,6 +26,9 @@ const UrlUtil = require('../../../../js/lib/urlutil') const {eventElHasAncestorWithClasses, isForSecondaryAction} = require('../../../../js/lib/eventUtil') const {isUrl, isIntermediateAboutPage} = require('../../../../js/lib/appUrlUtil') +// Icons +const iconNoScript = require('../../../../img/url-bar-no-script.svg') + class UrlBar extends ImmutableComponent { constructor () { super() @@ -47,6 +52,7 @@ class UrlBar extends ImmutableComponent { this.urlInput.setSelectionRange(len, len + suffixLen) } }, 10) + this.onNoScript = this.onNoScript.bind(this) } get locationValueSuffix () { @@ -421,10 +427,16 @@ class UrlBar extends ImmutableComponent { this.setValue(this.locationValue) } } + if (this.isSelected() && !prevProps.urlbar.get('selected')) { this.select() windowActions.setUrlBarSelected(false) } + + if (this.props.noScriptIsVisible && !this.showNoScriptInfo) { + // There are no blocked scripts, so hide the noscript dialog. + windowActions.setNoScriptVisible(false) + } } get hostValue () { @@ -481,6 +493,14 @@ class UrlBar extends ImmutableComponent { this.suggestionList && this.suggestionList.size > 0 } + get showNoScriptInfo () { + return this.props.enableNoScript && this.props.scriptsBlocked && this.props.scriptsBlocked.size + } + + onNoScript () { + windowActions.setNoScriptVisible(!this.props.noScriptIsVisible) + } + onContextMenu (e) { contextMenus.onUrlBarContextMenu(this.props.searchDetail, this.activeFrame, e) } @@ -545,7 +565,17 @@ class UrlBar extends ImmutableComponent { 'onFocus': this.props.urlbar.get('active') })}>{this.loadTime} } - + { + !this.showNoScriptInfo + ? null + : +