Element Picker on Android

[Krishna-art-dev]

Does brave browser on Android gonna support element picker like ubo it will be a great help

[ChowMein47]

Does brave browser on Android gonna support element picker like ubo it will be a great help

I think it's not

[Krishna-art-dev]

Does brave browser on Android gonna support element picker like ubo it will be a great help

I think it's not

Why?

[antonok-edm]

(moved to brave-browser, since this is not related to the rule matching engine)

[Krishna-art-dev]

Any progress on this?

[atuchin-m]

@rebron @ShivanKaul
I've tried to enable the feature for Android. The engine itself is cross-platform and works well.
There are 2 questions:

1. how we should trigger the feature? The suggested way is to implement a new app menu item (i.e. near to Translate..)

2. we need to adopt the picker UI to support the mobile device. The main issue that it overlaps a large part of the bottom page area. It's impossible to select elements under the UI.

The picker UI now has 2 states: when you're selecting an element (semi-transparent) and when you've selected one (visible). The simplest fix is to make UI invisible in the first mode.

The screencast how it works now: https://github.com/user-attachments/assets/7292f411-820f-4575-96b2-120b39f96f41

[atuchin-m]

@Krishna-art-dev by modifying the source code and building the binary.

There is no way to enable it for end users until we prepare and merge the changes in the code.

[Krishna-art-dev]

@atuchin-m thanks for the information, please add this feature in brave

[timchilds]

how we should trigger the feature? The suggested way is to implement a new app menu item (i.e. near to Translate..)

@atuchin-m @ShivanKaul makes sense, but only if this feature is behind a flag and disabled by default. It does not seem like something that the average Brave user will want on the (already cluttered) main menu. cc @rebron

[ShivanKaul]

but only if this feature is behind a flag and disabled by default

We definitely don't want a feature that we plan to always keep disabled by default. I don't have a good sense for how cluttered the menu currently is on Android but do we not have space for a new item (albeit one that's mainly for more power users)?

[ShivanKaul]

@atuchin-m how hard would it be to change the UI for this? What if we restrict this to hiding just one element at a time and not showing the picker UI? I'm thinking the following experience:

1. You select "Block element" via menu
2. Tap on an element on the page
3. That element gets highlighted (like right now) and blurred with just a button on top saying "Block?"
4. If the user presses Block, then we block the element.
   Ideally, we would also have a way for the user to see which elements they're blocking on the current page.

[atuchin-m]

It does not seem like something that the average Brave user will want on the (already cluttered) main menu

@timchilds If you believe that the average Brave user doesn't want it then there is no sense in spending time to implement and to support such "optional" features.

[atuchin-m]

how hard would it be to change the UI for this?

It will work, but the main issue that you can't tune the selector to add. There is no way to block a one particular element, it's alway about using a selector. Cutting ability to tune is a major limitation for the feature.
WDYT about adding a small button to switch bottom/top position of UI.?

Another thing that we need to improve is the adblock settings for Android to manage the added rules. Otherwise, it's just no way to delete them.

Optionally, we can also make the pref syncable. That way the rules you added on your desktop device will be used on a mobile.

[timchilds]

I don't have a good sense for how cluttered the menu currently is on Android but do we not have space for a new item (albeit one that's mainly for more power users)?

@ShivanKaul on a web page, the main menu currently has 17 items. Not sure we want to increase that further with a power user feature.

We definitely don't want a feature that we plan to always keep disabled by default.

We could make it a user setting? Disabled by default.

cc @chrismore

[Krishna-art-dev]

What if you guys add that feature in brave shield?

[Krishna-art-dev]

Somewhere here, then "ads and other creepy things blocked" will be in center and element picker will be in left side, after blocked ad count

This gonna make that text be in center as now it's a bit off centred ( slightly to the left ), adding that element picker would gonna make that menu look well balanced on both sides

[atuchin-m]

Here is an example branch to activate content picker for android:
https://github.com/brave/brave-core/pull/new/content-picker-android-testing

@ShivanKaul
The topic was discussed in slack for some time, but here we need to fix the further steps.

The plan the way I see it:

• Create a UI to activate the feature for Android (a design
• Modify the TypeScript code and adjust the layout for mobile devices (a product description needed)
• Implement additional improvements, such as capturing the menu coordinates and syncing user preferences.

Also, we already have a submenu in settings to manage the custom rules.

[issuant]

@vadimstruts Can a preview button for the block, like uBlock Origin has, be added? In your brave/brave-core#26725 (comment) video, there is only a block element button and you cannot see the effect before committing to it.

[hffvld]

Verified on Galaxy Z Fold 6 using version(s):

Device/OS: Galaxy Z Fold 6 / q6quew-user 14 UP1A.231005.007 release-keys
Brave build: 1.75.115
Chromium: 132.0.6834.57 (Official Build) canary (64-bit) 

Filed follow-up issue #43038 and 43040

STEPS:

1. Follow the STR/TP from Element Picker on Android brave-core#26725 (comment)
2. Verify

ACTUAL RESULTS:

• Verified that Brave flag #block-element-feature is OFF by default and Block element is unavailable in Brave Shields.
• Verified that Block element is shown in Brave Shields after enabling Brave flag #block-element-feature.
• Verified that the user can block distracting elements on the page, and Xpath of the blocked element is added to the Custom filters list.

---

Flag is OFF by default	Flag is manually ON

2024-12-23_12-30-18.mp4