Change toolbar icon color to make activation status more obvious

[horsebatterystaple]

Hi guys, it would be great if the toolbar icon has some color in it while smart referer is enabled. Right now I can't really distinguish the (grey) enabled icon from the (light grey) disabled one. After disabling it once on a page that didn't work I missed re-enabling it. The current status should be more obvious.

Note: I work on a HiDPI screen, so the toolbar is quiet small anyway.

Cheers! hbs

[ntninja]

Thanks for your feedback! The current icon was more of a prove of concept anyways. Before I added the toolbar icon Smart Referer did not have any icon at all and that was the best I came up with at the time. So if you have any specific ideas on how it could be improved (which specific colors?) or some totally different icon I'm all ears. :slightly_smiling_face:

[scribblemaniac]

A simple green component could be used to show that it is enabled like this:

But to be honest I think the current logo is way to busy with all of the details of the earth. That combined with the low contrast (gray on gray) makes the link symbol almost impossible to see in the small size that it appears in the toolbar. Maybe some combination of the link logo and a shield (very common for the logos of privacy-oriented services) would work better. Here are a few simplified designs, let me know what you think of them:

Idea 1

Idea 2

[horsebatterystaple]

I quiet like idea your idea no 1! Why not placing that inverted (white) inside of a dark-green square with rounded edges?

[ntninja]

@scribblemaniac: Thanks for providing those design PoCs! They're awesome! I particularily like idea number 2, since the icon is pretty much self-explanatory (at least if one is familiar with the hyperlink icon in the center). Do have an SVG of that? Which colors would you recommend for the on/off toolbar icon and the main add-on icon?

Thanks a lot for providing these! :slightly_smiling_face:

[scribblemaniac]

@alexander255 Yes, here are the SVGs: Download

Feel free to edit to your heart's content. I have not given any thought to coloring yet, but I think that they could definitely use some. Making the background green/red or green/gray for active/disabled is a simple way to display the status. Alternatively there could be a small circle in the corner of the toolbar icon that would change color.

@horsebatterystaple I feel like having a solid background square with rounded edges would make it look more like a mobile app logo, or at least that's what I'm envisioning from what you describe. The SVG for that icon is available for download at the top of this post if you are interested in experimenting with it.

[ghost]

With 16px icons the image has to be very simple and recognizable. I already modify several buttons because, given the fact I have 32 of them on the toolbars, not only must the on/off status be recognizable but also one button be clearly different from others.

I use userChrome.css in order to redesign some icons but the trick doesn't work with Smart Referer for a reason I ignore:

/* Smart Referer */
#smart-referer_meh_paranoid_pk-browser-action .toolbarbutton-icon {list-style-image: url(UserData/SmartReferer.png) !important;}
#smart-referer_meh_paranoid_pk-browser-action[tooltiptext^="Smart Referer – Disabled"] .toolbarbutton-icon {opacity: 0.25 !important;}

This works with all toolbar buttons (using the tooltiptext when applicable) but not with Smart Referer! The icon gets replaced ok (at start) but after that unable to change its opacity when disabled, making the trick unusable...

Anyway, here's the icon I'd use if I could: With opacity:0.25 when disabled.

As it is now I have to frown or improve my brains memory to distinguish the icon from others. It takes place on my toolbar next to Cookie Autodelete, both are round, grayish-greenish ....

More than cosmetic, IMO.

[ntninja]

@mazesy: I don't usually give support for these kind of hacks, but have you tried if it works with #smart-referer_meh_paranoid_pk-browser-action[tooltiptext$="Disabled"] .toolbarbutton-icon for the second matcher? Maybe it doesn't like the unicode dash?

Regarding the icon: I won't use it upstream, it's too ugly and informative for modern standards, imho.

@horsebatterystaple: I don't dislike the rounded edges idea, but non of the other extensions do that so I won't do that to not make my toolbar more inconsistant than it already is.

@scribblemaniac: Thank you for these! I think I'll copy the design of ZenMate for the On/Off thing:

1. On is green
2. Off is gray
3. Extension logo is blue

It's simple and easy to read even when small. I'll give you credits for the icon of course! :slightly_smiling_face:

[ghost]

@alexander255 ,

I've mistaken above (typo) when I wrote, #smart-referer_meh_paranoid_pk-browser-action[tooltiptext^="Smart Referer – Disabled"] .toolbarbutton-icon {opacity: 0.25 !important;}

In fact the second line (that one) is of course always similar to the first, and we have [tooltiptext="Smart Referer – Disabled"] or whatever the button's tooltiptext when applicable.

