1560175 - DevTools Style Editor is confusing regarding permitted iframes

Status: NEW

(DevTools :: Style Editor, enhancement, P3)

Description

[Glenn Linderman]

Attachment: Style Editor screen shot

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:67.0) Gecko/20100101 Firefox/67.0

Steps to reproduce:

I have a page with 2 style sheets, and three iframes (same origin). Into the iframes, I load one page with one style sheet, and two similar pages, each with 8 style sheets.

Actual results:

Wen I investigate these sheets in the Style Editor, they are all listed in the left column, which is a list of the style sheets, they are all described as "inline style sheet". and are numbered, but strangely. (see attached screen shot)

Expected results:

The numbering of style sheets for the main page is straightforward, but not particularly useful... it gives them sequential numbers, #1, and #2. Since the style sheets do have class names, it would be handy if the class names were shown in the list (as well as the number; if they had id values listing those would also be uesful) to help recognize which style sheet is which.

The remaining sheets are all given number #0 which is totally useless, when numbered, they should be unique numbers. It is good that they are listed, but it is extremely difficult to guess which sheet is which. I expect to scale this application to use up to 10 (rather than 2) of the similar iframes having 8 style sheets each. This will make it more difficult to determine which style sheet is which.

As a side note, I wonder if style sheets embeedded in components are treated in a similarly confusing way? There is some thought that the iframes could eventually become components in this application.

It would be very useful to list the style sheets in groups belonging to a particular iframe, possible with the ability to expand/collapse the list of sheets for each iframe (a tree view, like for nested HTML elements) If this were done, it would be good to include the iframe id, class, or src values as part of the grouping. If not grouped, then each entry in the list of style sheets should include the iframe it belongs to by its iframe id, class, or src values.

Comment 1

[Glenn Linderman]

An extension to the side note... probably any nested browsing context could be similarly affected and should be similarly enhanced, <object> and <embed> being the other two I'm aware of, besides <<iframe> and components.