Merge pull request #5498 from brave/fix-insecure-icon

Don't show HTTP icon while site is loading (since it may be HTTPS)

app/renderer/components/urlBarIcon.js

@@ -0,0 +1,104 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+const React = require('react')
+const ImmutableComponent = require('../../../js/components/immutableComponent')
+const windowActions = require('../../../js/actions/windowActions')
+const cx = require('../../../js/lib/classSet')
+const dragTypes = require('../../../js/constants/dragTypes')
+const dndData = require('../../../js/dndData')
+const {isSourceAboutUrl} = require('../../../js/lib/appUrlUtil')
+const searchIconSize = 16
+
+class UrlBarIcon extends ImmutableComponent {
+  constructor () {
+    super()
+    this.onClick = this.onClick.bind(this)
+    this.onDragStart = this.onDragStart.bind(this)
+  }
+  get isSecure () {
+    return this.props.isHTTPPage &&
+           this.props.isSecure &&
+           !this.props.active
+  }
+  /**
+   * insecure icon does not show when:
+   * - loading
+   * - in title mode
+   * - urlbar is active (ex: you can type)
+   */
+  get isInsecure () {
+    return this.props.isHTTPPage &&
+           !this.props.isSecure &&
+           !this.props.active &&
+           this.props.loading === false &&
+           !this.props.titleMode
+  }
+  /**
+   * search icon:
+   * - does not show when loading
+   * - does not show when in title mode
+   * - shows when urlbar is active (ex: you can type)
+   * - is a catch-all for: about pages, files, etc
+   */
+  get isSearch () {
+    const showSearch = this.props.active &&
+                       this.props.loading === false
+
+    const defaultToSearch = (!this.isSecure && !this.isInsecure && !showSearch) &&
+                            !this.props.titleMode &&
+                            this.props.loading === false
+
+    return showSearch || defaultToSearch
+  }
+  get iconClasses () {
+    if (this.props.activateSearchEngine) {
+      return cx({urlbarIcon: true})
+    }
+
+    return cx({
+      urlbarIcon: true,
+      'fa': true,
+      // NOTE: EV style not approved yet; see discussion at https://github.com/brave/browser-laptop/issues/791
+      'fa-lock': this.isSecure,
+      'fa-exclamation-triangle': this.isInsecure,
+      'fa fa-search': this.isSearch
+    })
+  }
+  get iconStyles () {
+    if (!this.props.activateSearchEngine) {
+      return {}
+    }
+
+    return {
+      backgroundImage: `url(${this.props.searchSelectEntry.image})`,
+      minWidth: searchIconSize,
+      width: searchIconSize,
+      backgroundSize: searchIconSize,
+      height: searchIconSize,
+      marginTop: '3px',
+      marginRight: '3px'
+    }
+  }
+  onClick () {
+    if (isSourceAboutUrl(this.props.location)) {
+      return
+    }
+    windowActions.setSiteInfoVisible(true)
+  }
+  onDragStart (e) {
+    dndData.setupDataTransferURL(e.dataTransfer, this.props.location, this.props.title)
+    dndData.setupDataTransferBraveData(e.dataTransfer, dragTypes.TAB, this.activeFrame)
+  }
+  render () {
+    return <span
+      onDragStart={this.onDragStart}
+      draggable
+      onClick={this.onClick}
+      className={this.iconClasses}
+      style={this.iconStyles} />
+  }
+}
+
+module.exports = UrlBarIcon

js/components/urlBar.js

@@ -14,16 +14,13 @@ const debounce = require('../lib/debounce')
 const ipc = global.require('electron').ipcRenderer
 
 const UrlBarSuggestions = require('./urlBarSuggestions')
+const UrlBarIcon = require('../../app/renderer/components/urlBarIcon')
 const messages = require('../constants/messages')
-const dragTypes = require('../constants/dragTypes')
 const {getSetting} = require('../settings')
 const settings = require('../constants/settings')
 const contextMenus = require('../contextMenus')
-const dndData = require('../dndData')
 const windowStore = require('../stores/windowStore')
