1456219 - Add default Light- and Dark themes to TB

Status: RESOLVED FIXED

(Thunderbird :: Theme, enhancement)

Description

[Richard Marti (:Paenglab)]

FX has by default a dark and a light theme. We can follow and extend them later to theme more areas.

Comment 1

[Richard Marti (:Paenglab)]

Attachment: Light-Dark-themes.patch

Needs to be applied over bug 1455942.

This patch adds a dark and a light LW-theme like FX has.

They work on all platforms and I tested Win 7 Classic/Basic/Aero too.

This themes are a bit more powerful than normal LW/WX-themes because there is a compacttheme.css added that can do more.

I'm planning to extend them for example to the QFB bar, the message header and the header toolbar in composer.

I'm using now the FX icons in Add-on manager. Maybe we can add other later. But bug 1372694 will add a icon for the default theme through toolkit which makes it probably not possible to change it for us.

Comment 2

[Jorg K (CEST = GMT+2)]

Comment on attachment 8970274 [details] [diff] [review]
Light-Dark-themes.patch

This works for me, however, it doesn't follow FF 59. There the light and default themes show the menu in the same colour as the tab bar. With the patch, menu and title bar are almost white and the tab bar is grey in the light theme. Is that intentional?

Comment 3

[Richard Marti (:Paenglab)]

Attachment: Light-Dark-themes.patch

Fixed the issue with the menubar.

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/5bbef8b40975
Add default Light and Dark themes to TB. r=jorgk

Comment 5

[Wayne Mery (:wsmwk)]

Is this strictly patch applicable to version 61+?  
The reason I ask is I've seen user requests for dark theme - which we don't have in 60.

Comment 6

[Richard Marti (:Paenglab)]

It should work on TB 60 too. It can be that some tweaks are needed. But this would need first to apply to TB 60 and then to be checked.

Comment 7

[Richard Marti (:Paenglab)]

Ah, the problem is, we have strings added. So, no uplift possible.

Comment 8

[Wayne Mery (:wsmwk)]

(In reply to Richard Marti (:Paenglab) from comment #7)
> Ah, the problem is, we have strings added. So, no uplift possible.

That's unfortunate. I know it would be generally frowned up, but would it be bad to uplift and just not have the strings translated - it's not in the main UI?

Comment 9

[Richard Marti (:Paenglab)]

Attachment: DarkLightTheme-beta.patch

This patch applies on beta with the strings removed. What do you think, can we somehow start a try build on beta to check how it works and what changes are needed to work properly? I have no local build system for beta.

Comment 10

[Richard Marti (:Paenglab)]

The strings are hard coded now.

Comment 11

[Jorg K (CEST = GMT+2)]

You can just push to try from comm-beta, that works.

Comment 12

[Richard Marti (:Paenglab)]

Do I need to define the changesets? If yes, which?

Comment 13

[Jorg K (CEST = GMT+2)]

Assuming you have comm-beta checked out and are at the tip + your patch, you just do a try push with the usual syntax. Nothing else required.

Comment 14

[Richard Marti (:Paenglab)]

Attachment: DarkLightTheme-beta.patch

I had to change two variable names which changed in 61. But now I tried it and it should work on beta.

Jörg persuaded me to let the string changes in the patch. The locales which want to translate can do it, the others would be like we hard coded the strings.

Comment 15

[Jorg K (CEST = GMT+2)]

Comment on attachment 8970971 [details] [diff] [review]
DarkLightTheme-beta.patch

OK, let's do it although we're going to get into trouble with L10n.

Comment 16

[Jorg K (CEST = GMT+2)]

Beta (TB 60 beta 5):
https://hg.mozilla.org/releases/comm-beta/rev/b6abecf3a8e13e56fc8d9ccb539e10d40017eaf3

Comment 17

[:aceman]

In try run https://taskcluster-artifacts.net/UT2oazXfRy2A2Z1btkhZHA/0/public/logs/live_backing.log there is now an error:
JavaScript error: chrome://messenger/content/addressbook/addressbook.js, line 15: ReferenceError: XPCOMUtils is not defined

Missing ChromeUtils.import("resource://gre/modules/XPCOMUtils.jsm"); in addressbook.js ?

Comment 18

[Richard Marti (:Paenglab)]

Attachment: 1456219-followup.patch

Is it better with this?

Comment 19

[Jorg K (CEST = GMT+2)]

Hmm, do I need this for the beta? What happens without it apart from the JS error?

Comment 20

[:aceman]

Comment on attachment 8971432 [details] [diff] [review]
1456219-followup.patch

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

Yes, this fixes the error (tried locally on the test-send-button.js).

I don't know what problems the missing import causes, if any. LW theme seems the apply to the AB window even with the error (albeit it is different tone than the main window).

Comment 21

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/c86896b10e65
Follow-up: Import XPCOMUtils.jsm in addressbook.js. r=aceman DONTBUILD

Comment 22

[Jorg K (CEST = GMT+2)]

Beta: https://hg.mozilla.org/releases/comm-beta/rev/809d703185fad41ba2d60afe298e0e79411fb55d

Comment 23

[realDonaldTrump]

For MacOS, is there a way to make the background of the tab bar dark in the default theme (so it matches the Firefox experience)?

Comment 24

[Richard Marti (:Paenglab)]

(In reply to realDonaldTrump from comment #23)
> For MacOS, is there a way to make the background of the tab bar dark in the
> default theme (so it matches the Firefox experience)?

This added in userChrome.css should work:

#tabs-toolbar {
  -moz-appearance: -moz-mac-vibrant-titlebar-dark !important;
  -moz-font-smoothing-background-color: -moz-mac-vibrant-titlebar-dark !important;
  background-color: #232323 !important;
  color: hsl(240, 9%, 98%) !important;
  text-shadow: none !important;
}

Comment 25

[realDonaldTrump]

(In reply to Richard Marti (:Paenglab) from comment #24)
> (In reply to realDonaldTrump from comment #23)
> > For MacOS, is there a way to make the background of the tab bar dark in the
> > default theme (so it matches the Firefox experience)?
> 
> This added in userChrome.css should work:
> 
> #tabs-toolbar {
>   -moz-appearance: -moz-mac-vibrant-titlebar-dark !important;
>   -moz-font-smoothing-background-color: -moz-mac-vibrant-titlebar-dark
> !important;
>   background-color: #232323 !important;
>   color: hsl(240, 9%, 98%) !important;
>   text-shadow: none !important;
> }

thank you for making thunderbird great again!  tremendous!!!