977128 - [computed view] Property grouping

Status: NEW

(DevTools :: Inspector, enhancement, P3)

Description

[Patrick Brosset <:pbro>]

Computed properties in the inspector's computed-view are sorted alphabetically. It could help grouping them by types instead.

Firebug groups them by Text, Background, Box-Model, Layout, ...
I'm not saying we should do exactly the same, but I think this grouping helps (+ the group headers have collapse/expand arrows and the state remains when new nodes are selected, which helps if you're only interested in one set of properties).

Comment 1

[Patrick Brosset <:pbro>]

See a side-by-side firebug/devtools comparison: https://dl.dropboxusercontent.com/u/714210/Screenshot%202014-02-26%2016.35.59.png

Comment 2

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Attachment: computed view.jpg

(In reply to Patrick Brosset [:pbrosset] [:patrick] from comment #0)
> Computed properties in the inspector's computed-view are sorted
> alphabetically. It could help grouping them by types instead.
> 
> Firebug groups them by Text, Background, Box-Model, Layout, ...
> I'm not saying we should do exactly the same, but I think this grouping
> helps (+ the group headers have collapse/expand arrows and the state remains
> when new nodes are selected, which helps if you're only interested in one
> set of properties).

We originally had it that way (see attachment) but when I added the filter field we had a lot of negative feedback from users saying that the categories are redundant because we have the filter.

Other issues were that some properties belong in more than one category and every time a new property is added to Firefox we needed to either leave it to the Misc category or move it somewhere else.

I guess if dividing it into categories was optional (alphabetic / by category) it might make more people happy though.

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

Filter on CLIMBING SHOES

Comment 4

[Sebastian Zartner [:sebo]]

FWIW, Firefox 46.0 broke the properties grouping in Firebug 2.0.16, which caused several people to complain.[1]
So I guess this is something people are really missing from the DevTools.

Sebastian

[1] https://groups.google.com/d/topic/firebug/1-sgfn-8HsI/discussion

Comment 5

[Łukasz]

I very much support this.

Comment 6

[Sebastian Zartner [:sebo]]

For what it's worth, the Chrome DevTools have these groups in that order:

"Layout", "Text", "Appearance", "Animation", "Grid", "Flex", "Table", "Generated Content", "Other"

Most of the properties are not properly grouped, though. I could imagine other groups like "Lists", "Colors", "Alignment", "Columns", "Containment", "Masking", "Fill & Stroke", "UI", "Overflow", "Transformation", "Scrolling" and "Shapes".

If a group is completely empty (because the "Browser Styles" option is disabled and there is no property of that group set), it shouldn't be shown.

One question is whether properties that fit into different categories should appear in multiple groups. Reason for that would be that users might expect the property in any of the related groups. My opinion on this isn't really strong so far, though I guess categorizing them into one group is easier. And if a property is that general, maybe it deserves to be in its own group.

Sebastian