1579252 - Bring metadata treatment into spec alignment

Status: VERIFIED FIXED

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

Description

[David Durst [:ddurst]]

• The metadata (.meta-info) text color should be #737373
• The margins should be: margin-bottom: 8px and margin-top: 0
• The font-weight should be reduced

Comment 1

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: Bug 1579252 - Bring metadata treatment into spec alignment. r?sfoster

I confirmed using the built-in accessibility tools that there is enough contrast in regular and dark mode.

Comment 2

[Sam Foster [:sfoster] (he/him)]

(In reply to David Durst [:ddurst] from comment #0)

• The metadata (.meta-info) text color should be #737373
• The margins should be: margin-bottom: 8px and margin-top: 0
• The font-weight should be reduced

In the design mockup, I don't see a visual difference between the field labels ("Username", "Password" etc.) and the meta-data. Is there a different reference for these color values? We were using --in-content-deemphasized-text which in a regular non-dark mode is --grey-60, which is #4a4a4f - a little darker than #737373 and more legible to my eyes at least? So ISTM either we need to use #737373 in both places or --grey-60 (or some compromise.) Or, update the mockup.

Comment 3

[Jared Wein [:jaws] (please needinfo? me)]

This bug came from a ux review. Indeed the spec needs updating. I confirmed there is enough contrast and am still using the deemphasized text color in dark mode.

Comment 4

[David Durst [:ddurst]]

That's a good question -- NI to Ryan on this. Note #c2, where the labels treatment is the same as the metadata treatment.

Comment 5

[rgaddis]

In the design mockup, I don't see a visual difference between the field labels ("Username", "Password" etc.) and the meta-data.

This is true, and both the labels, as well as the metadata, should be the same values...

Per the spec, I have them at #737373, which is lighter than the current implementation.

Should we have a separate issue to address the Website Address/Username/Password labels, or can that also be addressed in this issue?

Comment 6

[rgaddis]

Design Spec referenced: https://zpl.io/VO1nRGk

Comment 7

[David Durst [:ddurst]]

Probably addressed in this issue, but the disconnect between --in-content-deemphasized-text makes this not as straightforward.

I guess if we want this lighter, we'd want to override that semantic class so we don't affect other uses.

Comment 8

[Jared Wein [:jaws] (please needinfo? me)]

(In reply to rgaddis from comment #5)

Should we have a separate issue to address the Website Address/Username/Password labels, or can that also be addressed in this issue?

I have updated the Website Address/Username/Password labels in this patch.

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/035571ecb663
Bring metadata treatment into spec alignment. r=sfoster

Comment 10

[Tim Nguyen :ntim]

ni? for https://phabricator.services.mozilla.com/D45917#inline-283423

Comment 11

[Andreea Pavel [:apavel]]

https://hg.mozilla.org/mozilla-central/rev/035571ecb663

Comment 12

[Liz Henry (:lizzard) (relman/hg->git project)]

Comment on attachment 9092798 [details]
Bug 1579252 - Bring metadata treatment into spec alignment. r?sfoster

Skyline issue, let's bring this to beta 9. (Part of batch uplift requested by MattN)

Comment 13

[Matthew N. [:MattN]]

https://hg.mozilla.org/releases/mozilla-beta/rev/4d2b2fb76ef0

Comment 14

[Jared Wein [:jaws] (please needinfo? me)]

I filed bug 1583237 for comment #10.

Comment 15

[Simona Rosu [:srosu], Ecosystem QA]

I have verified this issue on the latest Nightly 71.0a1 (Build ID: 20190923215658) and on the Firefox Beta 70.0b9 (Build ID: 20190923154733) (64-bit) on Windows 10, MacOS 10.14 and Ubuntu 18.04 x64.

• The metadata text color is #737373.
• The margins are: margin bottom: 8px and margin-top: 0.
• The font-weight is 300.
• The login-footer margin-top is 20 px.
• Also, all changes are visible.