I successfully proceed this way as I had mentioned for several toolbar buttons, it just doesn't work with Smart Referer.

More generally, when tou write,

Regarding the icon: I won't use it upstream, it's too ugly and informative for modern standards, imho.

I wish to point out that unfortunately aesthetic is an argument nowadays which seems to prevail should it be at the price of clarity, easiness of recognition. I'm stunned when aiming beauty of a 16px wide icon costs the difficulty of perceiving the very purpose of the word icon (image of, symbol) : the Mona Lisa on a 256px area is the same mess as a whatever piece of modern craps reduced to the same size. Hence efficiency, dark/lite contrast, basic symbol as close as possible to the meaning of the button, recognizable. But this is a debate of its own. What I do know is that there is no elegance without comfort.

Does a pilot complain because the cockpit's buttons are ugly? He'd complain if they weren't easily, quickly recognizable and the setting they display (on/off with our toolbar buttons) not immediately identified.

Hereafter my above icon replacing that of an extension similar to Smart Referer called Referrer Switch (less complete than Smart Referer, no blacklist but functional even if requiring systematic manual on/off when sites require the referer because of no list). It's native toolbar button icon is even worse than that of Smart Referer (yes, it's possible!).

1- Referer is disabled (I've chosen full opacity because my logic is to blur what is opposite to my default preference = no referer):

2- Referer is enabled

I immediately spot my Referer toolbar button, I immediately see if it's on or off. I don't care if it's ugly, I just want information, precise, quick.

[ntninja]

@mazesy: I agree that it has a certain functional elegance (especially when all icons are in this same style), but it's not a sane default unfortunately, so I'll pass. Happy that it works for you now!

I now finished picking colors for the icons: When on (default) the icon uses the same colors as Mozilla's theme, when off it turns gray and the round parts of the hyperlink-icon are dropped so that the remaining middle part looks like a minus sign. I also created a custom 16x16 rastor design because the SVGs wouldn't look good when scaled that much: The original version of this had more details on the shield, but this caused the hyperlink-part to look like a pair of eyes: I think the new icon looks OK now! :slightly_smiling_face:

[ghost]

The toolbar icon of latest Smart Referer version 0.2.7 (idea 2 above) is excellent, deserves an A+ :=) Simple, easy to spot, on/off status clearly displayed. I admit it's as efficient as mine with the extra touch of being pleasant to the eye (both!).

[ntninja]

Thanks it took me (not very experienced with graphic design stuff) around 6–8 hours to make this (lots of experimentation and reducing the design further each time). Glad I'm not the only one happy with the result. :slightly_smiling_face:

I think we can close this issue now. :grin:

[vertigo220]

While I agree the new icon is better, I still think it should be green when enabled, instead of gray and gray. It still looks disabled when it's not, and I'm constantly checking it to see its status.

[ghost]

I've always believed that toolbar icons should have sharp colors always distant from gray, sharp blue, red, yellow (One FF and two 00); doing so allows them being rendered with a .25 opacity still visible and yet quite different than with opacity=1 --- Need I say I dislike (hate, grrr!) gray. Pastel, nuanced colors are peaceful and can participate to a painter's talent, but for an icon they're not suitable.

Nevertheless the new icon is specific, nicely designed and on/off status easily recognizable (even if 0000FF and 0000ff-opacity 0.25 is the the best. Because I say so :=)

[vertigo220]

I agree in my dislike of using gray for the icons, and I was initially considering suggesting making it green/red for on/off, but I figured green/gray would still be a huge improvement and easier to do, not to mention hopefully more likely to be done. As it currently is (and again, it is better than it was), there's little difference between on and off, which not only makes it harder to tell at a glance, but you have to remember that on has the extra couple parts (the square brackets). Without remembering this, you don't know if the icon it's showing is the on one or the off one.

[meh]

Green and gray might be bad for people who are color blind tho.

I really like the icon by the way.

[vertigo220]

How so? "Color-blind" (a misnomer; color-deficient is more accurate) simply means confusion of colors, such as red and green. So a green/red icon might be problematic, but a green/gray one wouldn't be. They could still see that one is colored, and one isn't.

[ntninja]

