Firefox "Autofill Profiles" dialog (for saved addresses & credit c...

1. Turn on dark mode for content, if it's not already on: i.e. visit about:preferences#general and under "Website Appearance", choose "Dark" (or equivalently: just match your system/Nightly theme and have a dark theme applied).
2. Now, visit about:preferences#privacy
3. Scroll down to "Forms and Autofill" section, and click either "Saved Addresses" or "Saved Credit Cards".
4. Look at the fieldset-title just above the scrollable area (above the first saved address or credit card)

ACTUAL RESULTS: The fieldset title text ("Addresses" or "Credit Cards") is very close to the background color and hard to read.

EXPECTED RESULTS: Easier to read text.

See attached screenshot.

From poking around in devtools, it looks like this text's color is hardcoded here in manageDialog.css:

fieldset > legend {
  box-sizing: border-box;
  width: 100%;
  padding: 0.4em 0.7em;
  color: #808080;
  background-color: var(--in-content-box-info-background);
  border: 1px solid var(--in-content-box-border-color);

https://searchfox.org/mozilla-central/rev/a730b83206183bf097820c5780eef0d5e4103b9d/browser/extensions/formautofill/content/manageDialog.css#28

Note that some colors here -- background and border -- are controlled via CSS Variables which we customize to respect dark/light mode, but the text color (color) is just hardcoded to #808080 regardless of theme.

We should probably be using a theme-dependent CSS Variable here.

The background-color seems to be rgba(249, 249, 250, 0.15); composited over rgb(35,34,43), which (according to my eyedropper tool) works out to #5D5C67.

WebAIM Contrast-checker says that the foreground #808080, combined with this background color, has a contrast ratio of 1.66:1 which represents a failure on accessibility metrics:
https://webaim.org/resources/contrastchecker/?fcolor=808080&bcolor=5D5C67

In contrast [ha ha, contrast]: when I change Firefox to light mode, the background-color of this component is #F0F0F4 which WebAIM rates with a better contrast ratio of 3.47:1 (and is much easier to read):
https://webaim.org/resources/contrastchecker/?fcolor=808080&bcolor=F0F0F4

I'm guessing this color was chosen with a light-mode theme in mind, and dark mode wasn't considered (or was introduced later).

For comparison, here's the dialog for the "Settings: Location Permissions" button in Preferences. It's got a similar "table-of-values-with-a-title" design-pattern, where the title is clearly readable.

Perhaps/probably we want to change manageDialog.css so that its hard-to-read "title" (the fieldset's legend) matches the foreground/background coloring of the similar UI elements (Website|Status) in the dialog that I've screenshotted here.

Ethan, can you get this bug tracked by the Form Autofill team?

The issue is with the manageDialog.css having a hardcoded color value, which :dholbert pointed out in Comment #0, instead of taking advantage of --in-content-page-color...but we can remove the custom color style from manageDialog.css and let the color style from common-shared.css cascade instead. The background-color style of manageDialog.css should also be updated to use --in-content-box-background instead of --in-content-box-info-background for a higher contrast ratio. This will prevent the white text on grey background when Firefox is using a dark theme.

To help Mozilla out with this bug, here's the steps:

1. Comment here on the bug that you want to volunteer to help.
   This will tell others that you're working on the next steps.
2. Download and build the Firefox source code
   • If you have any problems, please ask on Element/Matrix in the #introduction channel. They're there to help you get started.
   • You can also read the Developer Guide, which has answers to most development questions.
3. Start working on this bug.
   • Ensure credit card and address autofill is enabled by setting the following prefs in about:config:
     • extensions.formautofill.addresses.supported set to "on"
     • extensions.formautofill.addresses.enabled set to true
     • extensions.formautofill.creditCards.supported set to "on"
     • extensions.formautofill.creditCards.enabled set to true
   • You will need to remove the color style from the fieldset > legend rule in manageDialog.css
   • You will also need to update the background-color style in the fieldset > legend rule from --in-content-box-info-background to --in-context-box-background
   • Verify your changes by switching between dark and light themes and ensure the text is now legible in the "Saved Addresses..." and "Saved Credit Cards..." dialogs.
   • If you have any problems with this bug, please comment on this bug and set the needinfo flag for me. Also, you can find me and my teammates on the #form-autofill channel on Element/Matrix most hours of most days.
4. Build your changes with mach build and test your changes by switching between dark and light themes for Firefox and ensuring the old styles are gone. Also check your changes for adherence to our style guidelines by using mach lint.
5. Submit the patch (including an automated test, if applicable) for review. Mark me as a reviewer so I'll get an email to come look at your code.
   • How to Submit a Patch
   • This is when the bug will be assigned to you.
6. After a series of reviews and changes to your patch, I'll mark it for checkin or push it to autoland.
   • If there are changes requested, please read the "To update a submitted patch" section to ensure you don't accidentally create a duplicate revision!
   • Your code will soon be shipping to Firefox users worldwide!

The product::component has been changed since the backlog priority was decided, so we're resetting it.
For more information, please visit auto_nag documentation.

https://hg.mozilla.org/mozilla-central/rev/d76db0cedbaa