1622893 - Input elements blend into background when using HCM on GTK

Status: RESOLVED FIXED

(Core :: Layout: Form Controls, defect)

Description

[Morgan Reschenberg [:morgan]]

Attachment: gtk_hcm.png

STR:

1. Enable high contrast mode in firefox on GTK
2. Navigate to http://rarbg.to/torrents.php?category=2;18;41;49

Expected:
Search bar remains visible with a border separating it from the white background

Actual:
Search bar has no border when HCM is enabled and blends into the page

See attached screenshots. My guess is this is an issue with how we style GTK native elements, since I can't reproduce on Mac.

Thanks to :bdekoz for reporting :)

Comment 1

[Morgan Reschenberg [:morgan]]

Attachment: gtk_non_hcm.png

Comment 2

[Morgan Reschenberg [:morgan]]

Attachment: mac_HCM.png

Comment 3

[Emilio Cobos Álvarez (:emilio)]

So a reduced test-case would be: data:text/html,<input type=text style="border: 1px solid black" placeholder="check me out">.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

So the issue is here, sorta.

We keep this border-color, but allow the author to override the border style to solid, so we paint a border which is effectively the background color... Which is obviously not great.

Comment 5

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1622893 - Don't use background color for 3d colors on GTK. r=stransky

On high contrast themes, we avoid using the colors from the author to ensure
contrast.

We allow the border-style though, and that unfortunately means that:

<input type=text style="border: 1px solid black">

Ends up rendering like:

<input type=text style="border-style: solid; border-width: 1px">

Which for a theme with a white background means that we'll render a white
border which users can't see, and is unfortunate.

Hard-code these colors, as using the background color for the light variant
doesn't seem right anyway, and the dark variant was hard-coded already.

These colors are taken from the cocoa widget. You can see the change in colors
with something like:

<input type=text style="border-width: 2px">

For default themes it makes the colors a bit less subtle. But I don't think it
matters all that much in practice since the fallback unthemed border is very
rare on the web these days.

The rendering here is still not great, to be clear (we may want to tweak the
high-contrast heuristics here), but it's way better than invisible borders.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/ffafdc7c9f84
Don't use background color for 3d colors on GTK. r=stransky

Comment 7

[Narcis Beleuzu [:NarcisB]]

Backed out for wpt failures on fieldset-default-style.html

Backout link: https://hg.mozilla.org/integration/autoland/rev/9c29fe02dd7bfb09e92d635b02283b315569347b
Log link: https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=293509394&repo=autoland&lineNumber=4331

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/5497bb642dfd
Don't use background color for 3d colors on GTK. r=stransky

Comment 9

[Cristian Brindusan [:cbrindusan]]

Backed out changeset 5497bb642dfd (Bug 1622893) for wpt failures at the-fieldset-and-legend-elements/fieldset-default-style.html.
https://hg.mozilla.org/integration/autoland/rev/1706ed88225f79bd4a028ef94d77d693d19eab59

Push with failures:
https://treeherder.mozilla.org/#/jobs?repo=autoland&resultStatus=pending%2Crunning%2Csuccess%2Ctestfailed%2Cbusted%2Cexception&revision=5497bb642dfd2c6a7f1a9820c77ebe2be9232010&selectedJob=293528670

Failure log:
https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=293528670&repo=autoland&lineNumber=4328

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/0657a96ccdc6
Don't use background color for 3d colors on GTK. r=stransky

Comment 11

[Bogdan Tara[:bogdan_tara | bogdant]]

https://hg.mozilla.org/mozilla-central/rev/0657a96ccdc6