Add Pocket toggle switch and button to view about:extensions

Fix #5227

Fix #5244

Auditors: @darkdh

app/extensions.js

@@ -317,6 +317,12 @@ module.exports.init = () => {
       disableExtension(extensionIds[passwordManagers.LAST_PASS])
     }
 
+    if (getSetting(settings.POCKET_ENABLED)) {
+      registerComponent(config.PocketExtensionId)
+    } else {
+      disableExtension(config.PocketExtensionId)
+    }
+
     if (appStore.getState().getIn(['widevine', 'enabled'])) {
       registerComponent(config.widevineComponentId)
     }

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

@@ -162,6 +162,10 @@ bookmarkToolbar=Always show the bookmarks bar
 bookmarkToolbarShowFavicon=Favicons
 bookmarkToolbarShowOnlyFavicon=Show only favicon
 contentSettings=Content Settings
+extensions=Extensions
+enablePocket=Enable Pocket
+moreExtensionsComingSoon=More extensions coming soon…
+viewInstalledExtensions=View Installed Extensions…
 useHardwareAcceleration=Use hardware acceleration when available (requires browser restart)
 useSmoothScroll=Enable smooth scrolling (requires browser restart)
 defaultZoomLevel=Default zoom level

docs/state.md

@@ -195,6 +195,7 @@ AppStore
     'shutdown.clear-cache': boolean, // true to clear cache on shutdown
     'shutdown.clear-all-site-cookies': boolean, // true to clear all site cookies on shutdown
     'adblock.customRules': string, // custom rules in ABP filter syntax
+    'extensions.pocket.enabled': boolean, // true if pocket is enabled
   }],
   dictionary: {
     locale: string, // en_US, en, or any other locale string

js/about/extensions.js

@@ -40,7 +40,7 @@ class ExtensionItem extends ImmutableComponent {
         <h3 className='extensionTitle'>{bravifyText(this.props.extension.get('name'))}</h3>
         <span className='extensionVersion'>{this.props.extension.get('version')}</span>
         {
-          this.props.extension.get('description') !== '__MSG_appDesc__'
+          !['__MSG_extDescriptionGoogleChrome__', '__MSG_appDesc__'].includes(this.props.extension.get('description'))
           ? <div className='extensionDescription'>{bravifyText(this.props.extension.get('description'))}</div>
           : null
         }

js/about/preferences.js

@@ -1586,6 +1586,17 @@ class AdvancedTab extends ImmutableComponent {
         <SettingCheckbox dataL10nId='sendCrashReports' prefKey={settings.SEND_CRASH_REPORTS} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
         <SettingCheckbox dataL10nId='sendUsageStatistics' prefKey={settings.SEND_USAGE_STATISTICS} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
       </SettingsList>
+      <div className='sectionTitle' data-l10n-id='extensions' />
+      <SettingsList>
+        <SettingCheckbox dataL10nId='enablePocket' prefKey={settings.POCKET_ENABLED} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
+        <SettingItem>
+          <Button l10nId='viewInstalledExtensions' className='primaryButton viewExtensionsInfo'
+            onClick={aboutActions.newFrame.bind(null, {
+              location: 'about:extensions'
+            }, true)} />
+        </SettingItem>
+        <div data-l10n-id='moreExtensionsComingSoon' className='moreExtensionsComingSoon' />
+      </SettingsList>
     </div>
   }
 }

js/constants/appConfig.js

@@ -144,7 +144,8 @@ module.exports = {
     'shutdown.clear-all-site-cookies': false,
     'shutdown.clear-autocomplete-data': false,
     'shutdown.clear-autofill-data': false,
-    'shutdown.clear-site-settings': false
+    'shutdown.clear-site-settings': false,
+    'extensions.pocket.enabled': false
   },
   defaultFavicon: 'img/empty_favicon.png',
   uaExceptionHosts: [

js/constants/config.js

@@ -43,6 +43,7 @@ module.exports = {
   },
   braveExtensionId: 'mnojpmjdmbbfmejpflffifhffcmidifd',
   PDFJSExtensionId: 'jdbefljfgobbmcidnmpjamcbhnbphjnb',
+  PocketExtensionId: 'niloccemoadcdkdjlinkgdfekeahmflj',
   widevineComponentId: 'oimompecagnajdejgnnjijobebaeigek',
   coinbaseOrigin: 'https://buy.coinbase.com'
 }

js/constants/settings.js

@@ -70,7 +70,8 @@ const settings = {
   LAST_PASS_ENABLED: 'security.passwords.last-pass-enabled',
   // > phased out with 0.12.6
   SHOW_BOOKMARKS_TOOLBAR_FAVICON: 'bookmarks.toolbar.showFavicon',
-  SHOW_BOOKMARKS_TOOLBAR_ONLY_FAVICON: 'bookmarks.toolbar.showOnlyFavicon'
+  SHOW_BOOKMARKS_TOOLBAR_ONLY_FAVICON: 'bookmarks.toolbar.showOnlyFavicon',
+  POCKET_ENABLED: 'extensions.pocket.enabled'
 }
 
 module.exports = settings

less/about/preferences.less

@@ -375,6 +375,7 @@ span.browserButton.primaryButton {
   &.importNowButton,
   &.setAsDefaultButton,
   &.manageAdblockSettings,
+  &.viewExtensionsInfo,
   &.manageAutofillDataButton {
     font-size: 0.9em;
     margin-top: 20px;
@@ -1190,3 +1191,8 @@ div.nextPaymentSubmission {
   margin-top: 0px;
   width: auto;
 }
+
+.moreExtensionsComingSoon {
+  padding-top: 10px;
+  font-style: italic;
+}

test/about/extensionsTest.js

@@ -28,6 +28,26 @@ describe('about:extensions', function () {
         .waitForVisible('[data-extension-id="jdbefljfgobbmcidnmpjamcbhnbphjnb"]')
     })
   })
+  describe('Pocket', function () {
+    Brave.beforeAll(this)
+    before(function * () {
+      yield setup(this.app.client)
+    })
+    it('installs when preference is enabled', function * () {
+      yield this.app.client
+        .windowByUrl(Brave.browserWindowUrl)
+        .changeSetting(settingsConst.POCKET_ENABLED, true)
+        .tabByIndex(0)
+        .waitForVisible('[data-extension-id="niloccemoadcdkdjlinkgdfekeahmflj"]')
+    })
+    it('Opens up the signup page', function * () {
+      const pocketURL = 'https://getpocket.com/signup?mode=minimal&src=installed'
+      yield this.app.client
+        .tabByIndex(0)
+        .waitForUrl(pocketURL)
+        .url(pocketURL)
+    })
+  })
   describe('1Password', function () {
     Brave.beforeAll(this)
     before(function * () {