513841 - improve the look of tags in the message header and search results

Status: RESOLVED FIXED

(Thunderbird :: Mail Window Front End, defect)

Description

[David Ascher (:davida)]

Tags are displayed in the message header area by using a stretched background image using the cool new background-image CSS rule.  It works well enough, in that it desaturates the tag colors while staying true to their value.  But the graphic is amateurish (as I did it, and I can't use the gimp to save my life), assymetrical for no good reason, and in general a bit raw.

All that we need is to clean up the images in:

http://mxr.mozilla.org/comm-central/find?text=&kind=text&string=tagbg.png

At the very least, making it more symmetrical would be good.  Note that it can also use alpha channels to make some interesting effects.

Comment 1

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

Attachment: tags in the my compact header extension

Here's another option.  In my compact header extension I softened out the tag appearance by changing the opacity to 0.75 and creating a 3d border to give it some depth.  See attached screen shot for the final effect.

All done in CSS.
http://hg.mozilla.org/users/clarkbw_gnome.org/ovidiu-header/file/tip/src/skin/overlay.css#l66

Comment 2

[David Ascher (:davida)]

that would WFM.

Comment 3

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

marking this as blocking TB3rc1

Comment 4

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

Attachment: WIP (gnomestripe only)

This does a similar implementation to what I had.  It only works in gnomestripe right now because I need a break.

Adding in the border colors to tagColors.css is brutally mind-numbing work; I can't tell much of myself from a hole in the ground right now.  I wish we weren't using these classes for tag colors.

Comment 5

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

Attachment: updated WIP (still gnomestripe only)

This is an update that stops using the opacity rule and instead improves the tagbg image to be 35% tranparent solid white which only effects the background color and not the text of the tag.

I've also updated the multimessage summary view CSS to keep everything consistent.

The only item left is to update the other themes with border-color rules.

Comment 6

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

Attachment: WIP updated (gnomestrip & pinstripe)

Here's the latest version of the patch.  I have the pinstripe theme done now.  However I added a bit of text-shadow in this patch that I'd like to get some opinion on.  My goal was to make sure the text stands out over the color.  I'm going to upload a screenshot next and see if Andreas can ui-review it for me.

I have a nice comment at the end of my pinstripe/mail/tagColors.css patch as the original file seems broken and I'm not quite sure where to proceed.  What I believe should be a background-color change is actually a color; it's using the .blc-black selector.  If anyone has ideas please let me know.

Comment 7

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

Attachment: screenshot of text-shadow

On this pinstripe version of the patch I'm trying to add in some text shadow to help the text stand out over the background.  What do you think?  I'll upload a previous screenshot so you can have a look at the before.

The shadow is black but only 40% 1px down and 1px right and no blur.
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);

Comment 8

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

Attachment: screenshot of tags w/o text-shadow

for the original look

Comment 9

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

I'll be able to get to the windows (qute) version tomorrow when I'm near a PC again.

Comment 10

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

Attachment: dare I say 2nd to last WIP (this adds qute)

This adds all the colors for the qute theme.  The only thing left I feel I have to figure out is the right level of text-shadow to use but I'll wait on Andreas for that.  This bug doesn't have any l10n impact so it can wait past the string freeze for an answer.

Comment 11

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

Attachment: alternate text-shadow approach to make the text inset instead of outset

this is the inset effect as opposed to the outset effect of attachment 402793 [details]

Comment 12

[Andreas Nilsson (:andreasn)]

I have a hard time to make up my mind of what one I like better :)
However, the one #7 is good, so ui-r+ from me on that. The only thing that looks slightly odd is the white tag text shadow.

Comment 13

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

(In reply to comment #12)
> I have a hard time to make up my mind of what one I like better :)
> However, the one #7 is good, so ui-r+ from me on that. The only thing that
> looks slightly odd is the white tag text shadow.

I've started to make adjustments for the black on white and white on black text so there isn't that fuzz around it.

Comment 14

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

Attachment: additional changes

here's a new version of the patch.  I'm using a dark #111 color for the text instead of the #fff I was using before.  After a number of different iterations I couldn't get the white color to be as legible against the backgrounds as the black color.  So I'm going back to the black color with a slight text shadow to give it a little depth.

I need to do some testing of this patch on Windows and Linux to make sure things still look good there but once that is done I should be ready for review.

Ideally in some future iteration we would switch away from this crazy tagColors.css system and just apply the tags on the fly using a legible text contrast calculator so the text is darker than the background color but a similar color to the background.

I'll throw up a final screenshot in a second for review from andreas

Comment 15

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

Attachment: screenshot of latest patch

here's the screenshot to take a look at.  There is only a 1px light colored text shadow on the bottom of the text for some depth.

Comment 16

[Andreas Nilsson (:andreasn)]

Comment on attachment 405163 [details]
screenshot of latest patch

Looks good to me on Linux, OS X and Vista. My only nitpick is that the colors seems different from those the message header view (on all three systems), but that can be spun off in a separate bug, as it's involves the right click menu as well.

Comment 17

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

(In reply to comment #16)
> (From update of attachment 405163 [details])
> My only nitpick is that the colors
> seems different from those the message header view (on all three systems), but
> that can be spun off in a separate bug, as it's involves the right click menu
> as well.

The color is a little lighter because we are using the tabbg.png which is a 40% transparent which background.  Before using the background the tag colors were very dark and stood out too much, the image background softens it a bit.

Comment 18

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

Attachment: final cleanups and checks on all platforms

Here's the break down of the patch.

glodaFacetView.css
 changed the .message-tag selector to be uniform with new look

multimessageview.css
 removed excess .tag selector
 changed larger .tag selector to be uniform with new look

$skin/messageHeader.css
 changed the .tagvalue selector to be uniform with new look

$skin/tagColor.css
 added the border-color for each background color for use in the 0.5px outset border.  If you're bored you can double check that I didn't make any errors copying all the colors in each theme :)
 changed the #000000 color to force a color of #FFFFFF so we have white text on a black background, also changed the text-shadow color as well.

Comment 19

[Phil Ringnalda (:philor)]

http://build.mozillamessaging.com/mercurial/comm-central/rev/b60676369fe7