Fixes issue brave#791, frontend EV certificate changes

sashaperigo · Nov 3, 2017 · 2479f2a · 2479f2a
1 parent da6dfd2
commit 2479f2a
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 10 deletions.
diff --git a/app/renderer/components/frame/frame.js b/app/renderer/components/frame/frame.js
@@ -674,8 +674,12 @@ class Frame extends React.Component {
       }
       let isSecure = null
       let runInsecureContent = this.props.runInsecureContent
+      let evString
       if (e.securityState === 'secure') {
         isSecure = true
+        if (e.evString) {
+          evString = e.evString
+        }
       } else if (e.securityState === 'insecure') {
         isSecure = false
       } else if (e.securityState === 'broken') {
@@ -690,7 +694,8 @@ class Frame extends React.Component {
       }
       windowActions.setSecurityState(this.props.tabId, {
         secure: runInsecureContent ? false : isSecure,
-        runInsecureContent
+        runInsecureContent,
+        evString
       })
     }, { passive: true })
     this.webview.addEventListener('load-start', (e) => {

diff --git a/app/renderer/components/navigation/urlBarIcon.js b/app/renderer/components/navigation/urlBarIcon.js
@@ -42,7 +42,9 @@ class UrlBarIcon extends React.Component {
     } else if (this.props.isAboutPage && !this.props.titleMode) {
       return ['fa-list']
     } else if (this.props.isHTTPPage && !this.props.active) {
-      if (this.props.isSecure === true) {
+      if (this.props.isSecure && this.props.evString) {
+        return ['fa-lock', 'extendedValidation']
+      } else if (this.props.isSecure === true) {
         return ['fa-lock']
       } else if (this.props.isSecure === false || this.props.isSecure === 2) {
         return ['fa-unlock', 'insecure-color']
@@ -129,6 +131,7 @@ class UrlBarIcon extends React.Component {
     props.activateSearchEngine = urlBar.getIn(['searchDetail', 'activateSearchEngine'])
     props.active = urlBar.get('active')
     props.isSecure = activeFrame.getIn(['security', 'isSecure'])
+    props.evString = activeFrame.getIn(['security', 'evString'])
     props.location = displayURL
     props.isHTTPPage = UrlUtil.isHttpOrHttps(props.location)
     props.searchSelectImage = urlBar.getIn(['searchDetail', 'image'], '')
@@ -154,11 +157,18 @@ class UrlBarIcon extends React.Component {
       props.onDragStart = this.onDragStart
     }
 
-    return <span
-      data-test-id='urlBarIcon'
-      {...props}
-      className={this.iconClasses}
-      style={this.iconStyles} />
+    return <span>
+      <span
+        data-test-id='urlBarIcon'
+        {...props}
+        className={this.iconClasses}
+        style={this.iconStyles} />
+      {
+        this.props.evString
+        ? <span data-test-id='evString' className='evString'>{this.props.evString}</span>
+        : null
+      }
+    </span>
   }
 }
 

diff --git a/docs/state.md b/docs/state.md
@@ -666,6 +666,7 @@ WindowStore
     security: {
       blockedRunInsecureContent: Array<string>, // sources of blocked active mixed content
       isSecure: (boolean|number), // true = fully secure, false = fully insecure, 1 = partially secure, 2 = cert error
+      evString: string,
       loginRequiredDetail: {
         isProxy: boolean,
         host: string,

diff --git a/js/stores/windowStore.js b/js/stores/windowStore.js
@@ -299,6 +299,7 @@ const doAction = (action) => {
           windowState.deleteIn(statePath('frames').concat(['security', 'blockedRunInsecureContent']))
         windowState = windowState.mergeIn(statePath('frames').concat(['security']), {
           isSecure: null,
+          evString: undefined,
           runInsecureContent: false
         })
         // Update loading UI
@@ -620,6 +621,10 @@ const doAction = (action) => {
           windowState = windowState.setIn(path.concat(['security', 'isSecure']),
             action.securityState.secure)
         }
+        if (action.securityState.evString !== undefined) {
+          windowState = windowState.setIn(path.concat(['security', 'evString']),
+            action.securityState.evString)
+        }
         if (action.securityState.runInsecureContent !== undefined) {
           windowState = windowState.setIn(path.concat(['security', 'runInsecureContent']),
             action.securityState.runInsecureContent)

diff --git a/less/navigationBar.less b/less/navigationBar.less
@@ -863,9 +863,7 @@
       align-items: center;
       justify-content: center;
       height: @urlbarFormHeight;
-      width: @urlbarFormHeight;
       min-height: @urlbarFormHeight;
-      min-width: @urlbarFormHeight;
 
       .urlbarIcon {
         color: @siteSecureColor;
@@ -874,6 +872,8 @@
         background-position: center;
         position: relative;
         bottom: -1px;
+        width: @urlbarFormHeight;
+        min-width: @urlbarFormHeight;
 
         // about:newtab
         &.fa-search {
@@ -898,6 +898,13 @@
           color: @siteEVColor;
         }
       }
+
+      .evString {
+        font-size: 16px;
+        color: green;
+        max-width: 150px;
+        padding-right: 0.5em;
+      }
     }
   }
 }

diff --git a/test/unit/js/stores/windowStoreTest.js b/test/unit/js/stores/windowStoreTest.js
@@ -114,7 +114,8 @@ describe('Window store unit tests', function () {
             windowState.getIn(['frames', 0, 'security']),
             Immutable.fromJS({
               isSecure: null,
-              runInsecureContent: false
+              runInsecureContent: false,
+              evString: undefined
             }))
         })
       })