Closed
Bug 1500787
Opened 2 years ago
Closed 2 years ago
Text input colors can be mismatched with devtools theme
Categories
(DevTools :: Responsive Design Mode, enhancement, P3)
DevTools
Responsive Design Mode
Tracking
(firefox65 verified)
VERIFIED
FIXED
Firefox 65
Tracking | Status | |
---|---|---|
firefox65 | --- | verified |
People
(Reporter: fvsch, Assigned: aburone, Mentored)
Details
Attachments
(4 files)
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.)
Updated•2 years ago
|
Priority: -- → P3
Assignee | ||
Comment 1•2 years ago
|
||
Screenshot in linux In windows looks the same
Assignee | ||
Comment 2•2 years ago
|
||
--theme-tab-toolbar-background should be equal to --grey-90 to fix the toolbar background on that macOS capture. Or is that intentional?
Assignee | ||
Comment 3•2 years ago
|
||
Assignee | ||
Comment 4•2 years ago
|
||
Final look after patch (Linux)
Reporter | ||
Comment 5•2 years ago
|
||
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
Assignee | ||
Comment 6•2 years ago
|
||
(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?
Updated•2 years ago
|
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
Assignee | ||
Comment 7•2 years ago
|
||
Tried with GTK It looks ok in all variations, even high contrast.
Reporter | ||
Comment 8•2 years ago
|
||
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.
Assignee | ||
Comment 9•2 years ago
|
||
(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
Reporter | ||
Comment 10•2 years ago
|
||
> 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.
Assignee | ||
Comment 11•2 years ago
|
||
(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.
Updated•2 years ago
|
Attachment #9019250 -
Attachment description: Fix RDM input colors across platforms → Bug 1500787 - Fix RDM input colors across platforms; r=fvsch
Reporter | ||
Comment 12•2 years ago
|
||
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•2 years ago
|
||
Pushed by florens@fvsch.com: https://hg.mozilla.org/integration/autoland/rev/852ecad7f36b Fix RDM input colors across platforms; r=fvsch,gl
Comment 14•2 years ago
|
||
bugherder |
https://hg.mozilla.org/mozilla-central/rev/852ecad7f36b
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
status-firefox65:
--- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 65
Updated•2 years ago
|
Flags: qe-verify+
Comment 15•2 years ago
|
||
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.
You need to log in
before you can comment on or make changes to this bug.
Description
•