588007 - Investigate using monochrome icons for the headers

Status: RESOLVED FIXED

(Thunderbird :: Folder and Message Lists, defect)

Description

[Andreas Nilsson (:andreasn)]

One thing that would make Thunderbird look a bit neater under Windows would be if we could use monocrome icons for the headers. This would make it sit better together with the color of the text.
Both Postbox and Windows Live mail does this.

One thing that could block this is that we currently can't call svg's from lists, so we can't color the icon in the same color as the text.

Comment 1

[Andreas Nilsson (:andreasn)]

Adding ux-consistency and ux-minimalism keywords to this bug.
Consistency - because Postbox and Live Mail does it
Minimalism - "interfaces should be as simple as possible, both visually and interactively" One color beats lots of colors.

http://spreadsheets.google.com/pub?key=tJxF8zTuLdEj9pUcxnLAemA&output=html

Comment 2

[Andreas Nilsson (:andreasn)]

Attachment: Postbox and Live Mail headers (screenshot)

Comment 3

[Andreas Nilsson (:andreasn)]

Attachment: Thunderbird patch

Thunderbird patch. This uses dark gray bitmaps, that might not work too well for a11y or dark themes. Need bug 231179 to be fixed first (so we can then set the color of the shape in the svg to "text") in order to work around that.

Comment 4

[Richard Marti (:Paenglab)]

In association with Bug 545557 this would look better.

Comment 5

[Andreas Nilsson (:andreasn)]

Attachment: updated patch

Some things were missing from the old patch. This should work much better.

Comment 6

[Andreas Nilsson (:andreasn)]

Attachment: using svg's for the images

This patch makes use of svg's that pick up on the ButtonText color (ie, use a black theme with white text and these icons will be white).

Comment 7

[Andreas Nilsson (:andreasn)]

Attachment: updated patch with simpler svg's

Cut out a bunch of inkscape-generated junk from the images.

Comment 8

[Ludovic Hirlimann [:Usul]]

