Open Bug 977128 Opened 10 years ago Updated 2 years ago

[computed view] Property grouping

Categories

(DevTools :: Inspector, enhancement, P3)

enhancement

Tracking

(Not tracked)

People

(Reporter: pbro, Unassigned)

References

(Blocks 1 open bug)

Details

Attachments

(1 file)

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).
See a side-by-side firebug/devtools comparison: https://dl.dropboxusercontent.com/u/714210/Screenshot%202014-02-26%2016.35.59.png
Blocks: firebug-gaps
Attached image 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.
Component: Developer Tools: Inspector → Developer Tools: Computed Styles Inspector
Filter on CLIMBING SHOES
Priority: -- → P3
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
Severity: normal → enhancement
Product: Firefox → DevTools
Component: Inspector: Computed → Inspector

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

Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.