1500787 - Text input colors can be mismatched with devtools theme

Status: VERIFIED FIXED

(DevTools :: Responsive Design Mode, enhancement, P3)

Description

[Florens Verschelde :fvsch]

Attachment: rdm-dark-inputs.png

The text and background colors for text inputs in the new RDM toolbar can be mismatched with the devtools theme:

1. On macOS (possibly on all platforms), the UA field has a white background even when using the dark theme. I suggest trying to match the style from the dimension inputs.
2. On Linux, the input colors come from the GTK theme, so they can end up being light-on-dark or dark-on-light.

Both issues can be fixed by explicitly declaring text and background colors for those text inputs. (We did that already for the Inspector in bug 1495693.)

Comment 1

[Ariel Burone]

Attachment: 1500787 linux.png

Screenshot in linux
In windows looks the same

Comment 2

[Ariel Burone]

--theme-tab-toolbar-background should be equal to --grey-90 to fix the toolbar background on that macOS capture. Or is that intentional?

Comment 3

[Ariel Burone]

Attachment: Bug 1500787 - Fix RDM input colors across platforms; r=fvsch

Comment 4

[Ariel Burone]

Attachment: 1500787 after.png

Final look after patch (Linux)

Comment 5

[Florens Verschelde :fvsch]

Hi Ariel,

Can you test your patch in the following 4 conditions:

1. DevTools light theme, using a light GTK theme
2. DevTools light theme, using a dark GTK theme
3. DevTools dark theme, using a light GTK theme
4. DevTools dark theme, using a dark GTK theme

This is easier to test if you're using Linux with a GTK-based desktop environment such as Gnome. The "Gnome Tweaks" app can be used to select a dark GTK theme such as Adwaita Dark if it's available.

Comment 6

[Ariel Burone]

(In reply to Florens Verschelde [:fvsch] from comment #5)
> Hi Ariel,
> 
> Can you test your patch in the following 4 conditions:
> 
> 1. DevTools light theme, using a light GTK theme
> 2. DevTools light theme, using a dark GTK theme
> 3. DevTools dark theme, using a light GTK theme
> 4. DevTools dark theme, using a dark GTK theme
> 
> This is easier to test if you're using Linux with a GTK-based desktop
> environment such as Gnome. The "Gnome Tweaks" app can be used to select a
> dark GTK theme such as Adwaita Dark if it's available.

Sure. Give me some minutes that firefox is compiling from scratch 😭
After this finish I'll switch to gnome and test

What about that strange background in macOS? Is that intentional?

Comment 7

[Ariel Burone]

Tried with GTK
It looks ok in all variations, even high contrast.

Comment 8

[Florens Verschelde :fvsch]

For the strange background in macOS, are you referring to my opening comment?

> 1. On macOS (possibly on all platforms), the UA field has a white background even when using the dark theme. I suggest trying to match the style from the dimension inputs.

If we explictly declare the input text color and background-color for all platforms (not in Linux-specific code), this should fix this issue on macOS/Windows too.

Comment 9

[Ariel Burone]

(In reply to Florens Verschelde [:fvsch] from comment #8)
> For the strange background in macOS, are you referring to my opening comment?
> 
> > 1. On macOS (possibly on all platforms), the UA field has a white background even when using the dark theme. I suggest trying to match the style from the dimension inputs.
> 
> If we explictly declare the input text color and background-color for all
> platforms (not in Linux-specific code), this should fix this issue on
> macOS/Windows too.

No, I mean in the screenshot rdm-dark-inputs.png 
The background of that toolbar is a light color instead of dark

And with this
--theme-tab-toolbar-background should be equal to --grey-90 to fix the toolbar background on that macOS capture. Or is that intentional?


I was talking about that screenshot

Comment 10

[Florens Verschelde :fvsch]

> No, I mean in the screenshot rdm-dark-inputs.png 
> The background of that toolbar is a light color instead of dark

Yes, that's a Linux screenshot, using the DevTools light theme, so the light background is intended.
The bug in that screenshot is that the inputs are dark instead of being light (and the UA input is too tall), because the inputs use default colors from the GTK theme.

Comment 11

[Ariel Burone]

(In reply to Florens Verschelde [:fvsch] from comment #10)
> > No, I mean in the screenshot rdm-dark-inputs.png 
> > The background of that toolbar is a light color instead of dark
> 
> Yes, that's a Linux screenshot, using the DevTools light theme, so the light
> background is intended.
> The bug in that screenshot is that the inputs are dark instead of being
> light (and the UA input is too tall), because the inputs use default colors
> from the GTK theme.

Oh, I understood it was a mac screenshot. My bad.

Comment 12

[Florens Verschelde :fvsch]

Patch looks good to me after the latest updates.
Also tried locally on Linux and it fixes the issue; I expect it should be alright for the dark theme UA field issue on Windows/Mac too.

Try: https://treeherder.mozilla.org/#/jobs?repo=try&revision=fde4979057968a32b6c9479129d0827ca2074f7f

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/852ecad7f36b
Fix RDM input colors across platforms; r=fvsch,gl

Comment 14

[Arthur Iakab [arthur_iakab]]

https://hg.mozilla.org/mozilla-central/rev/852ecad7f36b

Comment 15

[Daniel Cicas [:dcicas], Release QA]

I reproduced this issue using Fx 64.0a1, build ID: 20181021220134, on Windows 10 x64, Ubuntu 18.04 x64 and macOS x 10.13.
I can confirm this issue is fixed, I verified using Fx 65.0b11, build ID: 20190114172331, on Windows 10 x64, macOS X 10.12.6 and Ubuntu 18.04.