Moved Adblock page to settings

[nullhook]

Resolves brave/brave-browser#8838

Submitter Checklist:

• I confirm that no security/privacy review is needed, or that I have requested one
• There is a ticket for my issue
• Used Github auto-closing keywords in the PR description above
• Wrote a good PR/commit description
• Squashed any review feedback or "fixup" commits before merge, so that history is a record of what happened in the repo, not your PR
• Added appropriate labels (QA/Yes or QA/No; release-notes/include or release-notes/exclude; OS/...) to the associated issue
• Checked the PR locally: npm run test -- brave_browser_tests, npm run test -- brave_unit_tests, npm run lint, npm run gn_check, npm run tslint
• Ran git rebase master (if needed)

Reviewer Checklist:

• A security review is not needed, or a link to one is included in the PR description
• New files have MPL-2.0 license header
• Adequate test coverage exists to prevent regressions
• Major classes, functions and non-trivial code blocks are well-commented
• Changes in component dependencies are properly reflected in gn
• Code follows the style guide
• Test plan is specified in PR before merging

After-merge Checklist:

• The associated issue milestone is set to the smallest version that the
  changes has landed on
• All relevant documentation has been updated, for instance:
  • https://github.com/brave/brave-browser/wiki/Deviations-from-Chromium-(features-we-disable-or-remove)
  • https://github.com/brave/brave-browser/wiki/Proxy-redirected-URLs
  • https://github.com/brave/brave-browser/wiki/Fingerprinting-Protections
  • https://github.com/brave/brave-browser/wiki/Brave%E2%80%99s-Use-of-Referral-Codes
  • https://github.com/brave/brave-browser/wiki/Custom-Headers
  • https://github.com/brave/brave-browser/wiki/Web-Compatibility-Exceptions-in-Brave
  • https://github.com/brave/brave-browser/wiki/QA-Guide
  • https://github.com/brave/brave-browser/wiki/P3A

Test Plan:

Go to: brave://settings/shields/content-filters

1. Content filtering
   Toggle on/off items, refresh the page, and see if your selection/s persist
   Type keywords that includes in the list and ensure the list if the display is being filtered or not. "Show full list" button should hide in filtered state.

2. Add Custom Filter Lists
   Test url: https://raw.githubusercontent.com/DandelionSprout/adfilt/master/Anti-'Custom%20cursors'%20List.txt

• Update the list, you will notice "Last updated" text change
• Remove the list
• Test with a non-filter url (google.com), you should be able to see "Download failure" as it's not a valid list

3. Custom Filters
   Add CSS selectors and test if they're being blocked

[goodov]

chromium_src lgtm

[petemill]

This is really good - an advanced UI in polymer nicely done with clean logic, binding and styles.

It could have been nice to see the commits separated in to 2 - one for the refactor to move from html imports to es imports for the existing code, and the other to introduce the new filter list subpage. But that's ok since it's still somewhat manageable to review because of the file separation.

I only have minor feedback I think.

edit: I also tested out all 3 sections of features and all the sub-features worked well!

[petemill]

This is promising but I'm confused about a couple of things:

• brave lion refers to the brave logo. Did you mean Brave Leo for the design system code name?
• These are 16x16 icons but all brave design system icons are 24x24 at https://www.figma.com/file/g8Z0q6TMPYDq6zXh9Y7LWD/%F0%9F%8C%8E-Universal?node-id=61%3A30937

[nullhook]

yes, this is suppose to be brave_leo

[nullhook]

[petemill]

Some design issues when I compare to the figma:

• "Filter lists" search input is missing the search icon. cr-input seems to support a suffix slot, which may be what you want. Actually, probably inline-suffix.

• Missing the link on "Annoyances"

• Missing the "Brave's tracking filters" title and subtitle content
  

• Heading titles are 16px in the design but 13.65px in the code

• Spacing seems off after first subtitle due to double margin (container and paragraph). Same for before the "Enter url" input in the custom filter lists section, and the textarea in the Custom filters section
  

• Custom filter lists should have a title, a subtitle and a note. Looks like you've combined the subtitle and the note to one item, missing the new paragraph and the different styling for the note.

• Missing the "Custom lists" table title

• Subscribe menu icons don't seem vertical-center-aligned to the text

Other issues (that can come with follow-up if you prefer):

• "Fade out" of filter lists at the bottom is not implemented.
  
• Missing "Reset to defaults" button. Do we have an API for that, or would we need to create it?
• Colors in custom lists aren't added:
  • Table heading color
  • Different row bg based on if the item is enabled
  • Red color for "Download failure"
    
    

Note that the change to Poppins is coming in this PR so I wouldn't neccessarily focus on that, but if you wanted to make sure any custom text not part of components (i.e. not buttons) matched the design, you could put font-family: Poppins in your custom filters subpage.

[petemill]

I'm still seeing an issue with icon alignment.

I think the intention of the Leo icons in figma is for them to be centered inside their viewbox, and they are placed that way, but doesn't seem to be coming out that way. Could we try to solve that? Perhaps we are copying the svg from the incorrect outer element in figma? Just a guess.

I also see a few of the other items of feedback aren't addressed yet. @nullhook please could you post a comment mentioning which issues should be fixed and which aren't for whatever reason?

[nullhook]

The following issues are not addressed in this PR and will be resolved separately:

1. "Fade out" of filter lists at the bottom is not implemented
2. "Reset to defaults" - need to create an API
3. Colors in the table - Figma doesn't have dark theme equivalents of the table colors yet
4. Status color - needs to be well thought out as there are two other states

The path in svg should be centered to the viewBox now:

[petemill]

Just noticed this, but strings for the settings page go in app/brave_settings_strings.grdp. You can probably just move the grdp and reference it from that. This is not a resource for components (and also shouldn't be included on android or ios).

[nullhook]

moved adblocked related strings to app/brave_settings_strings

[petemill]

Looks good, but please move the strings and have CI pass before merge.

Let's ensure we action or create follow-up issue(s) for the following:

• Subtitles get their different color style
  
• First title of the page should be "Content filters" and not "Content Filtering"
• Casing inconsistencies - "Custom Filters" -> "Custom filters"
• "Custom lists" table section title should be 14px not 12px
• Table colors
• "Download failed" error color
• Last updated should show time last updated even if latest try was failure
  
• Basic url validation when clicking "Add" on custom filter lists input

[nullhook]

Follow up issues thread created: brave/brave-browser#23222