Open Bug 1272031 Opened 8 years ago Updated 2 years ago

Make the breadcrumbs take less horizontal space

Categories

(DevTools :: Inspector, enhancement, P3)

enhancement

Tracking

(firefox49 affected)

Tracking Status
firefox49 --- affected

People

(Reporter: pbro, Unassigned)

References

()

Details

Attachments

(1 file)

STR:

- open the test case URL in a tab
- open the inspector
- make the browser window not too wide, something like you'd have on a 13'' laptop maybe, or something

==> Only ~2 of the nodes are visible in the breadcrumbes, you have the scroll to see other nodes.
This doesn't seem too useful, it would be nicer to see more of the breadcrumbs without scrolling.

Some ideas:

- hiding some of the classes
- hiding all attributes unless the element is selected (showing only the tagname)
- reducing the max label length (using an ellipsis after, say, 30 chars)
- removing the arrows between each element in favor of a narrower separator
(In reply to Patrick Brosset <:pbro> from comment #0)
> STR:
> 
> - open the test case URL in a tab
> - open the inspector
> - make the browser window not too wide, something like you'd have on a 13''
> laptop maybe, or something
- (forgot one step) expand all nodes and select the very last one
Me, I’d be happy with a simple button to show the ancestors list of the currently selected node (in a dropdown, current node at the top and root at the bottom). Here’s a quick mock-up for a button.
Probably not something that most others want, but I thought I’d mention the idea.
A remark on the triangle separators: I was convinced they wasted a lot of space, but it seems that I was partly misinformed by the min-width used for items. Meaning that for a P element with no classes, it can look like:

" element.class >    p    >    i    "

But for longer names it doesn't take that much space (though it could be made a little bit more compact, perhaps departing from the sharp triangle shape):

" element.class > p.otherStuff > i#helloworld "

So maybe:
- the separators could be made a little bit more compact (as well as other bits in the design of the breacrumbs);
- the min-width of breadcrumb items could be lowered somewhat.
Inspector bug triage (filter on CLIMBING SHOES).
Severity: normal → enhancement
Inspector bug triage (filter on CLIMBING SHOES).
Priority: -- → P3
Product: Firefox → DevTools
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: