1435665 - input type=button background-color should be rgb(240, 240, 240) on Android.

Status: NEW

(GeckoView :: IME, enhancement, P3)

Description

[Karl Dubost💡 :karlcow]

This is a spin-off of a webcompat issue https://webcompat.com/issues/11755

some websites rely on the background-color of <input type=button> to get a meaning rendering or cosmetic effect.

On macos, the button color is defined as buttonface which is rgb(240, 240, 240)

https://dxr.mozilla.org/mozilla-central/rev/e22e2c9eb81686e958a9448ea3d1e8cd766743e2/layout/style/res/forms.css#630

but on Android, the background-color is white rgb(255, 255, 255) and is defined in content.css
https://dxr.mozilla.org/mozilla-central/rev/ef1fefe4c6d1f95e2bdf872094e02e85c962aa86/mobile/android/themes/geckoview/content.css#124-135

Comment 1

[Karl Dubost💡 :karlcow]

We ran into this issue by "chance" on our webcompat.com redesign.
https://github.com/webcompat/webcompat.com/issues/2151#issuecomment-374356826

Comment 2

[Karl Dubost💡 :karlcow]

So this is a bit more complex than just the background-color. 
We need to check also other color definitions such as border-color, etc.
In some design the buttons are barely visible. See https://webcompat.com/issues/13196

Comment 3

[Karl Dubost💡 :karlcow]

So this is another one with input type='text' where the disabled background is grey and create a difference of rendering.
https://webcompat.com/issues/7426

Probably this issue needs to be widen a bit in scope and assess the differences of styles in between Safari/Chrome/Firefox and Edge for all the user agent stylesheet values.

Comment 4

[Karl Dubost💡 :karlcow]

As of today, documenting.
(I need to double check on devices, some values seem strange)

The CSS defined for Android
* Gecko (Android) https://dxr.mozilla.org/mozilla-central/rev/085cdfb90903d4985f0de1dc7786522d9fb45596/mobile/android/themes/geckoview/content.css


* Blink https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/css/html.css?rcl=43fd1f406f081f94a50f124cd8bbee283ad10fc0


Maybe relevant too Bug 598421


In Chromium we get
===================================
/* form elements */

input {
    background-color: white;
}

textarea {
    background-color: white;
}


input[type="hidden" i], input[type="image" i], input[type="file" i] {
    background-color: initial;
}

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: #FAFFBD !important;
}

input[type="radio" i], input[type="checkbox" i] {
    background-color: initial;
}

input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button {
    background-color: ButtonFace;
}

input[type="color" i] {
    background-color: ButtonFace;
}

input[type="color" i]::-webkit-color-swatch {
    background-color: #000000;
}

input[type="color" i][list]::-webkit-color-swatch {
    border-color: #000000;
}e, i

input::-webkit-calendar-picker-indicator:hover {
    background-color: #eee;
}

select {
    background-color: white;
}

===================================


So in Chrome, <input type="button">


    background-color: ButtonFace;
    border: 2px outset ButtonFace;



as for the ButtonFace value, it seems to be defined as 
https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/layout/layout_theme.cc?l=706&rcl=bcfda9cfef7e65ecee20cd15f52f9a390f109923

    case CSSValueButtonface:
      return 0xFFC0C0C0;

which means rgb(192,192,192) to double check on an Android device.




while in Firefox <input type="button">


https://dxr.mozilla.org/mozilla-central/rev/085cdfb90903d4985f0de1dc7786522d9fb45596/mobile/android/themes/geckoview/content.css#125-136

  background-color: var(--form_background);
  border-color: var(--form_border);
  border-radius: var(--form_border_radius);
  border-width: 1px;
  border-style: solid;

which resolves to
https://dxr.mozilla.org/mozilla-central/rev/085cdfb90903d4985f0de1dc7786522d9fb45596/mobile/android/themes/geckoview/defines.css#10

  --form_background: white;
  --form_border: #bfbfbf;
  --form_border_radius: 2px;

Comment 5

[Karl Dubost💡 :karlcow]

Let me unassign myself here. I don't have the bandwidth for now.

Comment 6

[Firefox Bug Husbandry Bot]

See bug 1547409. Migrating webcompat priority whiteboard tags to project flags.

Comment 7

[Chris Peterson [:cpeterson]]

If there are any questions about the expected behavior, the Fenix UX team is responsible for answering any UX design questions about on mobile, including widgets.

Comment 8

[David Lawrence [:dkl]]

Moving all open Core::Widget: Android bugs to GeckoView::General (then the triage owner of GeckoView will decide which ones are valuable and which ones should be closed).

Comment 9

[Chris Peterson [:cpeterson]]

Moving some input bugs to the new GeckoView::IME component.

Comment 10

[Chris Peterson [:cpeterson]]

Tasks and enhancements should have severity N/A.

Comment 11

[Frances Lay]

(In reply to Karl Dubost💡 :karlcow from comment #0)

This is a spin-off of a webcompat issue https://webcompat.com/issues/11755

some websites rely on the background-color of <input type=button> to get a
meaning rendering or cosmetic effect.

On macos, the button color is defined as buttonface which is rgb(240, 240,
240)

https://dxr.mozilla.org/mozilla-central/rev/
e22e2c9eb81686e958a9448ea3d1e8cd766743e2/layout/style/res/forms.css#630

but on Android, the background-color is white rgb(255, 255, 255) and is
defined in content.css
https://dxr.mozilla.org/mozilla-central/rev/
ef1fefe4c6d1f95e2bdf872094e02e85c962aa86/mobile/android/themes/geckoview/
content.css#124-135

Comment 12

[Frances Lay]

#0