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)
Tracking
(Not tracked)
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.
Comment 1•10 years ago
|
||
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
Reporter | ||
Comment 2•10 years ago
|
||
(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
Reporter | ||
Comment 3•10 years ago
|
||
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
Updated•6 years ago
|
Product: Firefox → DevTools
You need to log in
before you can comment on or make changes to this bug.
Description
•