Adding StyleSheets to Firefox Bootstrapped Addon

Question

Accordion to Using the Stylesheet Service

Above mentioned document also states:

loadAndRegisterSheet fails if CSS contains #id. '#' must be percent-encoded, details see bug 659650.

The bag report was made on 2011-05-25. Is it still a bug or has it been resolved?

There is another way of adding CSS but that is per window and I prefer to get this one sorted.

Update:
Here is the content of the style-sheet

#rpnethelper-separator2:last-child { display: none; }
#rpnethelper-menuitem {
  list-style-image: url('icon16.png');
}

This is the actual code (plus added console calls)

register: function(css) {

  let sss = Components.classes['@mozilla.org/content/style-sheet-service;1']
                  .getService(Components.interfaces.nsIStyleSheetService);
  let cssURI = Services.io.newURI(css, null, null);
  sss.loadAndRegisterSheet(cssURI, sss.USER_SHEET);
},

I tried it with try{} catch{} and I dont get any errors.
How/where can USER_SHEET be viewed?

For now, I am going to use an inline style (which doesn't support the pseudo classes) but I would still like to resolve this issue.

Final Update:
For some reason, the code that wasn't working with USER_SHEET, works fine with AUTHOR_SHEET
Funny thing is, after all that, I decided it is not worth the extra processing just for one pseudo class, so I opted for the (simple) inline style

What's the content of your style-sheet, and is `chrome://myext/content/myext.css` a valid URI or did you perhaps forget to change it from the same code? — nmaier, Jul 02 '14 at 13:08
lol... no the URI is valid ;) I will add the content of my style-sheet to the post. — erosman, Jul 02 '14 at 13:12
You still didn't provide complete, **reproducible* code, just some more or less random snippets. How would I run it? I cannot, because I don't know when/where/how `register` is called, what those `rpnethelper` elements are, and so on. — nmaier, Jul 02 '14 at 15:38
@nmaier .. Sorry, I just saw this now.... the styles were for the context `menuitem` and `menuseparator`, the function was called in `startup()`...and please read the Final Update ...thank you for all your help :) — erosman, Jul 02 '14 at 17:31

nmaier · Accepted Answer · 2014-07-02T13:53:11.853

3

You forgot to specify the correct namespace. Add the following as the first line to your sheet.

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

The docs you already linked state:

Stylesheets added using this service get applied to both chrome and content documents. Remember to declare the correct namespace if you want to apply stylesheets to XUL documents.

Also, if you're targeting Firefox 18 and later (and really, supporting earlier versions has no merit as those are unsupported and contain known security vulnerabilities, so users shouldn't be using them), you should consider using nsIDOMWindowUtils.loadSheet instead. This will only load the sheet into the actual window, instead of applying it globally to all windows incl. websites.

if (window instanceof Ci.nsIInterfaceRequestor) {
  let winUtils = window.getInterface(Ci.nsIDOMWindowUtils);
  let uri = Services.io.newURI(..., null, null);
  winUtils.loadSheet(uri, Ci.nsIDOMWindowUtils.AUTHOR_SHEET);
  // Remove with winUtils.removeSheet() again on shutdown
}

Edit You'll want to use AUTHOR_SHEET most of the time (be it with the style sheet service or window utils). This is more equivalent to xml-stylesheet in overlays.

loadAndRegisterSheet fails if CSS contains #id. '#' must be percent-encoded, details see bug 659650.
The bag report was made on 2011-05-25. Is it still a bug or has it been resolved?

That bug report only applies data: URIs. Also, that bug report is invalid, # has special meaning in URIs and therefore you'll have to encode it when it is part of the URI directly (as is the case with data: URIs). If you're registering a regular chrome:/resource:/file:/http: URI, you don't need special encoding.

edited Jul 02 '14 at 13:53

answered Jul 02 '14 at 13:23

nmaier

32,336
5
63
78

Thank you for clarifying the bug. I am looking at other examples of css that others have added to their startless addon and none of them have `@namespace url()`. `nsIDOMWindowUtils.loadSheet` is per window ie it has to be applied to each window and removed, correct? If that is the case `document.createProcessingInstruction` is a lot easier to use. I wanted to avoid adding/removing for each window on load/unload. – erosman Jul 02 '14 at 13:50
`nsIDOMWindowUtils` is per window, and must be added and later removed per window, correct. Your last sentence seems to be incomplete or something... – nmaier Jul 02 '14 at 13:52
It got closed and I was still typing :) – erosman Jul 02 '14 at 13:53
1

`createProcessingInstruction` is possible, but not really easier. It also has some drawbacks, most importantly that the style will be loaded asynchronously, so it may lead to flickering. Out of the three options, I'd opt for the `nsIDOMWindowUtils` way as the best, easiest and most reliable, with `createProcessingInstruction` as a distant second and the global style sheet service as an even far more distant third. – nmaier Jul 02 '14 at 13:55
Thanks for that.... it is annoying me what I can't find the problem. I checked 'Download Status Bar' which has CSS loaded that way and it doesn't seem to appear in the Browser Toolbox, although I am guessing it is working. If only I could find where the `styleSheetService.USER_SHEET` ends up and check it out!? – erosman Jul 02 '14 at 14:00
1

Not sure about the global style sheet service, but `.loadSheet` registered sheets would show up in the DOM Inspector (if they apply to an element, of course). – nmaier Jul 02 '14 at 14:04
BTW.. I added `@namespace url()` and it is still the same – erosman Jul 02 '14 at 14:58
As before, no complete, **reproducible** code, no help *possible*. It's simply not feasible listing all possible causes for your stuff not working, because that number is infinite – nmaier Jul 02 '14 at 14:59
can `nsiDOMWindowUtils.loadSheet` be made to affect webpages? – Noitidart Jul 02 '14 at 15:38
1

@Noitidart You should be able to get the a `nsIDOMWindowUtils` instance from a content window, so yes. I *think* that's actually how the SDK implements `contentStyleFile` in `PageMod`. – nmaier Jul 02 '14 at 15:39

Adding StyleSheets to Firefox Bootstrapped Addon

1 Answers1