483761 - introduce native look&feel for folder pane, message pane and message view

Status: RESOLVED FIXED

(Thunderbird :: Folder and Message Lists, defect)

Description

[Andreas Nilsson (:andreasn)]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.7) Gecko/2009030422 Ubuntu/8.10 (intrepid) Firefox/3.0.7 Ubiquity/0.1.5
Build Identifier: 

To make Thunderbird feel more native, the folder pane, message pane and message view needs some adjustments.
* solid borders
* zebra striping in message pane

Reproducible: Always

Comment 1

[Andreas Nilsson (:andreasn)]

Attachment: modified mailwindow

#threadTree, #folderTree are set to -moz-appearance: treeview;

and some adjustments to #threadTree treechildren::-moz-tree-row

Comment 2

[Andreas Nilsson (:andreasn)]

Attachment: mailwindow with updated icons

Added some new icons as well.

Comment 3

[Andreas Nilsson (:andreasn)]

Attachment: the icons in question

Comment 4

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

Attachment: initial patch with icons and css changes

This isn't complete as we'll still need to finish with the column icons, but it's an initial start for anyone who's on hg

Comment 5

[Andreas Nilsson (:andreasn)]

Bryan: I just noticed a regression with this. It seems a "}" character is missing on line 379 (the section saying #threadTree treechildren::-moz-tree-row(selected) {
+  background-color: Highlight;), resulting in no icon being displayed on message tabs.

Comment 6

[Andreas Nilsson (:andreasn)]

Attachment: new patch (does it work this way?)

added a new line saying:
+}

I'm pretty bad at this patching business, so please correct me if I screwed up! :)

Comment 7

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

Attachment: updated patch w/ fix

Ok I added your fix in.  I think you have to be really careful about the patch format if you're going to hand edit the file.  I don't really know.  I usually just apply, make changes and then remake the patch; even if it's something easy.

There are a couple things left to do, but I'll get to those when I upload a screenshot next.

Comment 8

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

Attachment: message list screenshot

here's the screenshot of the message list with this patch applied.

Here's what's left to do:

* header icons - b&w and slightly smaller versions of these icons
* new message icon - old one seen in screenshot; we can use the one from bug 483759

With those items done I think we can get this patch applied, even though we may not have larger icon version to replace the ones in the toolbar.  We could also land bug 474523 soonish so the missing larger versions aren't so noticeable.

Comment 9

[Andreas Nilsson (:andreasn)]

Attachment: column icons

to go into icons

Comment 10

[Andreas Nilsson (:andreasn)]

Attachment: updated css

Realized there was some oddness going on when combined with #484395, since there was a box around the tab area and the 3 pane area. Hope this css works better.

Comment 11

[Andreas Nilsson (:andreasn)]

Attachment: new message icon

Comment 12

[Andreas Nilsson (:andreasn)]

Attachment: Refer to the new message icon file in the css.

Comment 13

[Andreas Nilsson (:andreasn)]

Attachment: updated version of message-attachment

matches the one we use in the header, compose window etc. better

Comment 14

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

did you have a replied/forwarded icon for this as well?

Comment 15

[Andreas Nilsson (:andreasn)]

Attachment: message replied&forwarded icon

Comment 16

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

Attachment: updated patch w/ all the new icons

I'm still missing a reply + forward icon, but otherwise this patch is ready for review.

Comment 17

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

wow, completely missed that comment.  will update

Comment 18

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

Attachment: updated patch w/ all icons

here's the updated patch w/ the latest reply+forward icon included.

asking magnus for a review here.

will attach screenshot next

Comment 19

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

Attachment: message list screenshot

here's the updated screenshot against my test inbox

Comment 20

[Magnus Melin [:mkmelin]]

Comment on attachment 371473 [details] [diff] [review]
updated patch w/ all icons

Overall this is very nice!

The one icon i'm not quite happy with is mail/themes/gnomestripe/mail/icons/message-new.png 
It looks too much like a star imo, and the star or whatever it's supposed to be is slightly off center.

Also there's the issue that Phil mentioned in some other bug: that -moz-image-region speeds things up... It's a PITA but I guess we have to use that. I'll attach a small script shortly that at least partly could help.

>+#threadTree treechildren::-moz-tree-row(selected) {
>+  background-color: Highlight;
> }

Looks like this fixes bug 352833, yay!

Comment 21

[Magnus Melin [:mkmelin]]

Attachment: script to combine images into one and output what moz-image-region each pic is

Nothing fancy, feel free to improve

~/tmp/imgs$ ./do_collage.sh *.png
-moz-image-region: rect(0px 0px 16px 16px); /* collage.png */
-moz-image-region: rect(16px 0px 32px 16px); /* message-read.png */
File to write to [collage.png]:
Wrote to collage.png

Comment 22

[David Ascher (:davida)]

actually, this script could be super useful.  nice to know!

Comment 23

[Magnus Melin [:mkmelin]]

Comment on attachment 371473 [details] [diff] [review]
updated patch w/ all icons

Minusing for the -moz-image-region stuff

Comment 24

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

thanks for the script!  that's going to save a lot of time in reworking these patches

Comment 25

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

Attachment: updated patch using moz-image-region

Here's the updated patch that uses a single message-list.png image.

I didn't remove the message.png image yet since it's still being used by  Account Central.  Once that page gets reworked we can probably strip this image down to the singe imap-deleted that is left.

And just to note that the do_collage.sh is awesome, but needs the following patch:

@@ -11,9 +11,9 @@
 let h=16;
 
 let top=0;
-let right=w;
+let right=0;
 let bottom=h;
-let left=0;
+let left=w;
 
 let images=$#-1
 for file in ${@}; do

Comment 26

[Magnus Melin [:mkmelin]]

Attachment: do_collage.sh, v2 (combine images script)

Fix the bug Bryan found, remove/fix old bogus comments.

Comment 27

[Magnus Melin [:mkmelin]]

Comment on attachment 372127 [details] [diff] [review]
updated patch using moz-image-region

Looks good! r=mkmelin

(with a mumble about message-new.png also not matching the folder icon "red sun", but I'll leave the artistic decisions to others)

Comment 28

[Magnus Melin [:mkmelin]]

I just realized, I guess we need to put the source images into hg too somehow - otherwise it's a major pain in the future when someone wants to change one of them. Something like in a dir mail/icons/unpackaged/ perhaps?

Comment 29

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

I was going to do that, however there was a movement to put all the "design" related source artifacts in a separate repository (bug 476008); however my account has yet to be created (bug 476056) so the files are just on my laptop for now.

I'd like to put your script in that same repository if you don't mind.

Comment 30

[Magnus Melin [:mkmelin]]

Sure, feel free to!

Comment 31

[Magnus Melin [:mkmelin]]

changeset:   2375:94ac5164425d
http://hg.mozilla.org/comm-central/rev/94ac5164425d

->FIXED