373519 - Classic theme read/unread dot icons centered differently

Status: RESOLVED FIXED

(SeaMonkey :: Themes, defect)

Description

[Nelson Bolyard (seldom reads bugmail)]

Attachment: 8x enlargement of read/unread dots, side by side

(Windows; U; Windows NT 5.1; en-US; rv:1.9a3pre) Gecko/20070310 SeaMonkey/1.5a

In the mail/news main window, in the pane that lists the messages in the folder,
there is a column named "read", which had a dot icon.  When the message is 
unread, the dot icon is bigger, bolder, more colorful than when the message is 
read.  That's all fine and good, as it should be.  

But in the classic theme, there is one other difference between the read and 
unread dot icons that is NOT good.  They are each centered differently within 
the common space they occupy.  So, when the message changes between read and 
unread, not only does the dot get bigger or smaller, but it also moves up and 
down!  That up/down movement destroys the illusion that it is one dot, getting bigger or smaller.

The attachment is an 8x enlargement of the two dots, side by side in the 
same row.  You can clearly see that the larger unread dot is centered much
lower in the row than the smaller read dot.  

This is really distracting, and it drives me nuts!  
(OK, that's not a drive, that's a putt! :)

Comment 1

[Nelson Bolyard (seldom reads bugmail)]

Attachment: a better side by side comparison

Here I moved the two dots closer to each other and duplicated them.
This makes the vertical displacement more apparent.

Comment 2

[Nelson Bolyard (seldom reads bugmail)]

Attachment: How the dots SHOULD be positioned

In this image, I moved the two smaller dots down, so that they would
be centered the same as the larger ones.  This is how I think the 
dots SHOULD look.

Comment 3

[Nelson Bolyard (seldom reads bugmail)]

The png files for the two dot icons are:
http://mxr.mozilla.org/seamonkey/source/suite/themes/classic/messenger/icons/dot.png
http://mxr.mozilla.org/seamonkey/source/suite/themes/classic/messenger/icons/readcol.png

I propose to edit the "dot.png" file, moving the dot image down by a pixel or
two, so that it is centered the same as "readcol.png".  

I just need a png editor of some kind. Anyone have any suggestions?

Comment 4

[Nelson Bolyard (seldom reads bugmail)]

Attachment: dot.png replacement, centered in 16x6 grid

I found a png editor (snagit7, already on my PC), and edited the two 
dot PNG files to be centered on the same pixel.  I replaced the two 
files in my classic.jar file with these, and the problem is solved.
I figure a "patch" for these files isn't too helpful, so I'm attaching 
the new versions of these two files.

Comment 5

[Nelson Bolyard (seldom reads bugmail)]

Attachment: readcol.png centered in 16x16 grid

Comment 6

[Philip Chee]

For historical reasons Core::Themes is for Suite (SeaMonkey) theme bugs.

Comment 7

[Philip Chee]

Suggestions:
Mnyromyr is the mailnews module owner (r?)
Neil@httl is the SeaMonkey module owner (sr?)

Comment 8

[Karsten Düsterloh]

Comment on attachment 302239 [details]
readcol.png centered in 16x16 grid

