move brave://adblock/ to brave://settings/shields

[rebron]

Description

Move brave://adblock/ to brave://settings/shields/content-filters

• New design for Ad Block page in brave://settings/shields/content-filters
• Add Content Filtering section in brave://settings/shields
• Add a link to brave://adblock in the Shields panel

Designs

remaining screens in Figma

Settings page/shields section and filters page:
https://www.figma.com/file/tLXWGCpNoiJxDZDdpfordj/Desktop-Settings?node-id=1636%3A30096

[karenkliu]

@tomlowenthal Can you help fill out some content on the new adblock page?

• Regional and specific filters now have a one-line description underneath
• Custom Filters now have a one-line description underneath
• Each filter now has a one-line description of what they are best used for underneath

[tildelowengrimm]

• Regional and specific filters: "These filters block regional and language-specific trackers and annoyances."
• Custom filters: "Get technical by adding your own specific filters. Make sure to use Adblock Plus syntax." where "Ablock Plus syntax" links to https://adblockplus.org/filter-cheatsheet (unless we want to duplicate that page in our own documentation site, cc @Brave-Matt ).

[Brave-Matt]

@tomlowenthal,
I'd love to make a nicely formatted copy of this cheat sheet on our Help Center. I feel like we should be linking to our own sources as much as possible (even if "our source" is just a reformatting of something that already exists).

Will write up a draft and share here if interested 👍

[rebron]

@karenkliu Can you update the design section as it relates to #9975 I think #9975 has the more recent work.

[karenkliu]

@rebron Yep, thanks for catching that. Updated!

[rebron]

cc: @pes10k

[karenkliu]

Designs updated due to #8107

[Furax-31]

Hello, is the new interface for Brave Shield going to be on the Nightly version soon?

[bsclifton]

@Furax-31 while we have some designs, no work has started yet

[aguscruiz]

Updated designs here:
https://www.figma.com/file/tLXWGCpNoiJxDZDdpfordj/Desktop-Settings?node-id=1636%3A30096

[MadhaviSeelam]

Verification PASSED using

