restyle preferences payments

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

@@ -51,6 +51,7 @@ viewPaymentHistory=View Payment History…
 paymentHistoryTitle=Your Payment History
 paymentHistoryFooterText=Your next payment contribution is {{reconcileDate}}.
 paymentHistoryOKText=OK
+hideExcluded=hide excluded sites
 bravePayments=Brave Payments
 beta=beta
 contributionDate=Contribution Date
@@ -112,6 +113,7 @@ views=Views
 timeSpent=Time Spent
 include=Include
 percentage=%
+remove=Remove
 bravery=Bravery
 hintsTitle=Helpful hints
 hint0=The Bravery panel allows you to turn HTTPS Everywhere on or off. HTTPS Everywhere automatically changes your HTTP traffic to HTTPS for supported sites to keep you more secure.

app/index.js

@@ -676,11 +676,9 @@ app.on('ready', () => {
           ],
           options: {
             persist: false,
-            frameOrigin: origin,
             advancedText: locale.translation('notificationPasswordSettings'),
             advancedLink: 'about:passwords'
           },
-          frameOrigin: origin,
           message
         })
       }

docs/state.md

@@ -223,6 +223,7 @@ AppStore
     'advanced.torrent-viewer-enabled': boolean, // Whether to render magnet links in the browser
     'advanced.smooth-scroll-enabled': boolean, // false if smooth scrolling should be explicitly disabled
     'advanced.send-crash-reports': boolean, // true or undefined if crash reports should be sent
+    'advanced.hide-excluded-sites': boolean, // Whether to hide excluded sites in the payments list
     'shutdown.clear-history': boolean, // true to clear history on shutdown
     'shutdown.clear-downloads': boolean, // true to clear downloads on shutdown
     'shutdown.clear-cache': boolean, // true to clear cache on shutdown

js/about/preferences.js

@@ -249,6 +249,10 @@ class LedgerTable extends ImmutableComponent {
     return true
   }
 
+  banSite (hostPattern) {
+    aboutActions.changeSiteSetting(hostPattern, 'ledgerPaymentsShown', false)
+  }
+
   getRow (synopsis) {
     if (!synopsis || !synopsis.get || !this.shouldShow(synopsis)) {
       return []
@@ -264,6 +268,10 @@ class LedgerTable extends ImmutableComponent {
     const defaultSiteSetting = true
 
     return [
+      {
+        html: <div className='neverShowSiteIcon' onClick={this.banSite.bind(this, this.getHostPattern(synopsis))}><span className='fa fa-ban' /></div>,
+        value: ''
+      },
       rank,
       {
         html: <div className='site'>{verified ? this.getVerifiedIcon() : null}<a href={publisherURL} target='_blank'>{faviconURL ? <img src={faviconURL} alt={site} /> : <span className='fa fa-file-o' />}<span>{site}</span></a></div>,
@@ -287,11 +295,18 @@ class LedgerTable extends ImmutableComponent {
       return null
     }
     return <div className='ledgerTable'>
+      <div className='hideExcludedSites'>
+        <SettingCheckbox
+          dataL10nId='hideExcluded'
+          prefKey={settings.HIDE_EXCLUDED_SITES}
+          settings={this.props.settings}
+          onChangeSetting={this.props.onChangeSetting}
+        />
+      </div>
       <SortableTable
-        headings={['rank', 'publisher', 'include', 'views', 'timeSpent', 'percentage']}
+        headings={['remove', 'rank', 'publisher', 'include', 'views', 'timeSpent', 'percentage']}
         defaultHeading='rank'
-        overrideDefaultStyle
-        columnClassNames={['alignRight', '', '', 'alignRight', 'alignRight', 'alignRight']}
+        columnClassNames={['', 'alignRight', '', '', 'alignRight', 'alignRight', 'alignRight']}
         rowClassNames={
           this.synopsis.map((item) =>
             this.enabledForSite(item) ? '' : 'paymentsDisabled').toJS()
@@ -304,7 +319,12 @@ class LedgerTable extends ImmutableComponent {
             location: entry.get('publisherURL')
           }
         }).toJS()}
-        rows={this.synopsis.map((synopsis) => this.getRow(synopsis)).toJS()} />
+        rows={this.synopsis.filter((synopsis) => {
+          return !getSetting(settings.HIDE_EXCLUDED_SITES, this.props.settings) || this.enabledForSite(synopsis)
+        }).map((synopsis) => {
+          return this.getRow(synopsis)
+        }).toJS()}
+        />
     </div>
   }
 }
@@ -976,6 +996,8 @@ class PaymentsTab extends ImmutableComponent {
   get tableContent () {
     // TODO: This should be sortable. #2497
     return <LedgerTable ledgerData={this.props.ledgerData}
+      settings={this.props.settings}
+      onChangeSetting={this.props.onChangeSetting}
       siteSettings={this.props.siteSettings} />
   }
 

js/constants/appConfig.js

@@ -153,6 +153,7 @@ module.exports = {
     'advanced.smooth-scroll-enabled': false,
     'advanced.send-crash-reports': true,
     'advanced.send-usage-statistics': false,
+    'advanced.hide-excluded-sites': false,
     'advanced.minimum-visit-time': 8,
     'advanced.minimum-visits': 5,
     'advanced.minimum-percentage': false,

js/constants/settings.js

@@ -59,6 +59,7 @@ const settings = {
   SEND_CRASH_REPORTS: 'advanced.send-crash-reports',
   SEND_USAGE_STATISTICS: 'advanced.send-usage-statistics',
   ADBLOCK_CUSTOM_RULES: 'adblock.customRules',
+  HIDE_EXCLUDED_SITES: 'advanced.hide-excluded-sites',
   MINIMUM_VISIT_TIME: 'advanced.minimum-visit-time',
   MINIMUM_VISITS: 'advanced.minimum-visits',
   MINIMUM_PERCENTAGE: 'advanced.minimum-percentage',

less/about/history.less

@@ -50,6 +50,12 @@
       .domain {
         font-size: 11pt;
       }
+
+      td {
+        &:nth-of-type(2) {
+          width: 60%;
+        }
+      }
     }
   }
 }

less/about/preferences.less

@@ -455,7 +455,6 @@ table.sortableTable {
 }
 
 .paymentsContainer {
-
   @walletTableData: 235px + 30px; // .walletBar td (min-width + padding)
   @barMargin: 15px 0 30px;
   @fontSize: 14.5px; // .form-control
@@ -472,14 +471,37 @@ table.sortableTable {
     }
   }
 
+  tr {
+    th,
+    td {
+      padding: 0 15px;
+    }
+  }
+
+  .neverShowSiteIcon {
+    font-size: 20px;
+    text-align: center;
+
+    .fa {
+      visibility: hidden;
+    }
+
+    &:hover {
+      .fa {
+        visibility: visible;
+      }
+    }
+  }
+
   th {
     color: @darkGray;
     font-weight: 600;
   }
 
-  .sort {
-    text-align: left;
-  }
+.hideExcludedSites {
+  text-align: right;
+  margin: 10px 75px;
+}
 
   .modal {
     .dialog {
@@ -1174,6 +1196,11 @@ table.sortableTable {
     }
   }
 
+  .sort {
+    width: 100%;
+    text-align: left;
+  }
+
   .ledgerTable {
     tr {
       height: 26px;

less/sortableTable.less

@@ -60,12 +60,9 @@ table.sortableTable {
     td {
       color: @mediumGray;
       -webkit-font-smoothing: antialiased;
+      position: relative;
       width: auto;
 
-      &:nth-of-type(2) {
-        width: 60%;
-      }
-
       input[type='range'] {
         background: transparent;
         -webkit-appearance: none;

test/components/ledgerPanelTest.js

@@ -1,7 +1,7 @@
 /* global describe, it, beforeEach, before */
 
 const Brave = require('../lib/brave')
-const {urlInput, advancedSettings, addFundsButton, paymentsStatus, paymentsWelcomePage, paymentsTab, walletSwitch, ledgerTable} = require('../lib/selectors')
+const {urlInput, advancedSettings, addFundsButton, paymentsStatus, paymentsWelcomePage, paymentsTab, walletSwitch, siteSettingItem, ledgerTable} = require('../lib/selectors')
 const assert = require('assert')
 
 const prefsUrl = 'about:preferences'
@@ -206,8 +206,8 @@ describe('synopsis', function () {
       .click(paymentsTab)
       .waitForVisible('[data-l10n-id="publisher"]')
       .click('[data-l10n-id="publisher"]')
-      .waitForVisible(ledgerTable + ' .switchBackground')
-      .click(ledgerTable + ' .switchBackground')
+      .waitForVisible(siteSettingItem + ' .switchBackground')
+      .click(siteSettingItem + ' .switchBackground')
       .windowByUrl(Brave.browserWindowUrl)
       .waitUntil(function () {
         return this.getAppState().then((val) => {

test/lib/selectors.js

@@ -61,6 +61,7 @@ module.exports = {
   advancedSettings: '.advancedSettings',
   fundsSelectBox: '.fundsSelectBox',
   paymentsStatus: '.walletStatus',
+  siteSettingItem: '.siteSettingItem',
   ledgerTable: '.ledgerTable',
   bitcoinDashboard: '.bitcoinDashboard',
   modalCloseButton: 'button.close',