SVG browserAction icon not shown in toolbar




WebExtensions: Frontend
a year ago
a year ago


(Reporter: noitidart, Unassigned)


52 Branch

Firefox Tracking Flags

(Not tracked)



(2 attachments, 1 obsolete attachment)



a year ago
Created attachment 8795767 [details]
webext embed, funky browser action logo behavior.mp4

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:50.0) Gecko/20100101 Firefox/50.0
Build ID: 20160920155715

Steps to reproduce:

In my webextensions/manifest.json file I placed this:

	"browser_action": {
		"default_icon": "images/group.svg"

Actual results:

The browser action appears, however the logo is missing.

Inspecting it shows this in the style:

      --webextension-menupanel-image: url("moz-extension://a55063ac-4f0b-4fe8-b3d2-95b8217fb8c8/images/group.svg");      --webextension-menupanel-image-2x: url("moz-extension://a55063ac-4f0b-4fe8-b3d2-95b8217fb8c8/images/group.svg");      --webextension-toolbar-image: url("moz-extension://a55063ac-4f0b-4fe8-b3d2-95b8217fb8c8/images/group.svg");      --webextension-toolbar-image-2x: url("moz-extension://a55063ac-4f0b-4fe8-b3d2-95b8217fb8c8/images/group.svg");    

Navigating to "moz-extension://a55063ac-4f0b-4fe8-b3d2-95b8217fb8c8/images/group.svg" shows the image as expected.

The browser action button is empty when in toolbar. If I move it to menupanel it appears as expected here is a screencast - I also attached the screencast to this bug.

Also we see in this screencast, when I try to drag the item from the menupanel to the toolbar, the drag image is offset way to the left. (i havent tried in non-embeded webext, I'm not sure if this is the same behavior there)

Expected results:

Logo should show. When dragging from mainmenu it shouldn't be offset.


a year ago
Component: Untriaged → WebExtensions: Compatibility
Product: Firefox → Toolkit
Version: 50 Branch → 52 Branch

Comment 1

a year ago
Created attachment 8795823 [details]
Browser action logo not showing when in menu bar

Thanks so much @John-Galt for such a fast test. I double checked but I am still having this issue. Please see attached XPI.

Comment 2

a year ago
Created attachment 8795843 [details]

Whoops, that previous xpi was only for Windows and has some junk. This version should work on mac and *nix.
Hm. This is a bit strange. This happens with or without embedded extensions. I'm not quite sure what the problem is, though. I'm guessing it has something to do with us not imposing a minimum size on the icon.
Component: WebExtensions: Compatibility → WebExtensions: Frontend
Ever confirmed: true
Summary: Embedded webext browserAction icon not showing when in toolbar. → SVG browserAction icon not shown in toolbar
Yeah, specifying both a width and height on the <image> element fixes the problem. Specifying only one does not.

Comment 5

a year ago
Thanks for the confirming of the bug, and the work around!
OK, so the problem is that the root element of your SVG needs width and height attributes. It doesn't really matter what they are, since we scale it anyway, but the proportions matter, since they're still respected.
Last Resolved: a year ago
Resolution: --- → WONTFIX

Comment 7

a year ago
Oh whoa interesting, thanks! I'll fix my addon with that right away :)
You need to log in before you can comment on or make changes to this bug.