New tab appears slowly, in a few visible steps

[fvsch]

When tabs are in "large" mode, and one opens a new tab, the tab element appears in several steps over something like a second.

I’m not sure if it’s a voluntary animation with bad performance or if it looks animated — expanding vertically — because some content is shown progressively.

Things that appear after a delay:

• the "about:newtab" secundary label
• the tab preview coming late
• also the tab preview (or preview placeholder) seems to be moving around

Here is a video of the effect (real time, not slowed down): https://dl.dropboxusercontent.com/u/145744/tabcenter-newtab-slow.mov This is on a 2015 Macbook Pro. Note that I got the same speed on two situations: on 5% battery, and when plugged in. From that, I suspect that the issue is not affected much by the CPU speed (this computer's CPU slows down significantly at <10% battery, which affects the UI responsiveness of most applications… but here it doesn’t seem to get worse on low battery, or better when plugged in).

I was also wondering if about:newtab tabs really needed a preview. The placeholder image would be enough for these tabs, IMO. If that’s what's slowing down showing these tabs, that could help fix this issue too. That would also be consistent with how the standard tab bar treats those different tabs:

• about:preferences (icon + label)
• about:addons (icon + label)
• about:newtab (label only)

[fvsch]

Update:

1. There is no live preview for about:newtab, instead it's a newtab.png image from the extension. My recommendation would be to have something more schematic than a screenshot from Firefox's default New Tab tiles. I can try my hand at a different design if you want.
2. I narrowed it down to the tab slide-in/out animations using 36px height, while the large tabs are 56px high. Writing variants for these animations fixes most of the issue.

This is working fine for me: https://github.com/fvsch/TabCenter/commit/9e74e82136f4a048e0fb54fe2ed8ad7afba9ad80

The other perceived performance issue I have is the tab going from this state:

[ placeholder ]   New Tab

to this state:

[    fake     ]   New Tab
[   preview   ]   about:newtab

With the jump between the two taking anything from 100ms to one second or more (not sure why, maybe something about the window element being actually created and some metadata being resolved?).

Ideally, it would appear and stay with this state:

[ nicer image ]   New Tab

Would that be doable? And should I give it a try?

[fvsch]

One last thing re. perceived performance: when opening a new tab, since it appears in two steps (animate height, then fade in), the blue "selected" highlight disappears and then reappears. It kinda stresses that the visual feedback for the action happens after a noticeable delay.

Not sure there’s a better option though.

[fvsch]

That part seems to be from an earlier, partial implementation; commenting it out didn’t affect the animations in my tests.

/* Collapse/expand animation */
.tabbrowser-tab[fadein]:not([pinned]) {
  -moz-transition-duration: 0.1s;
  -moz-transition-property: visibility, height, min-height, max-height, padding-left;
  -moz-transition-timing-function: ease-out;
}

[fvsch]

For the dummy image being slow to show up, that’s probably because of this:

function initWindow(window) {
  // ...
  let data = b64toBlob(win, self.data.load('newtab.b64'), 'image/png');

  // if the dcoument is loaded
  if (isDocumentLoaded(win)) {
    addVerticalTabs(win, data);
  } else {
    // Listen for load event before checking the window type
    win.addEventListener('load', () => {
      addVerticalTabs(win, data);
    }, {once: true});
  }
}

Loading the image data might have a cost (does it read from the filesystem every time?), and I’m not sure when the `load` event happens but I suspect it can be late.

If we take the scenario of opening a new tab from a bookmark in the bookmark toolbar, what users will see is:

1. tab appears, with placeholder image (skin/blank.svg)
2. data/newtab.png is shown, replacing the placeholder image, while the page loads
3. Finally, the page's preview can be generated, and replaces the "new tab" preview.

In this scenario we actually didn't load about:newtab, so the preview shown at step 2 is just wrong.

Ideal scenarios would be:

1. When opening a new tab:
   1. Tab appears with a neutral-looking placeholder image (let’s call it skin/newtab.svg).
   2. If the user loads a different URL in that page, its preview will ultimately replace that first image.
2. When opening a bookmark as a new tab:
   1. Tab appears with skin/blank.svg
   2. When the page loads, its preview is shown.

[fvsch]

Basic demo of not showing the domain/URL for the about: protocol. Looks cleaner to me, and just 2 lines of JS. What do you think?

[fvsch]

I’ve played with simplifying the New Tab preview. Comparison:

The change is fairly simple: https://github.com/fvsch/TabCenter/commit/57863fed2adfde9e565cbb6981cbb77406c27970

That image is still reloaded and painted onto the canvas every second, but I’m seeing fewer delays. Maybe the much reduced base64 data is helping a bit.

[fvsch]

Went with a retina placeholder image. I kept it on a 2px grid so in my tests it scaled down alright, but the ability to load different images (ideally as CSS background, and emptying the canvas) would be ideal.

(My apologies for this spammy thread. :P)

[tsdamore]

how do you create a new tab, be nice if you could right click inside the tab swimlane and add a new tab . or nest to shrink button and a plus sign

[SoftVision-CiprianMuresan]

The issue is no longer reproducible on the latest Tab Center build (built on 3/2/2017).