671236 - Flatter appearance for quick filter bar

Status: RESOLVED FIXED

(Thunderbird :: Theme, defect)

Description

[Andreas Nilsson (:andreasn)]

The quick filter bar sticks out a bit visually from the rest of the Aero theme.
Lets look into how we can solve this.

Comment 1

[Andreas Nilsson (:andreasn)]

Attachment: mockup

Here is a mockup for how it could look:
* Same color as message header background.
* Monochrome icons like the rest of the interface (these could gain color when active, somewhat like https://bug668336.bugzilla.mozilla.org/attachment.cgi?id=544097 in bug #668336 but possibly only one color)
* Also note the list headers from bug #671123

Comment 2

[Jim Porter (:squib)]

Maybe the buttons should look like the toolbar buttons (i.e. be monochome, but have some shading so they stand out a bit more). Right now, the buttons seem more like indicator icons than actual buttons that will do something...

Comment 3

[Andreas Nilsson (:andreasn)]

Yes, that makes sense!

Comment 4

[Richard Marti (:Paenglab)]

Attachment: QFB-Patch

This patch gives the same background color as the message header. The buttons have the same appearance as the toolbarbuttons.
I used the svg images from Bug 588007 where I could. The sticky button is now only using the monochrome icon.

This patch contains now only the css. If ui-r is okay I'll add also the removing of the unneeded icons.

Comment 5

[Richard Marti (:Paenglab)]

Attachment: Patch in action

Comment 6

[Richard Marti (:Paenglab)]

Attachment: QFB-Patch

I experimented with buttons under Classic and High contrast themes. For me it looks good also under Classic and High contrast. Only the tree icons for Pin, Contact and Tag are looking not so good under High contrast.

:andreasn could you make SVG images for these tree buttons?

Comment 7

[Richard Marti (:Paenglab)]

Attachment: Appearance under Classic

Comment 8

[Richard Marti (:Paenglab)]

Attachment: Appearance under High contrast

Comment 9

[Jim Porter (:squib)]

I think the buttons are *less* flat with this patch, rather than more. I'm not convinced that SVGs are the right way to go here either (unless we decided to make all the button icons SVGs, of course), since every button icon in Thunderbird uses the shaded/inset appearance from Firefox, and we should probably stay consistent here.

Comment 10

[Richard Marti (:Paenglab)]

Attachment: QFB-Patch

Patch with icons from toolbars. Still needing icons for Pin and Star.

Comment 11

[Richard Marti (:Paenglab)]

Attachment: Buttons with latest patch

Comment 12

[Andreas Nilsson (:andreasn)]

Attachment: new icons

Here are more sunken in, and smaller icons.
This also uses color for the active state of the pin (this makes me think we might want to make #668336 INVALID)

Comment 13

[Andreas Nilsson (:andreasn)]

Comment on attachment 546433 [details] [diff] [review]
QFB-Patch

setting ui-r minus as we want to use other icons. I also think it would be better to keep the button look on hover and pressed only.

Comment 14

[Richard Marti (:Paenglab)]

Attachment: QFB-Patch V2

Patch with button look only on hover and checked. This patch is also using the new icon image but this isn't in the patch because I can't create a binary patch. Andreas, please can you create a patch with the image file?

The Tag image looks now a little bit bigger than the others (the bottom is a little bit lower than the others, 18px to 16px). Is this okay or would you add a icon to quick-search-icons.png?

Comment 15

[Andreas Nilsson (:andreasn)]

Yeah, you're right, it looks a bit off. Updated version coming up!

Comment 16

[Richard Marti (:Paenglab)]

Andreas you can now only attach the updated icons to this bug. I'm now able to create patches with binary diffs.

Comment 17

[Andreas Nilsson (:andreasn)]

Attachment: Even newer icons

Here are the new icons. Hope this looks better.

Comment 18

[Richard Marti (:Paenglab)]

Attachment: QFB-Patch v3

Patch with updated icons.

Comment 19

[Andreas Nilsson (:andreasn)]

Comment on attachment 547936 [details] [diff] [review]
QFB-Patch v3

Looks much better now! Good call about the tag icon size.

Comment 20

[Richard Marti (:Paenglab)]

Comment on attachment 547936 [details] [diff] [review]
QFB-Patch v3

:squib is it okay to ask you for review?

Comment 21

[Jim Porter (:squib)]

(In reply to comment #20)
> Comment on attachment 547936 [details] [diff] [review] [review]
> QFB-Patch v3
> 
> :squib is it okay to ask you for review?

I can review this. In general, it's a bit tougher for me to review Windows-only patches, since I don't build on Windows, but it shouldn't be a big problem here. That said, feel free to ask me for review for any of the Linux theme patches that you're working on, since those are easy for me to test. :)

Comment 22

[Jim Porter (:squib)]

Comment on attachment 547936 [details] [diff] [review]
QFB-Patch v3

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

Looks good to me, but I think quick-search-icons.png should be renamed to quick-search-icons-aero.png, since we might want to make quick-search-icons.png for the XP theme too. r=me with that fixed.

I'm also a little unsure about the visuals for the pressed button state, but since that's how Firefox handles its buttons too, I'm not going to worry about it. :)

Comment 23

[Richard Marti (:Paenglab)]

Attachment: Patch for check-in addressing comment

I renamed the image to quick-search-icons-aero.png

Comment 24

[Jonathan Protzenko [:protz]]

http://hg.mozilla.org/comm-central/rev/0fd8d928a349