1363620 - Favicons in history panel, location bar suggestions may appear blurred

Status: RESOLVED FIXED

(Toolkit :: Places, defect, P3)

Description

[684sigma]

Attachment: favicon that becomes blurry, by reporter.ico

I have a problem with Firefox Beta 53. It also happens in Nightly 55 (2017-04-10). Doesn't happen in ESR 45.
Sometimes favicons in history panel and location bar suggestions are blurred unlike favicons in tabs. This is especially noticeable when icons contain text.
Here's how to reproduce the bug:

1. Open http://imgur.com
2. Open new tab, execute this code:

document.body.innerHTML=`
<img src="moz-anno:favicon:http://s.imgur.com/images/favicon-16x16.png" /><img src="http://s.imgur.com/images/favicon-16x16.png"/><br/>
<img src="moz-anno:favicon:http://imgur.com/favicon.ico" /><img src="http://imgur.com/favicon.ico"/><br/>
`;

Result: The left favicon (stored favicon) is twice as huge (32x32), so after scaling it back to 16x16 it becomes blurry
Expected: Stored favicons scaled to 16x16 shouldn't be blurry.

It's not user's decision how to implement this, but I would suggest to store 16x16 favicons, so they don't become blurry.

Comment 1

[684sigma]

Attachment: Favicon is scaled during saving, by reporter.html

There's also another example of this bug. It happens in Nightly 55 (2017-05-09). Doesn't happen in ESR 45.
Sometimes favicons in history panel and location bar suggestions are blurred unlike favicons in tabs.
Here's how to reproduce the bug:

1. Open attached page
2. Open new tab, execute this code:

document.body.innerHTML=`
<img src="moz-anno:favicon:https://bug1363620.bmoattachments.org/attachment.cgi?id=8866179" /><img src="https://bug1363620.bmoattachments.org/attachment.cgi?id=8866179"/><br/>
`;

Result: The left favicon (stored favicon) is 3 times as huge (48x48), so after scaling it back to 16x16 it becomes blurry
Expected: Stored favicons scaled to 16x16 shouldn't be blurry.

It's not user's decision how to implement this, but I would suggest to store 16x16 favicons, so they don't become blurry.

Comment 2

[684sigma]

Comment #1

Mozregression-gui 0.9.6 generated this pushlog (mozregression-gui 0.9.7 is broken due to Bug 1354451):
https://hg.mozilla.org/integration/fx-team/pushloghtml?fromchange=18496dab4741e5ecf1387c762f0f5bf7194903d7&tochange=4e8b0579b51108c1d7c60bd1d70053136ec4521d
->
798223 – Investigate increasing OPTIMIZED_FAVICON_DIMENSION for high-dpi devices
https://bugzilla.mozilla.org/show_bug.cgi?id=798223

Then it was fixed in another bug:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=b01f44c896b2472b154a48c68cf343ae2289d6bd&tochange=d80c517658f5048491b7bf27da25246a297ab50b
->
977177 - move favicons blobs out of places.sqlite to their own database
https://bugzilla.mozilla.org/show_bug.cgi?id=977177





Comment #2

Mozregression-gui 0.9.6 generated this pushlog (mozregression-gui 0.9.7 is broken due to Bug 1354451):
(size of the stored favicon changed from 16x16 to 32x32)
https://hg.mozilla.org/integration/fx-team/pushloghtml?fromchange=18496dab4741e5ecf1387c762f0f5bf7194903d7&tochange=4e8b0579b51108c1d7c60bd1d70053136ec4521d
->
798223 – Investigate increasing OPTIMIZED_FAVICON_DIMENSION for high-dpi devices
https://bugzilla.mozilla.org/show_bug.cgi?id=798223

Mozregression-gui 0.9.6 generated this pushlog:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=b01f44c896b2472b154a48c68cf343ae2289d6bd&tochange=d80c517658f5048491b7bf27da25246a297ab50b
->
977177 - move favicons blobs out of places.sqlite to their own database
https://bugzilla.mozilla.org/show_bug.cgi?id=977177

Comment 3

[Marco Bonardo [:mak]]

Storing 16x16 favicons won't solve anything, if the favicon is larger, it will still have to be resampled. If it's exactly 16px, when presented on hi-dpi screens it will be resampled again.
There is currently bug 1362394 in treeviews, but it should not affect the location bar and history panel.

On the other side, the tab is using the same icon, the only reason it looks less blurry is that is uses image-rendering: -moz-crisp-edges; that is basically a trick to pixelate the icon, there is no resolution gain.

The right thing to do (apart from adding image-rendering: -moz-crisp-edges; to the missing bits) is to implement bug 1347532 and bug 1352459. Basically, we need to collect more favicons per page, not just the first one as we do currently, and then teach the UI to require the right size.

This is not exactly a regression, the only difference is that now we rescale the image later than at the storing time, but we're still rescaling it the same (apart from crips-edges, as I said).

Comment 4

[Rodrigo]

Favicons also look blurry on the Bookmark bar. I'm using the latest Nightly 55.
Comparison: https://i.imgur.com/0Erusn8.png

Comment 5

[Marco Bonardo [:mak]]

(In reply to Rodrigo from comment #4)
> Favicons also look blurry on the Bookmark bar. I'm using the latest Nightly
> 55.
> Comparison: https://i.imgur.com/0Erusn8.png

The tab uses the most current favicon, while the bookmarks toolbar icon may be a week older (it gets expired and replaced after 7 days).
I went to soundcloud and added a bookmark for it, both the tab and the bookmark button are looking the same, no blurry icons.

Additionally, we have bug 1347532 and bug 1352459 to further improve the situation.

Comment 6

[Marco Bonardo [:mak]]

All the related bugs have been fixed, Nightly tries to pick the best favicon.
Note that, if a website doesn't provide an icon for the specific DPI of the used screen, the first largest favicon will have to be scaled regardless. The only solution to that is for the page to provide an SVG icon.

If there are specific issues with specific and famous web pages remaining, please report them in their own bug, if they are due to the website doing poor choices we can move them to tech evangelism or webcompat.