3.37 KB, image/png
4.90 KB, image/png
4.35 KB, image/png
Bug 1512481- Resolved the smooshing of the - basis/final - text against the image in flex inspector's flex-item graphic .
47 bytes, text/x-phabricator-request
|Details | Review|
STR: 1. Visit data:text/html,<div style="display:flex"><span>abc 2. Right-click "abc" and inspect 3. Click the "flex" badge, and then click the span to show its flex item info EXPECTED RESULTS: The "basis/final" text label should be alongside the "|" marker that it's labeling, and there should be a little space between it and the graphic, for readability. ACTUAL RESULTS: - The "basis/final" text is a few pixels lower than its | marker. - The text is smooshed against the graphic, so that the bottoms of the letters are bumping directly into the similarly-colored border of the graphic below them, which makes them harder to read. I ran into this on Win10 nightly: 65.0a1 (2018-12-06) (64-bit). Haven't yet checked whether other platforms are affected.
Thanks for filing. I believe this can be solved by adding line-height: 1; to the CSS rule .flex-outline-point::before in /devtools/client/themes/layout.css At least on mac it looks good this way. I would be great to test how this looks on windows and linux too. I'm marking this as a good first bug because I think it is. If you are interested in fixing it, please make sure you go through our contribution guide first: http://docs.firefox-dev.tools/ And then don't hesitate to ask questions here! I can help.
Priority: -- → P3
Here's how this looks in Win10 if I make Patrick's suggested "line-height" tweak (using devtools to edit on the fly -- I didn't actually write the patch). It's still not quite perfect (intuitively I'd expect the text and the marker to be baseline-aligned, and they're not quite), but it looks much better, and does seem good enough (no smooshing) to call this bug fixed.
Assignee: nobody → akshithashetty84
Status: NEW → ASSIGNED
Pushed by email@example.com: https://hg.mozilla.org/integration/autoland/rev/33ca660f7670 Resolved the smooshing of the - basis/final - text against the image in flex inspector's flex-item graphic . r=pbro
Status: ASSIGNED → RESOLVED
Last Resolved: 2 months ago
status-firefox66: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 66
QA Contact: cristian.comorasu
Status: RESOLVED → VERIFIED
status-firefox66: fixed → verified
You need to log in before you can comment on or make changes to this bug.