Add "hide sites if" options to Advanced Options Dialog

[bradleyrichter]

As a user, I want the option to filter/minimize the amount of less important sites in my Brave Payments list.

First option - "Hide sites with less than 1% usage"

This will reduce the total number of sites, and only show sites that have a high probability of receiving a vote on my reconciliation day.

This option is ON by default.

Second option - "Hide sites that I have disabled"

This will keep my list tidy by hiding each site that I have chosen not to include by flipping the include switch.

With this option enabled, the site should disappear from the list view 1 second after I flip the switch to "don't include". If I wish to change or review the sites I have disabled, I can return to advanced settings and change this option to OFF.

This option is OFF by default.

[bradleyrichter]

CC @mrose17

[luixxiul]

Designed. How is this?

[bradleyrichter]

@luixxiul Looks good except for the drop down style needs the new style.

And, the switches at the right are implemented too?

[mrose17]

a few nits:

• s/hide/Hide/g
• s/site that/sites that/

[bradleyrichter]

Actually, "Hide sites that I have disabled" has been moved out to the ledger list area.

[bradleyrichter]

see #6101

[luixxiul]

OK, I updated.

I just copied the switch as I'm not sure how to implement prefKey for it.

[luixxiul]

@bradleyrichter

Looks good except for the drop down style needs the new style.

It will be applied after #6084 is merged (the margin-bottom of the labels will be applied with f8efaca of #6047).

With these (and the commits which are yet to be pushed) the modal dialog will be like this:

[luixxiul]

Would someone help me to implement the switch?

I'm trying to hide sites with less than 1%. I added following the other switch in preferences.js:

<SettingCheckbox
 dataL10nId='minimumPercentage'
 prefKey={settings.MINIMUM_PERCENTAGE}
 settings={this.props.settings}
 onChangeSetting={this.props.onChangeSetting} />

In js/constants/appConfig:

advanced.minimum-percentage': false,

In js/constants/settings.js:

MINIMUM_PERCENTAGE: 'advanced.minimum-percentage',

[mrose17]

@luixxiul - the routine you want to look at in app/ledger.js is synopsisNormalizer. look for this line

        if (pct[i] < 0) pct[i] = 0

underneath that line add these lines

        if (pct[i] <= minimumPercentage) {
          data = data.slice(0, i)
          break
        }

and that should do the trick... good luck!

[luixxiul]

@mrose17 thanks! I will check it out ;-)

[luixxiul]

I got ReferenceError: minimumPercentage is not defined error. I think it is too complex for me to solve this :-(

[mrose17]

@luixxiul - sorry, minimimumPercentage was a place-holder for the real variable. let's try this: tell me what repo you have your updates in and i'll update the code... thanks!

[luixxiul]

@mrose17 appreciated! I will create a PR for it 👍

[luixxiul]

@mrose17 I created the PR. Would you please update the code? Thanks!

[luixxiul]

Merged in the master branch with this: 8ae8eb4

[luixxiul]

not merged in 0.12.15 build

[luixxiul]

Test plan:

Open about:preferences#payments
Click Advanced settings
Toggle the switch
Make sure the sites with less than 1% usage are hidden