(In reply to comment #7)
> Created attachment 516573 [details] [diff] [review]
> updated patch with simpler svg's
> 
> Cut out a bunch of inkscape-generated junk from the images.

Can you also provide screenshots ?

Comment 9

[Richard Marti (:Paenglab)]

Attachment: Monochrome col-headers

Previous patches from :andreasn updated. flag-col.svg and readcol.svg didn't worked. I also added a columnpicker.svg for full compatibility in high contrast modes. I changed the color to -moz-dialogtext instead of buttontext to use the same colors as the colheader text (if someone has different colors set for buttons and colheaders).

Comment 10

[Richard Marti (:Paenglab)]

Attachment: Image of col-headers

This image shows the headers under Win7 Aero, Classic and High contrast. The header icons have the same color as the text.

Comment 11

[Andreas Nilsson (:andreasn)]

Attachment: updated graphics

Corrected some small icon issues:
* Removed duplicate element and grid-aligned thread-col.svg
* Removed duplicate element and grid-aligned attachment-col.svg
* Grid-aligned flag-col.svg
* Converted all lines to objects and made it all into one object in columnpicker.svg

Comment 12

[Andreas Nilsson (:andreasn)]

Comment on attachment 532697 [details] [diff] [review]
Monochrome col-headers

Setting ui-r minus due to the icon issues (made by myself) and fixed it in the patch below instead.

Comment 13

[Richard Marti (:Paenglab)]

(In reply to comment #11)
> Created attachment 533295 [details] [diff] [review] [review]
> updated graphics
> 
> Corrected some small icon issues:
> * Removed duplicate element and grid-aligned thread-col.svg
> * Removed duplicate element and grid-aligned attachment-col.svg
> * Grid-aligned flag-col.svg
> * Converted all lines to objects and made it all into one object in
> columnpicker.svg

I suppose, you give this ui-r plus and I ask for review at :bwinton

Comment 14

[Andreas Nilsson (:andreasn)]

(In reply to comment #13)
> I suppose, you give this ui-r plus and I ask for review at :bwinton

Yes, sorry if that was unclear.

Comment 15

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

Comment on attachment 533295 [details] [diff] [review]
updated graphics

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

As a UI comment, I think the star should be a little bigger/puffier, to closer match the star icons beneath it.  And the sunglasses for read/unread are also a little confusing, perhaps we can make them more like glasses somehow?  Add the eye-bars?  Make the glass part transparent?  And can the thread icon be more like the thread icon in the message list?

Anyways, on to the review.

Other than the one, rather important, thing I mention below, I like this.  r=me, and, as mentioned in the comment above, ui-r=andreasn.

::: mail/themes/qute/mail/icons/attachment-col.svg
@@ +1,1 @@
> +<svg xmlns="http://www.w3.org/2000/svg"

Ideally I think we want these files to have the XML boilerplate license at the top, but I would settle for a LICENSE file in the same directory (cause that would cover the PNGs here, too).

Comment 16

[Richard Marti (:Paenglab)]

Attachment: Patch with license file in messenger/icons

I added a license.txt (.txt for Windows user to easily open) to the patch which will be put in messenger/icons.

Comment 17

[Richard Marti (:Paenglab)]

Attachment: Patch awaiting updated icons

I checked if other places are using the removed files. quickFilterBar.css and messageHeader.css are using attachment-col.png and flag-col.png. I leaved them in and changed searchDialog.css to use the svg images.

Does this need a new review?

Comment 18

[Jim Porter (:squib)]

Maybe we should rename attachment-col.png and friends, since they're not column icons anymore. It may also be worth putting them all into one file, like the folder pane icons? (Maybe not, though.)

Comment 19

[Richard Marti (:Paenglab)]

Andreas please can you update the star and sunglasses icons Blake mentions in comment 15?

Then this can be checked in and tested.

Comment 20

[Andreas Nilsson (:andreasn)]

Attachment: updated icons

Here is the patch with the icons updated to match the review.

Comment 21

[Richard Marti (:Paenglab)]

(In reply to comment #20)
> Created attachment 545361 [details] [diff] [review] [review]
> updated icons
> 
> Here is the patch with the icons updated to match the review.

Does it need again a review or is it ready for check-in?

Comment 22

[Andreas Nilsson (:andreasn)]

just need to make sure it works properly and all first

Comment 23

[Andreas Nilsson (:andreasn)]

Attachment: Updated patch

Phew, good thing I did, because it did not compile cleanly due to a difference between aero and non-aero.

Comment 24

[Andreas Nilsson (:andreasn)]

Attachment: and this is what it looks like in action (screenshot)

Comment 25

[Jim Porter (:squib)]

Should we be using monochrome icons on Windows XP? It seems out of place there, since none of the other icons are monochrome on XP (I assume the plan is to continue to have colorful icons on XP?).

Comment 26

[Andreas Nilsson (:andreasn)]

For the headers I think it would make sense to keep them monochrome for XP as well. Mostly because other tree views in XP are using this. Only for the tree view headers however.

Comment 27

[Richard Marti (:Paenglab)]

(In reply to comment #23)
> Created attachment 545421 [details] [diff] [review] [review]
> Updated patch
> 
> Phew, good thing I did, because it did not compile cleanly due to a
> difference between aero and non-aero.

So this is okay now to ask for check-in?

Comment 28

[Andreas Nilsson (:andreasn)]

Attachment: and this is how it looks in High Contrast

Comment 29

[Andreas Nilsson (:andreasn)]

Comment on attachment 545421 [details] [diff] [review]
Updated patch

Carrying over review and ui-review from previous patch.

Comment 30

[Andreas Nilsson (:andreasn)]

Comment on attachment 533295 [details] [diff] [review]
updated graphics

And marking previous patch as obsolete.

Comment 31

[Jonathan Protzenko [:protz]]

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

I believe the original author of the patch is actually Andreas, since he submitted the patch.

Comment 32

[rsx11m]

Great... so, the answer to wide-spread criticism of the monochromized button icons is to remove the color from even more icons as well? [bug 668336]

Comment 33

[Andreas Nilsson (:andreasn)]

(In reply to comment #32)
> Great... so, the answer to wide-spread criticism of the monochromized button
> icons is to remove the color from even more icons as well? [bug 668336]

I know you and me disagree over this direction in general, but you think it won't even makes sense for the message headers?

Comment 34

[rsx11m]

I agree to the point that the header icons should be unique so that they aren't confused with the actual message-list icons (though SeaMonkey is using the same ones, just on a different background to distinguish header from content). This can be done by removing the color but doesn't necessarily have to. I also agree that for the header icons the color is certainly less relevant than for the icons in the message list themselves (bug 673363) where the color highlights the status of that specific message and thus has a signal function.

My main issue with the bug here (as stated in bug 668336 comment #28) was that it proceeded where it would have seemed prudent to halt for a moment and to think about if it's the right direction to go, given the 200+ rather negative comments on GetSatisfaction re the aero-theme redesign over the last 3 weeks.