Create dark light bulb icon to match styling of other icons in the toolbar/menu

[adamopenweb]

Add-On icon is hard to read in the Firefox toolbar. It may not be recognizable as a light bulb. It is a little easier to see when placed in the menu but is still not completely readable.

A darker light bulb icon may be easier for users to recognize on the toolbar.

[adamopenweb]

Working on this.

[adamopenweb]

Trying out two styles, I'm also open to editing it another way if someone has suggestions. @karlcow @miketaylr?

1)

2)

[adamopenweb]

I just noticed switching between light and dark themes (say default vs. dev edition) that the icons invert with it. I'll look into that.

[miketaylr]

I like the first option better.

I just noticed switching between light and dark themes (say default vs. dev edition) that the icons invert with it. I'll look into that.

Ah interesting.

Also, I wonder if we keep the smaller one as yellow when it's next to the URL bar and use the larger one w/ grayscale when it's in the hamburger menu?

[karlcow]

The light bulb probably deserves to be simplified for small scale. I wonder if SVG is supported for icons.

[karlcow]

for the design I would prefer a 3rd option. something along because it would go along with the style of other icons which are positive rendering of the object (contour).

1. The first is light in a darkroom
2. The second is a negative of the first.
3. The third to create is just a light bulb.

[miketaylr]

for the design I would prefer a 3rd option.

Do you have a high-quality asset for that @karlcow?

I wonder if SVG is supported for icons.

yep. see:

chrome://pocket/content/panels/img/pocket.svg#pocket-mark

[miketaylr]

(i guess that lightbulb is upside down...)

If we have a nice icon ready, or can have one in the next day or two -- let's go for it. Otherwise I'd prefer to not block on that (and make the icon better when we have a better one).

[karlcow]

The light bulb in my comment is not the one to use it was here to express the idea of my comment. For SVG support very cool. I would move on with the option 2, and then change the icon to something close to the 3, when we create it. Would it work for @magsout @adamopenweb and @miketaylr

[miketaylr]

Yep, SGTM.

[magsout]

Yellow is not the easier color for web... And yes in toolbar is not easy to recognize that it's a bulb. (myabe think about another color for webcompat.com ?.... )

because it would go along with the style of other icons which are positive rendering of the object (contour).

@karlcow agree 👍

[adamopenweb]

The dark bulb looks pretty bad with the Dev Edition theme.

I didn't find in the documentation how to switch the icon based on the theme. @miketaylr suggested we keep the yellow icon in the toolbar and use the dark one in the menu. When I test on my external monitor or retina display, Firefox chooses icon32.png every time for both the toolbar and menu.

Some information on icons: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/browser_action#Choosing_icon_sizes

If anyone can point me in the right direction here, it would be appreciated.

[denschub]

I didn't find in the documentation how to switch the icon based on the theme

There is no API for that. I've built something before (the helper is implemented here), but even this implementation is not the best since it only resets the icon on a browser reboot and you'd have to need to add a preference listener.

The testpilot extension found a nice solution. Instead of assigning the icon directly, they assign a transparent png and use CSS to select the right icon, see https://github.com/mozilla/testpilot/pull/1210. I guess that's the nicest solution!

[adamopenweb]

Thanks @denschub! I didn't see a way to implement this using web extensions, looks like they are using the addon SDK to inject the stylesheet?

[adamopenweb]

Was talking to @callahad today in Toronto. Doesn't look like this exists in web extensions at the moment.

[denschub]

Well... at least we've learned something...

[miketaylr]

We ended up with https://github.com/webcompat/webcompat-reporter-extensions/blob/master/firefox-bootstrap/skin/lightbulb.svg in the bootstrap.js port -- let's close this, thanks everyone!