Add Auto-suggest sites option, to prefs and urlBar

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

@@ -55,6 +55,8 @@ reloadButton.title=Reload page
 homeButton.title=Open Homepage
 stopButton.title=Stop loading
 noScriptButton.title=Allow scripts
+enablePublisher.title=Enable publisher for payments
+disablePublisher.title=Disable publisher for payments
 braveMenu.title=Open Brave Shields Panel
 muteTab=Mute tab
 unmuteTab=Unmute tab

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

@@ -21,6 +21,7 @@ paymentsWelcomeText5=Note: Brave Payments uses a country-lookup service in order
 paymentsWelcomeText6=Need more info?
 paymentsWelcomeText7=for Brave Payments…
 paymentsWelcomeLink=View the FAQ
+paymentsFAQLink.title=View the FAQ
 paymentsSidebarText1=Our Partners
 paymentsSidebarText2=All transaction IP addresses are anonymized with technology from:
 paymentsSidebarText3=Brave Bitcoin Wallets are provided through a partnership with:
@@ -52,7 +53,7 @@ viewPaymentHistory=View Payment History…
 paymentHistoryTitle=Your Payment History
 paymentHistoryFooterText=Your next payment contribution is {{reconcileDate}}.
 paymentHistoryOKText=OK
-hideExcluded=hide excluded sites
+hideExcluded=Only show included sites
 bravePayments=Brave Payments
 beta=beta
 contributionDate=Contribution Date
@@ -85,6 +86,7 @@ off=off
 on=on
 ok=Ok
 minimumPercentage=Hide sites with less than 1% usage
+autoSuggestSites=auto-suggest sites
 notifications=Show notifications
 moneyAdd=Use your debit/credit card
 moneyAddSubTitle=No Bitcoin needed!

app/ledger.js

