Coloured icons

[Speravir]

I’ve from time to time made some suggestions about coloring of icons or about an update of these. Maybe it’s a good idea to discuss this on a dedicated place.

[Speravir]

In Camp Firefox some code has recently been posted, unfortunately without source. Let me link to my version which is just compressed from the others in the thread, posting from 16 August 2024, 00:21:

This does three things:

1. It colours the original padlock icon in the locationbar according to how secure the connection is.
2. It adds some according colour to the pop down menu which opens after clicking on the padlock icon.
3. And it colours the web address accordingly (and it could potentially add some suiting background colour in the address bar, but not the identity box for which you have another style, though).

See my remarks in my posting: The colours are not optimized yet.

I want to suggest using the part for colouring the original padlock icon as another option for the locationbar/identitybox_padlock_icon styles. I just don't know whether the colours are optimal right now, and the dark mode is not at all addressed. Note that you have similar code in locationbar/identitybox_colors.css, as already mentioned above (and in general some styles for coloured icons). By the way it seems that some of the classes are not used anymore in Firefox (not looked into the source code, though!). Update: In chrome://browser/skin/identity-block/identity-block.css we can see the classes still used (or on Searchfox: active version at time of writing, line 150).

I think I post the style rules as I use them right now (the colours are adjusted, though, to the style in Adressleiste per CSS entsprechend Sicherheitsstatus einfärben, see also Firefox Color):

#identity-box[pageproxystate="valid"] #identity-icon {
	fill-opacity: 1 !important;
	transition: 100ms linear !important;
}

/* Blue */
#identity-box[pageproxystate="valid"]:is(.chromeUI, .localResource) #identity-icon { fill: #0A84FF !important }
#identity-box[pageproxystate="valid"].extensionPage #identity-icon { fill: #45A1FF !important }

/* Green */
#identity-box[pageproxystate="valid"].verifiedIdentity #identity-icon { fill: #058B00 !important }
#identity-box[pageproxystate="valid"].verifiedDomain #identity-icon { fill: #12BC00 !important }

/* Orange */
#identity-box[pageproxystate="valid"]:is(
	.weakCipher,
	.mixedActiveBlocked,
	.mixedDisplayContent,
	.mixedDisplayContentLoadedActiveBlocked,
	.certUserOverridden
) #identity-icon { fill: #ff9400 !important }

/* Red */
#identity-box[pageproxystate="valid"]:is(
	.notSecure,
	.mixedActiveContent,
	.insecureLoginForms,
	.certErrorPage,
	.httpsOnlyErrorPage
) #identity-icon { fill: #d70022 !important }

Honestly, the different blue and green shades are more a matter of believing, the rules certainly could be merged. After looking in identity-block.css I noticed that .chromeUI actually does not need to be dealed with in the moment because PNG files are used as icon, but on the other hand it does not harm leaving it in, I think.

If you think of adding a style for part two, I use this in the moment:

/* Blue */
#identity-popup:is([connection="chrome"], [connection="file"]) .identity-popup-security-connection { background-color: #C0F0FF !important }

/* Green */
#identity-popup[connection="secure"] .identity-popup-security-connection { background-color: lightgreen !important }

/* Orange/Yellow */
#identity-popup:is(
	[mixedcontent="active-blocked"],
	[mixedcontent~="passive-loaded"],
	[isbroken]
) .identity-popup-security-connection { background-color: khaki !important }

/* Red */
.identity-popup-security-connection { background-color: lightsalmon !important }

[Speravir]

How about adding color for the firefox-view symbol and the searchmode switcher, the latter apparently will be introduced in Fx 134 (and I not using a test version do not know, how this actually looks).

[joefiesta]

what is the "firefox view symbol"?

[Aris-t2]

Maybe you removed it from your setup. You might find it in customizing mode.

[Speravir]

@Aris-t2:

What would be the best fit? Red, orange, green?

I’ve meanwhile seen you’ve decided for some turquoise tone and I am fine with this. Actually, I had chosen a similar color before, but just for design reasons.

Otherwise, from apparent function a color like for the history symbol would in my opinion have been appropriate, as well.

@joefiesta:

what is the "firefox view symbol"?

@Aris-t2:

Maybe you removed it from your setup. You might find it in customizing mode.

Or activated the according rule from UserChromeCSSforFx (tabs/tabs_firefox_view_button_hidden.css).

I had done this myself, but now decided to have the button in visible state.

[joefiesta]

@Aris-t2 - thanks. found the "firefox view" in customization. But, what a horrible piece of garbage. I couldn't even figure out how to close it. Maybe the close button is invisible in high-contrast windows mode.

[Speravir]

@joefiesta

I couldn't even figure out how to close it. Maybe the close button is invisible in high-contrast windows mode.

Yes, I consider this as bad design, too. You have to close it by switching to the tab you had active before or in case of more than open tab you can select just one of them.