666227 - Change toolbar and tab background area pick up window control color

Status: RESOLVED FIXED

(Thunderbird :: Theme, defect)

Description

[Andreas Nilsson (:andreasn)]

Attachment: mockup of how it would look

Having the entire area behind the tabs pick up the window header background looks pretty neat on Firefox, look into if this is possible on Thunderbird too. Ideally we would end up with something looking like the attached mockup.

Comment 1

[Richard Marti (:Paenglab)]

Attachment: Give toolbar and tabbar menu background color

This patch gives toolbar and tabbar background the menu background color. It lso gives the inactive buttons and tabs menu text color. It work really well also with existing icons except the Quick filter bar button (black search glass on black background).

I used only the menu background color instead of -moz-appearance: menubar to look good under every Linux theme I have installed.

Comment 2

[Richard Marti (:Paenglab)]

Attachment: Give toolbar and tabbar menu background color

Updated patch to fix the background-color of messageheader- and attachment toolbar

Comment 3

[Richard Marti (:Paenglab)]

Attachment: Give toolbar and tabbar menu background color with

Again a new patch. This time with svg images for QFB filter and all-tabs dropmarker.

The images are only rough samples to show the effect (my Inkscape knowledge is limited).

Andreasn: please can you check the Composer window? It is now a little bit to dark. What do you mean, would it be better if the addressing-widget and the format-toolbar have the old color?

Comment 4

[Richard Marti (:Paenglab)]

Attachment: Composer comparison

Comparison between dark and bright addressing-widget and Format-toolbar.

Comment 5

[Andreas Nilsson (:andreasn)]

Doing all black for addressing-widget and the format-toolbar too seems a bit wild. I think it's better to just do it for the regular toolbar.

Comment 6

[Richard Marti (:Paenglab)]

Attachment: Give toolbar and tabbar menu background color V2

Patch which only paints the main toolbar in composer with the menu background-color.

Comment 7

[Andreas Nilsson (:andreasn)]

Odd, under Clearlooks (and Adwaita, Fedora default) this area looks all white. This is not happening in Firefox, so I wonder what's going on here. Do you get that too?

Comment 8

[Richard Marti (:Paenglab)]

It looks like Clearlooks defines a white background-color but is using a image to draw the toolbars.

I tried with -moz-appearance: menubar on toolbars and also on toolbox.

With this appearance on every toolbar this could look a little bit anxious on some themes.
With the appearance on the toolbox it looks less anxious.

What should I use, toolbar or toolbox? What do you mean?

Comment 9

[Richard Marti (:Paenglab)]

Attachment: Comparsion for Clearlooks

On top is appearance on every toolbar. On bottom only on toolbox. Ambiance looks similar, it has only soft borders.

Comment 10

[Richard Marti (:Paenglab)]

Attachment: Appearance on Amaranth

Amaranth as a example where it looks no so good on every toolbar.

Comment 11

[Richard Marti (:Paenglab)]

Attachment: Appearance on SphereCrystal

Again a IMHO bad example when the appearance is on every toolbar.

Comment 12

[Andreas Nilsson (:andreasn)]

