1477648 - Improve edition of stylesheets for webcomponents

Status: NEW

(DevTools :: Inspector, enhancement, P3)

Description

[Julian Descottes [:jdescottes]]

We now display shadow DOM stylesheets in the Style Editor. If several instances of a component with stylesheets are created, the Style Editor will show as many stylesheets as component instances.

ie, if you have 10 instances of a component that defines one inline stylesheet, the list will contain 10 "inline" stylesheet, that can all be edited separately.

While this is technically correct we should think about improving this experience.

Some ideas from :pbro, :nchevobbe and :bgrins while discussing on Slack about this:

- label the stylesheets differently to make it clear they come from ShadowDOM
- help user to find their origin:
  - display the file + line  + col number at which the style tag is set
  - provide the #id of the parent component? Or something that identifies it uniquely 
  - add a "highlighter icon" to find the host component easily
- allow the user to edit all the sheets at once rather than separately

Comment 1

[:Harald Kirschner :digitarald]

ni? Martin for input since this affects style editor. Option 1 sounds like a low hanging fruit while we figure out details and how far we want to invest here.

Comment 2

[Martin Balfanz [:mbalfanz]]

I think option 1 is a good start, but it's very hard to tell the stylesheets apart.  A mix of a more verbose identifier plus a highlighter sounds ideal.  It would also help already if the selector highlighter works the same as on "normal" stylesheets (click a selectors to see where it applies).

Comment 3

[Jovan Gerodetti]

I tried to work around this issue by putting the style sheet into a blob and use link tags instead of an inline style, but that doesn't work either. Wouldn't it be possible to only show one entry in the style editor if all the links in each web component instance use the same URL?