Add extension inspect views

Fixes #8012

Auditors: @luixxiul

Test Plan:

Ensure extension links work when presented and are not present for
disabled / invalid:
1. Go to `about:extensions`
2. Click on the pdf viewer inspect view and confirm dev tools are launched
3. In another tab go to `about:preferences#extensions` and enable 1password
4. Click on the 1password inspect view and confirm dev tools are launched
5. In another tab go to `about:preferences#extensions` and enable bitwarden
6. Confirm the dev tools pane for 1password has closed
7. Confirm that `about:extensions` no longer shows inspect views for 1password
8. Click on the bitwarden inspect view and confirm dev tools are launched
9. Confirm that `about:extensions` has no inspect views for torrent viewer

Ensure the following appear as orange anchor links:
1. Payment FAQ on `about:preferences#payment`
2. Adobe and wiki `about:preferences#plugins`
3. Release notes and revision on `about:brave`
4. Inspect pages on `about:extensions`
5. Manage passwords on `about:preferences#security`

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

@@ -3,6 +3,7 @@ extensions=Extensions
 extensionIdLabel=ID:
 extensionPathLabel=Path:
 extensionPermissionsLabel=Permissions:
+extensionInspectViewsLabel=Inspect Views:
 notifyNewExtensionsAdded=Notify me when new extensions are added
 extensionsTabFooterInfo=Looking for a favorite extension? Let us know through our
 latest=Latest

app/renderer/components/preferences/payment/disabledContent.js

@@ -10,6 +10,7 @@ const ImmutableComponent = require('../../immutableComponent')
 
 // style
 const globalStyles = require('../../styles/global')
+const commonStyles = require('../../styles/commonStyles')
 const {paymentStyles} = require('../../styles/payment')
 const PIA = require('../../../../extensions/brave/img/private_internet_access.png')
 const PIA2 = require('../../../../extensions/brave/img/private_internet_access_2x.png')
