Element block picker shows blank page when the Dark Reader extension is installed/enabled

[Zelmanyr]

Hi,

When Dark Reader is installed on Brave, when a website is stylised by it and we want to block an element on the page with Right Click > Brave > Blocked element, normally we would see the website and can select an element, but now we see a blank page but still can select an element to block (but it is annoying since we don't really see the element due to the blank page).

Screenshot: https://i.imgur.com/flt4kZp.png

To note that, if Dark Reader is disabled, it works correctly.

Edit: Now that I tried more, it seems that it also have an issue on Github whether the Dark Reader extension is disabled or not. Yeah, I confirm that with all extensions disabled, the blocked element picker does not work on Github. Other websites might be affected too then.

Have a good day.

[antonok-edm]

(transferring issue to brave-browser, since it's not directly related to the adblock engine)

[antonok-edm]

Appears to be related to the CSS color-scheme property. Apparently the iframe is given a non-transparent black background in a dark color scheme, but a transparent background in a light color scheme. We could fix this by forcing a light colorscheme on the generated iframe element.

[stephendonner]

Verified PASSED

Brave	1.51.77 Chromium: 112.0.5615.49 (Official Build) beta (x86_64)
Revision	bd2a7bcb881c11e8cfe3078709382934e3916914-refs/branch-heads/5615@{#936}
OS	macOS Version 11.7.5 (Build 20G1225)

Case One: Dark mode - PASSED

Steps:

1. installed 1.51.77
2. launched Brave
3. opened brave://settings/appearance
4. changed Brave colors to Dark
5. loaded https://github.com/brave/brave-browser
6. context-clicked on the page
7. chose Brave > Block element
8. clicked Create
9. confirmed the selected region was hidden/blocked
10. opened brave://adblock
11. confirmed the adblock rules were present
12. removed them
13. clicked Save changes
14. reloaded github.com
15. confirmed the formerly-blocked region was now visible/unblocked

example	example	example	example	example	example	example

Case Two: #enable-force-dark mode - PASSED

Steps:

1. installed 1.51.77
2. launched Brave
3. opened brave://flags
4. set brave://flags/#enable-force-dark to Enabled
5. clicked Relaunch
6. loaded https://github.com/brave/brave-browser
7. context-clicked on a page element
8. chose Brave > Block element
9. clicked Create
10. confirmed the blocked region's content was hidden/blocked
11. opened brave://adblock
12. confirmed the filter-rules were present
13. removed them
14. clicked Saved changes
15. reloaded github.com
16. confirmed the previously-blocked content re-appeared

brave://flags	example	example	example	example	example	example