Make the breadcrumbs take less horizontal space

NEW
Unassigned

Status

P3
enhancement
3 years ago
8 months ago

People

(Reporter: pbro, Unassigned)

Tracking

Trunk

Firefox Tracking Flags

(firefox49 affected)

Details

(URL)

Attachments

(1 attachment)

(Reporter)

Description

3 years ago
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
(Reporter)

Comment 1

3 years ago
(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
Created attachment 8751399 [details]
Mock-up for a "ancestors list" button

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.
(Reporter)

Comment 4

3 years ago
Inspector bug triage (filter on CLIMBING SHOES).
Severity: normal → enhancement
(Reporter)

Comment 5

3 years ago
Inspector bug triage (filter on CLIMBING SHOES).
Priority: -- → P3

Updated

8 months ago
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.