General Feedback

[Snapy]

I like the UI enhancements this style brings although I think some changes are not optimal.
You should use another colour (not green) for the enabled state of the icon because green is associated with allow in uBlock Origin (it's why the power button is blue now : it used to be green but users where confused).
If you could hide the total count of blocked requests ("since install") it would be great and also make the power button bigger (but still not too big).

[Gitoffthelawn]

That's FANTASTIC feedback. Thank you!

I promise I will give every word you mentioned some serious thought. I'll post follow-up questions here to you as they arise so we can discuss them.

The first issue you mentioned is the color of the icon. For the version of uBlock-Deluxe that is available today, you can choose to use only userContent.css and not userChrome.css; doing so will revert the icon without any issues. Note that those instructions could change in future versions if I add more to userChrome.css.

But let's talk about the real issue: that you don't think the color is the best choice. I think the rationale you provided is spot on and very valid. That rationale is also the reason why the default color choice is not ideal. I also didn't want to use yellow because it has the same problems as red and green.

So why did I choose green? I think of green as "go" or "enabled". IOW, the functionality of uBlock is enabled. Now, with a filtering extension, that can get a bit confusing. Does green mean "enabled" for the content or for the filtering, the user might wonder. It's a very valid issue.

Part of the choice to make it green is that I have several extensions that perform various types of filtering. All those other extensions use green to indicate they are enabled, and red or gray to indicate they are disabled. I wanted a consistent metaphor, so I chose green for uBlock-Deluxe. That doesn't help users outside of myself, but I initially wrote this only for myself, so the logic and consistency made good sense.

Also, once I removed all the red from the interface and replaced it with green, I felt the Firefox interface was more calm and relaxing. That's a personal association with a specific color, but I really find it pleasant having more green in the toolbar. That was part of my personal rationale as well.

Finally, I have a blue button in the toolbar that can cause data loss if pressed at the wrong time. Although I could change the color of that button, I didn't want uBlock-Deluxe to match that color. I've had that button present for a long time, and with plenty of reinforcement, I'm now trained myself very well not to touch the blue toolbar button unless appropriate.

As you can see, quite a bit of thought went into the color choice, which works well for my personal needs. But since I posted this online, I'm very open to hearing suggestions from others. What color do you think would be best, and why?

[Snapy]

First, thanks for answering and taking into account my ideas.
I totally understand your point of view on the choices.
I think brown for enabled and light colour (white/grey) for disabled could be good. Brown because it is closer to the red colour users are used to ; white/grey because no/light colours are often linked to inactive or disabled state.
What about the other suggestions ?

[Gitoffthelawn]

Interesting ideas and reasons. My concern with brown is primarily that it is similar to yellow, and I don't want it to look like an indeterminate state. It's also not a bold color, so it won't be as noticeable if it is turned off. That said, I think it's an interesting option, and I'll definitely consider it.

As to your other suggestions, you mentioned making the power button larger. Do you use that button very often? I have never had a need to click it (outside of testing) and so I made it much smaller. When a site is broken, I determine what is causing it to break and create a new filter or rule. Disabling uBlock for an entire domain (and everything called when visiting that domain) seems like overkill in almost every case.

The power button is also very deceptive; it implies that it disables uBlock, but it doesn't do that. At most, it creates a whitelist entry. Furthermore, if a user presses that button while on a site hoping it will turn off uBlock, and then navigates to another site and presses it again (hoping to turn it back on), they will now have 2 domains completely unblocked when their intent was to temporarily disable and then re-enable uBlock. The design is poor, but without changing the underlying functionality, I can't fix it. Given the limitations of CSS overlays, I determined the best thing to do was to make it much less prominent.

Perhaps you have a common use the power button which would provide another perspective... just let me know... I'm very open to learning new uses and modifying the UI accordingly.

The other item you mentioned was the 'since installed' tally. I agree it's not essential. As such, I de-emphasized it by significantly reducing its font size. I thought about getting rid of it completely, but I find the statistic to be a little interesting. I think moving it to the uBlock dashboard would be a wise choice, but I would have to create and publish a whole executable fork to do that. If you have any ideas to further de-emphasize it, please let me know, as I'm interested.

Finally, as you can see, I'm very open to ideas and discussing them. Feel free to post any other ideas or feedback. I will do my best to respond to everything. Sometimes I turn off all technology for a while, so if I don't reply, I'm just taking a hiatus.

[Snapy]

@Gitoffthelawn Thanks again for the reply
Well the default colours of the icon looks fine for me : a colour (maybe chosen by the user) for enabled and no colour for disabled as it is currently.
The power button looks fine actually but as you pointed out it may confuse some users who think it will be entirely disabled so, if possible, you could change its appearence (e.g like the toggle in Adguard ; you would also be able to have red/green for disabled/enabled) so it is less confusing.Or you could change the tooltip displayed when hovering the icon to show the state of the addon (Bluhell Firewall does it).
I don't know what kind of new uses there could be for the power button and what you mean by it.
For the total count it could be displayed as a tooltip when hovering over a down arrow (first choice, second choice or ↓) located at the left of the page counter (which could be moved a bit to the left and both elements centered). That way it says informational and is easy to access.
I don't know if any of this is possible.
Also I really appreciate the black frames highlighting the backup/restore and the switches.

Cheers,
Snapy

[hairycactus]

Regarding visual accessibility issues, how do the Red vs. Green rows in the uBlock-Deluxe CSS overlay appear to a user with R-G colour-blindness ? If not mistaken, both R & G will both seem like the same shade of Dirty Greenish-Brown/ Dirty Brownish ?

Eg. See these simulations:-

• Green Leaves & Red Berries
• Peas & More Peas

As such, with reference to the uBlock-Deluxe sample screenshot at this comment, I suppose the Pastel Red & Pastel Green rows at the bottom will closely resemble the Pastel Dirty Brown github.com row, while the higher rows would simply look like Paler Pastel Dirty Brown to a user with R-G colour-blindness ? In other words, the whole LHS panel might look Dirty Brownish with the CSS overlay ...

tooltip displayed when hovering the icon to show the state of the addon

I still can't activate the uBlock-Deluxe CSS overlay in my Firefox, but +1 to having tooltips for the various icons. The lack of tooltips in uBlock Origin does make it somewhat less accessible & make me hesitant to click on them. In comparison, uBlock (which has fewer icons due to removal of per-site switches) has natively implemented UI tooltips which I find useful.

[Snapy]

@hairycactus You can have tooltips in the popup by disabling "advanced user mode".
What is your method for using the CSS in Firefox ?

[hairycactus]

You can have tooltips in the menu by disabling "advanced user mode".

• uBlock Origin: I don't see any UI tooltips, regardless of whether "I am an advanced user" is enabled or disabled.
• uBlock: The UI tooltips appear upon mouseover, regardless of whether"I am an advanced user" option is enabled or disabled.

What is your method for using the CSS in Firefox ?

I'm having some issues getting it to work, please see #3

[Gitoffthelawn]

@hairycactus I created issue #3 to help you. Regarding red-green colorblindness, that is a very valid issue. I've created issue #4 to address it.

[Gitoffthelawn]

@Snapy New release of uBlock Deluxe is available!