1722126 - "Restart to Update" button on About box isn't visible on Mac in dark mode

Status: RESOLVED FIXED

(Thunderbird :: Theme, defect)

Description

[Dave Miller [:justdave]]

Attachment: Screen Shot 2021-07-23 at 9.36.54 PM.png

The text on the button is unreadable.

Comment 1

[Dave Miller [:justdave]]

Attachment: Screen Shot 2021-07-23 at 9.40.43 PM.png

screenshot with a more-recent version

Comment 2

[Richard Marti (:Paenglab)]

The button gets the white text colour defined here https://searchfox.org/mozilla-central/rev/c03526cc1d773532e89cb4b729c68fbf37737c1b/toolkit/themes/osx/global/button.css#12 but the button background stays white. Disabling widget.macos.support-dark-appearance fixes this but then also other places don't get the correct colours for dark themes. Also the context menus have still a light background with white text.

It doesn't seem to be a CSS issue, the button and the menus don't get the correct background-colors.

Harry, you fixed a lot of widget.macos.support-dark-appearance bugs. Please could you point us to what is needed to fix this issues for Thunderbird 91? Daily (our nightly) shows the correct menu text on the light background.

Comment 3

[Thomas D. (:thomas8)]

When are we going to create another version of that logo background picture for dark themes which has the brand name text color inverted on transparent background? Or to convert it into svg so that we can apply colors directly?

I'd imagine that the blue bird holding the white letter will actually look great on dark background...

Comment 4

[Markus Stange [:mstange]]

Yeah, making the background dark would be the best way to fix this. Native macOS buttons in Dark Mode have a translucent white border and background. This looks good on dark backgrounds (it results in a dark grey which has enough contrast with the white text), but obviously looks terrible on a white background.
In the future, in situations where you have a light background which doesn't work with dark theme form controls, you'll be able to set color-scheme: light on the element and get light mode form controls and system colors for that element. This is implemented on Nightly now but is still behind a pref (layout.css.color-scheme.enabled).

Comment 5

[Markus Stange [:mstange]]

(In reply to Richard Marti (:Paenglab) from comment #2)

Daily (our nightly) shows the correct menu text on the light background.

This is surprising to me. I'd have expected the text to be white even in Daily.

Comment 6

[Richard Marti (:Paenglab)]

(In reply to Markus Stange [:mstange] from comment #4)

Yeah, making the background dark would be the best way to fix this. Native macOS buttons in Dark Mode have a translucent white border and background. This looks good on dark backgrounds (it results in a dark grey which has enough contrast with the white text), but obviously looks terrible on a white background.
In the future, in situations where you have a light background which doesn't work with dark theme form controls, you'll be able to set color-scheme: light on the element and get light mode form controls and system colors for that element. This is implemented on Nightly now but is still behind a pref (layout.css.color-scheme.enabled).

Many thanks for the answer. So we need to either adapt the background colour depending of the theme or always use a dark background like FX is doing.

Comment 7

[Richard Marti (:Paenglab)]

Attachment: context-menu.png

(In reply to Markus Stange [:mstange] from comment #5)

(In reply to Richard Marti (:Paenglab) from comment #2)

Daily (our nightly) shows the correct menu text on the light background.

This is surprising to me. I'd have expected the text to be white even in Daily.

On the left is the latest beta with light macOS theme and dark TB theme. On the right the latest Daily with the same themes. Spot also the correct Big Sur _moz-menuactive appearance of the Daily like FX Nightly does. With my self built artifact TB Daily I get the same appearance like the beta has.

Comment 8

[Markus Stange [:mstange]]

Oh, menu text. I misread. I thought you were referring to the button text. The menu issue is very different.

Comment 9

[Richard Marti (:Paenglab)]

Is somewhere a bug about the menu issue to get an idea what's the problem?

Comment 10

[Markus Stange [:mstange]]

I'm not aware of one. Can you file it, please?

Comment 12

[Richard Marti (:Paenglab)]

Attachment: aboutDialog.png

Alessandro, what do you think about this for light and dark themes? Daily and Release would use the same styles.

I'm using the Daily SVG logo as the actual with the orange background doesn't work well with the dark background. And like this you see directly how the Release dialog would look.

Comment 13

[Alessandro Castellani [:aleca]]

Comment on attachment 9233653 [details]
aboutDialog.png

I like it.
The only thing I'd change is the icon's shadow/glow.
I think we don't need to use a drop shadow for the logo, which is pretty big and with a good contrast in both dark and light mode.

Comment 14

[Richard Marti (:Paenglab)]

Attachment: 1722126-aboutDialog-rework.patch landed on C-C

This is the patch without the drop shadow. I still use the separate CSS files for Daily and Release to be able to style different when needed.

Comment 15

[Alessandro Castellani [:aleca]]

Comment on attachment 9235525 [details] [diff] [review]
1722126-aboutDialog-rework.patch landed on C-C

Review of attachment 9235525 [details] [diff] [review]:
-----------------------------------------------------------------

Nice, good job.

Comment 16

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/4e6f168814f6
Make the about dialog theme dependent. r=aleca

Comment 17

[Richard Marti (:Paenglab)]

Attachment: 1722126-about-dialog-HCT.patch

Bah, I planned to add the high contrast styles too but forgot.

Now with HCT support.

Comment 18

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/8e69ac73e234
Follow-up to make the about dialog also work with HCT. r=aleca

Comment 19

[Richard Marti (:Paenglab)]

Attachment: 1722126-aboutDialog-rework-beta-esr.patch

Combined both patches for beta and ESR.

[Approval Request Comment]
User impact if declined: Unreadable Download/Restart button with dark theme on light OS theme
Testing completed (on c-c, etc.): on c-c
Risk to taking this patch (and alternatives if risky): should be low as it's mostly CSS

Comment 21

[Wayne Mery (:wsmwk)]

Comment on attachment 9235980 [details] [diff] [review]
1722126-aboutDialog-rework-beta-esr.patch

[Triage Comment]
approved for beta

Comment 22

[Rob Lemley [:rjl]]

Thunderbird 92.0b2:
https://hg.mozilla.org/releases/comm-beta/rev/4ddb9616f61c

Comment 23

[Wayne Mery (:wsmwk)]

Comment on attachment 9235980 [details] [diff] [review]
1722126-aboutDialog-rework-beta-esr.patch

[Triage Comment]
Approved for esr91

Comment 24

[Rob Lemley [:rjl]]

Thunderbird 91.0.2:
https://hg.mozilla.org/releases/comm-esr91/rev/18d00fc32b81