View certificate on padlock

app/extensions/brave/locales/en-US/app.properties

@@ -224,6 +224,7 @@ dismissDenyRunInsecureContent=Stay Insecure
 denyRunInsecureContent=Stop Loading Unsafe Scripts
 runInsecureContentWarning=This page is trying to load scripts from insecure sources. If you allow this content to run, it may transmit unencrypted data to other sites.
 denyRunInsecureContentWarning=Your connection is not private. This page is currently loading scripts from insecure sources.
+viewCertificate=View Certificate
 windowCaptionButtonMinimize=Minimize
 windowCaptionButtonMaximize=Maximize
 windowCaptionButtonRestore=Restore Down

js/actions/webviewActions.js

@@ -41,6 +41,16 @@ const webviewActions = {
     }
   },
 
+  /**
+   * Shows the certificate infomation
+   */
+  showCertificate: function () {
+    const webview = getWebview()
+    if (webview) {
+      webview.showCertificate()
+    }
+  },
+
   /**
    * Shows the definition of the selected text in a pop-up window (macOS only)
    */

js/components/siteInfo.js

@@ -9,14 +9,17 @@ const cx = require('../lib/classSet')
 const Dialog = require('./dialog')
 const Button = require('./button')
 const appActions = require('../actions/appActions')
+const webviewActions = require('../actions/webviewActions')
 const messages = require('../constants/messages')
 const siteUtil = require('../state/siteUtil')
+const platformUtil = require('../../app/common/lib/platformUtil')
 
 class SiteInfo extends ImmutableComponent {
   constructor () {
     super()
     this.onAllowRunInsecureContent = this.onAllowRunInsecureContent.bind(this)
     this.onDenyRunInsecureContent = this.onDenyRunInsecureContent.bind(this)
+    this.onViewCertificate = this.onViewCertificate.bind(this)
   }
   onAllowRunInsecureContent () {
     appActions.changeSiteSetting(siteUtil.getOrigin(this.location),
@@ -30,6 +33,10 @@ class SiteInfo extends ImmutableComponent {
     ipc.emit(messages.SHORTCUT_ACTIVE_FRAME_LOAD_URL, {}, this.location)
     this.props.onHide()
   }
+  onViewCertificate () {
+    this.props.onHide()
+    webviewActions.showCertificate()
+  }
   get isExtendedValidation () {
     return this.props.frameProps.getIn(['security', 'isExtendedValidation'])
   }
@@ -80,6 +87,12 @@ class SiteInfo extends ImmutableComponent {
     }
 
     let connectionInfo = null
+    let viewCertificateButton = null
+    // TODO(Anthony): Hide it until muon support linux
+    if (!platformUtil.isLinux()) {
+      viewCertificateButton =
+        <Button l10nId='viewCertificate' className='primaryButton viewCertificate' onClick={this.onViewCertificate} />
+    }
     if (this.isBlockedRunInsecureContent) {
       connectionInfo =
         <li>
@@ -104,10 +117,16 @@ class SiteInfo extends ImmutableComponent {
         </li>
     } else if (this.isSecure === true) {
       connectionInfo =
+        <div>
         <div className='connectionInfo' data-l10n-id='secureConnectionInfo' />
+        {viewCertificateButton}
+        </div>
     } else if (this.isSecure === 1) {
       connectionInfo =
+        <div>
         <div className='connectionInfo' data-l10n-id='partiallySecureConnectionInfo' />
+        {viewCertificateButton}
+        </div>
     } else {
       connectionInfo =
         <div className='connectionInfo' data-l10n-id='insecureConnectionInfo' />