[linux] Maximize and Minimize buttons are not visible with Light theme
Categories
(Firefox :: Theme, defect)
Tracking
()
People
(Reporter: atrif, Assigned: emilio)
References
(Blocks 1 open bug, Regressed 1 open bug, Regression)
Details
(Keywords: regression)
Attachments
(4 files, 1 obsolete file)
Affected versions
- 91.0a1 (20210630212829)
- 90.0b12
- 89.0.2
Affected platforms
- Ubuntu 20.04
- Ubuntu 21.04
Steps to reproduce
- Open Firefox with a new profile and set Light theme.
- Observe Minimize and Maximize buttons.
Expected result
- Buttons are visible.
Actual result
- Buttons are barely visible.
Regression range
- Moz regression points out bug 1701256. Also, the “good” version has buttons barely visible but on the bad version, the buttons are almost invisible. I think the buttons are more visible on the previous version because the tab bar is greyer.
Notes
- Attached a screenshot before and after the change.
Reporter | ||
Updated•3 years ago
|
Updated•3 years ago
|
Updated•3 years ago
|
Comment 1•3 years ago
|
||
Jared, can you please take a look at this regression?
Comment 2•3 years ago
|
||
Hi Martin, I tried using the :backdrop
pseudo class to style the inactive state of these window controls but it doesn't seem to be taking effect.
I've tried the following on the .titlebar-min element,
.titlebar-min:backdrop {
background-color: red !important;
}
Am I using it incorrectly? I'm using the same approach as https://searchfox.org/mozilla-central/rev/4cca5d2f257c6f1bcef50a0debcbd66524add703/browser/base/content/browser.css#1622
Assignee | ||
Comment 4•3 years ago
|
||
(In reply to Jared Wein [:jaws] (please needinfo? me) from comment #2)
:backdrop
is a GTK pseudo-class, but not a Firefox pseudo-class. ::backdrop
on the web is a pseudo-element for elements that are in full-screen / modal dialog, so it's definitely not what you want. Note that setting background-color
wouldn't do anything anyways, because these elements are natively drawn.
To style stuff in inactive windows, you probably want :-moz-window-inactive
, but that's probably not what you intended?
So the main issue is that on Yaru the system titlebar is dark but the theme over-all is light... So when you set a light theme we still draw the GTK light-theme buttons, but they don't have contrast because they expect a dark titlebar. Does that make sense? The obvious fix is to either:
- Not use native buttons when using some non-system theme.
- Use a native titlebar even when using the non-system theme.
- Maybe do something smarter and detect contrast, but not sure how that'd look.
Probably the first is easier.
Comment 5•3 years ago
|
||
(In reply to Emilio Cobos Álvarez (:emilio) from comment #4)
(In reply to Jared Wein [:jaws] (please needinfo? me) from comment #2)
:backdrop
is a GTK pseudo-class, but not a Firefox pseudo-class.::backdrop
on the web is a pseudo-element for elements that are in full-screen / modal dialog, so it's definitely not what you want. Note that settingbackground-color
wouldn't do anything anyways, because these elements are natively drawn.
Note that I found :backdrop
from https://searchfox.org/mozilla-central/rev/7bafa9b9c2156018ec1d410194f9bf4b5b23e77f/widget/gtk/nsWindow.h#571. I think we would actually end up doing #2 due to some other decisions we made with regards to themes on Linux.
Updated•3 years ago
|
Updated•3 years ago
|
Updated•3 years ago
|
Comment 6•3 years ago
|
||
I can no longer reproduce this even when toggling Title Bar
in the Customize Toolbar mode on NIghtly in Ubuntu 20.04.3 on VMWare.
Comment 7•3 years ago
|
||
This reproduces reliably for me on Ubuntu 20 with the Yaru system theme and firefox Light theme. As emilio pointed out, I needed to disable the system title bar. I.e. Customize toolbar, then uncheck "titlebar"
Comment 8•3 years ago
|
||
Comment 9•3 years ago
|
||
Steps to set the Yaru theme in Ubuntu
- Install Gnome Tweak in the Ubuntu Software Center
- In Gnome Tweak > Appearance select the Yaru theme on all the drop downs.
- Note that setting Applications to
Yaru-light
does not produce the issue butYaru
andYaru-dark
does.
Also note that this is not a regression, this issue is the same in 88 it's just slightly worse in Proton due to the lighter background color.
Out of Emilio's suggestions. The first sounds the easiest to me. The second I can't figure how that's going to work with tabs, I have no ideas on the third either. There is also another possible solution. We could disable the non-system themes in the browser on Linux when the title bar is disabled. That would be more drastic, but it works. Also for the first solution (and I suppose all of them), we would only need to use that when the title bar is disabled.
Comment 10•3 years ago
|
||
Dao do you have any suggestions for solving this?
Comment 11•3 years ago
|
||
If I remember this right from my testing, the Default (light) theme showed a dark titlebar, while the Light theme showed a light titlebar. We shouldn't have any inconsistencies between Default (light) and Light, and as such we should have a dark titlebar when using the Light theme. Perhaps this isn't perfect in that there could still be dark window controls but for the most part this would be the simplest solution and not require any platform changes.
Comment 12•3 years ago
|
||
(In reply to Jared Wein [:jaws] (please needinfo? me) from comment #11)
If I remember this right from my testing, the Default (light) theme showed a dark titlebar, while the Light theme showed a light titlebar. We shouldn't have any inconsistencies between Default (light) and Light, and as such we should have a dark titlebar when using the Light theme.
I'm not sure what you mean by "Default (light)". That's not how it's called internally nor externally, nor how it's implemented. I don't think it follows that these two themes should produce the same result.
I don't think this is going to be a 1-point task either.
(In reply to Emilio Cobos Álvarez (:emilio) from comment #4)
(In reply to Jared Wein [:jaws] (please needinfo? me) from comment #2)
So the main issue is that on Yaru the system titlebar is dark but the theme over-all is light... So when you set a light theme we still draw the GTK light-theme buttons, but they don't have contrast because they expect a dark titlebar. Does that make sense? The obvious fix is to either:
- Not use native buttons when using some non-system theme.
- Use a native titlebar even when using the non-system theme.
- Maybe do something smarter and detect contrast, but not sure how that'd look.
Probably the first is easier.
Option 2 seems like a nonstarter, since it would basically make the tab bar unthemeable on Linux. So I guess option 1 is our best shot.
Comment 13•3 years ago
|
||
(In reply to Dão Gottwald [::dao] from comment #12)
(In reply to Jared Wein [:jaws] (please needinfo? me) from comment #11)
If I remember this right from my testing, the Default (light) theme showed a dark titlebar, while the Light theme showed a light titlebar. We shouldn't have any inconsistencies between Default (light) and Light, and as such we should have a dark titlebar when using the Light theme.
I'm not sure what you mean by "Default (light)". That's not how it's called internally nor externally, nor how it's implemented. I don't think it follows that these two themes should produce the same result.
My apologies. I haven't followed the Linux implementation of themes in Proton as closely. On Windows, the System theme just flips between Light and Dark depending on the system dark-mode setting, so I assumed that we wanted the same behavior for Linux (though on Linux we fall back to system colors and transparencies).
Comment 14•3 years ago
|
||
Yasmin, I'll upgrade the point value to what I think is a more realistic one. If you still think this should be a 1, which is reserved for the most trivial fixes, please explain how you arrived at that estimate.
Updated•3 years ago
|
Comment 15•3 years ago
|
||
Removed the GTK rendered buttons and replaced them with HTML and CSS buttons. Still need to:
- Get a maximize SVG icon.
- Make this change conditional on wether the system theme is enabled or not.
- Use correct colors in Dark Theme.
Updated•3 years ago
|
Updated•3 years ago
|
Updated•3 years ago
|
Assignee | ||
Comment 17•3 years ago
|
||
Not sure if we want to go with something like this, but it's potentially
a simpler alternative?
Assignee | ||
Comment 18•3 years ago
|
||
Co-authored-by: Bernard Igiri <bigiri@mozilla.com>
Updated•3 years ago
|
Updated•3 years ago
|
Assignee | ||
Comment 19•3 years ago
|
||
I don't know which one of the two approaches we want to go for. I can see both having different trade-offs...
Updated•3 years ago
|
Updated•3 years ago
|
Comment 20•3 years ago
|
||
Comment 21•3 years ago
|
||
bugherder |
Updated•3 years ago
|
Comment 22•3 years ago
|
||
I am getting the new buttons (non-gtk ones) if I have system auto theme but using an addon like theme creator lite (https://addons.mozilla.org/en-US/firefox/addon/nicothin-theme-creator-lite/) . Is this intended change? I just use it to add highlights around tabs as its not easy to differentiate them otherwise
Comment 23•3 years ago
|
||
Is there an about:config entry that can toggle the gtk buttons and firefox's custom buttons?
Assignee | ||
Comment 24•3 years ago
|
||
(In reply to Leo_sk from comment #22)
I am getting the new buttons (non-gtk ones) if I have system auto theme but using an addon like theme creator lite (https://addons.mozilla.org/en-US/firefox/addon/nicothin-theme-creator-lite/) . Is this intended change? I just use it to add highlights around tabs as its not easy to differentiate them otherwise
Yes, it is expected. You shouldn't be getting the gtk titlebar either and so on.
(In reply to Leo_sk from comment #23)
Is there an about:config entry that can toggle the gtk buttons and firefox's custom buttons?
There's not at the moment. Maybe file one? I believe it should be sort of straight-forward to add one, though not sure if worth it.
Comment hidden (advocacy) |
Updated•3 years ago
|
Updated•3 years ago
|
Reporter | ||
Comment 27•3 years ago
|
||
Verified fixed with Firefox 96.0b4 (20211212185725) on Ubuntu 21.1 and 20.04. The buttons are visible while using the Light theme.
Description
•