Closed Bug 665303 Opened 10 years ago Closed 9 years ago

Pimp the message header appearence

Categories

(Thunderbird :: Message Reader UI, defect)

x86
macOS
defect
Not set
normal

Tracking

(Not tracked)

RESOLVED FIXED
Thunderbird 8.0

People

(Reporter: Nomis101, Assigned: bwinton)

Details

Attachments

(2 files, 5 obsolete files)

Attached image Pimped message header (obsolete) —
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)
Attachment #540249 - Flags: feedback?(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.
Attachment #540249 - Flags: feedback?(bwinton) → feedback-
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.
xref Bug 553823 - message header is quite dark
Attached patch Patch for the background color (obsolete) — Splinter Review
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.
Attachment #540249 - Attachment is obsolete: true
Attachment #545097 - Flags: ui-review?(bwinton)
And this is how it looks like
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.  :)
Attachment #545097 - Flags: ui-review?(bwinton)
Attachment #545097 - Flags: ui-review-
Attachment #545097 - Flags: review+
Like this?
Attachment #546153 - Flags: ui-review?(bwinton)
5px are much better
Attachment #546153 - Attachment is obsolete: true
Attachment #546153 - Flags: ui-review?(bwinton)
Attachment #548415 - Flags: ui-review?(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.
Attachment #548415 - Flags: ui-review?(bwinton) → ui-review+
Attached patch Review comments fixed (obsolete) — Splinter Review
Attachment #545097 - Attachment is obsolete: true
Attachment #548415 - Attachment is obsolete: true
Keywords: checkin-needed
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.
Attachment #551545 - Attachment is obsolete: true
Attachment #551565 - Flags: ui-review+
Attachment #551565 - Flags: review+
http://hg.mozilla.org/comm-central/rev/d74512617627
Assignee: nobody → bwinton
Status: NEW → RESOLVED
Closed: 9 years ago
Keywords: checkin-needed
Resolution: --- → FIXED
Target Milestone: --- → Thunderbird 8.0
You need to log in before you can comment on or make changes to this bug.