-const {isSourceAboutUrl} = require('../lib/appUrlUtil')
 const searchProviders = require('../data/searchProviders')
-const searchIconSize = 16
 const UrlUtil = require('../lib/urlutil')
 
 const EventUtil = require('../lib/eventUtil')
@@ -35,15 +32,13 @@ class UrlBar extends ImmutableComponent {
   constructor () {
     super()
     this.onActiveFrameStop = this.onActiveFrameStop.bind(this)
-    this.onDragStart = this.onDragStart.bind(this)
     this.onFocus = this.onFocus.bind(this)
     this.onBlur = this.onBlur.bind(this)
     this.onKeyDown = this.onKeyDown.bind(this)
     this.onKeyUp = this.onKeyUp.bind(this)
     this.onChange = this.onChange.bind(this)
     this.onClick = this.onClick.bind(this)
     this.onContextMenu = this.onContextMenu.bind(this)
-    this.onSiteInfo = this.onSiteInfo.bind(this)
     this.activateSearchEngine = false
     this.searchSelectEntry = null
     this.keyPressed = false
@@ -431,61 +426,32 @@ class UrlBar extends ImmutableComponent {
     return protocol === 'http:' || protocol === 'https:'
   }
 
-  onSiteInfo () {
-    if (isSourceAboutUrl(this.props.location)) {
-      return
-    }
-    windowActions.setSiteInfoVisible(true)
-  }
-
   get shouldRenderUrlBarSuggestions () {
     let shouldRender = this.props.urlbar.getIn(['suggestions', 'shouldRender'])
     return shouldRender === true
   }
 
-  onDragStart (e) {
-    dndData.setupDataTransferURL(e.dataTransfer, this.props.location, this.props.title)
-    dndData.setupDataTransferBraveData(e.dataTransfer, dragTypes.TAB, this.activeFrame)
-  }
-
   onContextMenu (e) {
     contextMenus.onUrlBarContextMenu(this.props.searchDetail, this.activeFrame, e)
   }
 
   render () {
-    const showIconSecure = !this.activateSearchEngine && this.isHTTPPage && this.props.isSecure && !this.props.urlbar.get('active')
-    const showIconInsecure = !this.activateSearchEngine && this.isHTTPPage && !this.props.isSecure && !this.props.urlbar.get('active') && !this.props.titleMode
-    const showIconSearch = !this.activateSearchEngine && this.props.urlbar.get('active') && this.props.loading === false
-    const showSearchByDefault = !this.activateSearchEngine && !showIconSecure && !showIconInsecure && !showIconSearch && !this.props.titleMode
     return <form
       className='urlbarForm'
       action='#'
       id='urlbar'
       ref='urlbar'>
-      <span
-        onDragStart={this.onDragStart}
-        draggable
-        onClick={this.onSiteInfo}
-        className={cx({
-          urlbarIcon: true,
-          'fa': !this.activateSearchEngine,
-          'fa-lock': showIconSecure,
-          'fa-exclamation-triangle': showIconInsecure,
-          'fa fa-search': showIconSearch || showSearchByDefault,
-          extendedValidation: this.extendedValidationSSL
-        })}
-        style={
-          this.activateSearchEngine
-          ? {
-            backgroundImage: `url(${this.searchSelectEntry.image})`,
-            minWidth: searchIconSize,
-            width: searchIconSize,
-            backgroundSize: searchIconSize,
-            height: searchIconSize,
-            marginTop: '3px',
-            marginRight: '3px'
-          } : {}
-        } />
+      <UrlBarIcon
+        activateSearchEngine={this.activateSearchEngine}
+        active={this.props.urlbar.get('active')}
+        isSecure={this.props.isSecure}
+        isHTTPPage={this.isHTTPPage}
+        loading={this.props.loading}
+        location={this.props.location}
+        searchSelectEntry={this.searchSelectEntry}
+        title={this.props.title}
+        titleMode={this.props.titleMode}
+      />
       {
         this.props.titleMode
         ? <div id='titleBar'>