I originally had it green for on, but that made it way too visible in its default state. Unlike most other on/off icons I compared with “on” is the uninteresting state here and “off” the interesting one, meaning that it is the off state that should somehow be highlighted; doing so however always made the off state look like “on” except for when coloring it dark red which tended to give bad contrast in dark themes (and I can't have another light and a dark icon for the “off” state sadly).

Currently the code will attempt to recolor the icon based on the current theme, but that will only work in the following cases (Source):

• when a static theme is installed
• when a dynamic theme calls theme.update() or theme.reset()
• when a theme gets uninstalled. (←Unless when it doesn't … grrr)

Notably the above list does not include:

• Lightweight themes (the only category currently available on AMO)
  • Mozilla promised that they will start converting all Lightweight Themes to static themes soon™, so this should fix itself
• System/Preinstalled themes
  • Will likely be fixed at some point with https://bugzilla.mozilla.org/show_bug.cgi?id=1386004

Making the uncolored icons plain black/white should resolve most of the current visibility problems at the expanse of not looking as good on the default themes. Do people here think this would help them see the enabled state more clearly?

You can test different color combinations using the Theme Font & Size Changer add-on, btw.

[vertigo220]

I understand what you're saying regarding the off state being the important one to be aware of (knowing that your protection is disabled) and the implications of that. It's like saying that getting a notification that your antivirus has been disabled is important, but getting a notification that it's working would be ridiculous. I get that. But I keep my AV icon always visible in the tray, so I know at a glance that it's working properly and, likewise, I like addon icons to reflect their status at a glance, so I know immediately if they're active or not. And as you said, making it gray and red would be strange, since it's atypical for an icon to be more prominent in the off state. So making it green while active would, to me, be the same as having the AV icon visible in the tray, showing that I'm protected. I don't think it's "too visible," personally.

Here's a screenshot of the section of my addon bar that contains all my security/privacy addons (the ones that require regular interaction or that I might disable from time to time, and therefore warrant an icon):

Aside from Privacy Settings (the other shield icon), which will be going away soon, all of them are very clear about whether they're on or off with the exception of this one and Request Control. Making this one green wouldn't make it stand out too much, it would make it like all the others. As it is, it's the one that sticks out a lot.

What about an option to use colored or B&W icons?

[ghost]

Indeed. As I see it on/off doesn't concern the extension's effect but the extension's activity. Hence,

• if an extension is active then the icon is shown as ON even if the effect is that of deactivating;
• if an extension is inactive then te icon is OFF even if the effect is that of activating.

This way of reasoning, this logic is not a standard, unfortunately, which does leads occasionally to inversions.

This is the logic of Smart Referer and I believe it is the correct way of proceeding.

Of course there's also the possibility of adding a tooltiptext to make things clear. Some extensions do that and it can come in handy.

[scribblemaniac]

Of course there's also the possibility of adding a tooltiptext to make things clear. Some extensions do that and it can come in handy.

There is a tooltip when you hover over the icon that will say "Smart Referrer – Disabled" or "Smart Referrer – Enabled".

Personally this topic doesn't really matter to me because I never keep Smart Referrer in my icon bar, it's just always on. However when I do add it, my theme happens to be almost the worst possible theme for the current icon design:

Enabled	Disabled

As you can see the disabled is almost completely invisible. To the right are the default theme colors for a finished download and a basic builtin icon. Is there any way we can get those colors dynamically and apply them to the icon? I don't know if it's just a light/dark thing or if each theme has it's own colors for these icons, but ideally I think it should match with whatever Firefox is doing with its icons. Having green for active wouldn't be bad either in my opinion, you can always use a darker or less saturated green if it stands out too much.

As for color-blindness, it does seem there are people who have green-weakness or green-blindness, and in rarer cases full on monochromatism, all of which would make it more difficult to tell the difference between green and gray, but this really isn't an issue because the inner symbol also indicates the state and we could use a green with a different brightness than the disabled state. Relying on colors is a bad idea for accessibility reasons, but that doesn't mean they shouldn't be used at all.

[vertigo220]

If someone is dichromatic, i.e. protanopia, deuteranopia, or tritanopia ("red-blind," "green-blind," or "blue-blind," respectively) they can still differentiate green/red or other combinations (they'll see one as the color and one as gray). If they're a deuteranope (~1% of males and ~0.01% of females, so not exactly a large base of affected users), then yes, the green icon will look gray and they'll lose that cue about the add-on's status, but that's no reason to not have it for those that aren't, and they'll still have the other indicators (different look, tooltip). Of course, if you're still concerned about people with color vision deficiencies, it could be blue, since tritanopia affects only ~0.008% of males and females. If they're an anomalous trichromat, then the colors are just shifted, so, depending on the type, reds will appear more greenish or blue-greenish, greens will appear more reddish, and blues will appear more greenish or red-greenish. As for monochromats, yes, things get trickier, but that's extremely rare.

[ghost]

@vertigo220 details what I ignore by the name but experience myself. Perhaps this explains my very post on this thread when emphasizing on color blue.

Thare's one way to easily differentiate two states of an extension based on 100% efficiency and 0% aestheticism, which is to add a diagonal on the icon when the extension is off. Radical. But ugly.

Moreover the icon has to deal with lite and dark backgrounds. The sort of problematic to annoy any developer who has worked hard on the code and when he thinks it's all done faces the ... toolbar icon.

A challenge. As it is now Smart Referer's icon and on/off versions seems to me more than acceptable. But the debate is interesting and I appreciate us digging into it. I've tested so many extensions and I dare say that many had icons not at all in conformity with the quality of their code, as if the developer considered this last step as superfluous. It has its importance and I appreciate the fact @alexander255 gave an echo, took into consideration and even modified his extension's toolbar icon. I really think it's a good work, even with my color recognition problem.

[scribblemaniac]

A diagonal isn't all that bad of an idea. We already have the link changing when disabled, but why not take it a step further with something like this:

[ghost]

@scribblemaniac seems to me the diagonal has to be icon-wide (one corner to the other) because otherwise it could appear as part of the design, such as in your example if you don't mind me saying so. From 0,0 to 16,16 for instance with a 2px thick line itself in contrast with the design's color : it should really step out to be understood as a negation, IMO

[ntninja]

Thanks for all the comments everybody! I picked out stuff that I though needs commentary or an answer from my side.

@scribblemaniac: … However when I do add it, my theme happens to be almost the worst possible theme for the current icon design: […] As you can see the disabled is almost completely invisible.

Wow. I never considered the off icon to possibly be problematic… With the current design that almost unfixable I fear.

@scribblemaniac: Is there any way we can get those colors dynamically and apply them to the icon?

The extension already does this, but the API it uses for this supports neither full themes nor lightweight themes (and yours is almost certainly of the later kind). That's what I tried to say in my last comment. Fixes for both of these theme types are appearently in development but there is no ETA of course. Until then I can only adapt to installed “static themes” (pratically non-existant currently) and “dynamic themes” (the add-on linked in my last comment is the only example of this that I'm currently aware of). Other than that I can also set different icons for dark and light themes – but only for one set of states (either disabled or enabled) and only because I'm abusing some other piece of functionality that was introduced with FF59 (instead of changing the current icon to the icon of the enabled state, I instead “reset” the icon to the “default” icon declared in the manifest that may then contain different icons for dark and light themes).

TL;DR: Currently not in most cases, no. But likely in the future.

@scribblemaniac: I don't know if it's just a light/dark thing or if each theme has it's own colors for these icons

Each theme can define their own colors, that's why the icons look good on default themes but not necessarily so on others.

@scribblemaniac: ideally I think it should match with whatever Firefox is doing with its icons

… and many people agree on Mozilla's bug tracker, but exposing the context-fill SVG function they're currently using for their own code (including Mozilla-sponsored external add-ons!!) won't happen because “it's a bad API and we don't want other people using it”. There is another approach (exposing CSS variables to embedded SVGs) currently in planning, but again, there nothing usable there yet and no ETA.

TL;DR: I tried, but currently that's just not possible…

@scribblemaniac: Having green for active wouldn't be bad either in my opinion, you can always use a darker or less saturated green if it stands out too much.

Except that it will always look awful on some themes with the current sets of APIs. On some themes (think gras or leaves background) it will basically disappear. With others it will horribly interfere. In a way that was a great strength of the last icon compared to this one: It had enough details to be a self-sufficient element in the toolbar, with hardly any dependence on the theme around it.

I wanted to suggest to just throw the icon ontop of a static background color if the theme color cannot be determined, but that wouldn't work either because I cannot specify a light and a dark icon for both the enabled and the disabled state. :man_facepalming:

@vertigo220: Aside from Privacy Settings (the other shield icon), which will be going away soon, all of them are very clear about whether they're on or off with the exception of this one and Request Control.

Did you intentionally post the picture with add-on in off state? Because IMHO it's state is quite visible. I'd imagine that the on state will look way too similar on your theme through…

@vertigo220: What about an option to use colored or B&W icons?

I feared that question would come. How about adding a color picker for the fallback enabled color, if theme colors are unavailable? (Explicitly marked as temporary workaround!)

@mazesy: There's one way to easily differentiate two states of an extension based on 100% efficiency and 0% aestheticism, which is to add a diagonal on the icon when the extension is off.

I'll try doing a mockup of this and see how it looks. I agree that @scribblemaniac's design isn't contrasting enough through.

[vertigo220]

Did you intentionally post the picture with add-on in off state? Because IMHO it's state is quite visible. I'd imagine that the on state will look way too similar on your theme through…

Sorry. I actually didn't, but here's another image with it on and off, in case it helps:

As for my "theme," it's just the default look. As a rule I tend to avoid themes, as I don't think I've ever used one, for Linux, Windows, Firefox, or anything else, that works completely. Either some things parts aren't themed, which breaks the look completely, or some things just don't work right. For example, I tried a handful of themes in Firefox just out of curiosity, and every single one of them made most, if not all, of the addon icons difficult to see.

Also, for me, it's not an issue of the state being visible. I can tell by looking at the icon whether it's on or off, and it's perfectly visible. My point is that I have to know when I look at it and see that it has just the little dash without the [ ]'s around it that that means it's off, and that the [-] means it's on. A good corollary would be the power icons, with a line being on and a circle being off. They're highly visible, as I can clearly see if a switch is on the line or the circle. The problem is that I can never remember which is which. If the designers of that standard had made it a green line and a red circle, that would have made things so much simpler. And it's also quicker to recognize the status of my addons by just looking at their color, or if they're colored or not, vs if they gray with a dash or slightly darker gray with a dash and a tiny bit more detail.

I feared that question would come. How about adding a color picker for the fallback enabled color, if theme colors are unavailable? (Explicitly marked as temporary workaround!)

Do you mean allowing the user to specify the icon color? Because that would seem to be ideal, but I wouldn't have thought that would be feasible.

[ghost]

Smart Referer 0.2.8 with icon color dedicated option is the ultimate! Anyone able to complain on this basis should be considered as either a mastermind either a troublemaker :=) Gorgeous, nice work, bravo @alexander255 And, hum... many thanks.

[ntninja]

Did you intentionally post the picture with add-on in off state? Because IMHO it's state is quite visible. I'd imagine that the on state will look way too similar on your theme through…

Sorry. I actually didn't, but here's another image with it on and off, in case it helps:

It's fine I was just wondering because it posted it in the disabled state and I looked at it and was thinking like: “What's your problem? That looks obvious enough!”.

As for my "theme," it's just the default look.

I suppose that “default look” has browser icons (like downloads, bookmarks, …) in plain black? If so that's the system theme that can very a lot between even browser instances on the same platform and that is the hardest to integrate with. There's also the default “Dark” and “Light” themes by Mozilla (that I was refering to by “default theme”, but you're right they usually aren't default at all) and apparently those are the only themes where the icons look good.

Do you mean allowing the user to specify the icon color? Because that would seem to be ideal, but I wouldn't have thought that would be feasible.

I didn't make it terribly obvious in my last comment, but that's exactly what is happening behind the scenes when I “[…] adept to “static themes” and “dynamic themes”.” There is just no user-visible selector for this (other then installing a compatible theme-type of course).

Anyways, version 0.2.8 is live now with three different color modes:

• System text color (this should integrate well with the actual default theme)
• Colors from the default theme (the previous icons for integrating with Mozilla's light and dark themes)
• Custom mode with a color picker

Note however that if you use a custom theme that exposes color values in a way that Smart Referer can use them, then it's settings will take precedence over the values set in the settings. In the long run I hope for all themes to expose the necessary information, so that the interface can be removed again… but that'll likely take years, so creating an intrim solution made sense anyway. I hope you guys like it 🙂

[ntninja]

@mazesy: (You comment just appeared now – I had the half written reply open before and just finished writing it.) Thanks a lot! I really appreachiate it. 😁

[vertigo220]

Choosing a custom color doesn't have any effect for me. Not sure if it's due to the statement that the "selected color value will only be used when no compatible theme is active," whereas I'm using the default theme which I assume is compatible. Or should it be changing? I've tried restarting the browser.

[ntninja]

@vertigo220: Please check the following things:

1. The custom color is only applicable for the “on” – “off” remains in the same gray as before
2. Built-in themes are not compatible unfortantely (that's why this workaround exists at all), nor are lightweight themes current compatible (any theme from AMO currently) – You can test whether the adoptive color works using Theme Font & Size Changer however

I don't know why it doesn't work for you, but if neither of the above apply please check whether it works for the linked extension and report back.

Also please mention your browser + version – just in case.

[vertigo220]

Yeah, I knew it's for the on state only. I tried the other addon, but AFAICT it doesn't do anything. Not sure if that's because it's not working, for the same reason SR's icon isn't changing color, or if I'm just not clear on what it's supposed to do (I assume it's supposed to change the color of the toolbars?). I tried it on Firefox, but it doesn't seem to do anything there, either, presumably due to the changes in Quantum. I'm using Waterfox x64, was 56.1.0, now 56.2.0, same issue on both.