406778 - Modern Navigator (large/small) button icon graphics need to be converted to a .PNG and the background made alpha transparent

Status: RESOLVED FIXED

(SeaMonkey :: UI Design, enhancement)

Description

[Philip Chee]

Attachment: suite/themes/modern/navigator/icons/btn1.gif

See Bug 394288 Comment #13. When customizable toolbars is enabled in Navigator, the graphics for the modern navigation buttons look out of place mostly because they use a hard-coded gradient as the background. Currently I am using a variant from the modern aluminium theme but I think we might need to check the copyrights and licensing on this if the SeaMonkey council agrees to check this in.

Alternatively someone with more graphic skills than I do can proceed to convert the existing modern btn1.gif into a .png with an alpha transparent background. I /think/ there is a subtle drop shadow in this that isn't in the modern aluminium theme.

Comment 1

[Robert Kaiser]

Attachment: try 1: transparent, missing highlight

You can try this one, it's missing the highlight on the left, but everything else should be fine, I hope.

Comment 2

[Robert Kaiser]

Attachment: try 2: transparent, including highlight

Actually, try this one, I have added highlight as well now. It's not 100% identical to the original one, but it should be close enough that people don't notice.

Comment 3

[[e-mail]]

Attachment: Enhanced image difference error

This is an enhancement of the difference between btn1.gif and pasting this image on a background of prtb-bg-noline.gif - the worst actual difference any given pixel has is 16 in red channel.

Comment 4

[[e-mail]]

Attachment: Pixels that exist but aren't displayed

These are pixels that have nonzero RGB values but 100% transparency.
(Excepting the left block "actual" colour for the pixels is #DCE2EA)
I mention them because they look odd in my image editor's edit mode.

Comment 5

[Philip Chee]

Attachment: Screenshot of KaiRo's btn1.png in action

(In reply to Comment #2)

> Created an attachment (id=291460) [details]
> try 2: transparent, including highlight

I forgot to mention that currently in modern, the home button graphics live in  separate .GIFs in /suite/themes/modern/help.home*.gif . Modern Aluminium adds the home button(s) to btn1.png but I am not currently using that row in my patch.

Comment 6

[Robert Kaiser]

(In reply to comment #3)
> the worst actual difference any given pixel has is 16 in red channel.

Is this acceptable?

(In reply to comment #4)
> These are pixels that have nonzero RGB values but 100% transparency.

I can correct those easily and will do so in a followup that includes the home button in this image.

Comment 7

[[e-mail]]

(In reply to comment #6)
>(In reply to comment #3)
>>the worst actual difference any given pixel has is 16 in red channel.
>Is this acceptable?
Converting the resulting image back to a .GIF more than doubles the error ;-)

Comment 8

[Robert Kaiser]

Attachment: try 2: transparent, highlight, add home

Here's an image that includes the home button and I hope it should have the issue with the colored transparent pixels fixed.

Comment 9

[[e-mail]]

(In reply to comment #5)
>I forgot to mention that currently in modern, the home button graphics live in 
>separate .GIFs in /suite/themes/modern/help.home*.gif . Modern Aluminium adds
>the home button(s) to btn1.png but I am not currently using that row in my patch.
Interestingly Classic has reload in navigator and the other five in communicator.

Comment 10

[Robert Kaiser]

Attachment: patch: packaging/CSS changes

OK, I completely rework this now, so that all images that are used across multiple components are in communicator and only the browser-specific reload image stays in navigator (this mirrors what the default theme has), and I also included the print button, as well as small images.
The small images make it necessary to use one common style for home across help and browser windows, so I went for using the style we have in help also for the small image. Imagery follows.

Comment 11

[Robert Kaiser]

Attachment: mozilla/suite/themes/modern/communicator/icons/common.png

Comment 12

[Robert Kaiser]

Attachment: mozilla/suite/themes/modern/communicator/icons/common-small.png

Comment 13

[Robert Kaiser]

Attachment: mozilla/suite/themes/modern/navigator/icons/browser.png

Comment 14

[Robert Kaiser]

Attachment: mozilla/suite/themes/modern/navigator/icons/browser-small.png

Comment 15

[Robert Kaiser]

Attachment: mozilla/suite/themes/modern/navigator/icons/windowcontrols.png

I did split this windowcontrols.png off the small icons as they are different size anyways and not used for normal small toolbars, only for fullscreen.

Comment 16

[[e-mail]]

Comment on attachment 293506 [details] [diff] [review]
patch: packaging/CSS changes

> /* temporary - still don't have small print icons */
> #print-button[toolbarmode="small"] {
Not true ;-) r+sr=me with this fixed.

> #close-button[disabled="true"] {
>-  -moz-image-region: rect(108px  60px 124px 45px) !important;
>-} 
>+  -moz-image-region: rect(32px  60px 48px 45px) !important;
>+}
Might as well kill the double space ^

Comment 17

[Robert Kaiser]

Checked in with those nits fixed.