From 574057c596c7b6967011b628774bb7178b8012d9 Mon Sep 17 00:00:00 2001
From: yan <yan@mit.edu>
Date: Fri, 24 Mar 2017 12:04:40 -0400
Subject: [PATCH] make all info circles in preferences clickable (#7864)

fix #5758

Test Plan:
1. go to about:preferences#plugins
2. all the info circle icons should be clickable
---
 .../components/preferences/pluginsTab.js         | 16 ++++++++++++----
 less/about/preferences.less                      |  1 +
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/app/renderer/components/preferences/pluginsTab.js b/app/renderer/components/preferences/pluginsTab.js
index 213b5045ab2..2cefa0e3072 100644
--- a/app/renderer/components/preferences/pluginsTab.js
+++ b/app/renderer/components/preferences/pluginsTab.js
@@ -36,8 +36,16 @@ class PluginsTab extends ImmutableComponent {
     aboutActions.setResourceEnabled(widevine, e.target.value)
   }
 
+  infoCircle (location) {
+    return <span className='fa fa-info-circle flashInfoIcon'
+      onClick={aboutActions.newFrame.bind(null, {
+        location
+      }, true)} />
+  }
+
   render () {
     const braveWikiLink = 'https://github.com/brave/browser-laptop/wiki'
+    const flashInfoLink = `${braveWikiLink}/Flash-Support-Deprecation-Proposal#troubleshooting-flash-issues`
     return <div>
       <div className='sectionTitle' data-l10n-id='pluginSettings' />
       <SettingsList>
@@ -46,7 +54,7 @@ class PluginsTab extends ImmutableComponent {
           {
             isDarwin() || isWindows()
             ? <div>
-              <span className='fa fa-info-circle flashInfoIcon' />
+              {this.infoCircle(appConfig.flash.installUrl)}
               <span data-l10n-id='enableFlashSubtext' />&nbsp;
               <span className='linkText' onClick={aboutActions.newFrame.bind(null, {
                 location: appConfig.flash.installUrl
@@ -58,13 +66,13 @@ class PluginsTab extends ImmutableComponent {
             </div>
           }
           <div>
-            <span className='fa fa-info-circle flashInfoIcon' />
+            {this.infoCircle(flashInfoLink)}
             <span data-l10n-id='flashTroubleshooting' />&nbsp;
             <span className='linkText'
               onClick={aboutActions.newFrame.bind(null, {
-                location: `${braveWikiLink}/Flash-Support-Deprecation-Proposal#troubleshooting-flash-issues`
+                location: flashInfoLink
               }, true)}
-              title={`${braveWikiLink}/Flash-Support-Deprecation-Proposal#troubleshooting-flash-issues`}>{'wiki'}</span>.
+              title={flashInfoLink}>{'wiki'}</span>.
           </div>
         </div>
       </SettingsList>
diff --git a/less/about/preferences.less b/less/about/preferences.less
index 229e7fc70fe..15d523ed0e8 100644
--- a/less/about/preferences.less
+++ b/less/about/preferences.less
@@ -107,6 +107,7 @@ a {
     margin-top: 0;
 
     .flashInfoIcon {
+      cursor: pointer;
       padding: 5px;
     }
   }