479554 - Update anti-phishing error page to use Camino's blocked icon as the badge

Status: RESOLVED FIXED

(Camino Graveyard :: Security, defect)

Description

[Smokey Ardisson (offline for a while; not following bugs - do not email)]

We originally landed the imagery for the blocked error page with something constructed from the toolkit blocked image (which looks very Windows-y) as a short-term solution.  However, we had Jon make us what's basically a larger version of the existing popup_blocked_icon.tiff (which is going to double as the site icon for the error pages, bug 441732).  We need to rebuild the imagery using the Camino blocked image.

If we end up going the Cocoa route in bug 476095, we might be able to have Cocoa composite the image for us; otherwise we'll absolutely need to build a composite image ourselves.

I'll go ahead and take this, but Sam should also have the source images for this, should he (or anyone else) want to take this.

Comment 1

[philippe (part-time)]

A couple of thoughts

issue 1: the reddish background colour choice is a bit on the poor side. The Minefield build in front of me (and I believe Fx 3 & 3.5) uses a more saturated rusty red

#errorPageContainer  {
    background-color:#772222;
}

issue 2: the icon - particularly the red part doesn't stand out at all on the background (even assuming it is set to match the background colour in issue 1)
The Minefield build uses a more plain red background colour in their icon (similar to the colours used in Camino's popup_blocked_icon.tiff). That _may_ help for the icon to stand out better against the background.

issue 3: readablility (personal POV). Reverse text (white on dark colour) is much harder to read. Webkit uses dark and light-medium greys as background, black for foreground colour.
(try with http://ianfette.org/)

quick sample, the red used is sampled out of popup_blocked_icon.tiff, the icon need a red to match. The link colour at the bottom needs adjusting (a blue colour similar to the one used on the failed secure connection page ?) :-)

dummy code (put in usercontent.css or ad-blocking.css to play at home):
@-moz-document url(about:safebrowsingblocked) {
#errorPageContainer  {
		background-color: #d3d3d3 !important; /* lightgrey */
		/* Safari actually uses #c9c9c9 */
	}
	#errorPageContainer, #errorPageContainer div, #errorPageContainer p {
		color: #000001 !important;
		background-color: #d3d3d3 !important;
	}
	#errorPageContainer h1 {
		color: #e71917 !important;
		background-color: #d3d3d3 !important; 
	}
}


---
Regarding the icon.
Is it the idea to reuse the exact same one as currently used in the about:safebrowsingblocked page but with adjusted colours ? With Smokey we once found out the source file was a flat Fireworks file (no layers). Rebuilding it is not so difficult (agreeing on colours though?), except reverse engineering gradients is a less than attractive task….
Or is it the idea to use the same as the pop-up-blocked image (with the white border around), and overlayed over the Camino logo.

Comment 2

[philippe (part-time)]

Attachment: screen shot, possible colours

You'll have to use a bit of imagination for the colour of the icon, I don't always have access to p.shop, these days. 
I think, the bright red used in popup-blocked image would work well.

Comment 3

[Smokey Ardisson (offline for a while; not following bugs - do not email)]

