1776723 - Checkboxes do not display their state when `browser.display.document_color_use` is `2`.

Status: UNCONFIRMED

(bugzilla.mozilla.org :: User Interface, defect)

Description

[Mr. Beedell, Roke Julian Lockhart (RJLB)]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:101.0) Gecko/20100101 Firefox/101.0

Steps to reproduce:

I configured “browser.display.document_color_use” to be “2”.

Actual results:

Whether any check-boxes were filled was not possible to ascertain visually.

Expected results:

The boxes should visually present their state.

Comment 1

[Mr. Beedell, Roke Julian Lockhart (RJLB)]

Attachment: https://bugzilla.mozilla.org/page.cgi?id=voting/user.html&bug_id=1776723#vote_1776723

Comment 2

[Mr. Beedell, Roke Julian Lockhart (RJLB)]

Attachment: https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&format=guided

Comment 3

[Emilio Cobos Álvarez [:emilio]]

This is an issue with Bugzilla's styling. They have:

@media screen and (prefers-color-scheme: dark) {
  input[type="checkbox"]:checked {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path fill="rgb(35, 36, 37)" d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>');
  }
}

Which is a dark-colored checkmark. So if you have dark mode but we don't use document colors, contrast is poor because we don't respect the --focused-control-border-color.

A way to fix this could be something like this, maybe:

@media (forced-colors) {
  input[type=checkbox] { appearance: auto }
}

Or so, to not use custom checkboxes in this case. Though, more generally, given bugzilla only uses custom checkboxes to change the background, effectively, maybe they can remove all the custom checkbox styles and do:

:root {
  accent-color: rgb(var(--accent-color-blue-1));
}

To avoid having to use custom styles for form controls.

Comment 4

[David Lawrence [:dkl]]

If someone can paste a patch here or create a PR in Github, I can merge the change and fix this. Otherwise it might be a while before I can get to this myself.

Comment 5

[Mr. Beedell, Roke Julian Lockhart (RJLB)]

GitHub meaning more specifically where? If this is actually a problem with Bugzilla, rather than this instance of it (which I distinguish between because KDE's instance at "http://invent.kde.org" appears to demonstrate this problem too) I should probably report this via its bug-tracker.

Comment 6

[:glob ✱]

Our fork of Bugzilla lives in https://github.com/mozilla-bteam/bmo/
Looks like KDE uses GitLab not Bugzilla.

Comment 7

[Mr. Beedell, Roke Julian Lockhart (RJLB)]

They use Bugzilla for all of their bug-reports, except if some core maintainers want to ignore that rule if it complements their pull-requests better.

Comment 8

[Mr. Beedell, Roke Julian Lockhart (RJLB)]

Anyway, if https://github.com/mozilla-bteam/bmo/ (bugzilla.mozilla.org) is merely a fork of Bugzilla, where's the original repository, and, to evaluate it, is it hosted anywhere? I ask because I still want to know whether this problem is best reported there, to assist the most codebases possible.

Comment 9

[:glob ✱]

They use Bugzilla for all of their bug-reports

Ah; the link you provided - http://invent.kde.org/ - is GitLab.
Looks like there's an install at https://bugs.kde.org/.

where's the original repository

https://github.com/bugzilla/bugzilla

Be aware the prefers-color-scheme CSS referenced here is specific to BMO and is not present in "upstream" Bugzilla.
If you see the same issue on other installations it would be part of their customisations and should be reported directly to that install's owners.