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'>