Merge pull request #144 from brave/feature/security-indicators

Add http/https lock icons

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

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.

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,

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')
@@ -180,6 +181,15 @@ class UrlBar extends ImmutableComponent {
     return loadTime
   }
 
+  get secure () {
+    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)
   }
@@ -195,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
@@ -209,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
         })}

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: _
 }
 

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()

less/navigationBar.less

@@ -106,7 +106,7 @@
   }
 
   .urlbarIcon {
-    color: #999;
+    color: #555;
     position: absolute;
     top: 6px;
     left: 9px;

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

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)