I don't think we need to worry too much about Amaranth and SphereCrystal (if we assume most people don't change to a different theme than the one that came with their distro). I would worry mainly about
* Clearlooks/Adwaita(gtk3 only, see #627699) on Fedora on Debian
* The default Ubuntu theme
* Whatever Suse ships

Comment 13

[Andreas Nilsson (:andreasn)]

I'm going to test this patch on a less broken system tomorrow to make sure it's not my clearlooks that's broken (my current system begs for a reinstall :).

Comment 14

[Richard Marti (:Paenglab)]

It's not a broken system on your side. Also on my system Clearlooks is showing the white background.

Comment 15

[Richard Marti (:Paenglab)]

Attachment: Give toolbar and tabbar menu background color V3

Now using -moz-appearance: menubar

Comment 16

[Richard Marti (:Paenglab)]

Attachment: Give toolbar and tabbar menu background color v4

Previous patch gave also message header buttons MenuText color -> fixed this.

Comment 17

[Andreas Nilsson (:andreasn)]

Comment on attachment 547924 [details] [diff] [review]
Give toolbar and tabbar menu background color v4

Works well on all themes I tried it with (Ambiance, Clearlooks, HighContrast etc.), and personas still seemed to work well too.

Comment 18

[Richard Marti (:Paenglab)]

Comment on attachment 547924 [details] [diff] [review]
Give toolbar and tabbar menu background color v4

Squib, this is Linux only. Is it okay to give you the review?

Comment 19

[Jim Porter (:squib)]

Comment on attachment 547924 [details] [diff] [review]
Give toolbar and tabbar menu background color v4

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

Overall, this looks good to me. The quick filter icon seems a little on the thin side, but it's probably ok.

Comment 20

[Jonathan Protzenko [:protz]]

http://hg.mozilla.org/comm-central/rev/90c0fbac9a7e

Comment 21

[Eric Ding]

I just upgraded to Thunderbird 8, and found this change a visual shock.  I kid you not -- I've spent hours (!) tracking down why in the world this happened.

My toolbar in Thunderbird now looks completely different than anywhere else on my system.  I'm using Shiki-Wise, which was the default theme in Linux Mint 9, and still looks good to me -- except that in Thunderbird, unlike everywhere else on my system, the main toolbar is dark.  Even Firefox 8 doesn't do this.

Does nobody else think it's a little odd to change the toolbar widgets to use *menubar* colors by default, ignoring the intentions of theme designers?  Can you at least suggest a way to work around these changes, e.g., using Stylish user styles?

Comment 22

[Andreas Nilsson (:andreasn)]

(In reply to Eric Ding from comment #21)
> I just upgraded to Thunderbird 8, and found this change a visual shock.  I
> kid you not -- I've spent hours (!) tracking down why in the world this
> happened.
> 
> My toolbar in Thunderbird now looks completely different than anywhere else
> on my system.  I'm using Shiki-Wise, which was the default theme in Linux
> Mint 9, and still looks good to me -- except that in Thunderbird, unlike
> everywhere else on my system, the main toolbar is dark.  Even Firefox 8
> doesn't do this.
> 
> Does nobody else think it's a little odd to change the toolbar widgets to
> use *menubar* colors by default, ignoring the intentions of theme designers?
> Can you at least suggest a way to work around these changes, e.g., using
> Stylish user styles?

Do you have a screenshot of how it looks?

Comment 23

[Eric Ding]

Attachment: appearance on Shiki Wise

Sure, see attached.  In the attached screenshot, I do notice that Firefox does have inactive tabs and the background areas behind the tabs match the menubar, and it doesn't look too bad.  But it's important to note that it only does this when tabs are on top; when tabs are underneath the navigation toolbar, the theme reverts tabs to the standard (greyish) color scheme -- and I think this would be more analogous to the Thunderbird window layout.

Comment 24

[Blake Winton (:bwinton) (:☕️)]

Eric,

I see what you mean, but since tabs-on-top will be landing for Thunderbird fairly soon (I hope!) I'm not sure that we want to fix this.  If it's still bothering you, I would be happy to find a way to fix it on your version.

Comment 25

[Eric Ding]

Blake,

Thanks for your quick response.  I spent more time than I should have on this issue already, but the result is that I developed a workaround to this change by creating a Stylish user style to undo the relevant theme changes.

Regardless, though, I think this may still need to be fixed: 

- in tabs-on-top view, the toolbar buttons will need to follow their former look rather than being changed to the menubar's color.

- if tabs-on-top is optional (as in Firefox) and the user doesn't choose to have tabs on top (or if tabs are hidden), then the toolbar buttons *and* the tab background area should follow their former look, not the new look.

What do you think?

Comment 26

[Blake Winton (:bwinton) (:☕️)]

Eric,

The colour should be fixed in the tabs-on-top view.  Please give it a try with one of Mike Conley's try-server builds at https://ftp.mozilla.org/pub/mozilla.org/thunderbird/try-builds/[e-mail]-57fa0d8427c8/ and let me know if it fails…

And tabs-on-top won't be optional in Thunderbird, so we don't need to worry about that case.  :)

Comment 27

[Eric Ding]

Attachment: appearance on Shiki Wise (Daily 11.0a1)

Blake,

Hmm... just tried it, and it seems to be caught halfway in between now!  The menu bar is now light gray (even though Shiki Wise menubars are supposed to be dark), while the tab background is dark, so it looks even worse than before!  :)  See screenshot.

Eric

Comment 28

[Blake Winton (:bwinton) (:☕️)]

Hmmm, that does look a little off.

Andreas, Mike, could you fix this as part of the Tabs On Top bug?

Thanks,
Blake.

Comment 29

[Richard Marti (:Paenglab)]

(In reply to Eric Ding from comment #27)
> Created attachment 577813 [details]
> appearance on Shiki Wise (Daily 11.0a1)
> 
> Blake,
> 
> Hmm... just tried it, and it seems to be caught halfway in between now!  The
> menu bar is now light gray (even though Shiki Wise menubars are supposed to
> be dark), while the tab background is dark, so it looks even worse than
> before!  :)  See screenshot.
> 
> Eric

Have you removed your Stylish style with the Try build? Here under Ubuntu the menu bar looks okay (dark).

Comment 30

[Eric Ding]

