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

[rebron]

Description

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

• [x] New design for Ad Block page in brave://settings/shields/content-filters
• [x] Add Content Filtering section in brave://settings/shields
• [x] 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 https://github.com/brave/brave-browser/issues/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 https://github.com/brave/brave-browser/issues/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 6. Click `Content Filtering` section 7. `brave://settings/shields/content-filters` page should load in the same tab. 8. Click `back arrow` next to `Content filters` on top of the page to return to `brave://settings/shields` 9. 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 10. Select it and refresh the page to see the selection is persisted 11. Uncheck to disable the filter. 12. Search with a keyword `Easy` 13. 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://raw.githubusercontent.com/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 14. The list opens in a new tab 15. Click Unsubscribe 16. Entry should be removed 17. Add one more URL `https://raw.githubusercontent.com/reek/anti-adblock-killer/master/anti-adblock-killer-filters.txt` 18. 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://raw.githubusercontent.com/reek/anti-adblock-killer/master/anti-adblock-killer-filters.txt` 11. Visit `brave://settings/shields/content-filters` 12. Paste above URL in the ` Add custom filter lists` input field 13. Click `Add` button 14. A new list subscription is created and URL is added to `Custom lists` area and shows `Last Updated` time 15. Visit `brave://local-state` 16. Search for `AakList (Anti-Adblock Killer)` 17. 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. 6. Return to `brave://settings/shields/content-filters` and uncheck `Easylist-Cookie List - Filter Obtrusive Cookie Notices` 7. Return to `https://digikey.com` and reload the site 9. 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://raw.githubusercontent.com/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://raw.githubusercontent.com/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: https://github.com/brave/brave-browser/issues/17910#issuecomment-1155703659

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. 6. Return to `brave://settings/shields/content-filters` and uncheck `Easylist-Cookie List - Filter Obtrusive Cookie Notices` 7. Return to `https://digikey.com` and reload the site 9. 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://raw.githubusercontent.com/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://raw.githubusercontent.com/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. 6. Return to `brave://settings/shields/content-filters` and uncheck `Easylist-Cookie List - Filter Obtrusive Cookie Notices` 7. Return to `https://digikey.com` and reload the site 9. Confirmed that the cookie notice is shown again. Step 1|Step 2|Step 4|Step 5|Step 7 ---|---|---|---|--- | | | |