665303 - Pimp the message header appearence

Status: RESOLVED FIXED

(Thunderbird :: Message Reader UI, defect)

Description

[Nomis101]

Attachment: Pimped message header

I, personally don't like this uniform grey background from the message header on OS X. So I've searched for a better color and the best choise I've found was a light bluish grey gradient, inspired from iTunes.

In my screenshot you can see two versions, the iTunes inspired version and a lighter version of that. The iTunes version is -moz-linear-gradient(top, #afbed6,#8399b6) and the light version is -moz-linear-gradient(top, #cdd9ea,#a7b7cc)

Comment 1

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

Comment on attachment 540249 [details]
Pimped message header

So, I agree that a little gradient in that area would look nice, but I'm not a huge fan of the colour you chose [0].  I think we need something fairly light, to blend well with the message list and the content of the email, and something fairly neutral so that it works reasonably well with all the various themes.

So, uh, I guess that means feedback-, but if you want to try again, or chat with me on IRC about a different colour, I would love for a change like this to be made.  :)

Thanks,
Blake.
-- 
[0] Actually I really like the colour, just not in this context.

Comment 2

[Nomis101]

Nice that you in general like the idea with the little gradient. I'm sure we will find a better colour, will contact you for that.

Comment 3

[Wayne Mery (:wsmwk)]

xref Bug 553823 - message header is quite dark

Comment 4

[Nomis101]

Attachment: Patch for the background color

This patch reflects the current compromise from Blake, Andreas and me about a better background color. It makes the header white with a light grey gradient on the top.
The next step is to find a eye-friendly color for this tango orange.

Comment 5

[Nomis101]

Attachment: Background patch in action

And this is how it looks like

Comment 6

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

Comment on attachment 545097 [details] [diff] [review]
Patch for the background color

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

There's one main nit I have, which is that the gradient we agreed upon looks really odd in the preview pane.  (It looks great when the message is in a new tab, or in a window on its own, though.)  This looks like it'll be a pain in the butt to fix, since as far as I can tell the difference between the two cases is if the thread pane is collapsed…  :(  A lot of futzing later, I've come up with:
    #displayDeck:not([collapsed="true"]) + #threadpane-splitter + #messagepanebox .main-header-area {
      background: -moz-linear-gradient(top, #E4E4E4 0%, #FFFFFF 5%);
    }
which seems to do the trick.)

And since I was here, and the diff was small, I figured I might as well review it.  There are a couple of small things, but r=me with those fixed, too.

Thanks,
Blake.

::: mail/themes/pinstripe/mail/messageHeader.css
@@ +44,5 @@
>  @namespace html url("http://www.w3.org/1999/xhtml");
>  
>  /* ::::: for the entire area ::::: */
>  .main-header-area {
> +  color: rgb(46,52,54); /* Aluminium 6 */

Please use #2E3436 instead.

@@ -47,3 +47,3 @@
> >  .main-header-area {
> > -  color: rgb(46, 52, 54); /* Aluminium 6 */
> > +  color: rgb(46,52,54); /* Aluminium 6 */
> > -  background-color: rgb(238, 238, 236); /* Aluminium 1 */
> > +  background: -moz-linear-gradient(top, #909090 0%, #FFFFFF 5%);

Using percentages here is a little weird, since messages with different headers will have slightly different gradients.  I find it rather distracting.

@@ -48,3 +48,3 @@
> > -  color: rgb(46, 52, 54); /* Aluminium 6 */
> > +  color: rgb(46,52,54); /* Aluminium 6 */
> > -  background-color: rgb(238, 238, 236); /* Aluminium 1 */
> > +  background: -moz-linear-gradient(top, #909090 0%, #FFFFFF 5%);
> > -  border-bottom: 2px groove rgb(186,189,182); /* Aluminium 3 */
> > +  border-bottom: 1px solid rgb(191,191,191);

Please use #BFBFBF instead.

@@ -484,4 +484,4 @@
> >  }
> >  
> >  .headerName {
> > -  color: #888a85; /* lower contrast */
> > +  color: rgb(161,161,161);

Please use #A1A1A1 instead.  And I think the "lower contrast" comment still applies, so we could leave that in.  :)

Comment 7

[Nomis101]

Attachment: Patch for the background color (v2)

Like this?

Comment 8

[Nomis101]

Attachment: Patch for the background color (v2a)

5px are much better

Comment 9

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

Comment on attachment 548415 [details] [diff] [review]
Patch for the background color (v2a)

I like this much more.  My one final suggestion is that we lighten the shadow when the message window and message tab are in the background, because the toolbar colour lightens then, too.

So, ui-r=me with that fixed!

Many thanks,
Blake.

Comment 10

[Nomis101]

Attachment: Review comments fixed

Comment 11

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

Attachment: A slightly different patch.

For some reason the patch didn't apply on trunk for me, so here's a fixed up version for someone to commit when the tree turns green again.  ;)

Later,
Blake.

Comment 12

[Justin Wood (:Callek)]

http://hg.mozilla.org/comm-central/rev/d74512617627