165319 - Image placeholder icons are too similar and too ugly

Status: RESOLVED DUPLICATE of bug 240463

(SeaMonkey :: Themes, defect)

Description

[David Tenser [:djst]]

The small 14x16 icons when loading an image and when an error occured (e.g. 404
file not found) are too similar. The error picture has a white "crack" in it,
but it's very hard to tell the difference from that icon and the "image loading"
icon.

Attaching two new icons that better distinguish the two states.

Comment 1

[David Tenser [:djst]]

Attachment: New "loading image" icon.

New "loading image" icon. A slightly updated version from the original one.

Comment 2

[David Tenser [:djst]]

Attachment: New "image error" icon.

New "image error" icon.
Much easier to tell the difference now, isn't it?

Comment 3

[Christian :Biesinger (don't email me, ping me on IRC)]

wow that's an ugly icon (the second one). I like the current one much better...

Comment 4

[David Tenser [:djst]]

The point is that the current icons are too similar. The "image error" icon is
not supposed to be pretty. It's supposed to indicate that an error has occured.

But feel free to make better icons.

Comment 5

[timeless]

Comment on attachment 97087 [details]
New "image error" icon.

well, if you want a change, you're free to make better icons. your second image
provides *no* indication that it's an image and not a plugin or some other type
of document. (yes, i agree with biesi.)

Comment 6

[David Tenser [:djst]]

Attachment: Alt. "image error" icon

This version of the "image error" icon still indicates that it's an image
placeholder, but it's much easier to distinguish it from the "loading image"
icon.

Comment 7

[David Tenser [:djst]]

It would be nice to know what people think. ;)

Comment 8

[Cees T.]

Attachment: Modified broken-image.gif

I think this one immediatly indicates that the image is broken and something
should be done about it.

Comment 9

[David Tenser [:djst]]

Attachment: Pretty "loading image" icon

These are completely new icons that looks much better than the previous ones,
in my opinion. Marking my old icons as obsolete.

Comment 10

[David Tenser [:djst]]

Attachment: Pretty "image error" icon

And this is the broken image icon.

Both icons uses alpha transparency for the drop shadow.

Comment 11

[David Tenser [:djst]]

Changing summary.

Timeless and Biesinger, do you like these ones better?

Comment 12

[Christian :Biesinger (don't email me, ping me on IRC)]

I think I Like attachment 97155 [details] best

however, this should be decided by the layout module owner, as I was told.

Comment 13

[Martin Horwath]

Attachment: some other pretty versions

i've just made'em

Comment 14

[Martin Horwath]

Attachment: replacement for loading-image

14 x 16  16 colors

Comment 15

[Martin Horwath]

Attachment: replacement for broken-image

14 x 16  8 colors

i think both icons are different and beautiful enought
put'em into the /res directory
hope you'll find them useful - have fun

Comment 16

[Martin Horwath]

Attachment: another replacement for broken-image

14 x 16  16 colors

Comment 17

[Jeff Walden [:Waldo]]

*** Bug 223380 has been marked as a duplicate of this bug. ***

Comment 18

[Jeff Walden [:Waldo]]

A relatively related bug is bug 226709 (didn't check to see if it's a dupe or
not).  The plug-in icon also needs to be updated, if any graphics designers are
up to it.

Comment 19

[Boris Zbarsky [:bzbarsky]]

Hrm.. when did these icons get to be 14x16?  The code in nsImageFrame assumes
they are 16x16....

The other thing I wonder is how many colors do those use?  Will they deal ok
with 8-bit color?  (ok == "not take many colors away from the other apps")

Comment 20

[David Tenser [:djst]]

Attachment: 16x16 image loading icon

16x16 image loading icon, per bz's comment.

Comment 21

[David Tenser [:djst]]

Attachment: 16x16 image error icon

Comment 22

[Boris Zbarsky [:bzbarsky]]

What's the answer to my second question?

Comment 23

[David Tenser [:djst]]

(In reply to comment #22)
> What's the answer to my second question?

Sorry, I'm not sure if I understand the question. The proposed image
placeholders I've attached are 32bit PNG graphics with alhpa-transparency for
the drop shadow. I guess 8bit transparent PNGs could be created also, if that is
the requirement.

Comment 24

[Boris Zbarsky [:bzbarsky]]

The requirement is that if I'm using mozilla on a system with 8-bit color I can
have something else in color other than these images (which, in the grand scheme
of things are something I really _don't_ care about being in color, as a user).
 That means they should use as few colors as possible.  8-bit is not sufficient;
you could have an 8-bit png that eats up most of the colormap.

Comment 25

[Boris Zbarsky [:bzbarsky]]

Comment on attachment 140868 [details]
16x16 image loading icon

Removing review requests, since I'm not really qualified to review this sort of
thing anyway and my comments on color have no been addressed.

Comment 26

[Jeff Walden [:Waldo]]

Is it trivially possible to fork (broken|loading)-image.gif for
Firefox/Thunderbird/et al?  The Firefox interface as a whole is looking really
polished right now (particularly so with the new logo), but the broken/loading
image placeholders are truly an eyesore.

The GRE specifies layout/html/base/src/(broken|loading)-image.gif internally
(and the app, be it Seamonkey, Firefox, Thunderbird, etc. doesn't). 
<http://lxr.mozilla.org/mozilla/search?string=broken-image.gif> shows the broken
image's URL references in source; a similar query will show the same for
loading-image.gif.  Would it be possible for now to change the current images to
PNG (direct conversion, no image change)?  Then it *might* (speculating, but it
seems reasonably easy to copy an image to bin/res/ if necessary) be relatively
easy to simply add a small hack to overwrite the old version with a new pretty
PNG through toolkit/-only code.

These two icons are really one of only two or three inconsistent UI graphics
(the plug-in icon being the one other I can remember); it would be nice to fix
this for 0.9 (probably not enough time, tho) or 1.0.  CCing someone who might be
able to help if the last set of images is insufficient...

By the way, I converted the last two attachments (the 16x16 image loading/error
icons) to a web-safe palette in The GIMP, and they're quite passable.  It's
probably also possible to further optimize them with <misc_PNG_tools> to further
save space and keep the color palette small.  Is this really necessary, though?
 Users with 8-bit displays should expect to occasionally see odd colors now,
because 8-bit is almost as obsolete as Win16 (which I believe we no longer support).

Comment 27

[Boris Zbarsky [:bzbarsky]]

ccing bsmedberg to field the questions on apps overriding where that resource:
URI points to.

I'm not asking for no colors at all, just testing to make sure that the broken
image icons being proposed don't significantly degrade the 8-bit browsing
experience.  There's a lot of difference between "colors a bit off" and
"everything rendered in black-and-white".  We want to avoid the latter.  If
converting to a web-safe palette does that (I'm not an images/colors expert, so
someone who is should comment on that part), then I'm perfectly fine with icons
going in if they do that.

Comment 28

[Brendan Eich [:brendan]]

Just curious: are the colors in the screenshot most of the way to the bottom at
http://www.technicalpursuit.com/demos_screenshots.html web-safe?  You can try a
demo of TIBET to check, in case the image gamma is off for your monitor.

/be

Comment 29

[Jeff Walden [:Waldo]]

(In reply to comment #28)
> Just curious: are the colors in the screenshot most of the way to the bottom
> at http://www.technicalpursuit.com/demos_screenshots.html web-safe?

It seems that way to me, tho I can't say I'd know conclusively if they weren't.

Now that Firefox is on a branch until 1.1, does it make any sense to file a new
bug to do this *for Firefox*?  The change could be a hack for Firefox 0.9/1.0,
but this bug would cover it for the trunk/Fx1.1 whenever that might happen (or
at least convert the icon a PNG so it can be overridden with a nicer-looking icon).