521334 - Nit: Improve header pane metrics (e.g. "other actions" button too big, fix right alignment, reduce vertical space)

Status: RESOLVED FIXED

(Thunderbird :: Message Reader UI, defect, P3)

Description

[Thomas D. (:thomas8)]

Attachment: Screenshot of headerpane as of 2009-10-08, with metrics

Nit: Header pane metrics can still be fine-tuned to look neater and save space.

1) More-actions button, my personal enemy, is two pixels higher on hover than the rest of the buttons (please shrink the vspace-eater, and reduce whole header pane vertically from bottom by same measure).
More-actions button also looks too long on the right, besides the dropdown arrow (shrink from right by some px).
2) Right-align of buttons, date, and more-actions-button on hover(!) should be fixed (start with pushing button row 6px to the right).
3) Consider pushing buttons up 2-3px, and release that vspace.

We're still wasting considerable vspace (currently, it would make no difference in terms of used vspace to have button toolbar (including other actions) /above/ all other headers). It's tricky, and it'll never look right. But it can be improved...

Ultimately, resizable and dockable would be great.

Comment 1

[Dan Mosedale (:dmosedale, :dmose)]

I kinda suspect this wouldn't block Tb3, but that's Bryan's call to make...

Comment 2

[Thomas D. (:thomas8)]

Attachment: Screenshot of header buttons, junk button width too small

Another nit that should be fixed:
- in icon-only mode, all buttons are 26px wide and look square (good)
- but junk button is only 22px wide, and looks squeezed (bad)
I don't even know how this can happen, because they're all 16x16 icons, or not?
-> please ensure iconic junk button looks square like all the other iconic buttons (26px wide)

Comment 3

[Thomas D. (:thomas8)]

Attachment: Screenshot 3: with reply-to header: extra gap before to-header

More wasted vspace:
- mail with reply-to header
-> before to-header, unused extra gap of +3px (please remove this)

Comment 4

[Thomas D. (:thomas8)]

Related bug 460647 - Focussing contacts causes respective header and label to move down some px

Miraculously, the proposed fix for that bug appears to be vspace-neutral on the whole although it adds a transparent 1px border to contacts so that they stop jumping up and down when focused/unfocused.

Comment 5

[Andreas Nilsson (:andreasn)]

this sounds like my area, so I'll see if I'm able to fix it.

Comment 6

[Dan Mosedale (:dmosedale, :dmose)]

Would block for an hour on this, but not for a day.

Comment 7

[Andreas Nilsson (:andreasn)]

Attachment: patch to fix the button size problem

This patch fixes the button size, the alignment of the other button and the line height (it seems, but try it to be sure).

Comment 8

[Andreas Nilsson (:andreasn)]

Comment on attachment 406992 [details] [diff] [review]
patch to fix the button size problem

forgot to ask for review!

Comment 9

[Dan Mosedale (:dmosedale, :dmose)]

The first two stanzas of the patch look fine.  

I'm a little concerned about the 1.9em thing in the third stanza: it's hard to tell whether this is really the right fix, as there's no comment explaining why it's there in the first place.  It appears to have originally showed up with the "email bubbles" implemention in bug 456818.

I have this vague recollection of davida, Standard8, and clarkbw wanting extra space for when the mouseover bubbles were drawn around email addresses.  I've added them to the CC of this bugs in the hopes that one of them can confirm, deny, or, even better, clarify...

Note that the differing line heights bug, at least, happens on the other platforms too, not just windows.

Once it is clearer what the intended fix should be on this bug, I'd suggest checking whether all headerValueBoxes are guaranteed to have a singleline attribute, since, if not, this would likely only fix part of the problem.

Finally, since I'm travelling for the next little while, I suggest bwinton as a reviewer for your next iteration.

Comment 10

[David Ascher (:davida)]

I'm not seeing any effects of this patch on the 'bubbles' (which is good)

I am seeing that I think we've regressed in that the keyboard focus ring shifts things down when we tab over the header values.  So somewhere we lost a margin of 1px in the height computation, which I guess is bug 460647.

I too don't understand the third chunk.  What happens w/o it?

