Closed Bug 1500787 Opened 10 months ago Closed 10 months ago

Text input colors can be mismatched with devtools theme

Categories

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

enhancement

Tracking

(firefox65 verified)

VERIFIED FIXED
Firefox 65
Tracking Status
firefox65 --- verified

People

(Reporter: fvsch, Assigned: aburone, Mentored)

Details

Attachments

(4 files)

Attached image 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.)
Priority: -- → P3
Attached image 1500787 linux.png
Screenshot in linux
In windows looks the same
--theme-tab-toolbar-background should be equal to --grey-90 to fix the toolbar background on that macOS capture. Or is that intentional?
Attached image 1500787 after.png
Final look after patch (Linux)
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.
Assignee: nobody → aburone
Mentor: florens
Status: NEW → ASSIGNED
(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?
Attachment #9019250 - Attachment description: Summary: Input colors can be mismatched with devtools theme Added a class to #user-agent-label and input Used same styles of .viewport-dimension-input on it → Fix RDM input colors across platforms
Tried with GTK
It looks ok in all variations, even high contrast.
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.
(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
> 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.
(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.
Attachment #9019250 - Attachment description: Fix RDM input colors across platforms → Bug 1500787 - Fix RDM input colors across platforms; r=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
Pushed by florens@fvsch.com:
https://hg.mozilla.org/integration/autoland/rev/852ecad7f36b
Fix RDM input colors across platforms; r=fvsch,gl
https://hg.mozilla.org/mozilla-central/rev/852ecad7f36b
Status: ASSIGNED → RESOLVED
Closed: 10 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 65
Flags: qe-verify+

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.

Status: RESOLVED → VERIFIED
Flags: qe-verify+
You need to log in before you can comment on or make changes to this bug.