Closed Bug 965007 Opened 12 years ago Closed 12 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: 12 years ago
Resolution: --- → DUPLICATE
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.