481862 - MailNews Toolbar Small Icons

Status: NEW

(SeaMonkey :: Themes, defect)

Description

[Philip Chee]

http://mxr.mozilla.org/comm-central/source/suite/themes/modern/messenger/icons/btn1.gif

Currently we only have large (or normal sized) icons for the buttons in the main mailnews window. We need suitable icons for small button mode which is available in the mailnews window. Unlike classic we cannot simply take the current icon set and shrink them down. These buttons are rather complex and the background gradients and surrounding whitespace are hard coded into the images.

So some of the things we need to do for small icons are:

1. Convert to PNG.
2. Name the new graphic messengericons-small.png.
3. Replace the hard coded background with an alpha transparent background taking care not to destroy the subtle shadows.
4. Remove the hard coded vertical borders (and optionally reproduce them using CSS) since they don't work too well in small button mode.
5. Remove the extra whitespace around the actual button icons and use CSS (padding and margins) instead to size the buttons.

Comment 1

[Philip Chee]

Attachment: The current messenger btn1.gif

Comment 2

[Philip Chee]

Attachment: btn1.png from the Modern Aluminium Theme.

Comment 3

[Philip Chee]

Attachment: Mail Icons from the Really Modern Theme

Comment 4

[Misak Khachatryan]

Attachment: WIP icons from SVG

I'm trying to create vectors from given images, just a few done. Please look at them and comment what's wrong, or give directions.

Comment 5

[Misak Khachatryan]

Attachment: half of the work

I did 7 rows of 19. Some of them i don't like, but it's a good start. And all icons missing shadows, i'll add them when shapes finished.

Comment 6

[Stefan [:stefanh]]

Comment on attachment 366801 [details]
half of the work

Are those icons supposed to replace the large ones as well?

Comment 7

[Stefan [:stefanh]]

(In reply to comment #6)
> (From update of attachment 366801 [details])
> Are those icons supposed to replace the large ones as well?

The reason I ask is that they differ a bit from the original ones.

Comment 8

[Misak Khachatryan]

I'll try to make SVG as close as possible to original, but on any case using same SVG for both big and small buttons is reasonable.

Comment 9

[Misak Khachatryan]

Attachment: almost complete

I need to do 4 rows to complete. Posting to get feedback before i post all buttons set.

Comment 10

[Stefan [:stefanh]]

I'm wondering a bit over the upper part of the folder icons, that part is colored - should it really be colored? The original icons doesn't seem to have it.

That said, it's a bit difficult to compare your icons with the original ones in attachment #365886 [details], because your icons assumes a background-color. Is there any chance you can attach a screenshot of the new icons in action (on the toolbar)?

I also think you need feedback from someone who knows Modern, so I'm cc:ing Neil and KaiRo.

Comment 11

[Misak Khachatryan]

Attachment: all parts complete, without shadow and polish

Sorry for unexpected delay, i'm back and finished all parts. Posting to discuss shape and general thing, after final shape polish I'll add shadows and tweak positions.

Comment 12

[Misak Khachatryan]

Attachment: some comments addressed

I rounded arrows and made them little bit smaller, also fixed envelope.

Comment 13

[Misak Khachatryan]

Attachment: for review

This is almost final buttons. No other feedback except from Philip Chee and KaiRo received, so it's worth to ask review.

Comment 14

[[e-mail]]

Comment on attachment 370846 [details]
for review

These seem OK although I wonder how they'll look at small sizes.

Comment 15

[Misak Khachatryan]

Attachment: Inkscape Vector File

I'm uploading SVG file then. There will be some work i think, related to alignment and other stuff, i think Philip Chee will tell me what to do.

Comment 16

[Philip Chee]

One thing is for our other small buttons in Modern:

http://mxr.mozilla.org/comm-central/source/suite/themes/modern/communicator/icons/common-small.png
http://mxr.mozilla.org/comm-central/source/suite/themes/modern/navigator/icons/browser-small.png

1. There is no "dead" white-space between the images. This makes it easier to slice and dice with -moz-image-region.

2. They are basically "square" in that they are as wide as they are tall 19px x 19px.

The large messenger graphics (minus the whitespace) are more oblong - wider than they are tall. If scale them down so that their height is 19px, what is the "standard" width, or does each button have its own unique width?

Comment 17

[Markus Stange [:mstange]]

Comment on attachment 370846 [details]
for review

Some of the mousedown states have a shadow, some don't. Is that intentional?

Comment 18

[Misak Khachatryan]

Attachment: buttons aligned

Here is same buttons aligned as you want probably.

Comment 19

[Misak Khachatryan]

Attachment: Buttons in grid

This shows how buttons aligned in virtual grid

Comment 20

[Misak Khachatryan]

Attachment: Aligned buttons for review

Here is buttons with virtual square grid applied to show their alignment logic. Asking review to make sure i'm aligned them right.

Comment 21

[Misak Khachatryan]

Attachment: Final buttons, small.

Here is final 19x19 px buttons.

Comment 22

[Misak Khachatryan]

Attachment: Final Inkscape SVG, with aligned buttons

Comment 23

[Philip Chee]

> Created an attachment (id=371662)
> Final buttons, small.

> Here is final 19x19 px buttons.

This graphic appears to be 77px x 361 px which means that the individual grid squares are 19.25px x 19.0px.

Also I the top row doesn't seem vertically centred in the first grid row.

Comment 24

[Philip Chee]

Since most of the graphical elements are broader than they are tall. I don't think a 19x19px grid is optimal. I suggest that the grid be widened to (e.g. 19x22 or 19x24) and then the graphis scaled to fill up the dead whitespace as much as possible.

Comment 25

[Philip Chee]

Since most of the graphical elements are broader than they are tall. I don't think a 19x19px grid is optimal. I suggest that the grid be widened to (e.g. 19x22 or 19x24) and then the graphics scaled to fill up the dead whitespace as much as possible.

Comment 26

[Misak Khachatryan]

Attachment: buttons aligned 19x24

19x24 is preferred, here is slightly modified buttons.

Comment 27

[Philip Chee]

Comment on attachment 375981 [details]
buttons aligned 19x24

Switching ui-review to stefanh. I'm not too sure about how to vertically align each graphic within the individual 19h x 24w grid cells so that when they are used on the buttons, the buttons look consistent.

Comment 28

[Stefan [:stefanh]]

I think the icons looks good. I'm curious about the answer to comment #17, though.

Comment 29

[Philip Chee]

Attachment: Patch 1.0: Problems with small buttons.

Ignore the CSS for the moment. This patch is basically to demonstrate several problems with the small buttons in attachment 375981 [details] .

1. Apply this patch.
2. Switch the mailnews message toolbar to small icon mode.

Problems noticed:

1. Some buttons "wobble" when I hover over them.
2. The light blue in the envelopes is too bright and needs to be greyer.
3. The Reply, Reply-All, Forward, and Delete buttons are too high compared to the other buttons.

Comment 30

[Philip Chee]

Attachment: Screenshot A: small icon mode in messenger, not looking too good.

Note: I'll need to move the drop markers further to the right, but that's a CSS problem.

Comment 31

[Stefan [:stefanh]]

You forgot to add a jar.mn diff in your patch ;-)

