468103 - Recreate the SeaMonkey throbber as APNG

Status: RESOLVED FIXED

(SeaMonkey :: UI Design, enhancement)

Description

[Leszek Matok]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; rv:1.9.1b3pre) Gecko/20081128 SeaMonkey/2.0a2pre
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; rv:1.9.1b3pre) Gecko/20081128 SeaMonkey/2.0a2pre

SeaMonkey logo clearly shows some light pixels around it, which looks ugly.

Probably this belongs to a theme, please reassign accordingly, as I don't have knowledge of appropriate component for this.

I'll attach a screenshot of the Navigation Toolbar, which demonstrates this problem.

Reproducible: Always

Comment 1

[Leszek Matok]

Attachment: a tiny screenshot

Comment 2

[Tyler Downer [He/Him]]

This looks like it is an issue with your theme. You can go to your addons dialog, find which you are using, then please contact the designers of the theme.

Comment 3

[Leszek Matok]

The theme is "SeaMonkey Default Theme 1.0". It's not my job to contact designers of the _default_ theme, it's a thing someone from SM team is supposed to do...

Or do you want to tell me using Darklooks GTK theme is an INVALID configuration? I wouldn't say so, because every other button and icon is okay, only the logo isn't. Please, check for yourself before making such comments.

Comment 4

[Tyler Downer [He/Him]]

You are saying that the Seamonkey logo should not have the white line around it? Then this is different, it is an enhancement.

Comment 5

[Leszek Matok]

Attachment: another demonstration

I'm saying that the "edges" are smoothed to some light background instead of using transparency. No other graphical element that I see in SM has this problem.

The new screenshot shows that the logo (not exactly same-looking) is nicely smoothed to dark background on the theme preview.

The icon used on window list/task switcher also uses transparency properly. The only bad-looking logo is the one on Navigation Toolbar, which gets animated when page is being loaded.

Comment 6

[Stefan [:stefanh]]

Yeah, it's an animimated gif. We need an apng instead.

Comment 7

[Robert Kaiser]

We know about this, no "demonstration" needed. This has been in my mind for a while, but the whole throbber needs to be redone for this from original images which I hope I have around somewhere. The problem is that I'm not sure if I have a decent APNG editor around somewhere.

This does not block an alpha, but is something we really should do.

Comment 8

[Philip Chee]

> The problem is that I'm not sure if I
> have a decent APNG editor around somewhere.

http://animat.megabase.ch/en/index.html

"Animat is a Firefox extension allowing you to create an animated image using the Animated Portable Network Graphics (APNG) format."

Comment 9

[Robert Kaiser]

Attachment: switch to (A)PNG throbber images

This patch switches both our included themes to (A)PNG version of the throbber images. Unfortunately, there aren't many APNG tools out there, so the APNGs are not as optimized as they probably could be (ideally, each frame would only contain the changes to the frame before but the images here contain full frames). All the frames for the APNG images have been recreated from the original work of our logo author, who also designed this "bubble" throbber by extracting frame by frame from his original swf files into svg format and rendering those SVGs to PNG images.

Comment 11

[Robert Kaiser]

Attachment: 32px APNG throbber (for demo)

Just for demoing how it looks, here's the 32px APNG that also is contained in the patch (FYI, I locally even created 128px and 64px versions but they get rather large - ~200 KB and ~530 KB).

Comment 12

[Philip Chee]

But I bet they look great. Perhaps you should blog about it so that we can link to some large size throbbers in the agenda of the current meeting?

Comment 13

[[e-mail]]

Presumably a limitation of the old GIF format is that the bubbles didn't extend outisde the circle. I actually don't like the effect of them utilising the whole square, as that means the bubbles get a square cut off at the top and bottom.

I notice that the new throbber makes better use of 32x32 than the old one :-)

Comment 14

[Robert Kaiser]

I actually like the effect of the bubbles extending outside the circle (esp. since it nicely shades over the background with the alpha transparency), but I also noticed the hard cut-off at the top or bottom. I may be able to create another GIMP patch script or so to make the outer pixels get some kind of fade-out effect or so, but even the one I did for creating the PNGs from the SVGs took quite long to write, and assembling those PNGs to an APNG is also something that takes up more time than necessary - and I'm not sure that fading effect would even be much noticeable.

Of course, this extension outside the circle is something we can do much nicer with APNG than GIF, as the latter did not allow us to have alpha transparency. IIRC, the original images we got even had that effect of the bubbles extending outside the circle, but that would have worked only against one single shade of gray, i.e. would have looked even worse in much more situations.

Comment 15

[[e-mail]]

Comment on attachment 356516 [details] [diff] [review]
switch to (A)PNG throbber images

Let's just wait for the complaints to bubble up ;-)

Comment 16

[Robert Kaiser]

Pushed as http://hg.mozilla.org/comm-central/rev/f1e4747febbf

Comment 17

[Leszek Matok]

I've just installed today's nightly build and let me say it looks great on my dark background! Thank you.