google-chrome 69 autocomplete: light grey text on white background

[aslafy-z]

Details

• Distribution: Archlinux
• Desktop environment: i3-gaps 4.15
• Arc version: community/arc-gtk-theme/20180715-1
• Arc variant: Arc-Dark
• GTK+ 3 version:
  • Murrine engine version: 0.98.2-3
  • gnome-themes-extras version: N/A (running i3)
• Installation method: archlinux package

The new autocomplete for google-chrome ignores the theme. I'd be glad to help to debug this but I don't know how to do. I'd love if someone could give me some advice!

WORKAROUND: See https://github.com/NicoHood/arc-theme/issues/141#issuecomment-428315002

[jnsh]

Could you clarify, is the issue for HTML forms' autocompletion, or something else?

Could this chromium bug be related? And would you mind testing if this workaround for the aforementioned bug helps?

[aslafy-z]

I've seen it for HTML form autocompletion via autocomplete or google password manager.

Not sure it's related, I had a try of the workaround but it only affects the top bar as in the issue.

[jnsh]

I'm assuming this only affects the Arc-Dark variant? There could be some way to force chrome to use another gtk theme or not use gtk at all for theming web form elements e.g. buttons and input fields. Although, I couldn't find one at a quick glance.

It may be possible to work around this in the theme, or via ~/.config/gtk-3.0/gtk.css, by simply changing the color for the right CSS class, but I'm very unfamiliar with gtk3 themes and chrome, so that'd probably require quite a lot of time from myself.

It would help, if you could dig trough the chromium code for what CSS classes may be associated with HTML forms and the autocomplete widget.

[aslafy-z]

WORKAROUND

Disable Display Autofill Dropdown Using Views flag in chrome => chrome://flags/#enable-autofill-native-dropdown-views

This will be deleted soon, we need to fix it: https://bugs.chromium.org/p/chromium/issues/detail?id=865101#c10

[aslafy-z]

Did some digging, but I still need to figure out how to fix it.

For the background color:

• get background color for autofill view: GetBackgroundColorIDForRow: https://github.com/chromium/chromium/blob/master/chrome/browser/ui/views/autofill/autofill_popup_view_views.cc#L267
• links to kColorId_ResultsTableNormalBackground or kColorId_ResultsTableHoveredBackground https://github.com/chromium/chromium/blob/master/chrome/browser/ui/autofill/autofill_popup_controller_impl.cc#L391
• Uses the same color as kColorId_TextfieldDefaultBackground: https://github.com/chromium/chromium/blob/master/chrome/browser/ui/libgtkui/native_theme_gtk.cc#L303

For the font color:

• get background color for autofill view: GetValueFontColorIDForRow: https://github.com/chromium/chromium/blob/master/chrome/browser/ui/views/autofill/autofill_popup_view_views.cc#L308
• defined in => https://github.com/chromium/chromium/blob/master/chrome/browser/ui/autofill/autofill_popup_layout_model.cc#L199
• here are the color values kColorId_ResultsTableNormalText and kColorId_ResultsTableNormalDimmedText derived from kColorId_TextfieldDefaultColor https://github.com/chromium/chromium/blob/master/chrome/browser/ui/libgtkui/native_theme_gtk.cc#L316 & https://github.com/chromium/chromium/blob/master/chrome/browser/ui/libgtkui/native_theme_gtk.cc#L323

[jnsh]

I had a quick look, and I think the the CSS classes from GTK that are used for theming are defined here.

I also figured out that you can use GTK's built in inspector with cromium/chrome, by starting it with GTK_DEBUG=interactive chromium.

With that, I was able to change the autofill colors when the chrome://flags/#enable-autofill-native-dropdown-views is disabled with the following, although that also had unacceptable side effects. Unfortunately it didn't seem to have any effect when the #enable-autofill-native-dropdown-views is enabled.

window.background.chromium textview.view {
  background-color: #000000;
  color: #ffffff;
}

Also, it seems I can't reproduce your issue with the autofill forms (with native views enabled) when using Arc-Dark with chromium 70.0.3538.67 (and without any CSS injections). This is how they look for me in this page:

I didn't test with chromium 69 though, so maybe this is fixed upstream in version 70.