(In reply to Richard Marti [:paenglab] from comment #29)

> Have you removed your Stylish style with the Try build? Here under Ubuntu
> the menu bar looks okay (dark).

Yes.  In fact, I tried it with a new profile just to make sure I didn't have any other settings interfering with it.

Comment 31

[Mike Conley (:mconley) (:⚙️)]

(In reply to Blake Winton (:bwinton - Thunderbird UX) from comment #28)
> Hmmm, that does look a little off.
> 
> Andreas, Mike, could you fix this as part of the Tabs On Top bug?
> 
> Thanks,
> Blake.

Yep, that got caught and fixed a few days ago.

Eric:  if you'd like to try it with the fix, a newer build is available here:  https://ftp.mozilla.org/pub/mozilla.org/thunderbird/try-builds/[e-mail]-1b6eedda6ea5/

Comment 32

[Eric Ding]

Better!  But the toolbar is still the wrong color (dark rather than following the theme) in the address book and compose windows.  I know there's a move toward putting those in tabs, but as long as they can be viewed in separate windows, this needs to be fixed too.

Comment 33

[Mike Conley (:mconley) (:⚙️)]

Hey Eric:

Hrm, are you sure?  Here's a screenshot of all three Windows on Ubuntu with a fresh profile:  http://i.imgur.com/3Y1F2.png

Those seem to appear and be behaving as designed.

Also, if you wouldn't mind, if you find more bugs resulting from the tabs on top stuff, can you comment in bug 644169?  That way it's all concentrated in one place.

Thanks!

-Mike

Comment 34

[Richard Marti (:Paenglab)]

I retested it under Ubuntu 11.10 and can confirm the menubar has always the dark background also with the light and high contrast themes. But also Firefox under Firefox I see the same behaviour so I would say this is a toolkit issue.

Comment 35

[Jim Porter (:squib)]

I believe menubar-colored toolbars (i.e. dark toolbars on the default theme) are the norm for Ubuntu as of 11.04. Maybe we should be doing this in the Ubuntu modifications like we do for the main toolbar icons, though.

Comment 36

[Eric Ding]

Attachment: AB/Compose windows on Shiki Wise (Daily 11.0a1)

(In reply to Mike Conley (:mconley) from comment #33)

> Hrm, are you sure?  Here's a screenshot of all three Windows on Ubuntu with
> a fresh profile:  http://i.imgur.com/3Y1F2.png
> 
> Those seem to appear and be behaving as designed

Let me clarify: the menubars are behaving as designed, but not the toolbar.  Perhaps in Ubuntu's default theme, the toolbars are supposed to be dark like the menubar.  But in the theme I'm using, the toolbars are light-colored while the menubar is dark.  So the default Ubuntu theme is hiding a bug or two.  I've added another screenshot to illustrate.  Notice how the main messenger window has light toolbars (correct), but the other two windows' toolbars are dark (incorrect).

Eric

Comment 37

[Mike Conley (:mconley) (:⚙️)]

Eric:

Ah, sorry - I misunderstood.

Yes, there is a discrepancy between the mail toolbar in the main window, and the toolbars in the Address Book and Compose windows.

This is, actually, kind of by design - the toolbars in Ubuntu's default theme (Ambiance) are supposed to be dark.  However, since the toolbar in the mail window is within the tab, and the tab background is that lighter color, it made sense to inherit that lighter color.  We ran this past John Lea from the Canonical design team, and he concurred that this was probably the right way to go about it.

In the not so distant future, both the address book and the compose windows will become tab types, and the toolbars of both will also inherit the lighter appearance of the tab background on Ubuntu.  So the inconsistency is due to the fact that we're transitioning to that over the course of several releases.

Thanks for the comment, and I hope I cleared things up.  If not, or I misunderstood again, please let me know.  If you have further issues with the tabs on top build, please comment in bug 644169 so I can keep all of the feedback and issues in one place.

Cheers,

-Mike

Comment 38

[Andreas Nilsson (:andreasn)]

Yep, currently we're using -moz-appearance: menubar; in the standalone compose and address book windows. I want to change this to -moz-appearance: toolbar; at some point in the future, but not right now, due to the fact that I want us to look good in Ubuntu too.
Right now with -moz-appearance: toolbar; we would get light toolbars in Ubuntu while all other apps use dark toolbars.
I need to do some more testing tomorrow to verify this, but I think this is due to the fact that we use still use GTK2 (until bug #627699 is fixed). I think that the main Ubuntu GTK2 theme still uses light toolbars while the GTK3 theme uses dark toolbars.

So in order to fix this properly we probably need to port Thunderbird to GTK3 and/or fix the Ubuntu GTK2 theme to use dark toolbars.