1578020 - Inconsistent spacing in Fonts panel, especially in RTL

Status: VERIFIED FIXED

(DevTools :: Inspector, defect)

Description

[Florens Verschelde :fvsch]

Attachment: Screen Shot 2019-08-31 at 21.16.11.png

I'm making a catch-all bug to fix a few CSS issues in Fonts.

In LTR:

• Font preview input uses 14px of padding-left instead of 20px

In RTL:

• The right-side padding seems too big for a bunch of elements.
• Font preview input uses 22px of padding-right instead of 20px.
• For sliders with min/max values displayed (for variable fonts), the min and max values are inverted.

Both:

• @font-face blocks are shifted 4px to the left and end up misaligned with other content (mostly visible in LTR where other alignments are okay). I think the intent was to align the twisty icon to the 20px guide, but here we should only move that icon and not the whole <pre> element.

Comment 1

[Florens Verschelde :fvsch]

Attachment: Bug 1578020 - Fix horizontal spacing and RTL issues in Fonts panel; r=rcaliman

Comment 2

[Florens Verschelde :fvsch]

Attachment: Improved Fonts spacing.png

Result of the above patch.

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/9b6f0f1deaed
Fix horizontal spacing and RTL issues in Fonts panel; r=rcaliman

Comment 4

[Dorel Luca [:dluca]]

https://hg.mozilla.org/mozilla-central/rev/9b6f0f1deaed

Comment 5

[Catalin Sasca, Desktop QA [:csasca]]

I successfully reproduced this issue on Firefox Nightly (2019-08-31) under Windows 10.

The issue seems to be fixed on latest Firefox Nightly 72.0a1 (2019-10-31). Tests were performed under Windows 10 (x64), macOS 10.15 and Ubuntu 18.04 (x64).

Is this patch going to 71 beta too?

Comment 6

[Florens Verschelde :fvsch]

The patch landed on 2019-09-02 a bit after the 71 branch, and should be on 71 (beta) already.

Comment 7

[Catalin Sasca, Desktop QA [:csasca]]

Yep. It seems to be fixed on Firefox 71.0b6 too. Thanks for the fast reply.