@@ -519,7 +519,7 @@ eventStore.addChangeListener(() => {
 
 // NB: in theory we have already seen every element in info except for (perhaps) the last one...
   underscore.rest(info, info.length - 1).forEach((page) => {
-    var entry, faviconURL, publisher, siteSetting
+    var entry, faviconURL, pattern, publisher, siteSetting
     var location = page.url
 
     if ((location.match(/^about/)) || ((locations[location]) && (locations[location].publisher))) return
@@ -540,6 +540,10 @@ eventStore.addChangeListener(() => {
     if (!page.publisher) return
 
     publisher = page.publisher
+    pattern = `https?://${publisher}`
+    if ((!synopsis.publishers[publisher]) && (!getSetting(settings.AUTO_SUGGEST_SITES))) {
+      appActions.changeSiteSetting(pattern, 'ledgerPayments', false)
+    }
     synopsis.initPublisher(publisher)
     entry = synopsis.publishers[publisher]
     if ((page.protocol) && (!entry.protocol)) entry.protocol = page.protocol

app/renderer/components/publisherToggle.js

@@ -0,0 +1,96 @@
+/* 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/. */
+
+const React = require('react')
+const tldjs = require('tldjs')
+const ImmutableComponent = require('../../../js/components/immutableComponent')
+const appActions = require('../../../js/actions/appActions')
+const settings = require('../../../js/constants/settings')
+const getSetting = require('../../../js/settings').getSetting
+const cx = require('../../../js/lib/classSet')
+const Button = require('../../../js/components/button')
+
+class PublisherToggle extends ImmutableComponent {
+  constructor () {
+    super()
+    this.onAuthorizePublisher = this.onAuthorizePublisher.bind(this)
+  }
+
+  get domain () {
+    return tldjs.getDomain(this.props.url)
+  }
+
+  get hostPattern () {
+    return `https?://${this.domain}`
+  }
+
+  get hostSettings () {
+    // hostPattern defines it's own identifier for authorized publishers
+    // sites that do not match criteria would populate siteSettings
+    // with their default protocol, not hostPattern
+    return this.props.hostSettings.get(this.hostPattern)
+  }
+
+  get validPublisherSynopsis () {
+    // If session is clear then siteSettings is undefined and icon will never be shown,
+    // but synopsis may not be empty. In such cases let's check if synopsis matches current domain
+    return this.props.synopsis.map(entry => entry.get('site')).includes(this.domain)
+  }
+
+  get enabledPublisher () {
+    // If we can't get ledgerPayments, then it's likely that we are
+    // on a clean session. Let's then check for publisher's synopsis
+    return this.hostSettings
+      ? this.hostSettings.get('ledgerPayments') !== false
+      : this.validPublisherSynopsis
+  }
+
+  get visiblePublisher () {
+    // ledgerPaymentsShown is undefined by default until user decide to permanently hide the publisher
+    // so for icon to be shown it can be everything but false
+    const ledgerPaymentsShown = this.hostSettings && this.hostSettings.get('ledgerPaymentsShown')
+    return ledgerPaymentsShown === 'undefined' || ledgerPaymentsShown !== false
+  }
+
+  get shouldShowAddPublisherButton () {
+    if ((!!this.hostSettings || !!this.validPublisherSynopsis) && this.visiblePublisher) {
+      // Only show publisher icon if autoSuggest option is OFF
+      return !getSetting(settings.AUTO_SUGGEST_SITES)
+    }
+    return false
+  }
+
+  onAuthorizePublisher () {
+    // if payments disabled, enable it
+    if (!getSetting(settings.AUTO_SUGGEST_SITES)) {
+      appActions.changeSetting(settings.PAYMENTS_ENABLED, true)
+    }
+
+    this.enabledPublisher
+      ? appActions.changeSiteSetting(this.hostPattern, 'ledgerPayments', false)
+      : appActions.changeSiteSetting(this.hostPattern, 'ledgerPayments', true)
+  }
+
+  render () {
+    return this.shouldShowAddPublisherButton
+      ? <span className={cx({
+        addPublisherButtonContainer: true,
+        authorizedPublisher: this.enabledPublisher
+      })}>
+        <Button iconClass='fa-btc publisherToggleBtn'
+          l10nId='enablePublisher'
+          onClick={this.onAuthorizePublisher}
+        />
+      </span>
+      : null
+  }
+}
+
+PublisherToggle.propTypes = {
+  url: React.PropTypes.string,
+  hostSettings: React.PropTypes.string,
+  synopsis: React.PropTypes.string
+}
+
+module.exports = PublisherToggle

js/about/preferences.js

@@ -1374,6 +1374,16 @@ class PaymentsTab extends ImmutableComponent {
         ? <ModalOverlay title={'ledgerRecoveryTitle'} content={this.ledgerRecoveryContent} footer={this.ledgerRecoveryFooter} onHide={this.props.hideOverlay.bind(this, 'ledgerRecovery')} />
         : null
       }
+      <div className='advancedSettingsWrapper'>
+        {
+          this.props.ledgerData.get('created') && this.enabled
+          ? <Button
+            l10nId='advancedSettings'
+            className='advancedSettings whiteButton'
+            onClick={this.props.showOverlay.bind(this, 'advancedSettings')} />
+          : null
+        }
+      </div>
       <div className='titleBar'>
         <div className='sectionTitleWrapper pull-left'>
           <span className='sectionTitle'>Brave Payments</span>
@@ -1384,7 +1394,14 @@ class PaymentsTab extends ImmutableComponent {
             <span data-l10n-id='off' />
             <SettingCheckbox dataL10nId='on' prefKey={settings.PAYMENTS_ENABLED} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
           </div>
-          { this.props.ledgerData.get('created') && this.enabled ? <Button l10nId='advancedSettings' className='advancedSettings whiteButton' onClick={this.props.showOverlay.bind(this, 'advancedSettings')} /> : null }
+          {
+            this.props.ledgerData.get('created') && this.enabled
+            ? <div className='autoSuggestSwitch'>
+              <SettingCheckbox dataL10nId='autoSuggestSites' prefKey={settings.AUTO_SUGGEST_SITES} settings={this.props.settings} onChangeSetting={this.props.onChangeSetting} />
+              <a className='moreInfoBtn fa fa-question-circle' href='https://brave.com/Payments_FAQ.html' target='_blank' data-l10n-id='paymentsFAQLink' />
+            </div>
+            : null
+          }
         </div>
       </div>
       {

js/components/main.js

@@ -1003,6 +1003,8 @@ class Main extends ImmutableComponent {
                 settings={this.props.appState.get('settings')}
                 noScriptIsVisible={noScriptIsVisible}
                 menubarVisible={customTitlebar.menubarVisible}
+                siteSettings={this.props.appState.get('siteSettings')}
+                synopsis={this.props.appState.getIn(['publisherInfo', 'synopsis']) || new Immutable.Map()}
               />
               <div className='topLevelEndButtons'>
                 <div className={cx({

js/components/navigationBar.js

@@ -23,6 +23,7 @@ const getSetting = require('../settings').getSetting
 const windowStore = require('../stores/windowStore')
 const contextMenus = require('../contextMenus')
 const LongPressButton = require('./longPressButton')
+const PublisherToggle = require('../../app/renderer/components/publisherToggle')
 
 class NavigationBar extends ImmutableComponent {
   constructor () {
@@ -128,7 +129,8 @@ class NavigationBar extends ImmutableComponent {
   }
 
   render () {
-    if (this.props.activeFrameKey === undefined) {
+    if (this.props.activeFrameKey === undefined ||
+        this.props.siteSettings === undefined) {
       return null
     }
 
@@ -208,13 +210,21 @@ class NavigationBar extends ImmutableComponent {
         urlbar={this.props.navbar.get('urlbar')}
         onStop={this.onStop}
         menubarVisible={this.props.menubarVisible}
+        noBorderRadius={this.shouldShowAddPublisherButton}
         />
       {
         isSourceAboutUrl(this.props.location)
         ? <div className='endButtons'>
           <span className='browserButton' />
         </div>
         : <div className='endButtons'>
+          {
+            <PublisherToggle
+              url={this.props.location}
+              hostSettings={this.props.siteSettings}
+              synopsis={this.props.synopsis}
+            />
+          }
           {
             !this.showNoScriptInfo
             ? null

js/components/urlBar.js

@@ -487,7 +487,10 @@ class UrlBar extends ImmutableComponent {
 
   render () {
     return <form
-      className='urlbarForm'
+      className={cx({
+        urlbarForm: true,
+        noBorderRadius: this.props.noBorderRadius
+      })}
       action='#'
       id='urlbar'
       ref='urlbar'>

js/constants/appConfig.js

@@ -157,6 +157,7 @@ module.exports = {
     'advanced.minimum-visit-time': 8,
     'advanced.minimum-visits': 5,
     'advanced.minimum-percentage': false,
+    'advanced.auto-suggest-sites': true,
     'shutdown.clear-history': false,
     'shutdown.clear-downloads': false,
     'shutdown.clear-cache': false,

js/constants/settings.js

@@ -63,6 +63,7 @@ const settings = {
   MINIMUM_VISIT_TIME: 'advanced.minimum-visit-time',
   MINIMUM_VISITS: 'advanced.minimum-visits',
   MINIMUM_PERCENTAGE: 'advanced.minimum-percentage',
+  AUTO_SUGGEST_SITES: 'advanced.auto-suggest-sites',
 
   // DEPRECATED settings
   // ########################