1563676 - Improve representation of inline style sources in Rules view

Status: UNCONFIRMED

(DevTools :: Inspector: Rules, enhancement, P3)

Description

[Glenn Linderman]

Attachment: ss_20190705_011646_277.jpg

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

Steps to reproduce:

Poking around in Inspector, looking at theCSS rules for various elements

Actual results:

I see a rules for various elements, some described as "inline" and others described as "inline:NNN" where NNN seems to be a line number.

Expected results:

I guess "inline:NNN" is fairly descriptive, but I have to refer to the source to determine which <style> block it is really in. Additionally listing the id and className of the style block that it is in would be useful. Maybe as a pop-up when hovering the word inline?

There seem to be two types of rules labelled "inline" without a line number. The very first rule listed is "fake" for the style that is an attribute of the element. This is very handy, I don't mind the "fake" entry, but instead of sayling "inline", it might be more descriptive to say "attribute".

The other rules listed as "inline" without a line number seem to be ones that are dynamically inserted via javascript. Like those with a line number, it would be helpful to include the id and className of the containing style element in some manner. Particularly so, because there is no line number, but knowing the id and className of the style element would help in understanding where this rule "lives" in the CSSOM.

The attached screen shot shows the three cases, but not in the order described.

Comment 1

[Glenn Linderman]

It might also be nice to show the rule # within the style sheet.

Comment 2

[Liviu Seplecan]

Hi @Glenn Linderman, your issue goes to an enhancement. So, I will set it a component then someone from dev's team decides what should happen with the issue.
Thanks.

Comment 3

[Razvan Caliman [:rcaliman]]

Attachment: inline-styles.html

Comment 4

[Razvan Caliman [:rcaliman]]

Attachment: inline-styles-chrome.jpeg

Comment 5

[Razvan Caliman [:rcaliman]]

Attachment: inline-styles-firefox.jpeg

Comment 6

[Razvan Caliman [:rcaliman]]

Indeed, the Rules view should be more informative with regards to the sources of styles.
These are very valid points, Glenn. Thanks for bringing them up.

I created a small test case (attached) to see how all types of inline styles are represented in both Firefox and Chrome.

Some findings:

• Firefox makes no distinction between embedded and dynamically added inline styles, whereas Chrome marks dynamically added stylesheets with the <style> label. Neither of them makes any use of the attributes on the <style> nodes to display in the Rules/Styles panel
• Firefox does show the source line for a style in both inline style approaches. Chrome does not show this information for dynamically added <style> nodes. (I was unable to replicate the situation where an inline style does not show a source line in Firefox)
• Chrome distinguishes element styles added via attribute by using the element.style label, but makes no use of additional attributes on the node. Firefox shows the element label and likewise does not make use of additional attributes. In addition, Firefox adds some confusion with the inline label.

Ideally, we'd want to have parity with Chrome so users find it easier to switch between the tools. But in this cases, it looks like we can do even better.

Your suggestions about showing additional node attributes for to identify <style> nodes sounds helpful, though I assume most dynamically injected <style> nodes will not have any such attributes. Clicking on the label to jump to the Style Editor for the complete source will likely remain the main workflow.

Still, I think we can do better in the Firefox Rules view to edge closer to the Styles panel representation in Chrome and perhaps improve on that.
I will mark this enhancement request for the backlog and ping Victoria (UX) and Martin (PM) so they're aware of it when we consider updates to the Rules view.

Comment 7

[Glenn Linderman]

Thanks for looking at this Razvan, and for making a test case. My situation was extremely complex, and I don't probably know enough about the internals of the rules to correlate the cases. The 2nd rule shown in my screen shot, showing "inline" without a source line number, which I guess you couldn't reproduce, is added by javascript to a style sheet that is inside an <iframe>.

While you may be correct that many <style> elements may not have id or classname attributes, for those that do, that information would be very helpful. And if coders became aware that such information was displayed, they would be more likely to add it.

Often when I click on the label to see the complete source, I actually see nothing... I suppose because of limitations in the Style Editor regarding javascript-created <style> blocks and javascript-inserted rules. For the example I showed, if I click "inline" is displayed, it takes me to one of many <inline style sheet #0> entries, which claims to have 156 rules, but shows only a blank line numbered 1 in the area where rules should be displayed.

See bug https://bugzilla.mozilla.org/show_bug.cgi?id=1560175 regarding the "many <inline style sheet #0> entries", and bug https://bugzilla.mozilla.org/show_bug.cgi?id=1196250 regarding blank style sheets.

So it is hard to get much information out of DevTools regardings javascript-created styles... showing id and className attributes for <style> nodes, as done for many other node references in the Console, Inspector, and Debugger, seems like an approved way to get a little information even when so much other information is unavailable.