Closed Bug 1538100 Opened 8 months ago Closed 8 months ago

Text color on onboarding panel of the avatar toolbar button is barely readable on Linux


(Firefox :: Firefox Accounts, defect)

Not set



Firefox 68
Tracking Status
firefox67 --- verified
firefox68 --- verified


(Reporter: pascalc, Assigned: Gijs)




(5 files)

Attached image avatarDarkLinux.png

Mozilla/5.0 (X11; Linux x86_64; rv:68.0) Gecko/20100101 Firefox/68.0 ID:20190322012300

The onboarding text on Linux is barely readable both with Light and Dark themes, it uses a light gray color with a white/darkgray background (Ubuntu 18.10, default Yaru theme but the same issue happens with other themes).

I checked on Windows 10 and the text colour is readable, black on white in Light theme, white on black with the Dark theme.

I am attaching screenshots of what I have on Linux.

Attached image avatarLightLinux.png

Light version

Assignee: nobody → vbudhram
Attached image Screenshot light

I actually can't reproduce.

What window manager and theme are you using?

Flags: needinfo?(pascalc)
Attached image Screenshot dark

Gnome and Yaru theme (Ubuntu defaults actually)

Flags: needinfo?(pascalc)

Also, could you attach a screenshot of the overflow panel in customize mode for comparison, please? :-)

So... I couldn't reproduce this on Ubuntu 18.04.

I can reproduce on 18.10 after setting Cantarell Regular as the default UI font using gnome tweak tool.

Looking into whether using the same CSS as for the customize mode panel helps.

I believe the suggestion from rfeeley was to make this look like the panel header for the overflow panel in customize mode.

Unfortunately, this is difficult to achieve because the customize code uses font: message-box and a font-size of 1.1em. Using the same CSS on mac for the panel is producing different results (14.3px text for the panel instead of 12.1px text in customize mode), probably because of inheritance of various other bits of CSS (like the font: Menu that's set on all customizableui panels, that we can't get rid of because it'll break too much else). Or something.

The other issue with that seems to be that we end up with smaller text on the button than on the description above it, which looks visually... odd.

I think the simplest solution is to switch to font-weight: 300 on Linux. This will make the text appear slightly thicker on Linux only (but still thinner than "normal"). Or we could wontfix, given that this seems specific to some fonts only - though I agree with Pascal that the result looks pretty bad.

Ryan, what course of action seems best to you?

Flags: needinfo?(rfeeley)

Good thinking, font-weight: 300 will hold us until the browser-wide messaging system ship that Aaron and Bryan are working on.

Flags: needinfo?(rfeeley)

Stealing this. :-)

Assignee: vbudhram → gijskruitbosch+bugs
Pushed by
fix font-weight on Linux to be slightly heavier, r=vbudhram
Closed: 8 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 68

Hello all,

Did not manage to reproduce this issue on the affected build from 2019-03-22 on Ubuntu 18.10 or Ubuntu 18.04, not even setting the font to Cantarell Regular as per suggested in comment 6.

I tried to reproduce on the latest Nightly 68.0a1 (2019-05-09) and the latest Beta 67.0b18 and the issue is not present.

@Gijs Is there anyway you can try to reproduce this on your Ubuntu with the above specified builds? ( Nightly 68.0a1 (2019-05-09) and the latest Beta 67.0b18)

Thank you in advance!

Flags: needinfo?(gijskruitbosch+bugs)

No, maybe Pascal can verify.

Flags: needinfo?(gijskruitbosch+bugs) → needinfo?(pascalc)

I am now on 19.04 but I can no longer see the bug neither in nightly nor beta and I had seen the fix working on nightly while I was still on 18.10, so setting it as verified.

Flags: needinfo?(pascalc)
You need to log in before you can comment on or make changes to this bug.