Payment Request API window shows light grey text on white: impossible to read
Reported by
stuart.l...@gmail.com,
Jul 14 2017
|
|||||||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/59.0.3071.109 Chrome/59.0.3071.109 Safari/537.36 Steps to reproduce the problem: 1. Open the test case pr.html 2. Click the button What is the expected behavior? I can read the writing. What went wrong? I can't read the writing. It's possible that the details filled in are meant to look "disabled" or "greyed out" in some way -- it is a test card number -- but I don't think that's the case (the window _works_, it's just not readable) and even if that is the case then it doesn't currently look disabled, it just looks wrong and impossible to read. Did this work before? N/A Does this work in other browsers? N/A Chrome version: 60.0.3112.50 (Official Build) beta (64-bit) Channel: beta OS Version: Ubuntu 16.04 Flash Version:
,
Jul 14 2017
Er... Settings, search for "theme" says "GTK+"; is that the name of the theme? (I don't think I've consciously installed a theme in Chrome; I use Chromium almost always, not Chrome proper.) If the question is which Gtk theme am I using, it's Adwaita with the Global Dark Theme option turned on.
,
Jul 17 2017
It's also possible to install themes from https://chrome.google.com/webstore/category/themes. These would be visible in chrome://extensions. Do you have that?
,
Jul 17 2017
As far as I can tell, I have no themes installed -- there are extensions listed in chrome://extensions, but no themes.
,
Sep 14 2017
You are still experiencing this issue?
,
Sep 14 2017
Does this happen in other GTK+ themes?
,
Sep 14 2017
It does not! Running "GTK_THEME=Adwaita google-chrome-beta" does not have the problem, and other themes also don't. "GTK_THEME=Adwaita:dark google-chrome-beta" does show the problem, however. So I suspect that the issue is that Chrome isn't quite respecting the dark theme variants properly.
,
Sep 14 2017
I was able to reproduce, thank you. Will look into this.
,
Sep 14 2017
Tom: GetNativeTheme()->GetSystemColor(ui::NativeTheme::kColorId_WindowBackground) seems to always return white. Is this expected?
,
Sep 14 2017
c#10: It's not supposed to always return white. Are you testing using dark Adwaita? On that theme, windows and dialogs are supposed to be charcoal colored (see the attached image). On my system, I'm sure it's not returning white because windows and dialogs are dark.
,
Sep 15 2017
c#11: I'm testing with dark adwaita and also see all dialogs except PaymentRequest having dark background. Granted, chrome/browser/ui/views/payments/ has a few instances of SK_ColorWHITE, but I've replaced those with GetNativeTheme()->GetSystemColor(ui::NativeTheme::kColorId_WindowBackground) and still see white background. Any ideas?
,
Sep 15 2017
If you're only setting the background color during initialization, you're probably not getting the right NativeTheme. Try overriding OnNativeThemeChanged() (be sure to call the superclass's OnNativeThemeChanged) in your view, and update the colors from the passed NativeTheme.
,
Sep 15 2017
c#13: That was it, thank you! Zach, Mathieu, Anthony: Here's the UX when we follow the theme on Linux. (Compare to what we do now in bug description). OK to make this change?
,
Sep 15 2017
,
Sep 15 2017
They look good except for high contrast, do you know what's causing the background difference? I'm fine landing this as a strict improvement BTW
,
Sep 15 2017
Not quite sure which view is painting the off-color background. in "high-contrast.png". Anthony, do you know?
,
Sep 15 2017
Anthony is back in a couple of weeks. Have you checked here [1] [1] https://cs.chromium.org/chromium/src/ui/views/window/dialog_client_view.cc?rcl=b5cadc9ab47b6d691b2bc66341911509a341b0aa&l=228
,
Sep 15 2017
PaymentRequest does not use DialogClientView, I believe.
,
Sep 15 2017
It does, through the DialogDelegate, I think https://cs.chromium.org/chromium/src/ui/views/window/dialog_delegate.cc?rcl=2867b7c20908aaf3ff93fc987166422dfa246949&l=201
,
Sep 15 2017
😲 will take a closer look
,
Sep 15 2017
2 more things in addition to what mathp@ said. * The separator color on dark Adwaita is too bright. We have kColorId_MenuSeparatorColor that you can use. * The black "chromium" text in dark Adwaita isn't readable on the dark background. Maybe try setting SetAutoColorReadabilityEnabled(true) on it? And if it already is true, then try setting the background color of the label to window background color.
,
Sep 15 2017
My patch so far, btw: https://chromium-review.googlesource.com/c/chromium/src/+/669319
,
Sep 18 2017
Tommy: do you know which view is drawing the off-color UI surface in high-contrast.png above?
,
Sep 18 2017
My gut is that the off-color surface is the background of the content area behind all the rows--PaymentRequestSheetController creates the header, a scrollable content area that its subclasses can populate, and a footer area. The header and footer seem to be OK, as do the rows (children) that we add. I'd look into the content area (which in reality looks to be as many as three containers to achieve the scrolling effect). https://cs.chromium.org/chromium/src/chrome/browser/ui/views/payments/payment_request_sheet_controller.cc?l=250&rcl=ddb3b868e596bf4f7f3e64ab570b647f7d26b3f7 Would be a place to start, though you may have already replaced this since you mentioned you searched for SK_ColorWHITE
,
Jan 30 2018
The following revision refers to this bug: https://chromium.googlesource.com/chromium/src.git/+/b424a5928cba52e245774dd481c39ff36ebaefae commit b424a5928cba52e245774dd481c39ff36ebaefae Author: Rouslan Solomakhin <rouslan@chromium.org> Date: Tue Jan 30 18:29:40 2018 [Payments] Use themed background color. Bug: 743173 Change-Id: Ie31e92bff4fda5907d45b931dd79caeac79b36ff Reviewed-on: https://chromium-review.googlesource.com/669319 Reviewed-by: anthonyvd <anthonyvd@chromium.org> Commit-Queue: Rouslan Solomakhin <rouslan@chromium.org> Cr-Commit-Position: refs/heads/master@{#532956} [modify] https://crrev.com/b424a5928cba52e245774dd481c39ff36ebaefae/chrome/browser/ui/views/payments/payment_request_dialog_view.cc [modify] https://crrev.com/b424a5928cba52e245774dd481c39ff36ebaefae/chrome/browser/ui/views/payments/payment_request_sheet_controller.cc
,
Jan 30 2018
,
Jan 31 2018
Verified the fix on Ubuntu 14.04 using Chrome version #66.0.3335.0 as per the comment #0. Attaching screen shot for reference. Observed that the text is not greyed and is clearly readable. Hence, the fix is working as expected. Adding the verified labels. Thanks...!! |
|||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||
Comment 1 by rouslan@chromium.org
, Jul 14 2017Owner: anthonyvd@chromium.org
Status: Untriaged (was: Unconfirmed)