Comment 32

[Stefan [:stefanh]]

I think you might be able to fix some of the issues with css, but the best thing to do is probably to use a transparent fill (or maybe use the right bg color?) around each icon and the re-position the icons so they line up.

As for the icons, the color on the envelopes was what comment #10 was about.

Should we use the same origin for large and small icons? The reason I ask is that it might be difficult to match colors etc for large and small icons if we used different origins.

Comment 33

[Philip Chee]

> You forgot to add a jar.mn diff in your patch ;-)
Sigh. New patch soon(ish).

> I think you might be able to fix some of the issues with css, but the best
> thing to do is probably to use a transparent fill (or maybe use the right bg
> color?) around each icon and the re-position the icons so they line up.

Not sure what you mean. The new PNG should have an alpha transparent background. And I'd prefer to fix the alignment problems in the PNG directly (since we have the SVG source) instead of working around them via CSS.

> As for the icons, the color on the envelopes was what comment #10 was about.
I think it's too bright (luminosity) as well as too "blue". Also is it just me or is the small junk icon too dark or even black?

Comment 34

[Philip Chee]

Attachment: Patch v1.1 avec jar.mmmmm

> You forgot to add a jar.mn diff in your patch ;-)
Now with added jar.m&n goodness.

Comment 35

[Misak Khachatryan]

All problems easy to fix, but just one quick question - as these icons contain also address book icons, is it possible to test them too?

Comment 36

[Philip Chee]

> as these icons contain
> also address book icons, is it possible to test them too?

I think you can take one of the small buttons in attachment 377162 [details] [diff] [review] and just change the css e.g.

+toolbar[iconsize="small"] #button-mark {
+  list-style-image: url("chrome://messenger/skin/icons/messengericons-small.png"); <- change this
+  -moz-image-region: rect(76px 23px 94px 0); <- and change this
+}
+
+toolbar[iconsize="small"] #button-mark:hover {
+  -moz-image-region: rect(76px 47px 94px 24px); <- and change this, etc.
[...]

Comment 37

[Misak Khachatryan]

Attachment: Inkscape File 19x24

I decided to publish Inkscape File, to make possible someone else to pick up work. Unfortunately i'm very bad on CSS, and Ratty on graphics stuff, so if someone knows both can easily inalise our work.

Comment 38

[Stefan [:stefanh]]

Comment on attachment 375981 [details]
buttons aligned 19x24

Removing obsolete request.

Comment 39

[Philip Chee]

I think Matt is working on this in bug 526210

Comment 40

[Matt A. Tobin [:nsITobin]]

I am swapping the block/depend on this as this will be fixed as apart of the modern theme meta bug.

Comment 41

[Matt A. Tobin [:nsITobin]]

Hijacking this bug, setting dependency on 883722, and preparing this bug for completion.

All Previous attachments and comments from this bug are now obsolete.