Move NoScript icon into URL bar. This fixes draggability dead area

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)
-        ? <div className='endButtons'>
-          <span className='browserButton' />
-        </div>
+        ? null
         : <div className='endButtons'>
           {
             <PublisherToggle
@@ -264,18 +247,6 @@ class NavigationBar extends ImmutableComponent {
               synopsis={this.props.synopsis}
             />
           }
-          {
-            !this.showNoScriptInfo
-            ? null
-            : <span className='noScriptButtonContainer'>
-              <Button iconClass='fa-ban'
-                l10nId='noScriptButton'
-                className={cx({
-                  'noScript': true
-                })}
-                onClick={this.onNoScript} />
-            </span>
-          }
         </div>
       }
     </div>

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}</span>
       }
-
+      {
+        !this.showNoScriptInfo
+        ? null
+        : <span className={css(styles.noScriptContainer)}>
+          <button
+            data-l10n-id='noScriptButton'
+            data-test-id='noScriptButton'
+            className={css(styles.noScriptButton)}
+            onClick={this.onNoScript} />
+        </span>
+      }
       {
           this.shouldRenderUrlBarSuggestions
           ? <UrlBarSuggestions
@@ -559,4 +589,20 @@ class UrlBar extends ImmutableComponent {
   }
 }
 
+const styles = StyleSheet.create({
+  noScriptContainer: {
+    display: 'flex',
+    paddingLeft: '5px',
+    marginRight: '-3px',
+    WebkitAppRegion: 'drag'
+  },
+  noScriptButton: {
+    WebkitAppRegion: 'no-drag',
+    backgroundImage: `url(${iconNoScript})`,
+    width: '14px',
+    height: '14px',
+    border: '0px'
+  }
+})
+
 module.exports = UrlBar

less/navigationBar.less

@@ -572,20 +572,6 @@
   }
 }
 
-.noScriptButtonContainer {
-    display: flex;
-    margin-left: 6px;
-
-    .noScript {
-      font-size: 16px;
-      color: @braveOrange;
-
-      &:hover {
-        color: @braveOrange;
-      }
-  }
-}
-
 #navigator {
   .stopButton,
   .reloadButton,

test/lib/selectors.js

@@ -49,7 +49,7 @@ module.exports = {
   fpStat: '.braveryStat.fpStat',
   fpSwitch: '.fingerprintingProtectionSwitch .switchMiddle',
   noScriptSwitch: '.noScriptSwitch .switchMiddle',
-  noScriptNavButton: '#navigator .noScript',
+  noScriptNavButton: '[data-test-id="noScriptButton"]',
   noScriptInfo: '.noScriptInfo',
   noScriptAllowTempButton: '[data-l10n-id="allowScriptsTemp"]',
   noScriptAllowOnceButton: '[data-l10n-id="allowScriptsOnce"]',

test/unit/app/renderer/components/navigation/navigationBarTest.js

@@ -22,6 +22,7 @@ describe('NavigationBar component unit tests', function () {
     mockery.registerMock('../../extensions/brave/img/urlbar/browser_URL_fund_yes_verified.svg', {})
     mockery.registerMock('../../extensions/brave/img/urlbar/browser_URL_fund_no.svg', {})
     mockery.registerMock('../../extensions/brave/img/urlbar/browser_URL_fund_yes.svg', {})
+    mockery.registerMock('../../../../img/url-bar-no-script.svg', {})
     mockery.registerMock('electron', require('../../../../lib/fakeElectron'))
     NavigationBar = require('../../../../../../app/renderer/components/navigation/navigationBar')
     UrlBar = require('../../../../../../app/renderer/components/navigation/urlBar')