Closed Bug 1579252 Opened 3 months ago Closed 3 months ago

Bring metadata treatment into spec alignment

Categories

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

Product:
Firefox
Component:
about:logins
Version:
70 Branch
Type:
defect

Tracking

()

Status:
VERIFIED FIXED
Milestone:
Firefox 71
Tracking Flags:
Tracking Status
firefox-esr60 --- unaffected
firefox-esr68 --- unaffected
firefox69 --- disabled
firefox70 --- verified
firefox71 --- verified

People

(Reporter: ddurst, Assigned: jaws)

References

Details

(Whiteboard: [passwords:management] [skyline])

Attachments

(1 file)

Bug 1579252 - Bring metadata treatment into spec alignment. r?sfoster
47 bytes, text/x-phabricator-request
lizzard
: approval-mozilla-beta+
Details | Review
  • 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
Whiteboard: [passwords:management] [skyline]
Assignee: nobody → jaws
Status: NEW → ASSIGNED

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

(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.

Flags: needinfo?(jaws)

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.

Flags: needinfo?(jaws)

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

Flags: needinfo?(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?

Flags: needinfo?(rgaddis)

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

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.

(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.

Pushed by jwein@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/035571ecb663
Bring metadata treatment into spec alignment. r=sfoster

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

Status: ASSIGNED → RESOLVED
Closed: 3 months ago
status-firefox71: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → mozilla71

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)

Attachment #9092798 - Flags: approval-mozilla-beta+

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.
Status: RESOLVED → VERIFIED
status-firefox69: --- → disabled
status-firefox70: fixed → verified
status-firefox71: fixed → verified
status-firefox-esr60: --- → unaffected
status-firefox-esr68: --- → unaffected
Component: Password Manager → about:logins
Product: Toolkit → Firefox
Target Milestone: mozilla71 → Firefox 71
Version: unspecified → 70 Branch
You need to log in before you can comment on or make changes to this bug.