[DX] Constructed Stylesheet aren't accessible for developer tools anymore (Chrome 101 / Firefox 101)

[knoobie]

Description of the bug

Developer can't navigate to the CSS source of a constructed stylesheet anymore, making on-the-fly styling / debugging or looking up additional lumo utitlity classes inside the css bundle impossible.

Chrome 101:

• Clicking on "constructed stylesheet" on the right side results in nothing; can't navigate to the source

Firefox 101 (Developer Edition):

• Clicking on "inline:122" results in the error shown on top of the developer tools

Firefox 100: (WORKING!)

• Clicking on "inline:123" results in navigation to the styles:

Expected behavior

All major supported browser can access the CSS Vaadin injects.

Minimal reproducible example

• Download example from start.vaadin.com (I changed coloring to orange palette, just to have something created inside my theme)
• Check html element inside the browser in latest Chrome or Firefox -> can't access CSS

Versions

• Vaadin / Flow version: V23 & V23.1.0.beta1
• Java version: 11
• OS version: Ubuntu
• Browser version (if applicable): Chrome 101 / Firefox 101

[web-padawan]

Just to clarify: Firefox does not support constructable stylesheets yet, this feature is still behind a feature flag: https://caniuse.com/mdn-api_cssstylesheet_cssstylesheet