[WIP] Use Electron event to set urlbar security state

Requires brave/muon#90
Fix #5238

Auditors: @bsclifton @darkdh

Test Plan:
1. go to http://dev.ruby.sh/bpoc.html and it should not show up as secure

TODO: add automated test for the hackerone issue

app/renderer/components/urlBarIcon.js

@@ -30,9 +30,8 @@ class UrlBarIcon extends ImmutableComponent {
    */
   get isInsecure () {
     return this.props.isHTTPPage &&
-           !this.props.isSecure &&
+           this.props.isSecure === false &&
            !this.props.active &&
-           this.props.loading === false &&
            !this.props.titleMode
   }
   /**
@@ -63,7 +62,7 @@ class UrlBarIcon extends ImmutableComponent {
       // 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
+      'fa-search': this.isSearch
     })
   }
   get iconStyles () {

js/components/frame.js

@@ -916,17 +916,12 @@ class Frame extends ImmutableComponent {
           interceptFlash(true, e.url)
         }
         windowActions.onWebviewLoadStart(this.frame, e.url)
+        // Clear security state
         windowActions.setBlockedRunInsecureContent(this.frame)
-        const isSecure = parsedUrl.protocol === 'https:' && !this.runInsecureContent()
-        const runInsecureContent = parsedUrl.protocol === 'https:' && this.runInsecureContent()
         windowActions.setSecurityState(this.frame, {
-          secure: isSecure,
-          runInsecureContent: runInsecureContent
+          secure: null,
+          runInsecureContent: false
         })
-        if (isSecure) {
-          // Check that there isn't a cert error.
-          ipc.send(messages.CHECK_CERT_ERROR_ACCEPTED, parsedUrl.host, this.props.frameKey)
-        }
       }
       windowActions.updateBackForwardState(
         this.frame,
@@ -1000,11 +995,27 @@ class Frame extends ImmutableComponent {
         windowActions.setNavigated(this.webview.getURL(), this.props.frameKey, true, this.frame.get('tabId'))
       }
     }
-    this.webview.addEventListener('load-commit', (e) => {
-      loadStart(e)
+    this.webview.addEventListener('did-change-security', (e) => {
+      let isSecure = null
+      let runInsecureContent = false
+      if (e.securityState === 'secure') {
+        isSecure = true
+        runInsecureContent = this.runInsecureContent()
+      } else if (e.securityState === 'insecure') {
+        isSecure = false
+      }
+      // TODO: handle 'warning' security state
+      windowActions.setSecurityState(this.frame, {
+        secure: isSecure,
+        runInsecureContent
+      })
+      if (isSecure) {
+        // Check that there isn't a cert error.
+        const parsedUrl = urlParse(this.props.location)
+        ipc.send(messages.CHECK_CERT_ERROR_ACCEPTED, parsedUrl.host, this.props.frameKey)
+      }
     })
     this.webview.addEventListener('load-start', (e) => {
-      // XXX: loadstart probably does not need to be called twice anymore.
       loadStart(e)
     })
 

js/components/urlBar.js

@@ -471,7 +471,6 @@ class UrlBar extends ImmutableComponent {
           onContextMenu={this.onContextMenu}
           data-l10n-id='urlbar'
           className={cx({
-            insecure: !this.props.isSecure && this.props.loading === false && !this.isHTTPPage,
             private: this.private,
             testHookLoadDone: !this.props.loading
           })}