Color-blind mode doesn't apply to the "My rules" pane in settings

squeak9 commented 4 years ago

Prerequisites

[x] I verified that this is not a filter issue
- Filter issues MUST be reported at filter issue tracker
[x] This is not a support issue or a question
- Support issues and questions are handled at /r/uBlockOrigin
[x] I performed a cursory search of the issue tracker to avoid opening a duplicate issue
- Your issue may already be reported.
I tried to reproduce the issue when...
- [x] uBlock Origin is the only extension
- [x] uBlock Origin with default lists/settings
- [x] using a new, unmodified browser profile
[x] I am running the latest version of uBlock Origin
[x] I checked the documentation to understand that the issue I report is not a normal behavior

Description

The color-blind friendly setting makes the per site switches blue and yellow which is great but at some point the My Rules pane in the dashboard got colors added to them and they are still red, green and grey with that setting enabled.

PS: Maybe the static rule colors should change also now that I think about it, that might be another issue though. Or let users enter whatever font color they wish?

A specific URL where the issue occurs

No url.

Steps to Reproduce

Enable the Color-blind friendly setting.
Enable the I am an advanced user setting.
Go to My Rules and enter some block and allow rules

Expected behavior:

The rules should use the colors that the color blind settings use for the pop-up menu. (blue and yellow-ish)

Actual behavior:

The block and allow part of the rules are red and green.

Your environment

uBlock Origin version: v1.30.4
Browser Name and version: Firefox 81.0.2 (64-bit)
Operating System and version: Windows 10

gorhill commented 4 years ago

The issue I face is that the yellowish color wouldn't be suitable on a white background. The fix will have to be contributed by someone who knows better about color blindness, I need to be given the proper colors for when it's to color text on a white background.

squeak9 commented 4 years ago

Now that I look around GitHub I realize what I really want isn't colored fonts but colored text backgrounds! Look at that big green "Open" indicator just above this report, or all the issue labels in the issue list. So readable and easy to tell apart. But that's just me, other people might hate it. It would be way more readable though, that's for sure.

Speaking of font colors, letting the users enter their own hex values would be a decent workaround since people have different colorblindness.

The real ideal UI here would one that still is readable even if you're viewing it in greyscale. If you wanna try to look through the eyes of all color deficient users then enable the grayscale color filter in the windows 10 settings. That might be hard for static rules but maybe not dynamic rules?

gorhill commented 4 years ago

You can assign your own styles through the advanced setting uiStyles, for example you can use --df-block-ink:blue;--df-allow-ink:orange; to modify the block/allow colors in the My rules pane. Note that this works only in the latest dev build because:

I just fixed a regression when I tried the above to share an example;
The variable names for syntax highlight styles in the My rules pane was added in this dev cycle.

squeak9 commented 4 years ago

Here is a very quick mockup based on the current yellow and blue colors:

ublockcolors2

and here it is in grayscale as a test: ublockcolors2grey

squeak9 commented 4 years ago

Own styles sound great! I will check it out. I hope you can enter hexcodes as colors.

gorhill commented 4 years ago

You can enter any value that the browser will accept, uBO just passes the entered string as is.

squeak9 commented 4 years ago

Oh this is great! Thanks for adding this.

This is a fantastic workaround to this issue for sure, people can do what they want. I would never have figured out that you could do this without your example though.

The default colorblind settings stuff is still a problem though but I think colored text backgrounds instead of fonts might be a decent fix. The dark theme really makes current colored fonts way more visible though, at least for me.

EDIT: Just changing the default colorblind theme fonts to to blue and orange might also be the quickest fix but backgrounds would also be real cool.

Grossdm commented 2 years ago

@squeak9 Would you please share the settings that worked for you? TIA

squeak9 commented 2 years ago

@Grossdm I just did uiStyles --df-block-ink:blue;--df-allow-ink:orange like it was suggested above. It works for me.

Blue might make the text a bit hard to read in dark theme but I know what it means at this point. A lighter blue could be better but i don't know how to word that.

gwarser commented 2 years ago

@squeak9

uBlockOrigin / uBlock-issues