Open Flash preferences from a link in the placeholder

Not sure if this is the safest way to get brave-about.js to run on
an iframed about: page.

Auditors: @bridiver

app/extensions.js

@@ -77,6 +77,16 @@ let generateBraveManifest = () => {
         exclude_globs: [
           getAppUrl('about-blank.html')
         ]
+      },
+      {
+        run_at: 'document_start',
+        all_frames: true,
+        js: [
+          'content/scripts/brave-about-flash.js'
+        ],
+        matches: [
+          '<all_urls>'
+        ]
       }
     ],
     permissions: [

app/extensions/brave/content/scripts/brave-about-flash.js

@@ -0,0 +1,12 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+(function () {
+  if (window.location && window.location.origin === 'chrome-extension://mnojpmjdmbbfmejpflffifhffcmidifd') {
+    var ipcRenderer = chrome.ipc
+    window.addEventListener('new-frame', (e) => {
+      ipcRenderer.sendToHost('new-frame', e.detail.frameOpts, e.detail.openInForeground)
+    })
+  }
+}).apply(this)

js/about/flashPlaceholder.js

@@ -5,6 +5,7 @@
 const React = require('react')
 const ImmutableComponent = require('../components/immutableComponent')
 const messages = require('../constants/messages')
+const aboutActions = require('./aboutActions')
 
 require('../../less/about/flash.less')
 
@@ -16,6 +17,7 @@ class FlashPlaceholder extends ImmutableComponent {
     super()
     const braveryDefaults = window.initBraveryDefaults
     this.onContextMenu = this.onContextMenu.bind(this)
+    this.onPrefsClick = this.onPrefsClick.bind(this)
     this.state = {
       flashEnabled: braveryDefaults && braveryDefaults.flash ? braveryDefaults.flash.enabled : this.flashEnabled
     }
@@ -56,22 +58,39 @@ class FlashPlaceholder extends ImmutableComponent {
     }
   }
 
+  onPrefsClick (e) {
+    aboutActions.newFrame({
+      location: 'about:preferences#security'
+    }, true)
+  }
+
   render () {
     const flashEnabled = this.state.flashEnabled
     // TODO: Localization doesn't work due to CORS error from inside iframe
     const cmd = isDarwin ? 'Control-Click' : 'Right-Click'
     const flashRightClick = flashEnabled ? `${cmd} to run Adobe Flash Player` : 'Adobe Flash has been blocked.'
-    const flashExpirationText = flashEnabled ? 'For your security, approvals are limited to 1 week.' : null
-    const flashSubtext = flashEnabled ? `on ${this.origin || 'this site'}.` : 'To run Flash, enable it in Preferences > Security.'
+    const flashSubtext = `on ${this.origin || 'this site'}.`
     return <div onContextMenu={this.onContextMenu}>
       <div className='flashMainContent'>
         <img src='img/bravePluginAlert.png' />
         <div id='flashRightClick'>{flashRightClick}</div>
-        <div className='flashSubtext'>{flashSubtext}</div>
-      </div>
-      <div className='flashFooter'>
-        {flashExpirationText}
+        <div className='flashSubtext'>
+        {
+          flashEnabled
+          ? flashSubtext
+          : <span>
+            To run Flash, enable it in <span className='linkText' onClick={this.onPrefsClick}>Preferences</span>.
+          </span>
+        }
+        </div>
       </div>
+      {
+        flashEnabled
+        ? <div className='flashFooter'>
+          For security, <span className='linkText' onClick={this.onPrefsClick}>approvals</span> expire in 1 week.
+        </div>
+        : null
+      }
     </div>
   }
 }

less/about/flash.less

@@ -27,6 +27,15 @@
     font-size: 3vw;
 }
 
+.linkText {
+  text-decoration: underline;
+  color: #5B5B5B;
+  cursor: default;
+  &:hover {
+    color: #000;
+  }
+}
+
 #appContainer {
     background: linear-gradient(to bottom, #fff 0%, #aaa 100%);
 }