@@ -30,7 +31,7 @@ class DisabledContent extends ImmutableComponent {
         <div className={css(styles.text)}data-l10n-id='paymentsWelcomeText5' />
         <div className={css(styles.text)}>
           <span data-l10n-id='paymentsWelcomeText6' />&nbsp;
-          <a className='linkText' href='https://brave.com/Payments_FAQ.html' rel='noopener' target='_blank' data-l10n-id='paymentsWelcomeLink' />&nbsp;
+          <a className={css(commonStyles.linkText)} href='https://brave.com/Payments_FAQ.html' rel='noopener' target='_blank' data-l10n-id='paymentsWelcomeLink' />&nbsp;
           <span data-l10n-id='paymentsWelcomeText7' />
         </div>
       </div>

app/renderer/components/preferences/pluginsTab.js

@@ -17,6 +17,9 @@ const WidevineInfo = require('../main/widevineInfo')
 const flash = appConfig.resourceNames.FLASH
 const widevine = appConfig.resourceNames.WIDEVINE
 
+const {css} = require('aphrodite/no-important')
+const commonStyles = require('../styles/commonStyles')
+
 const {SettingsList, SettingCheckbox} = require('../common/settings')
 const {DefaultSectionTitle} = require('../common/sectionTitle')
 
@@ -62,7 +65,7 @@ class PluginsTab extends ImmutableComponent {
             ? <div>
               {this.infoCircle(appConfig.flash.installUrl)}
               <span data-l10n-id='enableFlashSubtext' />&nbsp;
-              <span className='linkText' onClick={aboutActions.createTabRequested.bind(null, {
+              <span className={css(commonStyles.linkText)} onClick={aboutActions.createTabRequested.bind(null, {
                 url: appConfig.flash.installUrl
               })} title={appConfig.flash.installUrl}>{'Adobe'}</span>.
             </div>
@@ -74,7 +77,7 @@ class PluginsTab extends ImmutableComponent {
           <div>
             {this.infoCircle(flashInfoLink)}
             <span data-l10n-id='flashTroubleshooting' />&nbsp;
-            <span className='linkText'
+            <span className={css(commonStyles.linkText)}
               onClick={aboutActions.createTabRequested.bind(null, {
                 url: flashInfoLink,
                 active: true

app/renderer/components/styles/commonStyles.js

@@ -198,6 +198,22 @@ const styles = StyleSheet.create({
   isCommonForm: {
     fontSize: globalStyles.fontSize.flyoutDialog,
     width: '100%'
+  },
+
+  linkText: {
+    display: 'inline-block',
+    textDecoration: 'underline',
+    color: globalStyles.color.braveOrange,
+    cursor: 'pointer',
+    margin: '0',
+
+    ':hover': {
+      color: '#000'
+    }
+  },
+
+  linkText_small: {
+    fontSize: '14px'
   }
 })
 

js/about/brave.js

@@ -60,7 +60,7 @@ class AboutBrave extends React.Component {
         <div>
           <span data-l10n-id='relNotesInfo1' />
           &nbsp;
-          <a className='linkText' href={`https://github.com/brave/browser-laptop/releases/tag/v${this.state.versionInformation.get('Brave')}dev`} rel='noopener' target='_blank' data-l10n-id='relNotesInfo2' />
+          <a className={css(commonStyles.linkText)} href={`https://github.com/brave/browser-laptop/releases/tag/v${this.state.versionInformation.get('Brave')}dev`} rel='noopener' target='_blank' data-l10n-id='relNotesInfo2' />
           &nbsp;
           <span data-l10n-id='relNotesInfo3' />
         </div>
@@ -83,7 +83,7 @@ class AboutBrave extends React.Component {
             },
             {
               html: name === 'rev'
-                ? <a rel='noopener' target='_blank' href={`https://github.com/brave/browser-laptop/commit/${version}`}>{(version && version.substring(0, 7)) || ''}</a>
+                ? <a rel='noopener' target='_blank' className={css(commonStyles.linkText)} href={`https://github.com/brave/browser-laptop/commit/${version}`}>{(version && version.substring(0, 7)) || ''}</a>
                 : version,
               value: version
             }

js/about/extensions.js

@@ -8,6 +8,7 @@ const Immutable = require('immutable')
 const ImmutableComponent = require('../../app/renderer/components/immutableComponent')
 const messages = require('../constants/messages')
 const aboutActions = require('./aboutActions')
+const appActions = require('../actions/appActions')
 
 const {StyleSheet, css} = require('aphrodite/no-important')
 const globalStyles = require('../../app/renderer/components/styles/global')
@@ -24,6 +25,7 @@ class ExtensionItem extends ImmutableComponent {
   constructor () {
     super()
     this.onContextMenu = this.onContextMenu.bind(this)
+    this.onInspect = this.onInspect.bind(this)
   }
   onContextMenu (e) {
     aboutActions.contextMenu(this.props.extension.toJS(), 'extensions', e)
@@ -35,6 +37,19 @@ class ExtensionItem extends ImmutableComponent {
       this.props.extension.getIn(['manifest', 'icons', '16']) ||
       null
   }
+  get backgroundPage () {
+    return this.props.extension.getIn(['manifest', 'background', 'page']) || '_generated_background_page.html'
+  }
+  onInspect () {
+    const url = this.props.extension.get('url')
+    const backgroundPage = this.backgroundPage
+    chrome.tabs.query(
+      {currentWindow: true, active: true},
+      function (tabArray) {
+        appActions.loadURLRequested(tabArray[0].id, url + backgroundPage)
+      }
+    )
+  }
 
   render () {
     const className = css(
@@ -44,6 +59,7 @@ class ExtensionItem extends ImmutableComponent {
     )
     const icon = this.icon
     const permissions = this.props.extension.getIn(['manifest', 'permissions'])
+    const hasBackground = this.props.extension.getIn(['manifest', 'background'])
 
     return <div role='listitem'
       disabled={!this.props.extension.get('enabled')}
@@ -70,6 +86,11 @@ class ExtensionItem extends ImmutableComponent {
           ? <div className='extensionPermissions'><span data-l10n-id='extensionPermissionsLabel' /> <span>{permissions.join(', ')}</span></div>
           : null
         }
+        {
+          hasBackground && this.props.extension.get('enabled')
+          ? <div className='extensionInspectViews'><span data-l10n-id='extensionInspectViewsLabel' /> <label className={css(commonStyles.linkText, commonStyles.linkText_small)} onClick={this.onInspect}>{this.backgroundPage}</label></div>
+          : null
+        }
       </div>
     </div>
   }

js/about/preferences.js

@@ -607,15 +607,15 @@ class SecurityTab extends ImmutableComponent {
         </SettingItem>
         {
           getSetting(settings.ACTIVE_PASSWORD_MANAGER, this.props.settings) === passwordManagers.BUILT_IN
-          ? <label className='linkTextSmall' data-l10n-id='managePasswords'
+          ? <label className={css(commonStyles.linkText, commonStyles.linkText_small)} data-l10n-id='managePasswords'
             onClick={aboutActions.createTabRequested.bind(null, {
               url: 'about:passwords'
             })} />
           : null
         }
         {
           getSetting(settings.ACTIVE_PASSWORD_MANAGER, this.props.settings) === passwordManagers.LAST_PASS
-          ? <label className='linkTextSmall' data-l10n-id='preferences'
+          ? <label className={css(commonStyles.linkText, commonStyles.linkText_small)} data-l10n-id='preferences'
             onClick={aboutActions.createTabRequested.bind(null, {
               url: lastPassPreferencesUrl
             })} />

less/about/preferences.less

@@ -143,12 +143,6 @@ span.settingsListCopy {
       font-size: 0.95em;
     }
 
-    span.linkText {
-      text-align: left;
-      display: inline;
-      margin-left: 10px;
-    }
-
     input[type="number"] {
       width: 50px;
       min-width: 50px;
@@ -193,23 +187,6 @@ input[type="checkbox"][disabled] {
   pointer-events: none;
 }
 
-.linkText {
-  display: inline-block;
-  text-decoration: underline;
-  color: @braveOrange;
-  cursor: pointer;
-  margin: 0;
-
-  &:hover {
-    color: #000;
-  }
-}
-
-.linkTextSmall {
-  .linkText;
-  font-size: 14px;
-}
-
 .permissionItem {
   color: grey;
 }