Comment 11

[Andreas Nilsson (:andreasn)]

Attachment: new patch without the last part

Here is a new patch without the last part. Still trying to figure out why the gap is so big.

Comment 12

[Andreas Nilsson (:andreasn)]

(In reply to comment #9)
> Once it is clearer what the intended fix should be on this bug, I'd suggest
> checking whether all headerValueBoxes are guaranteed to have a singleline
> attribute, since, if not, this would likely only fix part of the problem.

It seems like the subject line does not have a headerValueBox and that might explain why the gap isn't at big between that and the surrounding line is smaller than others.

Comment 13

[Andreas Nilsson (:andreasn)]

Attachment: comparing with and without height removed

Screenshot of height: 1.9em; in .headerValueBox[singleline="true"] removed

Comment 14

[Andreas Nilsson (:andreasn)]

Attachment: patch for gnomestripe

This makes all the entrys the same height (as far as I can see in DOM inspector). Qute and pinstripe patches not all done yet, as my Linux system is the only one with a dom inspector that works and it needs some more testing first.

Comment 15

[Andreas Nilsson (:andreasn)]

Attachment: qute + gnomestripe

Only need to make look how things look in pinstripe

Comment 16

[Andreas Nilsson (:andreasn)]

Attachment: gnomestripe+qute+pinstripe

Here is the patch for all three systems. Need to finish compiling the pinstripe part first to try it out in action first though.

Comment 17

[Andreas Nilsson (:andreasn)]

Comment on attachment 408859 [details] [diff] [review]
gnomestripe+qute+pinstripe

Looks good on OSX to it seems, marking for review!

Comment 18

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

Comment on attachment 408859 [details] [diff] [review]
gnomestripe+qute+pinstripe

>+++ b/mail/themes/gnomestripe/mail/messageHeader.css
>@@ -389,6 +389,9 @@
>   -moz-margin-start: 3px !important;
>   border: none !important;
>   background-color: transparent;
>+  padding-top: .1em;
>+  padding-bottom: .1em;
>+  margin-bottom: 3px !important;

Maybe put these padding and margin values up a couple of lines to be next to the padding and margin values that are already there.  (This applies to all three themes.)

>+++ b/mail/themes/pinstripe/mail/messageHeader.css
>@@ -414,12 +414,13 @@
>   -moz-appearance: none !important;
> 
>   padding: 0px !important;
>   margin: 0px !important;
>+  

I don't know if we need this extra line, but if we do, we should really remove the two trailing spaces.  ;)

>+++ b/mail/themes/qute/mail/messageHeader.css
>@@ -401,13 +400,16 @@
>   padding: 0px;
[snip…]
>+  padding-top: .1em;
>+  padding-bottom: .1em;

Also I think there's an easier way to set these...

From http://www.w3schools.com/css/css_padding.asp
  padding: .1em 0px;
should do the same thing.

r=me with these nits fixed.

Thanks,
Blake.

Comment 19

[Bryan Clark (DevTools PM) [:clarkbw]]

This seems like it got bitrotted for me :(

Comment 20

[Andreas Nilsson (:andreasn)]

Attachment: updated patch

this should work better

Comment 21

[Andreas Nilsson (:andreasn)]

Attachment: small update

Seems that when trying to fix the bitrot issues, I reintroduced the issue with the junk button not being big enough. This should work better.

Comment 22

[Andreas Nilsson (:andreasn)]

Attachment: sorry, last patch from wrong tree!

I suck. :)
This should work better.

Comment 23

[Andreas Nilsson (:andreasn)]

Attachment: screenshots of header in gnomestripe, pinstripe and qute

to ease the UI review.

Comment 24

[Andreas Nilsson (:andreasn)]

Comment on attachment 409319 [details] [diff] [review]
sorry, last patch from wrong tree!

whups! forgot to ask for ui-r again!

Comment 25

[Mark Banner (:standard8)]

Checked in:
http://hg.mozilla.org/comm-central/rev/32feaad3e42b
http://hg.mozilla.org/releases/comm-1.9.1/rev/6f3e060b0f8d