Using browser_style in addon on Firefox (v57)

Question

Following the MDN documentation here: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/manifest.json/options_ui

I have setup the following manifest.json:

{
    ...
    "options_ui": {
        "page": "options.html",
        "browser_style": true
    }
    ...
}

Along with an options.html which contains this HTML:

<div class="switch">
    <input checked id="switch1" type="checkbox" class="visually-hidden">
    <label for="switch1"></label>
</div>

I expected my HTML to be decorated with styles similar to the Firefox style guide: http://design.firefox.com/StyleGuide/#/userselections

But there are none. No extra CSS file appears to be loaded.

There is a similar question here but the question is asking for documentation for styles. All I have found is that the styles simply aren't applied.

Does anyone know if I have this setup correctly? I can't tell if it's a bug.

score 4 · Accepted Answer · answered Nov 22 '17 at 11:16

Styles are correctly applied, you are probably just using the wrong classes. Note that the old style guide is now deprecated in favor of the new Photon Design System.

These are the used stylesheets, just go to these URLs in Firefox to see the full source:

On Windows: chrome://browser/content/extension.css
On Mac: chrome://browser/content/extension-mac.css

Most of the styles assume you use the browser-style class. For example, here are some of the styles for the button element (on Windows):

/* stylelint-disable property-no-vendor-prefix */
/* Buttons */
button.browser-style,
select.browser-style {
  background-color: #fbfbfb;
  border: 1px solid #b1b1b1;
  box-shadow: 0 0 0 0 transparent;
  font: caption;
  height: 24px;
  outline: 0 !important;
  padding: 0 8px 0;
  transition-duration: 250ms;
  transition-property: box-shadow, border;
}

Let's verify if the styles are actually applied.
Example, given an extension with the following manifest.json:

{
  "name": "Options page",
  "manifest_version": 2,
  "version": "0.0.1",
  "description": "Sample options page",
  "options_ui": {
      "page": "options.html",
      "browser_style": true
  }
}

And the following options.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div>Just a text example page</div>
    <div>
         <input checked id="switch1" type="checkbox" class="visually-hidden">
        <label for="switch1"></label>
        <button class="browser-style">Test button</button>
    </div>
  </body>
</html>

This is the rendered options page:

Inspect the options page to verify the applied styles:

Paste about:debugging into the address bar
Select "Enable add-on debugging" on top
Click on the Debug link
Click "Ok" when prompted for allowing incoming connection

Now switch back to the Options page and inspect the "Test button" we added

As you can see, the button is correctly styled with the browser stylesheet.

Thanks for the super quick response. Using your information I have found that the styles are being applied, but they're not the same styling which Photon suggests they should be (perhaps this spec hasn't been applied yet?). Further more, the browser styles are not applied if you run the options in a separate tab (surely a bug). The hint about debugging the addons HTML was very useful. Thanks again! — harvzor, Nov 26 '17 at 19:44
Oops, scratch that about the styles not being inline with the Photon style guide. They're working fine. — harvzor, Nov 26 '17 at 21:24
Not really, sadly. Look at "Just a text example page" in your first screenshot. It doesn't match the size, style and position of the text above. The styles are loaded but they're incomplete. — fregante, Dec 19 '17 at 18:31
@bfred.it you have to add the proper classes to the HTML elements, otherwise the style won't be applied automatically. — Maluen, Dec 20 '17 at 19:27

Using browser_style in addon on Firefox (v57)

1 Answers1