Make active and inactive state of ublock image in navbar distinguishable

[Speravir]

Maybe this is Firefox specific, but I do not know this; at least my description is, though:

In the moment both the active and inactive state of the navbar image are invoked with the same attribute. According to DOM Inspector for both states the inactive version is called:

#ublock-button {list-style-image: url(chrome://ublock/content/img/browsericons/icon16-off.svg);}

Only for the active state this is later overwritten with list-style-image: url("chrome://ublock/content/img/browsericons/icon16.svg");.

As far as I can see this is done by the script “vapi-background.js”:

• invocation for both states: line 1472ff.
• overwriting only for active state line 1674ff.

There are several ways, how other authors deal with this. I’ve took a fast look into the code of Greasemonkey which supports different icon sizes, here the relevant excerpt:

#greasemonkey-tbb {
  list-style-image: url("chrome://greasemonkey/skin/icon24.png");
}
toolbar[iconsize="small"] #greasemonkey-tbb {
  list-style-image: url("chrome://greasemonkey/skin/icon16.png");
}

#greasemonkey-tbb[disabled="yes"] {
  opacity: 0.8;
}

(In fact there’s a bit more related code.)

The reason is, of course, that someone could then replace the images, for instance with the older versions containing the µ sign. ;-)

[chrisaljoudi]

@Speravir Hi!

both the active and inactive state

I don't understand. Is that different from the distinguishing whether uBlock is active or not?

[Speravir]

Hmm, pardon my poor English …

The image in navigation bar shows, whether uBlock is active or not, but I cannot tell this from the CSS code. This code is generated by the Javascript file. In the moment the earlier generated code for all states (I was incorrect above) is simply overridden by the later generated code for the active state icon without any distinction in this code – it uses the usual behaviour of CSS (the later wins):

First generated code results in the image with grey background (), mentally linked with “inactive” (in this place there is more code generated, but this is not important here). Only when uBlock is active later the code is generated for the icon with brown background (), hence connoted with “active”.

NB:
Accidentally I’ve first uploaded the old icon versions with µ sign in PNG format (the ones I consider to put back into the navbar). For what it’s worth I let them stay here:

• “icon16-off.png”:
• “icon16.png”:

[AlexVallat]

OK, I think I understand. The idea is you would like to have both On and Off state icons defined in css rather than directly assigned, so you can override them using a user style sheet (or add-in like Stylish).

I've put together a pull request to implement this (the off button state has the additional css class off so it can be identified as #ublock-button.off by css): #1239

If there are no objections, I'll merge it in.

[Speravir]

I added the changed file into the extension file, and it shows the wanted behaviour. Great!