1718846 - [linux] Maximize and Minimize buttons are not visible with Light theme

Status: VERIFIED FIXED

(Firefox :: Theme, defect)

Description

[Alexandru Trif, Desktop QA [:atrif]]

Attachment: linux_buttons

Affected versions

• 91.0a1 (20210630212829)
• 90.0b12
• 89.0.2

Affected platforms

• Ubuntu 20.04
• Ubuntu 21.04

Steps to reproduce

1. Open Firefox with a new profile and set Light theme.
2. 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.

Comment 1

[Ryan VanderMeulen [:RyanVM]]

Jared, can you please take a look at this regression?

Comment 2

[Jared Wein [:jaws] (please needinfo? me)]

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

Comment 3

[Martin Stránský [:stransky] (ni? me)]

Emilio should know better.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

(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

[Jared Wein [:jaws] (please needinfo? me)]

(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 setting background-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.

Comment 6

[Bernard Igiri]

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

[Sam Foster [:sfoster] (he/him)]

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

[Sam Foster [:sfoster] (he/him)]

Attachment: Ubuntu 20, Yaru theme, Firefox Light them

Comment 9

[Bernard Igiri]

Steps to set the Yaru theme in Ubuntu

1. Install Gnome Tweak in the Ubuntu Software Center
2. In Gnome Tweak > Appearance select the Yaru theme on all the drop downs.
3. Note that setting Applications to Yaru-light does not produce the issue but Yaru and Yaru-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

[Bernard Igiri]

Dao do you have any suggestions for solving this?

Comment 11

[Jared Wein [:jaws] (please needinfo? me)]

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

[Dão Gottwald [:dao]]

(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

[Jared Wein [:jaws] (please needinfo? me)]

(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

[Dão Gottwald [:dao]]

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.

Comment 15

[Bernard Igiri]

Attachment: WIP: Bug 1718846 - Make minimize and maximize buttons visible in Light theme

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.

Comment 17

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1718846 - Render native titlebar background-colors in buttonbox when lightweight themes are in use. r=dao

Not sure if we want to go with something like this, but it's potentially
a simpler alternative?

Comment 18

[Emilio Cobos Álvarez (:emilio)]

Attachment: Bug 1718846 - Draw our own titlebar buttons when using lightweight themes. r=dao

Co-authored-by: Bernard Igiri <[e-mail]>

Comment 19

[Emilio Cobos Álvarez (:emilio)]

I don't know which one of the two approaches we want to go for. I can see both having different trade-offs...

Comment 20

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/0d5589e4ee65
Draw our own titlebar buttons when using lightweight themes. r=dao

Comment 21

[Marian-Vasile Laza]

https://hg.mozilla.org/mozilla-central/rev/0d5589e4ee65

Comment 22

[Leo_sk]

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

[Leo_sk]

Is there an about:config entry that can toggle the gtk buttons and firefox's custom buttons?

Comment 24

[Emilio Cobos Álvarez (:emilio)]

(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 25

[movisivi]

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.

We shouldn't have to file a bug. You should've done this before you added this "feature". This should be opt in. Firefox shouldn't be overriding users' custom themes. They're called custom for a reason.

Comment 27

[Alexandru Trif, Desktop QA [:atrif]]

Verified fixed with Firefox 96.0b4 (20211212185725) on Ubuntu 21.1 and 20.04. The buttons are visible while using the Light theme.