1086532 - Make <style scoped> work in native anonymous nodes

Status: RESOLVED DUPLICATE of bug 933125

(Core :: Layout, defect)

Description

[Patrick Brosset <:pbro>]

For more context, see bug 1020244 and then see bug 985597 comment 24 and bug 985597 comment 30 and 985597 comment 31.

Trying to summarize here:

- bug 1020244 adds a new chrome-only document API that allows chrome JS to inject custom nodes into a new native anonymous node in nsCanvasFrame.
- bug 985597 tries to make use of this new API to display the devtools highlighter (the box-model on-content overlay you see when you use the inspector).
- the highlighter is such that it requires some amount of CSS (see [1] and [2]),
- and there is a JS script that manipulates the highlighter's styling while it is displayed on the page, to update its position for example.

I've tried using the new document API to inject a <style scoped> node in the native anonymous container, which would be ideal for the highlighter (the style would only be there when the highlighter is displayed, not like ua.css, and the style wouldn't impact the content page in any way, unlike ua.css)

This doesn't work right now.

The other solution is to refactor the highlighter to use style attributes everywhere, but:

- this mixes our JS and CSS code in an ugly way
- reduces maintainability of the code
- makes it a lot harder to support devtools themes
- makes it harder to dynamically update the highlighter's position (where we would normally do |highlighterNode.style.top = y + "px";| we would now have to do |highlighterNode.setAttribute("style", allStylesForHighlighterNode + ";top:" + y + "px");| or something like that anyway).

[1] http://mxr.mozilla.org/mozilla-central/source/browser/themes/shared/devtools/highlighter.inc.css
[2] http://mxr.mozilla.org/mozilla-central/source/browser/base/content/highlighter.css

Comment 1

[Patrick Brosset <:pbro>]

CC'ing heycam as roc said you would be able to help on this bug.