Hello, I want to remove a banner on a website page.
This issue is currently known and being fixed:
opened 01:52AM - 01 Apr 25 UTC
closed 01:36PM - 23 Jun 25 UTC
enhancement
design
design/needs-mock-up
priority/P3
QA/Yes
release-notes/include
feature/shields/adblock/block-elements
OS/Android
OS/Desktop
### Description
Elements beneath block element panel are not selectable, elements having fixed css and all
Secondly elements that appear on event and fade away after some seconds its impossiblen to select them
Hhave a option once block element dialog appear add button to it that temporarily disables it and allow site interactions
So we can quickly make such elememt appear and enaboe block dialog and block
also
https://chromewebstore.google.com/detail/click-to-remove-element/jcgpghgjhhahcefnfpbncdmhhddedhnk?pli=1
look how it looks and works better than brave
maintains state, allows quick restore and deletion of multiple elements, export import + restore individual elemnts
@bsclifton
### Steps to reproduce
elements at bottom of page that beneath block element panel are not visible
### Actual result
non visible fixed css bottom
### Expected result
Let panel be floating so move to top.and select bottom elements
### Reproduces how often
Easily reproduced
### Brave version
Brave 1.76.81, Chromium 134.0.6998.166
### Device
- Brand/model:
- Android version: 10
### Channel information
- [x] release (stable)
- [x] beta
- [x] nightly
### Reproducibility
- [x] with Brave Shields disabled
- [x] with Brave Rewards disabled
- [x] in the latest version of Chrome
### Miscellaneous information
_No response_
master ← 45104-its-hard-to-block-elements-behind-the-block-elements-dialog
opened 09:26PM - 30 May 25 UTC
Resolves https://github.com/brave/brave-browser/issues/45104
Figma: https://w… ww.figma.com/design/Fl490UGSSLApLDvODj4aJI/Android-Shields?node-id=309-13545&t=jButhLeqOrM0sIfh-4
https://www.figma.com/design/eu4YqTTpawEK44ovnhEfbu/Desktop-Block-Element?node-id=3600-3085&t=XrKjax4leVoto2Be-0
Implemented new design for the Element picker.
Here is video how it works:
https://github.com/user-attachments/assets/8558a8f4-0a2a-4037-9c90-f79093ad4bcd
https://github.com/user-attachments/assets/c9968484-5b7a-47ce-b478-c3cb0d08f597
# Test Plan
#### Desktop:
1. Open Brave browser.
2. Open `webpage` you want to block any HTML element.
3. Click right button on the page.
4. Select `Block element` from the context menu.
5. Make sure that the element picker appears transparent and the button: `Select element you want to block` color is gray.
6. Click the page element you want to block.
7. Element picker card's is no longer opaque and `Block Element` button is active.
8. Make sure that Element picker card has a title bar, which contains title, and two buttons: minimize and close.
9. Click the minimize button to make sure that card is minimized.
10. Click on minimized card to return it to previous state.
11. Click the minimize button to make sure that card is minimized.
12. Select any element on the page to block and make sure that Element picket returns from the minimized state.
13. Click on close button to close the card.
#### Android:
1. Open Android Brave browser
2. Open `webpage` you want to block any HTML element.
3. Open `Brave Shields menu` -> `Advanced controls`
4. Click `Block elements` and make sure that `Element Picker` appears
5. Make sure that the button: `Select element you want to block` color is gray.
6. Make sure that Element picker card has a title bar, which is draggable and allows you to move it down to hide the card and then move it up to show.
7. Move it down to hide the card and click the element on the page to block.
8. Make sure that Element picker card returns from the hidden state.
1 Like
system
September 5, 2025, 6:46pm
3
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
