992988 - Need a method to add / remove scoped stylesheet dynamically from script to elements

Status: NEW

(Core :: CSS Parsing and Computation, defect)

Description

[Matteo Ferretti [:zer0] [:matteo]]

Currently we can register / unregister stylesheet globally (nsIStyleSheetService), or per window (nsIDOMWindowUtils), but there is no methods to apply dynamically a scoped stylesheet (so, per element).

Where in some cases we can definitely add a `<style scoped>` DOM node, this is not always possible. A use case could be a XUL element with bindings: we can't add such node as child, otherwise the XUL node will have children and the bindings won't add its own children – and sometimes you can't add the scoped after it's added to the document, see the `CustomizableUI.createWidget` method, for example.

In addition, adding a scoped stylesheet in such way could protect from introspection – e.g. the stylesheet is added from an extension to an element in a web page.

I think it would be extremely useful have such methods, and we'll just complete the scenario where devs would be able to register stylesheets globally, per window, and per element.

In Add-on SDK those methods would help to styling elements added to the Firefox UI, without the needs for the developer to knows the node's ID (that often is self generated), and limit the scope of the styling to the element itself, isolating them from the rest of the document so it won't "damage" or clash with any other part of Firefox UI, or other add-ons.

Comment 1

[Gabor Krizsanits (INACTIVE)]

I find this feature request very interesting, so if I have some time I would like to look into it... does this sound like something feasible to implement / sane feature to have?

Comment 2

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

I'll defer the question to bz, since I think he owns the global stylesheet registration APIs.

Though it seems reasonable to me, though perhaps along with other per-document registrations APIs, assuming that it could be done in a low-overhead way.

Comment 3

[Boris Zbarsky [:bzbarsky]]

Yeah, this seems like a fairly reasonable thing to do, if it fits into how our existing scoped styles stuff works.

Comment 4

[Gabor Krizsanits (INACTIVE)]

Flagging Dave to make sure it ends up in some triage for priority.

Comment 5

[Dave Townsend [:mossop]]

Matteo can you give us some concrete uses for this?

Comment 6

[Matteo Ferretti [:zer0] [:matteo]]

I think I did in the description:

> In Add-on SDK those methods would help to styling elements added to the Firefox UI,
> without the needs for the developer to knows the node's ID (that often is self generated),
> and limit the scope of the styling to the element itself, isolating them from the rest of
> the document so it won't "damage" or clash with any other part of Firefox UI, or other add-ons.

So basically developers would be able to style ActionButton, ToggleButton, etc, using stylesheet without knowing the id of the node, and kept the style's relative path working. That would help to cover some use case like bug 990477. I also think that this would benefit not only SDK, but other platform as well (B2G, devtools) like the loadSheet method per document did.

Comment 7

[Matteo Ferretti [:zer0] [:matteo]]

Gabor, I suppose there is no updates on this one: do you know if there is someone that would be able to work on it? It would be super useful for several stuff.

Comment 8

[Gabor Krizsanits (INACTIVE)]

Not really sorry... :(