Hello,
I am working on some Add-ons and have problems with the design.
Especially the appearance of browser_action popups.
Is there a html and css template I can use to get the same or simular design?
Thats what I mean with the default popups
or
Thank you.
browser_style:
I know this site, but always red over the Firefox Style Guide (Photon Design System).
It’s much more extensive than I hoped and it’s even possible to download the svg icons.
Thats great. Thank you.
I’m having the exact same problem. On the MDN page it says that the style guide has a reference for classes that will make sure your design looks the same as Firefox’s styles. But the link to the old style guide does not work anymore, and the new one does not have a guide for classes I can use in my CSS.
Also, as the MDN page points out, if you type chrome://browser/content/extension.css (or chrome://browser/content/extension-mac.css on macOS) in your URL bar you get a stylesheet which probably has the in-built styles (but I am not sure if they already are Photon styles)
I am sure there are lots of WebExtension devs that face the same problem (and then use bad looking pop-ups) so a MDN page (or a section on the Photon spec) about classes I can use when using browser_style would be great I think.
True, the user interface is described to the smallest details, but I haven’t found a template for popups or some infos on how to use the. css file neither.
The latest download example extension uses browser_style in its popup, but not the menu style I was looking for.
I hope I have time to try out the chrome://browser/content/extension.css this weekend.
I tried it out now, and it seems not to be photon styled. Also, in the ‘latest downloads’ example, if you do not set ‘overflow: hidden’ (at least I) get a scroll horizontal scroll bar. Not exactly what I would expect from default styles.
For my Add-on I tried to (kinda) follow the spec (and tried to implement it for my own). Also, I could not find any information on headings in wing panels on the Photon site?
This is how my popup look now:
I think Photon look really great, and if I can help in any way to make it easier for WebExtensions to implement it, I am glad to help 