From d909ef43efc6656fdc69bffab56780697155e971 Mon Sep 17 00:00:00 2001 From: yan Date: Tue, 12 Jan 2016 17:52:27 -0800 Subject: [PATCH 1/3] Set lock icon when page is HTTPS --- docs/state.md | 2 ++ js/actions/windowActions.js | 12 ++++++++++++ js/components/frame.js | 5 +++++ js/components/urlBar.js | 4 ++++ js/constants/windowConstants.js | 1 + js/stores/windowStore.js | 6 ++++++ less/navigationBar.less | 2 +- 7 files changed, 31 insertions(+), 1 deletion(-) diff --git a/docs/state.md b/docs/state.md index 166ed3327af..3d9d7e4f87d 100644 --- a/docs/state.md +++ b/docs/state.md @@ -71,6 +71,8 @@ WindowStore security: { isSecure: boolean, // is using https isExtendedValidation: boolean, // is using https ev + activeMixedContent: boolean, // has active mixed content + passiveMixedContent: boolean, // has passive mixed content }, parentWindowKey: number, // the key of the window this frame was opened from parentFrameKey: number, // the key of the frame this frame was opened from diff --git a/js/actions/windowActions.js b/js/actions/windowActions.js index 6b1e2ce6743..88e40d63393 100644 --- a/js/actions/windowActions.js +++ b/js/actions/windowActions.js @@ -92,6 +92,18 @@ const WindowActions = { }) }, + /** + * Dispatches a message to set the security state. + * @param {Object} securityState - The security state properties that have + * changed. + */ + setSecurityState: function (securityState) { + WindowDispatcher.dispatch({ + actionType: WindowConstants.WINDOW_SET_SECURITY_STATE, + securityState + }) + }, + /** * Dispatches a message to the store to set the user entered text for the URL bar. * Unlike setLocation and loadUrl, this does not modify the state of src and location. diff --git a/js/components/frame.js b/js/components/frame.js index 9c9448bfe63..35eedcfe9e1 100644 --- a/js/components/frame.js +++ b/js/components/frame.js @@ -4,6 +4,7 @@ const React = require('react') const ReactDOM = require('react-dom') +const urlParse = require('url').parse const WindowActions = require('../actions/windowActions') const AppActions = require('../actions/appActions') const ImmutableComponent = require('./immutableComponent') @@ -151,6 +152,10 @@ class Frame extends ImmutableComponent { if (event.isMainFrame) { let key = this.props.frame.get('key') WindowActions.setLocation(event.url, key) + WindowActions.setSecurityState({ + secure: urlParse(event.url).protocol === 'https:' + // TODO: Set extended validation once Electron exposes this + }) } WindowActions.updateBackForwardState( this.props.frame, diff --git a/js/components/urlBar.js b/js/components/urlBar.js index 3d5d6ed38e2..f858d6ae982 100644 --- a/js/components/urlBar.js +++ b/js/components/urlBar.js @@ -180,6 +180,10 @@ class UrlBar extends ImmutableComponent { return loadTime } + get secure () { + return this.props.activeFrameProps.getIn(['security', 'isSecure']) + } + onSiteInfo () { WindowActions.setSiteInfoVisible(true) } diff --git a/js/constants/windowConstants.js b/js/constants/windowConstants.js index 2b674c6f542..dc1f2ef408c 100644 --- a/js/constants/windowConstants.js +++ b/js/constants/windowConstants.js @@ -45,6 +45,7 @@ const windowConstants = { WINDOW_SET_PINNED: _, // Whehter the current tab is pinned or not WINDOW_SET_SITE_INFO_VISIBLE: _, // Whether or not to show site info like # of blocked ads WINDOW_SET_BLOCKED_BY: _, // Whether or not to show site info like # of blocked ads + WINDOW_SET_SECURITY_STATE: _, WINDOW_SET_STATE: _ } diff --git a/js/stores/windowStore.js b/js/stores/windowStore.js index c4b1615f4b7..2addd55894c 100644 --- a/js/stores/windowStore.js +++ b/js/stores/windowStore.js @@ -389,6 +389,12 @@ const doAction = (action) => { } windowStore.emitChange() break + case WindowConstants.WINDOW_SET_SECURITY_STATE: + if (action.securityState.secure !== undefined) { + windowState = windowState.setIn(activeFrameStatePath().concat(['security', 'isSecure']), + action.securityState.secure) + } + break case WindowConstants.SET_BLOCKED_BY: let blockedByPath = ['frames', FrameStateUtil.getFramePropsIndex(windowState.get('frames'), action.frameProps), action.blockType, 'blocked'] let blockedBy = windowState.getIn(blockedByPath) || new Immutable.List() diff --git a/less/navigationBar.less b/less/navigationBar.less index d123f0e285b..154d44662cb 100644 --- a/less/navigationBar.less +++ b/less/navigationBar.less @@ -106,7 +106,7 @@ } .urlbarIcon { - color: #999; + color: #555; position: absolute; top: 6px; left: 9px; From 7b9729d8a8b7483dd5118609766e4abcfda9aac9 Mon Sep 17 00:00:00 2001 From: yan Date: Tue, 12 Jan 2016 18:07:30 -0800 Subject: [PATCH 2/3] Show insecure icon for insecure pages --- js/components/urlBar.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/js/components/urlBar.js b/js/components/urlBar.js index f858d6ae982..231d44af563 100644 --- a/js/components/urlBar.js +++ b/js/components/urlBar.js @@ -4,6 +4,7 @@ const React = require('react') const ReactDOM = require('react-dom') +const urlParse = require('url').parse const ImmutableComponent = require('./immutableComponent') const WindowActions = require('../actions/windowActions') @@ -184,6 +185,11 @@ class UrlBar extends ImmutableComponent { return this.props.activeFrameProps.getIn(['security', 'isSecure']) } + get aboutPage () { + var protocol = urlParse(this.props.activeFrameProps.get('location')).protocol + return ['about:', 'file:', 'chrome:'].includes(protocol) + } + onSiteInfo () { WindowActions.setSiteInfoVisible(true) } @@ -199,7 +205,7 @@ class UrlBar extends ImmutableComponent { urlbarIcon: true, 'fa': true, 'fa-lock': this.secure && this.props.loading === false && !this.props.urlbar.get('focused'), - 'fa-unlock': this.secure === false && this.props.loading === false && this.aboutPage === false && !this.props.urlbar.get('focused'), + 'fa-unlock': !this.secure && this.props.loading === false && !this.aboutPage && !this.props.urlbar.get('focused'), 'fa fa-search': this.props.searchSuggestions && this.props.urlbar.get('focused') && this.props.loading === false, 'fa fa-file-o': !this.props.searchSuggestions && this.props.urlbar.get('focused') && this.props.loading === false, extendedValidation: this.extendedValidationSSL @@ -213,7 +219,7 @@ class UrlBar extends ImmutableComponent { value={this.inputValue} data-l10n-id='urlbar' className={cx({ - insecure: !this.secure && this.props.loading === false && this.aboutPage === false, + insecure: !this.secure && this.props.loading === false && !this.aboutPage, private: this.private, testHookLoadDone: !this.props.loading })} From aef87be91a99bafa32a6bc0f88ca1d441a82384a Mon Sep 17 00:00:00 2001 From: yan Date: Tue, 12 Jan 2016 18:47:26 -0800 Subject: [PATCH 3/3] Add tests for url security icon --- test/lib/selectors.js | 3 ++- test/navigationBarTest.js | 27 ++++++++++++++++++++++++++- 2 files changed, 28 insertions(+), 2 deletions(-) diff --git a/test/lib/selectors.js b/test/lib/selectors.js index e502326c622..923e06f9285 100644 --- a/test/lib/selectors.js +++ b/test/lib/selectors.js @@ -10,5 +10,6 @@ module.exports = { tabPage: '.tabPage', tabPage1: '[data-tab-page="0"]', tabPage2: '[data-tab-page="1"]', - closeTab: '.closeTab' + closeTab: '.closeTab', + urlbarIcon: '.urlbarIcon' } diff --git a/test/navigationBarTest.js b/test/navigationBarTest.js index 8d1b2de5d33..6e27ac87549 100644 --- a/test/navigationBarTest.js +++ b/test/navigationBarTest.js @@ -2,7 +2,7 @@ const Brave = require('./lib/brave') const Config = require('../js/constants/config').default -const {urlInput, activeWebview, activeTabFavicon, activeTab, navigatorLoadTime} = require('./lib/selectors') +const {urlInput, activeWebview, activeTabFavicon, activeTab, navigatorLoadTime, urlbarIcon} = require('./lib/selectors') const assert = require('assert') describe('urlbar', function () { @@ -133,6 +133,31 @@ describe('urlbar', function () { }) }) + describe('lockIcon', function () { + Brave.beforeAll(this) + + before(function *() { + yield setup(this.app.client) + }) + + it('Shows insecure URL icon', function *() { + const page1Url = Brave.server.url('page1.html') + yield navigate(this.app.client, page1Url) + yield this.app.client.waitUntil(() => + this.app.client.getAttribute(urlbarIcon, 'class').then(classes => + classes.includes('fa-unlock') + )) + }) + it('Shows secure URL icon', function *() { + const page1Url = Brave.server.url('page1.html').replace('http', 'https') + yield navigate(this.app.client, page1Url) + yield this.app.client.waitUntil(() => + this.app.client.getAttribute(urlbarIcon, 'class').then(classes => + classes.includes('fa-lock') + )) + }) + }) + describe('themeColor', function () { Brave.beforeAll(this)