1631729 - The text from the Breach Website/Vulnerable password notification has a thin font-weight

Status: VERIFIED FIXED

(Firefox :: about:logins, defect, P2)

Description

[Simona Rosu [:srosu], Ecosystem QA]

Attachment: VulnerablePassword_text.PNG

[Affected versions]:

• Firefox Nightly 77.0a1 (Build ID: 20200420214939)
• Firefox Beta 76.0b3 (Build ID: 20200420031429)

[Affected Platforms]:

• Windows 10 x64
• Ubuntu 18.04 x64

[Prerequisites]:

• Have a Firefox profile with saved logins in which one is breached and another one is vulnerable.

[Steps to reproduce]:

1. Open the Firefox browser with the profile from prerequisites.
2. Navigate to the “about:logins” page.
3. Select a breached/vulnerable login.
4. Observe the text from the Breach Website/ Vulnerable password notification.

[Expected result]:

• The font-weight is normal.

[Actual result]:

• The font-weight is thin and narrow.

[Notes]:

• Attached a screenshot with the issue.

Comment 1

[Matthew N. [:MattN]]

This seems to be intentional: https://searchfox.org/mozilla-central/rev/3446310d6cc5c85cde16a82eccf560e9b71a3d44/browser/components/aboutlogins/content/components/login-item.css#297,303

It looks legible to me in the screenshot… do you disagree? i.e. what is the actual problem? A lower font weight isn't inherently bad.

Comment 2

[Simona Rosu [:srosu], Ecosystem QA]

Attachment: Breached_Text.PNG

Hi Matthew, indeed, the text in the screenshot looks good. Probably because it was zoomed.
However, the issue is more visible on about:logins page and also on larger screens or if the page is zoomed out. I will add 2 new screenshots when the browser is maximized.
Also, on MacOS the text is more visible than on Windows and it looks the same as in the invision app.

Comment 3

[Simona Rosu [:srosu], Ecosystem QA]

Attachment: Notifications_Text.gif

Unfortunately in the screenshot, the text looks a bit better than actually is. I will also add a screen recording.

Comment 4

[Matthew N. [:MattN]]

Katie, do you think this is something we should fix or is it legible enough to not worry about?

Comment 5

[katieC]

Hey Matt, it does look thin to me - can we get a confirmation that the type is not set to a "light" or thin" version, but is "regular" weight?

Comment 6

[Matthew N. [:MattN]]

It's font-weight: 300; but according to https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight normal is 400. I assume Jared/Tim/Lesley got this from a spec…

Comment 7

[Matthew N. [:MattN]]

Bug 1564539 is where it was added by Lesley. Lesley, do you know where this came from?

Comment 8

[katieC]

Matt, thank you for checking - the spec likely only says size, and had an assumption (I know, my bad!) that text would be default/normal weight. Good eyes Simona. While not a blocker or P1, it'd be great to have this fixed.

Comment 9

[Matthew N. [:MattN]]

Instructions:

Delete this line: https://searchfox.org/mozilla-central/rev/41c3ea3ee8eab9ce7b82932257cb80b703cbba67/browser/components/aboutlogins/content/components/login-item.css#303

Comment 10

[aarushivij]

Hello, Can I take up this issue?
Thanks :)

Comment 11

[Soumya Lahiri]

Hi, can I work on this?

Comment 12

[Soumya Lahiri]

Attachment: Bug 1631729 - Breach Website/Vulnerable password notification has a thin font-weight r?MattN

Comment 13

[Matthew N. [:MattN]]

Comment on attachment 9143126 [details]
Bug 1631729 - Breach Website/Vulnerable password notification has a thin font-weight r?MattN

Beta/Release Uplift Approval Request

• User impact if declined: Vulnerable/breached login/password text may be a bit thin and hard to read for some users. This is a new issue in 76.
• Is this code covered by automated tests?: Unknown
• Has the fix been verified in Nightly?: No
• Needs manual test from QE?: No
• If yes, steps to reproduce:
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): Only change is to delete font-weight:300 to go to the default of 400 (normal).
• String changes made/needed: None

Comment 14

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/38ad38ce6ca1
Breach Website/Vulnerable password notification has a thin font-weight r=MattN

Comment 15

[Ryan VanderMeulen [:RyanVM]]

Comment on attachment 9143126 [details]
Bug 1631729 - Breach Website/Vulnerable password notification has a thin font-weight r?MattN

Small CSS tweak to improve text readability. Approved for 76.0rc1.

Comment 16

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/releases/mozilla-beta/rev/26264001633b

Comment 17

[Razvan Maries]

https://hg.mozilla.org/mozilla-central/rev/38ad38ce6ca1

Comment 18

[Simona Rosu [:srosu], Ecosystem QA]

I have verified this issue using the latest Firefox Nightly 77.0a1 (Build ID: 20200426215109) on Windows 10 x64, Ubuntu 18.04 x64.

• The text from the Breach Website/Vulnerable password notification has a normal font-weight.

Comment 19

[Simona Rosu [:srosu], Ecosystem QA]

I have verified this issue using the Firefox RC 76 (Build ID: 20200427162639) on Windows 10 x64, Ubuntu 18.04 x64.

• The text from the Breach Website/Vulnerable password notification has a normal font-weight.