Bug: [meta] Color dialog fixes and improvements
Status: NEW
Priority: P3
Created: 2021-07-14 19:07:35+00:00
Resolved: 2024-06-21 17:08:40+00:00

The color dialog (about:preferences > Language & Appearance > Colors) doesn't effectively communicate customisation options to users, and those customisation options aren't consistently respected by the browser. 

Let's fix it!

I think this project will have a few phases, and we should get consensus on functionality before design or engineering changes are made. 
[Here's where things stand currently](https://searchfox.org/mozilla-central/rev/42ae3bea104c37a9986c6f18d17bd9ddb387129c/browser/components/preferences/dialogs/colors.xhtml):

Dialog contents: 
- Color selection for foreground, background, visited/unvisited links
- Checkbox for underlineing links
- Checkbox for using system colors
- Dropdown for enabling/disabling forced colors (HCM)

Dialog functionality: 
- Users are able to select colors using their native color picker. Making a selection writes a value to `browser.display.foreground_color`, `browser.display.background_color`, `browser.anchor_color` (unvisited links), `browser.visited_color` for the respective colors. 
- Checking or unchecking the underline links box sets `browser.underline_anchors` to the respective value
- Checking or unchecking the system colors box sets `browser.display.use_system_colors`
- Selecting an option in the dropdown causes the value of `browser.display.document_color_use` to change. This isn't very intuitive, since the dropdown labels essentially indicate the opposite of what gets written to the pref. Here's what happens: 
  - "Always" > `browser.display.document_color_use = 2 = Never`
  - "Never" > `browser.display.document_color_use = 1 = Always`
  - "Only when using a High Contrast theme" (this option is called "auto" in the page markup) > `browser.display.document_color_use = 0 = Only when an OS-level HCM is not enabled`

Dialog Effects: 
- If the "use system colors" checkbox is checked: background, foreground, and unvisited link colors are pulled from [PreferenceSheet.h](https://searchfox.org/mozilla-central/rev/04b41051dd2b08df2a06f86f8bf9230c0848fc51/layout/style/PreferenceSheet.h#22,26-27). Visited link color, however, is styled with whatever color the user set for visited link color in the dialog. 
- If the "use system colors" checkbox is unchecked:
  - If the dropdown is set to Always AND the user's OS-level HCM is NOT enabled: the user's chosen background, foreground, visited, and unvisited colors are used to style content. 
  - If the dropdown is set to Always AND the user's OS-level HCM is enabled: the user's chosen visited and unvisited link colors are used, but the background and foreground colors are pulled from PreferenceSheet.h.
  - If the dropdown is set to Never AND OS-level HCM is NOT enabled: the user's chosen background and foreground are used, but visited and unvisited are pulled from PreferenceSheet.h
  - If the dropdown is set to Never AND OS-level HCM is enabled: Everything is pulled from PreferenceSheet.h
  - If the dropdown is set to Only with High Contrast themes AND OS-Level HCM is NOT enabled: the user's chosen colors are used
  - If the dropdown is set to Only with High Contrast themes AND OS-Level HCM is enabled: the user's chosen visited and unvisited link colors are used, but the background and foreground colors are pulled from PreferenceSheet.h.

TODO: worth noting I'm testing on Mac right now -- I'll update when I have a chance to test on windows. I don't have access to a linux machine unfortunately :( so if someone wants to verify on there, that'd be great

I think some of the behavior above makes sense, but it might make more sense to respect the system colors checkbox independent of the user's HCM choices, so:

- If the "use system colors" checkbox is checked: all colors are pulled from PreferenceSheet.h
- If the "use system colors" checkbox is unchecked: use the user's selected colors

TODO: Does any OS have the ability to supply system colors such that checking "use system colors" styles the page with something _other than_ the colors in PreferenceSheet.h? I can't find where that overriding would happen in our codebase, if it was possible. MacOS (verified) does not. If the behaviour I'm seeing is standard, we may want to rename this checkbox to "use default colors" or something more semantic.

On the topic of semantics, I think we should also consider untying these options from each other. This dialog allows a user to customise colors AND browser behaviour in a few different ways: 

- Change the default colors, but allow pages to override them as they like. This demonstrates a weak preference. 
- Change the default colors and do NOT allow pages to override them -- force all colors. (this is a strong preference by default in the sense that you can't say "I'd like to require link colors to ALWAYS be X and Y, but I only have a weak preference that background and foreground are A and B" -- maybe we should consider adding this though?)
- Override all colors with those chosen through the operating system, including colors for which the preferences dialog does not allow customisation (ie. windows lets you select a color for form controls, mac supplies an accent/highlight color).
- Override background, foreground, visited, and unvisited colors with the selections in this dialog, and override any OTHER colors the operating system allows. 

To make these options more clear, we might want to annotate the colors section with text that says something like: "You can customise the colors Firefox uses below, note that pages may override your selections. If you'd like to require these colors, select "always" in the dropdown below".

We could add similar text to the default/system colors checkbox, or we could add a button that says "restore defaults" (it'd write the PreferenceSheet.h values back into the color selectors -- if we go this route, we could pull from the color selectors by default and avoid special handling when no OS-level HCM is detected). 


ANYWAY thanks for reading this if you made it this far. TLDR; the colors dialog allows users to modify behaviour and color, but this isn't super clear. It also is currently inconsistent in its application of preferences. We should fix it.