I want to know which html elements and css styles I need to use for display option rows (checkbox, select item, input, etc) with title, description, group headers, etc, that will match Firefox UI style.
I look up many extensions and each of them use his own style of html code for render options page, and many of them looks ugly inside Firefox UI (html tables, custom divs, p, custom css styles, etc).
Where can I found recommended html template for create Extension Options page?
When creating my webextension, I tried setting browser_style in my manifest file (“browser_style”: true), plus adding class=“browser-style” to parent of input tags and directly to my button tag.
But I didn’t see much effect of my efforts. In general my added options in bottom of “addon page” page didn’t look very “native”. Texts too small, etc…
So I ended up specifying that Options page should open in it’s own tab ( “open_in_tab”: true), and caring less about “native look”…
But I would love to see a practical example where options actually looks native in styling? None of addons I have installed have actually done it in my opinion.
The browser styles are lagging a bit behind with how Firefox looks, sadly. There’s a bug for that (“photon refresh for browser_styles” or similar) that hasn’t had much movement. In general browser_style does apply some minimal styles that make the controls more Firefox-y and some general defaults like not allowing text selection. But sure, it’s far from whatever is “native”, though not even Firefox is really unified across multiple pages.
Have a look at the styling I’ve used for the extension preferences page for my WebExtension, Panic Button. I’m working on a new release where the styling of that page is improved. It doesn’t follow the Photon Design System exactly (it falls back to the “browser_style” CSS rules for many UI elements), but it’s pretty close. Check it out in my Github repo: https://github.com/aecreations/panicbutton.