7 years ago
7 years ago


(Reporter: ibarlow, Unassigned)




Firefox Tracking Flags



(Whiteboard: tabs-ux)


(1 attachment)



7 years ago
As per a conversation in #mobile, let's try doing partial crops of thumbnail images, to make them a little more useful. This mockup (from a different project) can be used as a point of reference.

This would impact our tabs menu, as well as our start page.
You have a few things to consider here:
1.  What size are thumbnails saved into the database
2. What size and crop do we use to display them in a given instance

Bug 709103 will change #1 to be fullwidthxfullwidth screenshot scaled down to 96x96 pixels. The quality of #2 is obviously affected by #1.
The patch for tabs menu: uses interesting portion, rather than scaling a minWidth x minWidth.
Here the interesting portion is top 140dp x 80dp.
Same approach can be used for thumbnails. The stock browser takes a crop of center 90px x 90px from minWidth x minWidth.
Given a minWidth x minWidth portion, cropping a smaller left portion or a middle left portion wouldn't be a problem.
OS: Mac OS X → Android
Hardware: x86 → ARM
Keywords: polish
Priority: -- → P3
tracking-fennec: --- → 11+
cc'ing ttaubert because he's been working on desktop's implementation a lot (I think?) in bug 497543. I think they're using something pretty similar to the screenshot though (maybe even something smaller, the top 25% width or the page?)

Comment 4

7 years ago
The more I use our Nightly tabs compared to the stock Browser's tabs, the less convinced I am that we should be cropping out sections of pages to use as thumbnails.  On desktop, I can see not wanting to crush down a 1000px wide box into a 100x100 square. But on a phone, the difference in size between page and thumbnail is considerably less, so you actually preserve a lot more information in your thumbnail. 

Can we try generating thumbnails based on scaling down the *full width of the screen*, and get a test build to see how they look in the tab menu?
Cropping thumbnails well is a hard task... So there are currently some approaches we considered:

1) A whole-screen thumbnail with just a simple panning algorithm looks ok. They don't look really good because everything tends to become really small and things on the left (like the page logo) might not be included.

As Ian mentioned, this might not be too bad on mobile but tends to get worse with an increasing screen size.

2) We're currently testing partial thumbnails for the New Tab Page. We take the upper 50% of the page as it is displayed in the browser viewport. Then we apply a simple panning algorithm but without any X/Y offset so that we always include the upper-left corner.

This yields quite good results so far but not for centered pages. Ideally we'd want to be able to detect the content's X offset and shift the thumbnail accordingly.

3) We asked the Pancake people how they do it. They have a special web service running that opens the page in Chrome with a viewport of 1000x600. They take a picture, scale it down to 500x300 and from that they have the upper-left quarter as a thumbnail (250x150). That looks pretty good but is only doable if you control the viewport size so that the layout can adapt and there is no panning needed.
Whiteboard: tabs-ux
Created attachment 593172 [details]
screenshot on HTC Flyer

Screenshot from HTC Flyer, the thumb nails in tabs are cropped incorrectly 1/31/2012 build
Fixing in bug 721847
Last Resolved: 7 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 721847
You need to log in before you can comment on or make changes to this bug.