771494 - [HiDPI] Consider using highres images for about:config, network error, phishing and malware, etc pages

Status: RESOLVED FIXED

(Camino Graveyard :: General, defect)

Description

[philippe (part-time)]

Attachment: updated images, v1.0

The icon looks poor under HiDPI. We don't have much possibilities to load adaquate images depending on resolution. The most simple way is to use a large image, and scale it using the -moz-background-size property.

(technically we could use a 'resolution' / 'min-resolution' media query; however it is not implemented per spec in Gecko 1.9.2).

Comment 1

[philippe (part-time)]

Attachment: patch to css files

Add control over the image size with the -moz-background-size peoperty to config.css and netError.css

Comment 2

[philippe (part-time)]

Attachment: screenshot, HiDPI about:config

Comment 3

[philippe (part-time)]

Attachment: screenshot, HiDPI phishing page

Comment 4

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

A couple of minor nits:

1) The border around the inside and outside of the "compass ring" is a lot lighter; we seem to have various icons/images with different thicknesses/darknesses, so it always seems a crapshoot.  This one might match the current state of the Camino icon better, so I'm not really hung up about it, more of an observation.  It still looks OK at 1x, I think.

2) The outer edge/border of the warning triangle is thicker/darker; it's most noticeable on the triangle's bottom side.

3) The old triangle had a slight orange tint to the inner edge, which appears to be gone.  (It looks like more of the orange, though maybe not all of it, is still there in the error page site icon from bug 770808?)

4) The . in the exclamation point appears too close to the bottom edge; the spacing was much better (and left the dot more distinct) in the old version.

Item 4 is really my biggest concern; combined with the slight blurriness that scaling down triggers in 1x mode, it's not attractive.  Item 2 bothers me the second-most (though in this case it appears more of a 2x issue; dunno how it looks on a real 2x screen).

Comment 5

[philippe (part-time)]

1. Last time I touched those 2 icons was in bug 505334 and bug 483360. At the time I used a bitmap form the appicon (the 128px one, slightly resized). This time, I used the vector source and scaled as needed. That would certainly explain the differences.

2. Ok, will tweak.

3. Right, I worked with the vector file I made for bug 770808, that icon has a straight gradient from more orange to more yellowish. I'll try to reconstruct the multiple gradients in the triangle.

4. I'll tweak.

And yeah, at low res there is probably some slight blurriness, can't really avoid it, unfortunately. I might try to sharpen slightly, but it could make things worse…, particularly on not-so-new MBP displays.

Comment 6

[philippe (part-time)]

Attachment: images, v1.1

With updated warning.png

Comment 7

[philippe (part-time)]

Attachment: screenshot; HiDPI warning png from about:config

Comment 8

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

Comment on attachment 639641 [details]
patch to css files

Sorry, meant to r=ardissone the CSS part last week; it clearly behaves as expected :-)

Comment 9

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

Comment on attachment 640140 [details]
images, v1.1

Is it possible to make the dot of the ! a bit bigger without re-triggering problem 4 from comment 4?  It seems just a little too small.  Other than that, to the naked eye, the new icon appears nearly identical to the old one at 1x :-)

If it's not possible to make the dot bigger without it running into the other elements again, then let's take these as-is.

Comment 10

[philippe (part-time)]

Attachment: Images, v1.2

> Is it possible to make the dot of the ! a bit bigger without re-triggering
> problem 4 from comment 4?  It seems just a little too small.  Other than
> that, to the naked eye, the new icon appears nearly identical to the old one
> at 1x :-)

Perhaps ?

The original icon had a sort-of-rectangular dot. This looked pretty poor (nearly comically so) once resized. I made it a real dot (circle). I can see how it eventually looks to small at low-dpi.

Does v1.2 looks better ?

Comment 11

[philippe (part-time)]

Attachment: screenshot, about:config v1.2

Comment 12

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

Comment on attachment 640508 [details]
Images, v1.2

> Does v1.2 looks better ?

Yes. r/icon-sr=ardissone (and sorry for the lag, again).

Comment 13

[Stuart Morgan]

Comment on attachment 639641 [details]
patch to css files

sr=smorgan

Comment 14

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

http://hg.mozilla.org/camino/rev/e8d549de8b6d

I intended to land the whole bunch under auspices of icon-sr when I got a moment to watch the tree, which didn't happen right away, but then I'd forgotten the bug by the time I next had occasions when I could tree-watch :-(