525210 - reply/forward/archive/junk/delete buttons in message header should look native (flat with buttonize-on-hover effect)

Status: RESOLVED WONTFIX

(Thunderbird :: Message Reader UI, defect)

Description

[vali.system]

User-Agent:       Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.1.4) Gecko/20091016 Firefox/3.5.4
Build Identifier: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.6; en-US; rv:1.9.1.5pre) Gecko/20091025 Shredder/3.0pre

In message headers, on the right of the from: field, action buttons related to message are styled with a custom skin very similar to an existing style of Mac OS X. It could be a nice thing to have them with the existing native style. (see 'Texture Button' or 'Round Rect Button' in interface builder.

Reproducible: Always

Comment 1

[vali.system]

Attachment: Screenshot 1: Example of native look

Quick & dirty mock up with native buttons

Comment 2

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

Comment on attachment 409064 [details]
Screenshot 1: Example of native look

Those look pretty good to me a lot closer to native.

I think we'll need to examine how the (much more) rounded corners handle the icons and our drop down menu button.

Given how late we are in the current release cycle we can investigate this for the 3.1 time frame.

Comment 3

[vali.system]

Ho, they look like native because i created them in Interface Builder and then copied/pasted a screenshot. That was just to illustrate the report.

The skin in the screenshot is the 'Round Rect Button' button type you'll see in Interface Builder. I Strongly recommend to take a look the the 'Texture Button', also in interface builder, before making any decision: they might fit better to the Apple ui guidelines for the use in message header.

Comment 4

[Andreas Nilsson (:andreasn)]

assigning to myself to:
* Look into how this works together with icons.
* If xul have direct support for those widgets or if we need to solve it with specific css.
* Talk to other mac ui geeks to see what they think.

Comment 5

[Markus Stange [:mstange]]

XUL doesn't have direct support for these widgets, you need to use CSS for it. In Firefox this button style is used e.g. in the Findbar, for the "Evaluate" button in the error console and for notification bar buttons.
We're using CSS gradients for them, but if you're targeting 1.9.1 you might need to emulate the effect using inset box shadows or gradient images.
(I used a gradient image in bug 486476 before changing it in bug 508739.)

Comment 6

[Thomas D. (:thomas8)]

The same problem on Windows: The buttons on header pane are a complete alien in terms of design because they are different from all the rest of the UI design.
E.g. on windows XP, we're using flat buttons with "buttonize on hover" effect on main toolbar. The buttons on header pane are very oddly sticking out because they are 3d, which feels kind of obtrusive. It also makes the header look more complex and crowded than necessary.

FTR, this problem was realized as early as 2008-11-20 (one year ago) in Bug 466025 (explore message header tweaks and variants for tb3 [and polish]), where ovdiu provided a working extension to demonstrate more OS-adaptive look of buttons (including buttonize on hover effect).

Comment 7

[Markus Keller]

Also the button texts should adhere the UI guidelines: They should use title case (Reply, Reply All, etc.).

Comment 8

[Lucius Chiaraviglio]

I would vote for making them have a fixed position (or user-customizable fixed position, if you want) in the toolbar.  Right now, when you scroll a long list of message recipients, you also scroll the toolbar buttons, which is just weird; furthermore, you actually have to scroll to get to the "Other actions" popup menu, which is even weirder.

Not sure whether this should go in this bug or 520182.

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.10) Gecko/20100512 Thunderbird/3.0.5

Comment 9

[Joachim Herb]

Using the CompactHeader add-on, you have the option to use flat buttons:
https://addons.mozilla.org/thunderbird/addon/13564
Would you consider this as "native" design?

Comment 10

[Thomas D. (:thomas8)]

(In reply to comment #9)
> Using the CompactHeader add-on, you have the option to use flat buttons:
> https://addons.mozilla.org/thunderbird/addon/13564
> Would you consider this as "native" design?

Yes, flat buttons are much more like it (at least on Win XP). As pointed out by comment 7, a fully native design should also adhere to the UI guidelines and re-Capitalize header and button labels that are currently lower-case (bug 478468). In that sense, these two bugs are mutually dependent on each other.

Comment 11

[Thomas D. (:thomas8)]

Attachment: Screenshot 2: Sample header buttons with native layout on WinXP (incl. hover-effect)

(In reply to comment 9)

Here's a sample Screenshot of some flat header buttons and "buttonize-on-hover" native Layout on WinXP.

Comment 12

[Thomas D. (:thomas8)]

Attachment: Screenshot 3: Native header pane layout on WinXP (flat buttons with hover-effect, capitalized labels per bug 478468)

Proposed Fix for this bug:

Here's the full view of Thunderbird with native button layout on WinXP, including fix for bug 478468. The undesirable permanent blue border and 3d effect of current layout automatically change into expected native OS layout when the following value is removed from the class attribute of header buttons: msgHeaderView-button. For a detailed description how to try that out on your own system using DOM Inspector Addon, see bug 478468, comment 35.

vali.system, please add your operating system to the description of your screenshot 1, attachment 409064 [details]. Native look differs on each OS. Click on details, then (edit) the caption.

Comment 13

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

Thomas,

you seem to have a pretty decent idea of what you think the fix should look like.  Did you want to post a patch, and ask Bryan for a ui-r on it?  I'm sure Andreas wouldn't mind someone helping out on this bug.  :)

Later,
Blake.

Comment 14

[Thomas D. (:thomas8)]

(In reply to comment #13)

It's true I am in the process of improving my idea of how to tweak TB. However, actually fixing the code would still take me a lot of time, much more than I currently have. I know today's round of comments doesn't look like it, but I am actually trying to take a break from bmo so as to get on some more with the other half of my life...

Comment 15

[Thomas D. (:thomas8)]

*sigh* this is still an eyesore, and probably wasting vertical space, too...

Comment 16

[Richard Marti (:Paenglab)]

The actual styling isn't wasting space as the not hovered/active flat buttons still have the same spacing as the hovered/active ones. When not we would have jumping buttons.

The now used buttons are using the same styling as the toolbarbuttons except they have in inactive state also a border to separate them visually from header text.

I'm going to go ahead and WONTFIX the bug. People can use CompactHeaders if it bothers them.

Comment 17

[:aceman]

If "native flat" means as in the main TB toolbar (i.e. with platform specifics), then maybe. If it means the junk from Win 8 then NO.

In the summary it says "flat with buttonize-on-hover". That is the same as the main TB toolbar, so I would agree with that. On the other hand, on the toolbar users expect buttons so even if they are flat they mouse them over to take action. In the message reader header buttons may not be so expected so making them completely flat may deter users from investigating them.
Please do not make the same mess Outlook 2013 is.