Address change of 6c7c9aeece14c57d69c348748433886fc65198e8

Auditors: @bridiver, @diracdeltas, @cezaraugusto

app/renderer/components/frame/frame.js

@@ -674,28 +674,37 @@ class Frame extends React.Component {
       }
       let isSecure = null
       let runInsecureContent = this.props.runInsecureContent
-      let evString
+      let evCert = null
       if (e.securityState === 'secure') {
         isSecure = true
-        if (e.evString) {
-          evString = e.evString
-        }
       } else if (e.securityState === 'insecure') {
         isSecure = false
       } else if (e.securityState === 'broken') {
         isSecure = false
         const parsedUrl = urlParse(this.props.location)
         ipc.send(messages.CHECK_CERT_ERROR_ACCEPTED, parsedUrl.host, this.props.tabId)
-      } else if (['warning', 'passive-mixed-content'].includes(e.securityState)) {
+      } else if (e.securityInfo.mixedContentStatus === 'content-status-displayed') {
         // Passive mixed content should not upgrade an insecure connection to a
         // partially-secure connection. It can only downgrade a secure
         // connection.
-        isSecure = this.props.isSecure !== false ? 1 : false
+        isSecure = 1
+      }
+
+      if (e.securityInfo.securityLevel === 'ev-secure') {
+        if (e.securityInfo.certificate &&
+            e.securityInfo.certificate.organizationNames.length) {
+          const countryName = e.securityInfo.certificate.countryName
+          const organizationName = e.securityInfo.certificate.organizationNames[0]
+          evCert = organizationName
+          if (countryName) {
+            evCert += ` [${countryName}]`
+          }
+        }
       }
       windowActions.setSecurityState(this.props.tabId, {
         secure: runInsecureContent ? false : isSecure,
         runInsecureContent,
-        evString
+        evCert
       })
     }, { passive: true })
     this.webview.addEventListener('load-start', (e) => {

app/renderer/components/navigation/urlBar.js

@@ -456,6 +456,7 @@ class UrlBar extends React.Component {
     props.loading = activeFrame.get('loading')
     props.showDisplayTime = !props.titleMode && props.displayURL === location
     props.showNoScriptInfo = enableNoScript && scriptsBlocked && scriptsBlocked.size
+    props.evCert = activeFrame.getIn(['security', 'evCert'])
     props.isActive = urlbar.get('active')
     props.showUrlBarSuggestions = urlbar.getIn(['suggestions', 'shouldRender']) === true &&
       suggestionList && suggestionList.size > 0
@@ -482,6 +483,18 @@ class UrlBar extends React.Component {
   }
 
   render () {
+    const urlbarIconContainer = this.props.evCert
+    ? (<div className='urlbarIconContainer'>
+      <UrlBarIcon
+        titleMode={this.props.titleMode}
+      />
+      <span className='evCert'> {this.props.evCert} </span>
+    </div>)
+    : (<div className='urlbarIconContainer'>
+      <UrlBarIcon
+        titleMode={this.props.titleMode}
+      />
+    </div>)
     return <div
       className={cx({
         urlbarForm: true,
@@ -490,11 +503,7 @@ class UrlBar extends React.Component {
       })}
       id='urlbar'
     >
-      <div className='urlbarIconContainer'>
-        <UrlBarIcon
-          titleMode={this.props.titleMode}
-        />
-      </div>
+      {urlbarIconContainer}
       {
         this.props.titleMode
         ? <div id='titleBar' data-test-id='titleBar'>

app/renderer/components/navigation/urlBarIcon.js

@@ -42,9 +42,7 @@ 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 && this.props.evString) {
-        return ['fa-lock', 'extendedValidation']
-      } else if (this.props.isSecure === true) {
+      if (this.props.isSecure === true) {
         return ['fa-lock']
       } else if (this.props.isSecure === false || this.props.isSecure === 2) {
         return ['fa-unlock', 'insecure-color']
@@ -151,7 +149,6 @@ 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'], '')
@@ -177,19 +174,12 @@ class UrlBarIcon extends React.Component {
       props.onDragStart = this.onDragStart
     }
 
-    return <span>
-      <span
-        data-test-id='urlBarIcon'
-        data-test2-id={this.dataTestId}
-        {...props}
-        className={this.iconClasses}
-        style={this.iconStyles} />
-      {
-        this.props.evString
-        ? <span data-test-id='evString' className='evString'>{this.props.evString}</span>
-        : null
-      }
-    </span>
+    return <span
+      data-test-id='urlBarIcon'
+      data-test2-id={this.dataTestId}
+      {...props}
+      className={this.iconClasses}
+      style={this.iconStyles} />
   }
 }
 

docs/state.md

@@ -754,7 +754,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,
+      evCert: string,
       loginRequiredDetail: {
         isProxy: boolean,
         host: string,

js/stores/windowStore.js

@@ -299,7 +299,7 @@ const doAction = (action) => {
           windowState.deleteIn(statePath('frames').concat(['security', 'blockedRunInsecureContent']))
         windowState = windowState.mergeIn(statePath('frames').concat(['security']), {
           isSecure: null,
-          evString: undefined,
+          evCert: undefined,
           runInsecureContent: false
         })
         // Update loading UI
@@ -621,14 +621,14 @@ 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)
         }
+        if (action.securityState.evCert !== undefined) {
+          windowState = windowState.setIn(path.concat(['security', 'evCert']),
+            action.securityState.evCert)
+        }
         break
       }
     case windowConstants.WINDOW_SET_BLOCKED_BY:

less/navigationBar.less

@@ -626,6 +626,7 @@
   display: flex;
   flex-grow: 1;
   min-width: 0%; // allow the navigator to shrink
+  margin-left: 1px;
 
   *:not(legend) {
     z-index: @zindexUrlbarNotLegend;
@@ -863,6 +864,7 @@
       align-items: center;
       justify-content: center;
       height: @urlbarFormHeight;
+      // width: @urlbarFormHeight;
       min-height: @urlbarFormHeight;
 
       .urlbarIcon {
@@ -872,8 +874,7 @@
         background-position: center;
         position: relative;
         bottom: -1px;
-        width: @urlbarFormHeight;
-        min-width: @urlbarFormHeight;
+        margin-left: 3px;
 
         // about:newtab
         &.fa-search {
@@ -899,11 +900,13 @@
         }
       }
 
-      .evString {
-        font-size: 16px;
-        color: green;
-        max-width: 150px;
-        padding-right: 0.5em;
+      .evCert {
+        font-size: 12px;
+        color: forestgreen;
+        margin-left: 3px;
+        margin-right: 3px;
+        padding: 3px;
+        border-right: 1px solid #ccc;
       }
     }
   }

test/unit/js/stores/windowStoreTest.js

@@ -115,7 +115,7 @@ describe('Window store unit tests', function () {
             Immutable.fromJS({
               isSecure: null,
               runInsecureContent: false,
-              evString: undefined
+              evCert: undefined
             }))
         })
       })