Closed Bug 1490101 Opened Last year Closed Last year

Long flex item label (from long id/classname) can cause overflow & scrollbars in flexbox layout inspector pane

Categories

(DevTools :: Inspector, defect, P3)

defect

Tracking

(firefox64 fixed)

RESOLVED FIXED
Firefox 64
Tracking Status
firefox64 --- fixed

People

(Reporter: dholbert, Assigned: pbro)

References

(Blocks 1 open bug)

Details

Attachments

(4 files)

Attached file testcase 1
STR:
 0. Set about:config pref devtools.flexboxinspector.enabled = true
 1. Load attached testcase.
 2. Right click the text and choose "Inspect Element".
 3. Click the "Layout" button on the upper-right area of the devtools pane.

ACTUAL RESULTS:
The flex item label, i.e.
> div.really-long-class-name-here-wow-this-is-such-a-long-classname-check-it-out
...overflows off the right side of the pane and causes scrollbars. (And if you scroll over, you can see that the title area, line separators, etc. don't continue into the overflow area.)

EXPECTED RESULTS:
The label (as arbitrary unpredictable-in-length content) should probably be clamped to some upper-bound size & should be ellipsized rather than overflowing.

(pbro initlaly brought this up on slack -- filing a bug to be sure it's tracked.)
Summary: Long flex item label (from long classname) can cause overflow & scrollbars in flexbox layout inspector pane → Long flex item label (from long id/classname) can cause overflow & scrollbars in flexbox layout inspector pane
Priority: -- → P3
Blocks: 1478396
No longer blocks: 1470379
Assignee: nobody → pbrosset
Status: NEW → ASSIGNED
Fixes the 3 places where long element Reps can appear:
- as a accordion header as "flex item of div..."
- as a flex item in the list of items for a container
- as a flex container
To fix this, I added text-overflow:ellipsis in a few places and made sure the Rep
was not pushing other things too far behind the viewport.
I also made the layout sidebar overflow-x:hidden, because it doesn't need to
scroll sideways (if the sidebar is too thin, then the box-model diagram might
overflow, but it has its own horizontal scrollbar).

Finally, I removed the inspector select icon next to the Flex Container Rep
because usually the element is already selected anyway. If it's not, then you
can use the back arrow to go back to the container.
Duplicate of this bug: 1493020
Pushed by pbrosset@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/ed70a55e2721
Avoid overflowing the layout tab when flex elements are long; r=rcaliman
https://hg.mozilla.org/mozilla-central/rev/ed70a55e2721
Status: ASSIGNED → RESOLVED
Closed: Last year
Resolution: --- → FIXED
Target Milestone: --- → Firefox 64
You need to log in before you can comment on or make changes to this bug.