Skip to content
This repository has been archived by the owner on Dec 11, 2019. It is now read-only.

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

Merged
merged 1 commit into from
Nov 9, 2016
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 104 additions & 0 deletions app/renderer/components/urlBarIcon.js
Original file line number Diff line number Diff line change
@@ -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
58 changes: 12 additions & 46 deletions js/components/urlBar.js
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand All @@ -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
Expand Down Expand Up @@ -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'>
Expand Down