Nicolas Chevobbe [:nchevobbe] Reporter
	Description • 7 years ago

Steps to reproduce:
1. Go to https://devtools-injected-style.glitch.me/
2. Right click on the "Hello world" and inspect element
3. Expand the head node


Expected results:

In the rule panel, we can see that the h1 has a rule with a color: red property, and this also appears on the style tag in the head, as well as in the StyleEditor when clicking on the "inline" link in the rule view.

Actual results:

The style tag is empty in the markup view, and clicking on the inline link in the rule view navigates the user to an empty editor in the StyleEditor panel.

	Nicolas Chevobbe [:nchevobbe] Reporter
	Comment 1 • 7 years ago

The code to inject the style can be seen here : https://glitch.com/edit/#!/devtools-injected-style?path=index.html:4:11

	Zac Spitzer
	Comment 2 • 7 years ago

the library being used is https://github.com/israelidanny/veinjs which is basically a wrapper
around CSSStyleSheet.insertRule https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule

	Patrick Brosset <:pbro>
	Comment 3 • 7 years ago

The rule-view and the Style Editors both are based on the same back-end, and this back-end happens to only know how to deal with "Authored Styles". It knows how to read CSS stylesheets as they were received from the wire and show that in the UI only.
The back-end does not, however, know how to deal with JS on the page using the CSSOM to inject/delete/modify rules and properties.
That is unfortunate but will require a lot of work to get right I think.

The Authored Style support was done a couple of years ago in bug 984880.
And at the time, we new that CSSOM support wasn't there and filed bug 1196250 for it.
So I'll close this bug as a duplicate of that one.

I suggest commenting on that bug.