1602535 - [meta] Ensure DevTools supports Constructable Stylesheets

Status: NEW

(DevTools :: General, task, P3)

Description

[Razvan Caliman [:rcaliman]]

In principle, DevTools Inspector and Style Editor should support Constructable Stylesheets out-of-the box with little or no modifications necessary. This bug is to track this assumption and any changes if necessary.

For Constructable Stylesheets to be visible to/editable by DevTools, the following should be true:

• InspectorUtils.getAllStyleSheets() should include the attached stylesheets
• InspectorUtils.hasRulesModifiedByCSSOM() should return true when the stylesheets have been mutated via the CSSOM
• The Document should fire the "StyleSheetApplicableStateChanged" event for attached stylesheets -- used by StyleSheetsActor to pick up new stylesheets becoming applicable after explicitly getting the ones already attached to the inspected document.
• It should be possible to fetch() a stylesheet by URL (if it not an inline stylesheet) in order to access its text content -- used by fetchStyleSheet()
• It should be possible to access the text content of a constructed stylehseet; according to comment #3, this would require additional platform functionality exposed to DevTools and minor changes in DevTools, particularly in getSheetText()

Comment 1

[Patrick Brosset <:pbro>]

The StyleSheetActor also fetches the text of each stylesheet here. Razvan, does this need to be specifically called out here too as an API to be supported?

Comment 2

[Razvan Caliman [:rcaliman]]

From my understanding, Constructable Stylesheets are not a new type of stylesheet, but rather a way to associate a stylesheet with a ShadowRoot. The way the stylesheet is created and accessed via CSSOM remains the same. See bug 1590280 comment 15. Pinging Emilio to check this statement.

If this hypothesis holds true, all the existing stylesheet accessors should continue to apply. That includes events and the ability to fetch() a stylesheet by URL.

I will add it to the list above just to remember to check it.

It's not yet clear to me if DevTools would need to use the CSSStyleSheet.replace() or CSSStyleSheet.replaceSync() when mutating the contents of an adopted stylesheet. Those look like a way to mitigate Flash of Unstyled Content when first attaching the sheet and/or a convenience for CSS-in-JS approach.

Comment 3

[Emilio Cobos Álvarez (:emilio)]

(In reply to Razvan Caliman [:rcaliman] from comment #2)

If this hypothesis holds true, all the existing stylesheet accessors should continue to apply. That includes events and the ability to fetch() a stylesheet by URL.

Constructable stylesheets have no URL. We'd need to preserve the input when you call replace() or replaceSync(), I guess.

Comment 4

[Razvan Caliman [:rcaliman]]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #3)

Constructable stylesheets have no URL. We'd need to preserve the input when you call replace() or replaceSync(), I guess.

Neither do inline stylesheets. The only callsite for fetchStyleSheet() is getSheetText() which accounts for the missing href and accesses the text content of the sheet's owner node, the <style> element.

Would this be possible with Constructable Stylesheets or are they devoid of an ownerNode as well?

Comment 5

[Emilio Cobos Álvarez (:emilio)]

No, there's no owner node; that's the point of the feature. So you can't access textContent. That's why we'd need to save the text content input, and expose it for devtools.

Comment 6

[Razvan Caliman [:rcaliman]]

Thank you for for the clarification! I have updated the bug description accordingly.

Comment 7

[709922234]

Firefox can't inspect constructable stylesheets yet.

shipped in Chrome 85.
https://developers.google.com/web/updates/2020/06/devtools

Comment 8

[Julian Descottes [:jdescottes]]

Should also make sure StyleEditor supports those.

Comment 9

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Some stats for using Constructable Stylesheets
https://chromestatus.com/metrics/feature/timeline/popularity/2846
(searching for adoptedstylesheets prop)