(In reply to comment #1)
> Or is it the idea to use the same as the pop-up-blocked image (with the white
> border around), and overlayed over the Camino logo.

Yes, we absolutely want to switch from the Firefox icon.  We ought to be able to start from one of the high-res Camino logo files (which will have the shadows) and only have to add a shadow for the blocked icon part.

(In reply to comment #2)
> Created an attachment (id=388905) [details]
> screen shot, possible colours

This is not too bad, I think, if we want to go this direction, but the white link color doesn't work; it vanishes into the bg for me.

Comment 4

[philippe (part-time)]

(In reply to comment #3)

> (In reply to comment #2)
> > Created an attachment (id=388905) [details] [details]
> > screen shot, possible colours
> 
> This is not too bad, I think, if we want to go this direction, but the white
> link color doesn't work; it vanishes into the bg for me.
As I said in comment, the link colour needs adjusting... (suggested: same blue as other error pages).

Comment 5

[Smokey Ardisson (offline for a while; not following bugs - do not email)]

We should really move the non-icon parts of comment 1-4 over to bug 480207, which I had forgotten about temporarily.

Comment 6

[Smokey Ardisson (offline for a while; not following bugs - do not email)]

Attachment: New blocked site image, draft 1

How does this look?  I'm not sure if the color shifted in the blocked badge or not (philippe, can you do a comparison with the larger version and see if it looks OK?); I really had a devil of a time with the whole project--4 apps and lots of shadow/transparency fighting :/  I do think the entire shadow managed to stick around, though.

Anyone remember why the image size is 109x108, with the icon shoved in the top right corner?

Comment 7

[philippe (part-time)]

(In reply to comment #6)
 
> How does this look?  I'm not sure if the color shifted in the blocked badge or
> not (philippe, can you do a comparison with the larger version and see if it
> looks OK?); I really had a devil of a time with the whole project--4 apps and
> lots of shadow/transparency fighting :/  I do think the entire shadow managed
> to stick around, though.

That is a resized bitmap file, right ? (screenshot following)
1. the red(s) are much brighter in the badged icon compared to blocked128.tiff
2. the white bar in the middle is not crisp
3. there is some grey edge coming out at the top of the circle

If it is vector file, I don't know what could go wrong with the colours; for the white bar, one have to make sure the path is hooked to the pixel grid (easy to do with a couple of guides).

(note1: the blocked 128.tiff and blocked 512.tiff you send me open as flat bitmap files in pshop cs 3 & 4, no vector layers.
note 2: that particular icon is not so difficult to recreate actually. Just need some time with pshop. I'll try to get to it tomorrow - I was of course wrong by one week about the start of the kid's summer holiday...) 

 
> Anyone remember why the image size is 109x108, with the icon shoved in the top
> right corner?
Ask Jon Hicks...
https://bugzilla.mozilla.org/show_bug.cgi?id=355080#c10

(for that particular icon, he made a 100px by 100px file.)

Comment 8

[philippe (part-time)]

Attachment: screenshot icon in preview

top left is blocked128.tiff, bottom left is attachment (id=389347) 
on the right is the same icon seen in Pixie.

icon(s) as seen in Preview.app

Comment 9

[Smokey Ardisson (offline for a while; not following bugs - do not email)]

Attachment: New blocked site image, draft 1a

Yeah, it's just a bitmap AFAIK.  I can't really see the difference in the reds (which is why I asked you to look ;) ).  The grey, though, is almost certainly an artifact of PS7's resizing and exporting with transparency; I had that all done before I decided in bug 437331 that the Acorn-resized image blew the socks off of Photoshop's.

Also, I think I'd prefer us to fix the CSS rather than to continue to modify the images to include an extra 9 and 8 pixels everywhere, every time.

Here's the 100x100 version, with Acorn having resized the "blocked" badge this time.  Comparing the two in Preview, I see the color is darker on the badge and the grey is gone.  If you'd like to make a specially-tuned badge icon, though, be my guest :)

Comment 10

[Smokey Ardisson (offline for a while; not following bugs - do not email)]

(In reply to comment #9)

> the grey is gone.  If you'd like to make a specially-tuned badge icon, though,
> be my guest :)

Which is to say, if this one looks OK, we can use it; if not and you make a specially sized badge, we'll happily use that one :)

Comment 11

[Smokey Ardisson (offline for a while; not following bugs - do not email)]

(In reply to comment #9)
> Created an attachment (id=389378) [details]
> New blocked site image, draft 1a

> Also, I think I'd prefer us to fix the CSS rather than to continue to modify
> the images to include an extra 9 and 8 pixels everywhere, every time.

Which, for this file, appears to be:

  background-position: 10px 16px;

Those values should be within a pixel or two of the PNG version of Jon's error page icon (I'm not positive I got the Camino icon in mine in exactly the same position it was in Jon's) that we also want to land (to get the data: URIs out of the CSS).

Comment 12

[philippe (part-time)]

Attachment: icon & badge, draft by p

all vectors :-)
The badged thingie is 36px by 36px, whereas draft1a (Smokey's) is 35 by 35. Even numbers allow for more precise control on the pixelgrid (and better egde sharpness).
For some reason I didn't have a 100px Camino icon; that part is slightly resized from the 128px version.

Comment 13

[philippe (part-time)]

Attachment: icon, in context

For evaluation purposes: icon on different backgrounds. From left
1. light grey (as suggested in comment 1)
2. the currently used background colour in about:safebrowsing
3. the background-colour used by Firefox

Comment 14

[philippe (part-time)]

Attachment: psd file, zipped

bread trucks... :-)
File without the Camino icon. The badged thingie is correctly positioned.

Comment 15

[Smokey Ardisson (offline for a while; not following bugs - do not email)]

(In reply to comment #12)
> Created an attachment (id=389411) [details]
> icon & badge, draft by p
> 
> all vectors :-)
> The badged thingie is 36px by 36px, whereas draft1a (Smokey's) is 35 by 35.

Sigh, it was supposed to be 36x36 :P

> For some reason I didn't have a 100px Camino icon; that part is slightly
> resized from the 128px version.

The only place such a thing exists is the error page icon (and now here); it's not a natural Cocoa size. Yours seems about 2px larger when I flip back and forth between them, but I don't think we're so concerned about exact match here (if someone gets out Pixie and measures the size and positioning of the two different icons and comes to complain, I'd probably unleash some bread-trucks on them ;-) ).

Can you work up the changes to our netError.css to enable your image (assuming the image is named "blacklist.png" and lives in embed-replacements/skin/classic/global/icons/ aka chrome://global/skin/icons/blacklist.png)?

Comment 16

[philippe (part-time)]

Attachment: patch for netError.css

changes to netError.css

Comment 17

[philippe (part-time)]

Attachment: blacklist.png

(In reply to comment #15)

> Yours seems about 2px larger when I flip back and
> forth between them, but I don't think we're so concerned about exact match here

I re-resized the Camino icon and checked with the image from about:config. Photoshop diff mode says it is the same size.

Also pngcrush(ed) the png file.

(this image works much better in terms of accessibility and contrast, especially for colour blind people - according to Sim Daltonism).

Comment 18

[Smokey Ardisson (offline for a while; not following bugs - do not email)]

Comment on attachment 389422 [details] [diff] [review]
patch for netError.css

r=ardissone

Comment 19

[Smokey Ardisson (offline for a while; not following bugs - do not email)]

Comment on attachment 389423 [details]
blacklist.png

Yep, looks good; r=ardissone

Comment 20

[Stuart Morgan]

Comment on attachment 389422 [details] [diff] [review]
patch for netError.css

sr=smorgan. I'm not sure why we are going from data: to a file, but assuming there's a good reason I'm fine with that :)

Comment 21

[Stuart Morgan]

Comment on attachment 389423 [details]
blacklist.png

sr=smorgan

Comment 22

[Smokey Ardisson (offline for a while; not following bugs - do not email)]

Er, landed on cvs trunk and the CAMINO_2_0_BRANCH about an hour ago ;)