Brave	1.41.62 Chromium: 103.0.5060.42 (Official Build) nightly (64-bit)
Revision	de0d840bf9439c31bd86bf74f065c31fdf9b208d-refs/branch-heads/5060@{#667}
OS	Windows 11 Version 21H2 (Build 22000.675)

Case 1:brave://adblock redirect to brave://settings/shields/content-filters - PASSED

1. Install 1.41.62
2. Launch brave
3. Load brave://adblock
4. Confirmed the redirect to brave://settings/shields/content-filters

Dark	Light

Case 2:brave://adblock redirect to brave://settings/shields/content-filters from Shields Panel - PASSED

1. Launch brave
2. Load brave.com
3. Click to open Shield panel
4. Click Filter lists
5. Confirmed the redirect to new Content Filtering page brave://settings/shields/content-filters

Filter_lists	content_filter

Case 3: brave://adblock redirect to brave://settings/shields/content-filters from context menu - PASSED

1. Load brave.com
2. right click on the page to open context menu (Brave > Manage custom filters)
3. Select Manage custom filters
4. Confirmed the redirect to brave://settings/shields/content-filters in a new tab (or an existing one is present)

Step 2	Step 4

Case 4: Content Filtering section in brave://settings/shields - PASSED

1. Launch brave
2. Load brave://settings/shields
3. Verified Content Filtering section is displayed
4. Content Filtering text/sub text match to Figma design
5. Click Content Filtering section
6. brave://settings/shields/content-filters page should load in the same tab.
7. Click back arrow next to Content filters on top of the page to return to brave://settings/shields
8. Confirmed returned to brave://settings/shields page

Step 3	Step 7
	<

New Adblock page functionality

Case 5: Content Filtering Functionality in brave://settings/shields/content-filters - PASSED

1. Launch brave
2. Load brave://settings/shields/content-filters
3. Content filters page is loaded successfully
4. Click Show List to expand the lists in the Content filtering
5. Refresh the page to collapse
6. Search for EasyList Dutch
7. EasyList Dutch filter should be displayed
8. Select it and refresh the page to see the selection is persisted
9. Uncheck to disable the filter.
10. Search with a keyword Easy
11. Confirmed filtered list is displayed

Step 3& 4	Step 5	Step 6&7	Step 8	Step 11

Case 6: Add custom filter lists functionality - PASSED

1. Load brave://settings/shields/content-filters
2. Content filters page should be loaded
3. Navigate to Add custom filter lists section
4. Enter the URL in the input field https://github.com/raw/DandelionSprout/adfilt/master/Anti-'Custom%20cursors'%20List.txt
5. Click Add button
6. URL is added to Custom lists
7. It should display Last updated time when added
8. Click on ellipsis (3 dots) menu
9. click Update now to see the change
10. Click View Source
11. The list opens in a new tab
12. Click Unsubscribe
13. Entry should be removed
14. Add one more URL https://github.com/raw/reek/anti-adblock-killer/master/anti-adblock-killer-filters.txt
15. Confirmed URL is displayed in the Custom filter list

Step6	Step8	Step9	Step10	Step11	Step12	Step 13

Case 7: Custom Filters - Verify blocked page elements are added to the Custom Filters section and removing unblocks it - PASSED

1. New Profile
2. Load nytimes.com
3. right click on the page to open context menu
4. Select Block element and click create
5. Select Manage custom filters to redirect brave://settings/shields/content-filters in NTP
6. Custom Filters field displayed blocked page elements
7. Delete the blocked page elements from the field and click Save changes
8. Return to the website and reload the page
9. Confirmed the page elements reloaded

Step4	Step5	Step6	Step8

Case 8: Metadata from filter list subscriptions should be available in brave://settings/shields/content-filters - PASSED

This was tested as part of #17910

1. Launch brave
2. Visit https://filterlists.com
3. Click filter icon on the Syntaxes column to select Adblock Plus lists.
4. Click on the blue (i) icon for AakList (Anti-Adblock Killer)
5. Click View button in the info panel to the right.
6. Page opens in a new tab and note down the Title or Homepage:
7. Title: AakList (Anti-Adblock Killer)
8. Homepage: https://github.com/reek/anti-adblock-killer/
9. Copy the URL https://github.com/raw/reek/anti-adblock-killer/master/anti-adblock-killer-filters.txt
10. Visit brave://settings/shields/content-filters
11. Paste above URL in the Add custom filter lists input field
12. Click Add button
13. A new list subscription is created and URL is added to Custom lists area and shows Last Updated time
14. Visit brave://local-state
15. Search for AakList (Anti-Adblock Killer)
16. Confirmed the new subscription is listed and the list matches to entry from https://filterlists.com

Step2	Step4	Step6	Step13	Step16

Case 9: Regression: Verify Easylist-Cookie List - Filter Obtrusive Cookie Notices filter list works as expected - PASSED

1. Visit https://digikey.com and confirm that a cookie notice is shown. It will appear either as a banner at the top, or as a popup along the bottom depending on window size.
2. Visit brave://settings/shields/content-filters and manually toggle the Easylist-Cookie List - Filter Obtrusive Cookie Notices entry to be enabled
3. Visit https://digikey.com and refresh page
4. Confirm that no cookie notice is shown.
5. Return to brave://settings/shields/content-filters and uncheck Easylist-Cookie List - Filter Obtrusive Cookie Notices
6. Return to https://digikey.com and reload the site
7. Confirmed that the cookie notice is shown again.

Step2	Step3	Step4	Step6	Step9
		<

[stephendonner]

Verification PASSED using

Brave	1.41.62 Chromium: 103.0.5060.42 (Official Build) nightly (x86_64)
Revision	de0d840bf9439c31bd86bf74f065c31fdf9b208d-refs/branch-heads/5060@{#667}
OS	macOS Version 12.5 (Build 21G5037d)

Case 1:brave://adblock redirects to brave://settings/shields/filters - PASSED

1. Install 1.41.62
2. Launch brave
3. Load brave://adblock
4. Confirmed the redirect to brave://settings/shields/filters

Dark	Light

Case 2:brave://adblock redirect to brave://settings/shields/filters from Shields Panel - PASSED

1. Launch Brave
2. Load brave.com
3. Click to open Shields panel
4. Click Filter lists
5. Confirmed redirect to brave://settings/shields/filters

Content Filtering	filters

Case 3: brave://adblock redirect to brave://settings/shields/filters from context menu - PASSED

1. load brave.com
2. right click on the page to open context menu (Brave > Manage custom filters)
3. select Manage custom filters
4. confirmed the redirect to brave://settings/shields/filters in a new tab (or an existing one is present)

Step 2	Step 4

Case 4: Add Content Filtering section in brave://settings/shields - PASSED

1. Launch Brave
2. Load brave://settings/shields
3. Verified Content Filtering section is displayed
4. Content Filtering text/sub text match to (updated) Figma design
5. Click Content Filtering section
6. brave://settings/shields/content-filters page should load in the same tab.
7. Click back arrow next to Content filters on top of the page to return to brave://settings/shields

Step 3	Step 7

New Adblock page functionality

Case 5: Content Filtering Functionality in brave://settings/shields/filters - PASSED

1. Launch Brave
2. Load brave://settings/shields/filters
3. Content filters page is loaded successfully
4. Click Show List to expand the lists in the Content filtering
5. Refresh the page to collapse
6. Search for EasyList Dutch
7. EasyList Dutch filter should be displayed
8. Select it and refresh the page to see the selection is persisted
9. Uncheck to disable the filter.
10. Search with a keyword Easy and confirmed filtered list displayed

Step 3 & 4	Step 5	Step 6&7	Step 8	Step 10

Case 6: Add custom filter lists functionality - PASSED

1. Load brave://settings/shields/filters
2. Content filters page should be loaded
3. Navigate to Add custom filter lists section
4. Enter the URL in the input field https://github.com/raw/DandelionSprout/adfilt/master/Anti-'Custom%20cursors'%20List.txt
5. Click Add button
6. URL is added to Custom lists
7. It should display Last updated time when added
8. Click on ellipsis (3 dots) menu
9. click Update now to see the change
10. Click View Source
11. The list opens in a new tab
12. Click Unsubscribe
13. Entry should be removed
14. Add one more URL https://github.com/raw/reek/anti-adblock-killer/master/anti-adblock-killer-filters.txt
15. URL is displayed in the Custom filter list

Step 6	Step 8	Step 9	Step 10	Step 11	Step 12	Step 13	Step 15

Case 7: Custom Filters - Verify blocked page elements are added to the Custom Filters section and removing unblocks it - PASSED

1. Load nytimes.com
2. Right-click on the page to open context menu
3. Select Block element and click Create
4. Select Manage custom filters to redirect brave://settings/shields/filters in NTP
5. Custom Filters field displayed page elements
6. Delete the page elements from the field and click Save changes
7. Return to the website
8. Reload the page

Step 3	Step 4	Step 5	Step 7	Step 8

Case 8: Metadata from filter list subscriptions should be available in brave://settings/shields/content-filters - PASSED

This was tested as part of #17910: #17910 (comment)

Case 9: Regression: Verify Easylist-Cookie List - Filter Obtrusive Cookie Notices filter list works as expected - PASSED

1. Visit https://digikey.com and confirm that a cookie notice is shown. It will appear either as a banner at the top, or as a popup along the bottom depending on window size.
2. Visit brave://settings/shields/content-filters and manually toggle the Easylist-Cookie List - Filter Obtrusive Cookie Notices entry to be enabled
3. Visit https://digikey.com and refresh page
4. Confirm that no cookie notice is shown.
5. Return to brave://settings/shields/content-filters and uncheck Easylist-Cookie List - Filter Obtrusive Cookie Notices
6. Return to https://digikey.com and reload the site
7. Confirmed that the cookie notice is shown again.

Step 1	Step 2	Step 4	Step 5	Step 7

[stephendonner]

Verification PASSED using

Brave	1.41.82 Chromium: 103.0.5060.66 (Official Build) beta (64-bit)
Revision	20b1569438a85e631d15e83eb355e3e326e5da6f-refs/branch-heads/5060@{#1066}
OS	Linux

Case 1:brave://adblock redirects to brave://settings/shields/filters - PASSED

1. Install 1.41.82
2. Launch brave
3. Load brave://adblock
4. Confirmed the redirect to brave://settings/shields/filters

Dark	Light

Case 2:brave://adblock redirects to brave://settings/shields/filters from Shields Panel - PASSED

1. Launch Brave
2. Load brave.com
3. Click to open Shields panel
4. Click Filter lists
5. Confirmed redirect to brave://settings/shields/filters

Filter lists	brave://settings/shields/filters

Case 3: brave://adblock redirects to brave://settings/shields/filters from context menu - PASSED

1. load brave.com
2. right click on the page to open context menu (Brave > Manage custom filters)
3. select Manage custom filters
4. confirmed the redirect to brave://settings/shields/filters in a new tab (or an existing one is present)

Step 2	Step 4

Case 4: Add Content Filtering section in brave://settings/shields - PASSED

1. Launch Brave
2. Load brave://settings/shields
3. Verified Content Filtering section is displayed
4. Content Filtering text/sub text match to (updated) Figma design
5. Click Content Filtering section
6. brave://settings/shields/content-filters page should load in the same tab.
7. Click back arrow next to Content filters on top of the page to return to brave://settings/shields

Step 3	Step 7

New Adblock page functionality

Case 5: Content Filtering Functionality in brave://settings/shields/filters - PASSED

1. Launch Brave
2. Load brave://settings/shields/filters
3. Content filters page is loaded successfully
4. Click Show List to expand the lists in the Content filtering
5. Refresh the page to collapse
6. Search for EasyList Dutch
7. EasyList Dutch filter should be displayed
8. Select it and refresh the page to see the selection is persisted
9. Uncheck to disable the filter.
10. Search with a keyword Easy and confirmed filtered list displayed

Step 3 & 4	Step 5	Step 6&7	Step 8	Step 10

Case 6: Add custom filter lists functionality - PASSED

1. Load brave://settings/shields/filters
2. Content filters page should be loaded
3. Navigate to Add custom filter lists section
4. Enter the URL in the input field https://github.com/raw/DandelionSprout/adfilt/master/Anti-'Custom%20cursors'%20List.txt
5. Click Add button
6. URL is added to Custom lists
7. It should display Last updated time when added
8. Click on ellipsis (3 dots) menu
9. click Update now to see the change
10. Click View Source
11. The list opens in a new tab
12. Click Unsubscribe
13. Entry should be removed
14. Add one more URL https://github.com/raw/reek/anti-adblock-killer/master/anti-adblock-killer-filters.txt
15. URL is displayed in the Custom filter list

Step 6	Step 8	Step 9	Step 10	Step 11	Step 12	Step 13	Step 15

Case 7: Custom Filters - Verify blocked page elements are added to the Custom Filters section and removing unblocks it - PASSED

1. Load nytimes.com
2. Right-click on the page to open context menu
3. Select Block element and click Create
4. Select Manage custom filters to redirect brave://settings/shields/filters in NTP
5. Custom Filters field displayed page elements
6. Delete the page elements from the field and click Save changes
7. Return to the website
8. Reload the page

Step 3	Step 4	Step 5	Step 7	Step 8

Case 8: Metadata from filter list subscriptions should be available in brave://settings/shields/content-filters - PASSED

This was tested as part of #17910.

Case 9: Regression: Verify Easylist-Cookie List - Filter Obtrusive Cookie Notices filter list works as expected - PASSED

1. Visit https://digikey.com and confirm that a cookie notice is shown. It will appear either as a banner at the top, or as a popup along the bottom depending on window size.
2. Visit brave://settings/shields/content-filters and manually toggle the Easylist-Cookie List - Filter Obtrusive Cookie Notices entry to be enabled
3. Visit https://digikey.com and refresh page
4. Confirm that no cookie notice is shown.
5. Return to brave://settings/shields/content-filters and uncheck Easylist-Cookie List - Filter Obtrusive Cookie Notices
6. Return to https://digikey.com and reload the site
7. Confirmed that the cookie notice is shown again.

Step 1	Step 2	Step 4	Step 5	Step 7