CODEWITHSUNDEEP
javascriptfirefoxsvgfirefox-addon-webextensions
Peter Gerdes
Peter Gerdes

Reputation: 2998

Change Color Of SVG toolbar icon in Firefox WebExtension

I'm developing an extension for Firefox 57+ using WebExtensions. I would like to change the color of the toolbar icon to indicate extension status.

I understand how, as described in this answer I could simply use browserAction.setIcon() to change the icon and substitute an icon with a different color.

I want to know if I really need to include icon-black.svg, icon-red.svg etc.. files in my extension or if there is some way I can simply load a single icon.svg file and use javascript to change the color of the image. I was hoping I could somehow load it programmatically and modify the color of the svg (i.e. all paths) before passing it to browserAction.setIcon(). Do I need to somehow load it into some kind of canvas type element to do this? Can I even do this in an extension?

Upvotes: 1

Views: 774

Answers (1)

Makyen
Makyen

Reputation: 33356

Yes, you can do this in an extension

The browserAction.setIcon() documentation states that the Object which is passed to the method will contain either a path to the icon file within your extension (or an Object containing multiple such paths with different sizes), or an imageData, which is a browserAction.ImageDataType, which is an ImageData (or an Object specifying multiple such items with different sizes):

The ImageData interface represents the underlying pixel data of an area of a <canvas> element. It is created using the ImageData() constructor or creator methods on the CanvasRenderingContext2D object associated with a canvas: createImageData() and getImageData(). It can also be used to set a part of the canvas by using putImageData().

Such CanvasRenderingContext2D can use an SVGImageElement as a source to draw an image using CanvasRenderingContext2D.drawImage().

So, yes, you can do this in an extension. And, yes, you need to load it into a "canvas type element" to do it.

It's easier to change the icon badge text and color

It would be much simpler to use a icon badge and change the background color and text of the badge. Doing so might make for a better UX, as icon badges are the UI element specifically intended to transmit such sate-change information to users. You should also change the badge title to indicate what the next click on the icon will do.

Changing only the color is bad UI design

Changing just the color of an icon to indicate state is not a good user interface design. Doing so makes using the interface difficult for anyone with less than perfect vision (e.g. color blind, using a screen reader, etc.). At an absolute minimum, you should change something distinctly visible (e.g. shape, badge text, etc.) other than just the icon color. This should also include some change which is also detected by screen readers.

As an example of what types of problems this causes, the following is a discussion of Stack Exchange's use of only changing the color of the achievements icon for some notifications: Change the color of the "achievements" icon when it's highlighted (for users with Deuteranopia)

Upvotes: 2

Related Questions