671123 - The message list tree headers have a heavy look to them

Status: RESOLVED WONTFIX

(Thunderbird :: Theme, defect)

Description

[Andreas Nilsson (:andreasn)]

By default we show the filter bar. This in combination with the message list tree headers give a heavy and bevely look to Thunderbird.

A neat thing the file explorer in Windows 7 does is that it renders the tree headers in a flat style that transforms into the style of the Vista file explorer headers (similar to what we have in TB now) only upon hover.
Screenshot here:
http://www.maxiorel.com/files/images/2009/05May/840/Windows_7_file_manager.png

Comment 1

[Andreas Nilsson (:andreasn)]

Attachment: thunderbird mockup

This is how it could look in Thunderbird.

A neat optical illusion as a consequence of this is that it looks like you have more space for your messages :)

Comment 2

[Richard Marti (:Paenglab)]

Attachment: Give treecol headers the Win7 appearance

This patch gives the treecol headers almost the Win7 appearance. Why almost? I couldn't give the gradient to the lines between the headers. I tried with .tree-splitter this worked but this splitters aren't behind the last treecol. This ends in no line between "Work phone" and treecolpicker in AB. So I gave a border color to every header. The treecol header are also transparent to match better the tree background colors of the almost white treadTree and the light blue abResultsTree.

Comment 3

[Richard Marti (:Paenglab)]

Attachment: Patch in action for threadTree

Comment 4

[Richard Marti (:Paenglab)]

Attachment: How the AB tree would look

Comment 5

[Andreas Nilsson (:andreasn)]

Attachment: win7 file explorer headers for comparision

These are the file manager headers upon hover

Comment 6

[Andreas Nilsson (:andreasn)]

Comment on attachment 546290 [details] [diff] [review]
Give treecol headers the Win7 appearance

A couple of things bugs me a bit:
* The headers feels very bright upon hover and is not different enough from the items below. It might be specifically the blueness of the outline.
* There appears a double line upon hover to the left. (this happens in file explorer as well, but is less annoying due to the gradient to the line on the left)
* The lack of gradients to the lines (but there might not be much we can do about that)

Comment 7

[Andreas Nilsson (:andreasn)]

Attachment: treeheader color mockups

These use #c1e0ff as outline color instead.
The topmost mockup is if we figure out how to do gradients, the double border feels less annoying here due to the gradient.
The lower one is working around the double order issue by using the previous items right border as it's left border upon hover.

Comment 8

[Richard Marti (:Paenglab)]

Attachment: Give treecol headers the Win7 appearance V2

Fixed the double border issue and made the hover color a little darker. Compared to the explorer header this should match, for the AB it could be still to light.

Comment 9

[Jim Porter (:squib)]

I haven't worked out all the kinks, but I think a workable way to have gradients for splitters would be:

    background-image: -moz-linear-gradient(blue, transparent);
    background-size: 1px 100%;
    background-repeat: no-repeat;
    background-position: right;

That would make a 1 pixel wide gradient that's positioned on the far right of the treecol, which I think is what we want. Obviously, this would require some modifications to the rest of the code too, but I haven't quite gotten those to work.

Comment 10

[Richard Marti (:Paenglab)]

I found a way but it is very hacky. Because background-clip: border-box didn't work I had to remove the border on one side and give 2px more padding on this side. On hover i gave again the border and took the padding back. This wouldn't be the problem but the different headers have also different padding's to center the images. This makes a lot of exceptions.

Also the gradient on the side of the hovered header makes a blurring border. IMO the actual patch looks better.

Comment 11

[Jim Porter (:squib)]

If we're going to try for pixel-perfect (and I think we should), then I believe the goal is for there to be a 1 pixel overlap for the hover states (i.e. they share a left and right border). You could probably do that with a margin-right of -1px, though I don't know if that would affect how the mouse works. I might try messing with this a bit more once I'm back at a Windows box.

Generally, I think we should only take this if we can get it just right, since we've already got a tree header that looks perfectly native (everywhere I've seen except for Explorer uses the same tree header style we currently use). This would also make it more likely that we could push these changes upstream to Core one day, so that Firefox benefits from this work.

Comment 12

[Richard Marti (:Paenglab)]

Attachment: Experimental approach

Squib this is what I have made with your proposal. If you like you can take this as base for your proposal with negative margins. Some .treecol-image have problems with jumping on :hover:active because of the different paddings I mentioned before. It looks more complicated because I already made it rtl save.

Comment 13

[Richard Marti (:Paenglab)]

Attachment: Give treecol headers the Win7 appearance V3

