CODEWITHSUNDEEP
javascriptfirefoxfirefox-addonfirefox-addon-restartless
erosman
erosman

Reputation: 7721

Adding StyleSheets to Firefox Bootstrapped Addon

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

Upvotes: 2

Views: 269

Answers (1)

nmaier
nmaier

Reputation: 33162

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.

Upvotes: 3

Related Questions