The height of tiles changes suddenly

[shaoran]

On the Tiles section of the settings, I have Show my top sites as tiles activated with infinate rows x 5 columns.

Usually the tiles have the same height and look OK, but then suddenly when I click on the New Tab or press ctrl+N to open a new tab, the tiles get vertically squashed. Even after a restart of Chrome the tiles remains squashed.

I don't know how to reproduce it, but sometimes it remains like that for days and then suddenly the height gets back to normal.

Inspecting the HTML with the dev tool reveals the following HTML code:

<a class="sitetile" href="http://localhost:3000/" style="opacity: 1;" url="http://localhost:3000/" origtitle="localhost:3000" doneloading="1">
    <div class="thumb" style="height: 44px;">
        <img src="filesystem:chrome-extension://hibkhcnpkakjniplpfblaoikiggkopka/persistent/thumbs/aae1cf3cb358fab3f0685775655dc000.png">
    </div>
    <span class="toptitle">
        <img src="chrome://favicon/http://localhost:3000/">
        <span class="toptitletext">localhost:3000</span>
    </span>
</a>

The class thumb has a height of 132px, but as you can see the <div class="thumb"> tag has an inline style that overrides the height to 44px.

Why is that? How can I fix it?

I'm using Fauxbar version 1.8.1 on a Chrome Version 77.0.3865.120 (on Debian Linux).

[ChrisNZL]

Off the top of my head, this issue can occur if one of the tiles' screenshots' heights is short. Likely due to a screenshot of one of your sites being taken at a time when the browser window was shorter than usual.

Fauxbar then sets the inline CSS at runtime to match the shortest screenshot's height for all tiles.

---

To resolve for now, just tested the code below – will clear the HTML5 persistent data where the thumbnails are stored.

Steps:

1. Open a Fauxbar tab.
2. Press F12 to open Chrome's DevTools.
3. Click the Console tab.
4. Copy and paste in:

   // Get the HTML5 file system
   window.requestFileSystem(window.PERSISTENT, 50*1024*1024, function(fs){
   // Get the `thumbs` directory
   fs.root.getDirectory('thumbs', {create:true}, function(dirEntry) {
       // Remove the `thumbs` directory and every thumbnail file within
       dirEntry.removeRecursively(function(){
           // Recreate the `thumbs` directory
           fs.root.getDirectory('thumbs', {create:true}, function(newDirEntry) {
               console.log("Done.");
           }, fileErrorHandler);
       }, fileErrorHandler)
   }, fileErrorHandler);
   }, fileErrorHandler);

5. Press Enter to execute the code. A message in the console window should then say Done..
6. Refresh the Fauxbar tab with F5 or Ctrl+R, and your thumbnails should be cleared, and will be retaken as you browse your sites again.

---

To implement later:

• Add the code above as a button to Fauxbar's Options > Management section.
• Possibly add an option to set a minimum tile height.

[shaoran]

Oh, very nice, the snippet removed the thumbnails.

One of my tiles points to http://localhost:3000 which is where I usually run my rails and webpack development pages. I usually start this pages with an open dev-tools and I like to have my dev-tools below the site (not on the side) and that's probably why the browser window is shorter than usual when the screenshots are being taken. That would explain why the sizes suddenly change after clicking on a tile.

What is the thumbnail update heuristic that you use? I noticed that for some tiles the screenshots are constantly being updated every time I visit the pages, but this is not the case for other tiles. I haven't been able to determine a pattern here.

Anyway it would be nice to have a button to automatically flush the thumbnails or allow users to set a fixed height for all tiles.

[ChrisNZL]

Ah yes, a smaller viewport with DevTools open sounds like the culprit.

Going down the rabbit hole of when Fauxbar decides to take a screenshot...

In background-new.js, there's a captureScreenshot function, which is called when a tab is loaded and Fauxbar sends itself a chrome.runtime message of either "scrolltop is 0" or "process prerendered page".

// Background event page listens for requests...
chrome.runtime.onMessage.addListener(function(request, sender){

    // Generate top site tile thumbnail for page if page reports page has not been scrolled at all
    if (request == "scrolltop is 0") {
        captureScreenshot(sender);
    }

// Pre-rendered page is being navigated to, so let's process it in a moment
    else if (request == "process prerendered page") {

        // Tab ID changes with prerendering (even though it's the same tab...), so need to get new ID via getSelected()
        setTimeout(function(){
            chrome.tabs.getSelected(null, function(tab){
                processUpdatedTab(tab.id, tab);
                captureScreenshot(sender);
            });
        }, 500);
    }

getscrolltop.js:

// If page hasn't been scrolled at all, tell background to possibly create a thumbnail of the page

if (($("body").scrollTop() <= 0 || window.location.hash) && (!window.fauxbar_thumbdone || window.fauxbar_thumbdone != window.document.title)) {
    window.fauxbar_thumbdone = window.document.title;
    chrome.runtime.sendMessage(null, "scrolltop is 0");
}

The idea is that Fauxbar captures a screenshot once a page has finished loading, but attempts to also take into account Ajax loading (since some webpages are considered "done" loading, but then really they have to wait for JavaScript-heavy post-load operations for content to appear, so that's where the 500 millisecond delay is attempted to be used above with setTimeout. And attempts to juggle title-changes too.

But if you've scrolled the page down when Fauxbar decides to consider screenshotting or not, Fauxbar won't bother capturing since I assume people would prefer having thumbnails display the top of a page, rather than a screenshot of the page half-way down.