Bug 1767323 Comment 0 Edit History

Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.

Original comment by
on 
STR:
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 the color is hardcoded here in `manageDialog.css`:
```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.
Revision 1 by
on 
STR:
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`:
```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.

Back to Bug 1767323 Comment 0