Bug 271924 – Web Inspector: Nodes having a long list of class names take up too much (vertical) space in DOM tree view

• Status: NEW
• Component: Web Inspector

[Qianlang Chen]

Created attachment 470676 [details]
Screenshot demo: Safari doesn't show nodes with long class list well

In the Elements tab's DOM tree view, if a node has a very long attribute (usually that's the case with the `class` attribute's value, a long list of class names), it can potentially take up a huge amount of space and obscure viewing the DOM tree's structure.

To see this problem in action, go to https://fullarmorfilms.com/ and open the inspector's Elements tab.

Perhaps we can introduce a visual option to "fold" the attribute value in some way, potentially by adding a "show all" button somehow? We can focus on the class attribute since that's what tends to get long.

   - Firefox already has this folding strategy for long attribute values. It doesn't have a "show all" button, but you can always double-click to edit and view the full text anyway, which seems fine.

This sort of folding + "show all" button pattern can also be used to tackle https://webkit.org/b/270992 (Console truncates long string outputs).

   - Chrome and Firefox both already do this in the inspector's console to display long texts.

[Radar WebKit Bug Importer]

<rdar://problem/125639945>

[Karl Dubost]

It might also be useful for style attribute with a long list of values too. Or any kind of HTML attribute. 

One test probably to do when creating this feature is search

1. Command + F
2. Type an attribute value which is in the hidden part of the list of values
3. When the search matches, it should probably expand the list of values. 

Partially related. Bug 271958 in the sense if attributes were prettified it would be easier to have a show more at the end of the line instead of a couple of button hidden in the flow of text.