Centering the readcol.png into a 16x16 grid to make it bahave like dot.png regardless of alignment is fine, but did you verify that all uses of dot.png align well with your changes? (See <http://mxr.mozilla.org/seamonkey/search?string=dot.png&find=%2Fsuite%2F&findi=&filter=&tree=seamonkey>.)

Comment 9

[Nelson Bolyard (seldom reads bugmail)]

Comment on attachment 302238 [details]
dot.png replacement, centered in 16x6 grid

In reply to comment 8,
I verified that my modified dot.png file worked well in all uses except one.  
I did not verify the use in the file
/suite/themes/classic/messenger/virtualFolderListDialog.css
because I haven't figured out what dialog or window uses that.  
Any idea?

Comment 10

[Nelson Bolyard (seldom reads bugmail)]

Attachment: html files shows old and new dots, side by side, to aid review

This html file lets you see a row of the new dots and
a row of the old dots.  Judge for yourself.

Comment 11

[Nelson Bolyard (seldom reads bugmail)]

Hmm. An observation.  My new files are about 1KB larger than the ones they 
replace, because they are 256 color files, and the ones they replace are 
16 color files.  This seems to be a limitation of my png editor. :(

Comment 12

[[e-mail]]

The dot image is also used in conjunction with the check image in such dialogs as the new saved search folder dialog, the subscribe dialog, or the select for offline use dialog.

I guess it's a matter of taste as to whether the dot and check images need to be lowered or the unread image needs to be raised.

Comment 13

[Nelson Bolyard (seldom reads bugmail)]

Yeah, there's the dot/check image pair in the subscribe dialog.
There's also the dot/flag image pair in the flag column in the message list
pane.  I looked at those but found that the dot image was sufficiently 
different from the other image in each pair that I didn't expect them to be 
aligned in any particular way.  But the two flavors of dots look similar 
enough that I expect them to be centered the same, L/R and up/down.

Comment 14

[[e-mail]]

Ah, I see this is my fault: when bug 348720 switched from .gif to .png images I thought that we had a duplicate image but in fact readmail.gif and dot.gif were subtly different.

Comment 15

[[e-mail]]

Comment on attachment 302239 [details]
readcol.png centered in 16x16 grid

I think all the thread pane header icons need to be 16x14

Comment 16

[[e-mail]]

Comment on attachment 302238 [details]
dot.png replacement, centered in 16x6 grid

Your image editor also seems to have corrupted some of the pixels, but the idea is good :-)

Comment 17

[Nelson Bolyard (seldom reads bugmail)]

Well, IMO, dot.png and readcol.png must both be of the same dimensions.
In the files from which I started, one was 16x14 and the other was 16x16.

I'm curious: in what way are any pixels corrupted? 
All the background pixels appeared to be non-transparent, and I had to 
change them all back to be transparent before saving.  Any other differences?

Comment 18

[Nelson Bolyard (seldom reads bugmail)]

To elaborate on comment 17:
Part of getting the two dot images to be aligned similarly was to ensure 
that the two images were of the same height.  It was not possible to align
them the same, vertically, without that step.  So, IMO, either both images 
need to be 16x16 or both need to be 16x14.  Which do you prefer, Neil?

If both need to be 16x14, I can try again to produce those two files, and 
I can try again to make them be 16 color (as the originals were).  But if 
my PNG editor is unable to do that, then someone else must finish this bug.

If the decision is that both images must be 16x16, the I think someone else
will need to complete the work.  My PNG editor has already done the best 
it can on those, I think.

Comment 19

[[e-mail]]

As the "unread" icon is used both in the pane and in the header it has to be 16x14. I have no issue with changing dot.png and check.png to be that size.

Comment 20

[Nelson Bolyard (seldom reads bugmail)]

The only two files that need editing are check.png and dot.png. 
The others are OK as is, being already 16x14 and being well centered.

The PNG editor I have been using is apparently unable to edit the png files
check.png and dot.png. It ends up creating a file wherein most/all of the 
colors are marked transparent, which causes the entire image to be transparent.
I'm trying to find another editor, but in the meantime, if someone else wants
to take a stab at it, that would be nice.  

The desired edits are:
- in check.png, simply remove the bottom two rows, changing it to 16x14.
- in dot.png, remove the bottom two rows, and then slide the dot image
down one row, filling the vacated space with the transparent background 
color.

Comment 21

[Nelson Bolyard (seldom reads bugmail)]

Attachment: check icon in 16x14 png

I found a wonderful little utility named tweakpng, distributed under GPL.
With it, I was able to see exactly what my png editor was doing wrong, and
fix it. Added Mozilla copyright.

Here is the check.png file, reduced to 16x14.

Comment 22

[Nelson Bolyard (seldom reads bugmail)]

Attachment: dot centered in 16x14 png with transparent background

Here's the replacement dot.png file

Comment 23

[Nelson Bolyard (seldom reads bugmail)]

Attachment: readcol.png centered in 16x14 grid

Here's readcol centered in 16x14. 
I also changed the background palette color to match check and dot, 
so it doesn't look so strange in the editor.  But the background is 
still transparent, so this is very minor.  Added Mozilla copyright.

Comment 24

[Nelson Bolyard (seldom reads bugmail)]

Attachment: html file shows old, new dots and check, side by side, to aid review

This shows the old and new images, side by side

Comment 25

[[e-mail]]

Comment on attachment 306906 [details]
readcol.png centered in 16x14 grid

Although the various images seem to have a mixture of background colours and I don't think this is really that important...

Comment 26

[Nelson Bolyard (seldom reads bugmail)]

Neil, please forgive my ignorance of the current state of the constantly-
changing Mozilla review and approval rules.  Please tell me what additional
steps, if any, I must do before committing those 3 images.

Do I need to wait for the other review requests? or is your SR sufficient?
Do I need to seek some explicit checkin approval, and if so, what flag do 
I use for that?

TIA

Comment 27

[[e-mail]]

(In reply to comment #26)
>Do I need to wait for the other review requests? or is your SR sufficient?
Generally r+sr is required, but whose r depends on the module - this is suite/themes so it doesn't specifically require Mnyromyr's review; IanN, jag or Standard8 would for instance count as a suitable review.

>Do I need to seek some explicit checkin approval
No, suite isn't covered by any other checkin rules, but if you're not in a position to check in yourself for whatever reason then you can instead set the checkin-neeeded keyword and someone will check in for you.

Comment 28

[Nelson Bolyard (seldom reads bugmail)]

Thanks.  I believe I can check this in myself. 
I'll wait for Mnyromyr's review for a while longer.

Comment 29

[Nelson Bolyard (seldom reads bugmail)]

Checking in check.png;   new revision: 1.2; previous revision: 1.1
Checking in dot.png;     new revision: 1.2; previous revision: 1.1
Checking in readcol.png; new revision: 1.2; previous revision: 1.1

Thanks for the reviews.