Closed
Bug 1497179
Opened 6 years ago
Closed 6 years ago
Avoid overlapping labels in the flex item outline
Categories
(DevTools :: Inspector, enhancement, P2)
DevTools
Inspector
Tracking
(firefox65 fixed)
RESOLVED
FIXED
Firefox 65
Tracking | Status | |
---|---|---|
firefox65 | --- | fixed |
People
(Reporter: pbro, Assigned: pbro)
References
Details
Attachments
(4 files)
On treeherder, select `.Pane.horizontal.Pane1`.
The outline is displayed for this flex item, but the basis and final points now cover themselves up.
One idea would be to detect when points have the same value, and in this case just draw 1 of the 2 points only, with the 2 labels.
Here, instead of drawing basis and final independently, and worrying about positioning the labels in a way that they don't overlap, draw just one point with the label "basis\nfinal" so they're for sure not going to overlap.
Assignee | ||
Comment 1•6 years ago
|
||
Updated•6 years ago
|
Assignee: nobody → mtigley
Status: NEW → ASSIGNED
Assignee | ||
Comment 2•6 years ago
|
||
A random thought, maybe it's helpful: if 2 points have the same coordinate (or maybe are close enough, like < 3px apart), then we should draw only one point, and make the label for that point contain both labels.
Basically, we could loop over all points we're thinking of drawing before starting to draw, and accumulate the ones that are very close into just 1 point.
I hope this makes sense. If not, I can try to explain better.
Comment 3•6 years ago
|
||
Comment 5•6 years ago
|
||
Pushed by mtigley@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/39825c67e39c
Avoid overlapping labels in the flex item outline. r=pbro
Comment 7•6 years ago
|
||
Backed out changeset 39825c67e39c (Bug 1497179) in devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_renders_basisfinal_points_correctly.js CLOSED TREE
https://treeherder.mozilla.org/#/jobs?repo=autoland&resultStatus=testfailed%2Cbusted%2Cexception&classifiedState=unclassified&selectedJob=210601483
https://treeherder.mozilla.org/logviewer.html#?job_id=210601483&repo=autoland&lineNumber=3509
Backout by shindli@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/12c2fb24c691
Backed out changeset 39825c67e39c in devtools/client/inspector/flexbox/test/browser_flexbox_item_outline_renders_basisfinal_points_correctly.js CLOSED TREE
Pushed by mtigley@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/17a21d9e1420
Avoid overlapping labels in the flex item outline. r=pbro
Comment 10•6 years ago
|
||
bugherder |
Status: ASSIGNED → RESOLVED
Closed: 6 years ago
status-firefox65:
--- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 65
Comment 11•6 years ago
|
||
Verified this issue on the latest Nightly build (20181112100105) using the following example, and the issue can still be reproduced under certain conditions:
data:text/html,<div style="display:flex;flex-direction:column"><div style="flex-grow:1;height:305px;max-height:300px"></div><div style="flex-grow:1;height:400px;"></div></div>
Based on this, I'll reopen this issue for further investigation.
Assignee | ||
Comment 12•6 years ago
|
||
Thanks Paul. Indeed a similar problem does persists. We fixed this bug only in cases where final and basis have exactly the same value. But if they differ only slightly (e.g. a few pixels like in your screenshot), then they'll still overlap because we'll attempt to draw them very close to eachother.
Assignee | ||
Comment 13•6 years ago
|
||
I have a fix for this that relies on using min-width in CSS to make sure the items we draw in the outline are always spread-out at least a little bit.
Assignee: mtigley → pbrosset
Status: REOPENED → ASSIGNED
Assignee | ||
Comment 14•6 years ago
|
||
By adding a min-width to the grid items used to display things in the flex outline, we make
sure they each have at least some room to be visible.
Even if that means the outline isn't a perfect 1:1 mapping of what the item actually is.
I also made 2 other minor fixes to the outline:
- using display:grid on the point labels makes sure they fit nicely where they are supposed
to and the little border drawn next to them to indicate their position doesn't stick out
- I removed a specific override for display the combined final-basis point in column mode
that was making the border for that point show on the incorrect side
Comment 15•6 years ago
|
||
Pushed by pbrosset@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/42b5ac0ec022
Make sure things displayed in the flex sizing outline have enough room; r=mtigley
Comment 16•6 years ago
|
||
bugherder |
Status: ASSIGNED → RESOLVED
Closed: 6 years ago → 6 years ago
Resolution: --- → FIXED
You need to log in
before you can comment on or make changes to this bug.
Description
•