This patch is based on Jim's proposal but still with the blurring on one side (like Explorer also has). I tried to remove this with a negative margin, but failed because the AB showed always a horizontal scrollbar.

Comment 14

[Jim Porter (:squib)]

Attachment: Vertically-aligned panes

(In reply to comment #13)
> Created attachment 550065 [details] [diff] [review] [diff] [details] [review]
> Give treecol headers the Win7 appearance V3
> 
> This patch is based on Jim's proposal but still with the blurring on one
> side (like Explorer also has). I tried to remove this with a negative
> margin, but failed because the AB showed always a horizontal scrollbar.

I've tried messing around with this, but couldn't get things to work quite right either. However, I did manage to get the folder pane and thread pane vertically aligned, and I think it looks pretty good, though the treecols are a bit smaller than they would be otherwise.

Mostly, this involves changing some padding to push everything into place. This screenshot also adds 1px of padding to the left sides of the trees (for symmetry with the right side and to keep the splitters from getting crowded out by the selected row highlights).

Comment 15

[Andreas Nilsson (:andreasn)]

Comment on attachment 550065 [details] [diff] [review]
Give treecol headers the Win7 appearance V3

Sweet, this looks great!
Definitely helps get rid of the previously heavy feel of the application and makes it look less odd next to the sidebar (that no longer have a pane switcher, well, they never added up anyway).

Comment 16

[Andreas Nilsson (:andreasn)]

(In reply to Jim Porter (:squib) from comment #14)
> Created attachment 550610 [details]
> Vertically-aligned panes
> 
> (In reply to comment #13)
> > Created attachment 550065 [details] [diff] [review]
> > Give treecol headers the Win7 appearance V3
> > 
> > This patch is based on Jim's proposal but still with the blurring on one
> > side (like Explorer also has). I tried to remove this with a negative
> > margin, but failed because the AB showed always a horizontal scrollbar.
> 
> I've tried messing around with this, but couldn't get things to work quite
> right either. However, I did manage to get the folder pane and thread pane
> vertically aligned, and I think it looks pretty good, though the treecols
> are a bit smaller than they would be otherwise.
> 
> Mostly, this involves changing some padding to push everything into place.
> This screenshot also adds 1px of padding to the left sides of the trees (for
> symmetry with the right side and to keep the splitters from getting crowded
> out by the selected row highlights).

Could you do that change as a separate bug and a separate patch?

Comment 17

[Richard Marti (:Paenglab)]

Comment on attachment 550065 [details] [diff] [review]
Give treecol headers the Win7 appearance V3

Jim, because you know this well, can I give the r? to you?

Comment 18

[Andreas Nilsson (:andreasn)]

Comment on attachment 550610 [details]
Vertically-aligned panes

Missed to give this a ui-r+. I like it!

Comment 19

[Jim Porter (:squib)]

Comment on attachment 550065 [details] [diff] [review]
Give treecol headers the Win7 appearance V3

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

Looks good to me.

Comment 20

[Jonathan Protzenko [:protz]]

Just checked that in. Richard, you have a high patch throughput, which is awesome! However, http://blog.bonardo.net/2010/06/22/so-youre-about-to-use-checkin-needed might save the people who check your patches in (this time, me) some time. Thanks :)

http://hg.mozilla.org/comm-central/rev/024b9c7d8958

Comment 21

[David :Bienvenu]

My problem with this is that at first glance it looks like I have an empty message at the top of my thread pane, and I want to click on it. I sort with newest messages at top, so it's especially tempting. Some sort of visual distinction would be nice.

Comment 22

[Richard Marti (:Paenglab)]

Attachment: treeheader with background-color: rgba(128, 128, 255, 0.1);

Would this look better with a darker background?
I add also a picture with the AB.

Comment 23

[Richard Marti (:Paenglab)]

Attachment: Same background color on AB

Comment 24

[David :Bienvenu]

Comment on attachment 557630 [details]
treeheader with background-color: rgba(128, 128, 255, 0.1);

that looks a lot better to me, thx!

Comment 25

[Jim Porter (:squib)]

I think if we need to visually separate the header from the tree body, we should probably just go back to the old way, since that lets us take advantage of platform theming.

However, if the goal is just to eliminate confusion, we could add a note in the middle of the tree along the lines of, "This folder contains no messages. Move along now." As I recall, the quick filter bar does something similar when there are no results (I'm not at my dev box, so I can't check), so we could follow in its footsteps.

Comment 26

[David :Bienvenu]

(In reply to Jim Porter (:squib) from comment #25)

> 
> However, if the goal is just to eliminate confusion, we could add a note in
> the middle of the tree along the lines of, "This folder contains no
> messages. Move along now." As I recall, the quick filter bar does something
> similar when there are no results (I'm not at my dev box, so I can't check),
> so we could follow in its footsteps.

Sorry, I wasn't clear. My folder is not empty. The top line of the thread pane looks empty, i.e., the column headers look like a normal thread pane line that's mostly empty/blank.

Comment 27

[Jim Porter (:squib)]

(In reply to David :Bienvenu from comment #26)
> (In reply to Jim Porter (:squib) from comment #25)
> Sorry, I wasn't clear. My folder is not empty. The top line of the thread
> pane looks empty, i.e., the column headers look like a normal thread pane
> line that's mostly empty/blank.

In this case, I guess it's a matter of taste (and/or habit). Do you have the same issue with the file explorer in Details view? If not, what makes the explorer better?

I think we should either keep the headers looking as much like the explorer as possible (i.e. no background color), or go back to the old way. Either of these ways fit in pretty well with the OS, but adding more styling makes us look inconsistent. It also runs the danger of making the Aero theme look more like angry fruit salad again, which was especially bad in 5.0.

One possibility would be to change the text color of the headers to de-emphasize them, since that's what the explorer does.

Comment 28

[Rain [:rain1] (inactive)]

I think a big thing that makes the explorer better is the partially visible lines you often see. (We *really* need pixel scrolling.)

Comment 29

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

Comment on attachment 557630 [details]
treeheader with background-color: rgba(128, 128, 255, 0.1);

If we're going to make the header background a different colour, it should end up being the same as either the active tab (and dear god, why isn't that just white?!?), or the folder pane.  Too many different, but similar, colours aren't my friend.  ;)

But before deciding on which way to go, I would really like to see a screenshot of Jim's suggestion to colour the header text differently, as per the Finder, and get Bienvenu's thoughts on it.  Maybe something in the #1E395B range?

Another thing I noticed in the Finder is that it's got some extra space below the headers, to further separate them from the items in the list, which I think is also a direction worth exploring.

Thanks,
Blake.

Comment 30

[Richard Marti (:Paenglab)]

Attachment: treeheader with color: #1E395B

treecol header with #1E395B as text-color. On bottom I made the headers bold for a better distinction between header and content.

I don't think an extra space below the headers is good. Then a lot of people would say TB is wasting too much empty space.

Comment 31

[David :Bienvenu]

Blake asked me my opinion on the screen shots, which is that the one where the headers are bold makes it look a bit like an unread message, which are also bold, so that's not an improvement. Making them lighter like Explorer is probably better (with my desktop theme, which is the standard, default windows 7 theme, the column headers are actually blue, so they're quite distinct).

Comment 32

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

Comment on attachment 557903 [details]
treeheader with color: #1E395B

Yeah, I agree that it's not really obvious enough, even when bold.

So, I think I'm currently leaning towards making the background the same as the folder pane.  I've got a mock up at http://dl.dropbox.com/u/2301433/Glass/BlueColumnHeadersWhiteTab.png (which also has the white active tab), and it seems fairly reasonable.  I think I would also accept bolded headers, with or without a change of the text colour to #1E395B.

And if we wanted to get really fancy, we could change the status bar to the same blue, and make the message header either blue or white, but I'm happy to leave that for another bug.

Thanks,
Blake.

Comment 33

[Jim Porter (:squib)]

Blake and I discussed this on IRC, and we both think that if we're going to change the column headers, we should just go back to how they were before this patch (here's a random Google result of what they used to look like: <http://img217.imageshack.us/img217/5660/thunderbird5final.png>).

It's unfortunate, since I liked the new way, and it would have made it easier to get everything to line up horizontally, but I think we should follow the platform's conventions wherever possible so as not to clash visually.

Comment 34

[Jim Porter (:squib)]

Attachment: Revert this change

Since this isn't really a bustage fix, I'll be safe and ask for review. This is just the opposite of attachment 550065 [details] [diff] [review], so review should be straightforward. :)

Comment 35

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

Comment on attachment 561129 [details] [diff] [review]
Revert this change

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

Yep, this reverts the change.  r=me, and ui-r=me, while I'm here.

Thanks,
Blake.

Comment 36

[Jim Porter (:squib)]

Checked in: http://hg.mozilla.org/comm-central/rev/2496250eeb45

Closing this as WONTFIX, since the net result of this bug was nothing. If that's not right, feel free to change the status.