Closed Bug 965007 Opened 10 years ago Closed 10 years ago

Breadcrumbs with large labels cause a lot of empty scrolling in the scrollbox

Categories

(DevTools :: Inspector, defect)

Product:
DevTools
Component:
Inspector
Platform:
All
macOS
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED DUPLICATE of bug 936421

People

(Reporter: bgrins, Unassigned)

Details

Even when they are hidden under the button.

Open a site with a lot of class names on an element, like modernizr.com.
Inspect the <body> element

Expected: the breadcrumbs container will not be scrollable
Actual: the breadcrumbs container scrolls for a couple thousand pixels, based on the long class name in the <html> element.

This appears to be a bug with max-width on the breadcrumb buttons not applying to the scrollbox somehow.
The way I fixed this in the debugger was to add a max-width: none on the breadcrumb itself, and restrict the size of the children: [0], [1]

Inspector should do the same. Let's remove the max-width here [2], put the max width on the .breadcrumbs-widget-item-classes and add a "crop: end" to the label. I think that (or a variation of it) should work.

[0] http://dxr.mozilla.org/mozilla-central/source/browser/themes/shared/devtools/debugger.inc.css#106
[1] http://dxr.mozilla.org/mozilla-central/source/browser/devtools/debugger/debugger-toolbar.js#463
[2] http://dxr.mozilla.org/mozilla-central/source/browser/themes/shared/devtools/widgets.inc.css#118
(In reply to Victor Porof [:vp] from comment #1)
> The way I fixed this in the debugger was to add a max-width: none on the
> breadcrumb itself, and restrict the size of the children: [0], [1]
> 
> Inspector should do the same. Let's remove the max-width here [2], put the
> max width on the .breadcrumbs-widget-item-classes and add a "crop: end" to
> the label. I think that (or a variation of it) should work.
> 
> [0]
> http://dxr.mozilla.org/mozilla-central/source/browser/themes/shared/devtools/
> debugger.inc.css#106
> [1]
> http://dxr.mozilla.org/mozilla-central/source/browser/devtools/debugger/
> debugger-toolbar.js#463
> [2]
> http://dxr.mozilla.org/mozilla-central/source/browser/themes/shared/devtools/
> widgets.inc.css#118

I see, that does seem to work better.  This will be a little trickier in the inspector, since it is split into 4 elements [0], but still should be doable.  Regarding cropping, I don't think we can crop each label, because we could have a situation with multiple crops like:

div#long-id-goes….long-class-name…:hover

We could keep a count of the characters throughout all 4 labels and once we hit a limit, cap it off with an ellipsis character instead of relying on the 'crop' attribute.  Unless if there would be a way to get it to work that I'm not thinking of in our use case with 4 separate elements.

[0] http://dxr.mozilla.org/mozilla-central/source/browser/devtools/inspector/breadcrumbs.js#162
Going to handle this by trimming the text that shows up as described in Comment 1 and 2, instead of wrestling with the layout issues.  This is being done in Bug 936421
Status: NEW → RESOLVED
Closed: 10 years ago
Resolution: --- → DUPLICATE
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.