575974 - Disabled checkboxes appear the same as regular checkboxes in high contrast mode

Status: NEW

(Firefox :: Theme, defect, P3)

Description

[alex-mozbugs]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.10) Gecko/20100504 Firefox/3.5.10
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.10) Gecko/20100504 Firefox/3.5.10

When high contrast mode is enabled, disabled form controls usually get a special color (green in the default color scheme).  Disabled checkboxes however appear the same color as enabled checkboxes.  The result is that in high contrast mode, you can't tell the difference between a disabled checkbox and an enabled checkbox.

Reproducible: Always

Steps to Reproduce:
1. Enable high contrast mode
2. View a page with disabled and enabled checkboxes

Actual Results:  
Checkboxes appear the same.

Expected Results:  
Disabled checkboxes should be distinguished from enabled checkboxes.

Comment 1

[alex-mozbugs]

Attachment: Simple testcase to demonstrate the issue

Comment 2

[alex-mozbugs]

Attachment: Normal checkbox appearance

Comment 3

[alex-mozbugs]

Attachment: High contrast checkbox appearance

Comment 4

[firefox7654321]

Using Windows 7 (Maybe others) High Contrast Mode breaks a lot of images on the internet.
Bing.com - the main picture image does not load.
Google Gmail - all the menu icons have a line through the middle. Also, when trying to compose a new email, all of the editing icons like:
BOLD, ITALICS, .... ALIGN CENTER, ALIGN RIGHT 
are all invisible.

One does not have to use high contrast to make the bug happen.
Just set Firefox Menu -> TOOLS -> OPTIONS -> CONTENT TAB -> COLORS BUTTON
UNCHECK THE BOX: ALLOW PAGES TO CHOOSE THEIR OWN COLOR
Try going to Bing.com - the image is also gone as with High Contrast mode.

Unfortunately, a High Contrast Windows Theme is not really usable with Firefox because of all the missing/invisible content.

Comment 5

[dlindsey]

I don't understand comment 4. 

Even after Just set Firefox Menu -> TOOLS -> OPTIONS -> CONTENT TAB -> COLORS BUTTON
UNCHECK THE BOX: ALLOW PAGES TO CHOOSE THEIR OWN COLOR

there is no visual difference between an enabled and disabled control in FF16 using High Contrast #1 in windows 7

Comment 6

[Dão Gottwald [:dao]]

I suppose we're actually using native widget rendering here...

Comment 7

[MarjaE]

Also affects MacOS.

Comment 8

[alex-mozbugs]

Attachment: High Contrast Mode FF 89 Windows 10

This actually appears to have been resolved, at least on Windows 10 with Firefox 89. The disabled checkbox is green as I'd expect for disabled controls.

Comment 9

[jamesconradshea]

Attachment: Same issue on MacOS 11.4

Comment 10

[jamesconradshea]

Comment on attachment 9236450 [details]
Same issue on MacOS 11.4

Seeing the same issue on MacOS 11.4 - note that the checkbox is checked, but does not appear any differently.

Comment 11

[David Lawrence [:dkl]]

Changing qe-verify? to qe-verify+.

Comment 12

[Mark Striemer [:mstriemer]]

Attachment: image.png

The unchecked state is improved for differentiating between disabled or not, but I think it's difficult to tell that the checked state is actually checked still. Perhaps the check mark should still be visible?

Comment 13

[Emilio Cobos Álvarez (:emilio)]

Yeah, so we're painting the checkbox, it's just that we paint it the same color as the background / border when in high-contrast:

• https://searchfox.org/mozilla-central/rev/a18a7c526cf3c531f2fc24db4f0dffbc16290a7e/widget/Theme.cpp#262
• https://searchfox.org/mozilla-central/rev/a18a7c526cf3c531f2fc24db4f0dffbc16290a7e/widget/Theme.cpp#228-232

Maybe we should use that semi-transparent checkbox color even in not high-contrast, something like this:

diff --git a/widget/Theme.cpp b/widget/Theme.cpp
index 1fef1e2d6b552..92a3dc22c09b1 100644
--- a/widget/Theme.cpp
+++ b/widget/Theme.cpp
@@ -226,9 +226,7 @@ std::tuple<sRGBColor, sRGBColor, sRGBColor> Theme::ComputeCheckboxColors(
   if (isChecked || isIndeterminate) {
     if (isDisabled) {
       auto bg = ComputeBorderColor(aState, aColors, OutlineCoversBorder::No);
-      auto fg = aColors.HighContrast()
-                    ? aColors.System(StyleSystemColor::Graytext)
-                    : sRGBColor::White(aColors.IsDark() ? .4f : .8f);
+      auto fg = sRGBColor::White(aColors.IsDark() ? .4f : .8f);
       return std::make_tuple(bg, bg, fg);
     }

I don't have the time right now to test it but if someone does and submits it I'd happily r+ it. Can't be worse than zero-contrast...