1512481 - In flex inspector, the flex-item graphic has its "basis/final" text smooshed against the image

Status: VERIFIED FIXED

(DevTools :: Inspector, defect, P3)

Description

[Daniel Holbert [:dholbert]]

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.

Comment 1

[Patrick Brosset <:pbro>]

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.

Comment 2

[Daniel Holbert [:dholbert]]

Attachment: screenshot of how this looks on Win10 as of this bug filing

Sorry, I'd meant to attach a screenshot when filing -- here's how this looks in current Nightly on Win10.

Comment 3

[Daniel Holbert [:dholbert]]

Attachment: screenshot on Win10 with suggested "line-height" tweak

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.

Comment 4

[akshitha shetty]

I would like to work on this one. Could you please assign it to me?

Comment 5

[Patrick Brosset <:pbro>]

Thanks for your interest in helping fix this issue. I'll assign the bug to you now.
As you can see, some instructions were given in comment 1. Please do get started and don't hesitate to come back here and ask any questions you might have. I'll do my best to answer them and help you land a fix.

Comment 6

[akshitha shetty]

Thanks,
Will start working on it and get back here.

Comment 7

[akshitha shetty]

Attachment: Screenshot of the mentioned issue in Linux after the "line-height" tweak

Hi,
I have added the line-height property as suggested on linux and attached a screenshot of the same. It looks good to me. Could you please review it ?

Comment 8

[Patrick Brosset <:pbro>]

Hi Akshitha, your fix seems to look good on linux, thank you. But I don't see your code changes here.
Could you send a patch for review as described in our documentation please: https://docs.firefox-dev.tools/contributing/code-reviews-setup.html

Comment 9

[akshitha shetty]

Attachment: Bug 1512481- Resolved the smooshing of the - basis/final - text against the image in flex inspector's flex-item graphic .

Comment 10

[Pulsebot]

Pushed by [e-mail]:
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

Comment 11

[Cristina Coroiu [:ccoroiu]]

https://hg.mozilla.org/mozilla-central/rev/33ca660f7670

Comment 12

[Cristian Comorasu, QA [:ccomorasu], Releae Desktop QA - Please contact [e-mail]]

I reproduced this issue using Fx 65.0a1 (2018-02-19), on Windows 10 x64.
I can confirm this issue is fixed, I verified using Fx 66.0b9, on Windows 10 x64, macOS 10.13 and Ubuntu 14.04 LTS.