How Firefox creates the website tiles in New Tab? - firefox

The tiles in the "new Tab" window of the recently used websites consist sometimes of a small logo and a website screenshot and sometimes of just one big logo?
What is the algorithm for the creation of the tiles?
My own website is displayed as small logo (favicon) in bottom right corner and a totally blank screenshot. What's wrong?

The component responsible for doing that is called activity-stream and is developed on GitHub here. The code is then mirrored into the Firefox codebase when a new release is created.
As far as I can tell, the code responsible for fetching a website's icon for the tiles is this which, in order, tries:
checks if the website provided a favicon which has an high enough resolution (currently it's 96x96);
verifies that there's a tippy-top fallback icon (probably from here);
tries to request a rich-icon from here;
if all the above fails, it tries to get a screenshot of the page and pin it in the tile.
As far as I can tell the easiest fix is to provide a good enough favicon from your website.

Related

Puzzle piece icon in webapp

Seeing this weird puzzle piece icon in one of our web applications. Not sure where it's coming from, but only shows up in Chrome. Icon is fixed onto the web page and on top of some text. Any ideas where this is coming from? I can't seem to inspect it either via chrome tools.

Tumblr own page is not loading new pictures from posts

My Tumblr page does not load new pictures from photoset on some occasions. I have experienced this issue on Safari browser. The page is supposed to work like a blog of pictures that are on a chaos (different width is set for each picture, so that every picture is shown differently). After first X pictures, the website is supposed to load a new one beneath them (same as facebook post are functioning for example). This works fine on most devices and browsers, but recently it has stopped working on Safari on iPhones (but only at some cases, one time it is working, but other time it is not). It does not even show the symbol of loading on the end of the page and basically nothing happens when user scrolls down to the end of the page.
I have tried to search for any hints or information of similar issues that other have, but cant find anything that would help. I have also tried to write to Tumblr support, but no answer there yet.
If any of you have any idea what might cause the problem, please, try to answer!

Facebook Open Graph Images are Low Quality For Rotated Images

I use the Facebook Open Graph to publish URLs from a website to their corresponding Facebook Page. The main image is specified using the Open Graph tag og:image. Sometimes the images show up on Facebook as a very zoomed-in, and granular/pixelated. Upon further examination, the images which do poorly appear to have been rotated (I noticed this because a Lightbox plugin I use isn't correctly rotating them, but all other software: browser, Mac Preview, Facebook are).
An example page from the site with the problem (click to zoom and see the orientation issue in that 3rd party library but that's another matter). This issue I'm trying to resolve on Facebook can be seen by using the Facebook Debugger against this page. (As a side-note, it's oriented correctly).
At first I thought I could perhaps fix this with og:image:width and og:image:height, but it had no effect (it did fix a different the pre-caching/crawling issue).
Note that providing the raw image URL directly into the Debugger works fine; the problem is only when providing this URL via the Open Graph tags.
My one workaround idea is to use my image processing library (sorl-thumbnail) to produce a version of the image which FB might like better.
What is the specific characteristic of these rotated images causing a problem and how do I work around it?
Turns out this is a legitimate Facebook bug. Kudos to them for responding and addressing it promptly.
https://developers.facebook.com/bugs/1080037355413437/

Chrome Plugin image persists after close

I have been developing a media player browser plugin for the past few month using Firebreath, but I do not think this is a Firebreath problem.
Currently I am stuck on this weird problem that occurs when one tries to reload the webpage containing the plugin. The image that was being displayed before the reload will stay stuck on the top of screen. The new reloaded plugin will be alive and well behind it but the old image will stay stuck their on the screen forever. If I scroll or resize the browser or even change URLs the image will stay put, however If I move the browser the image will follow. The image stays after closing a tab, but leaves when closing the window
Here is a screenshot that demonstrates what I am talking about.
http://i.imgur.com/asB7i.jpg
( I am a new user so I cant post images )
Has you can see I left my plugin's page and went to the Firebreath website and the image still persists.
This problem happens on both windows and linux, much less frequently on linux, and happens when using both directx and opengl. But only happens on chrome.
Just wondering if you, or anybody else, has any thoughts, suggestions, or insights as to what might be happening. I've tried everything including atrocious hacks and nothing seems to work.
Thank you.
Your problem is most likely that you aren't tearing down your directx or opengl context when the DetachedEvent fires. AttachedEvent is the earliest you can set it up, and DetachedEvent is the latest you can leave it running.

firefox addon, transparent floating panel

I'm developing a firefox addon and would like to have a fixed position (relative to the browser) semitransparent panel with 3 icons shown at the corner of every browser content area. These buttons will have to be able to communicate with a site that is not the site shown.
I know it would be possible to inject a fixed position div to html but I want the buttons to communicate with external site when pressed and also query information when they are loaded so I think that would violate same origin policy. This wouldn't work with image or other direct media urls either.
What would be the easiest way to create the floating icon panel?
After about of week of work I found it. Here is the answer, I hope this helps someone else:
http://marcada.ms/2010/02/getting-content-on-top-of-the-browser-space-using-xul/
The above adds the panel, transparency is not working (at least not in linux what I work with) because of the following bug. Sigh... opened in 2007 and not closed in 2012.
https://bugzilla.mozilla.org/show_bug.cgi?id=408284
edit2: I ended inserting html data to the body of the document using files from extension folder. Works very well including transparency.
edit3: If anyone is interested how this works in my plugin, check my live site at http://www.upmarker.com

Resources