Use SVG icons

[jakwings]

Close #2739

Hope you like it.

Toolbar:

Disabled:

Old Screenshots

Toolbar:

Inactive:

[jakwings]

Just added the license: CC BY-NC-SA 4.0: https://creativecommons.org/licenses/by-nc-sa/4.0/

I don't know the license of the original image. So if you demand, CC0 public license is also fine.

[arantius]

In a message from 2007, which I can find in GMail but not on the corresponding list archive (do they expire!?) the creator says "I'll release the logo in the same license as Greasemonkey (Open source, right? It doesn't say anywhere) to make everything easy."

[jakwings]

Ok, I've updated the license: both MIT and CC BY-SA 4.0. The later also permits creation of derivatives in any image format.

[Sxderp]

Keeping the browser action as the original .png file?

[jakwings]

Don't know why it can override the png for browser_action... Updated. (Maybe this: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/browser_action#Choosing_icon_sizes)

[arantius]

So I'm seeing the browser action button go from:

to:

And in the add-on manager, from:

to:

In AOM that's a pretty close match but something about the colors are off. In the button, the eyes are ... glassy? And maybe it's the lighter color, but the mouth also mostly disappears/loses detail.

[jakwings]

With larger eyes and bigger mouth: https://htmlpreview.github.io/?https://github.com/jakwings/greasemonkey/blob/30e549afce81872a6c905b1780677a52772f0f22/skin/icon.svg

[jakwings]

The face contour and mouth match the original better now: https://htmlpreview.github.io/?https://github.com/jakwings/greasemonkey/blob/777aa6d2213f893b29df2f03ef2b5994737559a2/skin/icon.svg

[Sxderp]

Assuming the .svg is to be used everywhere, then the setIcon in src/bg/is-enabled.js will need an update, for the .svg and the sizes per the 'imageData' on the above linked page.

[jakwings]

Among the functions from src/bg/is-enabled.js, it seems that only getGlobalEnabled() is used outside of tests. Is a grayscale icon still needed?

[Sxderp]

Among the functions from src/bg/is-enabled.js, it seems that only getGlobalEnabled() is used outside of tests.

The other functions are used indirectly. When a 'EnabledToggle' message is sent to the background the onEnableToggle() function will be called. Eventually leading to setIcon(). In which the icon (for the browser action / Monkey Menu) is swapped depending on the current state. If the extension is disabled then the icon is set to a more muted color scheme. As far as I can tell, with your current branch, when you use the Monkey Menu to toggle the extension on / off, the icons are replaced with the original .png images per these lines. I linked to the MDN page describing the API in an earlier comment.

[jakwings]

Ah, I forgot to check the disable button on the addon page. But testing with Firefox Developer Edition, both the grayscaled icon on the addon page and the transparent one on the toolbar (actually, still the original icon32.png) are auto-generated for me. The logic for using svg icons is weird here… setIcon() was indeed called after the menu item "Greasemonkey is active" was clicked.

[jakwings]

Exactly, the grayscale icon is drawn by applying the CSS rule filter: grayscale(1).

[jakwings]

setIcon() doesn't work for png either. Is this bug related? https://bugzilla.mozilla.org/show_bug.cgi?id=1331746

Latest icon (the hair looks better now): https://htmlpreview.github.io/?https://github.com/jakwings/greasemonkey/blob/6fb6257201deae0bd2c1f051217dc46929e77000/skin/icon.svg

[Sxderp]

Set icon is working properly. When you toggle the add-on using the Greasemonkey menu (pressing the browser action icon on the toolbar) the icon changes.

[jakwings]

Ah, embarrassing… so my initial screenshots for the toolbar icon are false (no sure it is good or bad). I need to polish the svg icon more. (Currently, left:original right:svg )

[jakwings]

setIcon() updated. Latest screenshots with the svg icon:

Toolbar:

Disabled: