[Feature Request] Show tab's preview on hover

[emvaized]

Description

As it can be seen, Sidebery already can store tab's screenshots, to display them in tab group overview (when in list mode).

So it will be awesome to show a small popup on tab's hover containing preview of tab's content, as well as title and favicon.
I think of a great example of this feature in Vivaldi browser:

[emvaized]

@mbnuqw Would it be possible to implement this feature some day?
If it is problematic to show tooltip with image outside of the sidebar bounds, maybe Visual Tabs approach is possible?

Thanks

[mbnuqw]

I'd like to, but I don't know yet how to properly implement this feature. There are different ways, but each has essential (from my point of view) drawbacks:

Preview in window (like in Vivaldi or Edge)

Pros:

• Preview doesn't overlay sidebar tabs
• Can have a configured size (not restricted by sidebar)

Cons:

• Due to https://bugzilla.mozilla.org/show_bug.cgi?id=1271047 it's not possible set initial position of the window, only update it after creation. This is resulting in undesirable movement on showing.
• Window titlebar (in Windows/macOS/most linux DE)

1.mp4

---

Preview in popup inside sidebar

Pros:

• Predictable appearance

Cons:

• Size restriction
• It overlays tabs

2.mp4

---

Preview in every tab (like in Visual Tabs)

Pros:

• Predictable appearance

Cons:

• Size restriction
• On sidebar start there will be a lot of empty previews because tabs will be unloaded (I don't want to save previews cache) (+ height of tab is a common static value)

---

So, I'll continue to experiment with this...

[schmurtzm]

"Preview in popup inside sidebar" seems more reactive than "Preview in window" and no flickering. So I prefer the second option ("Preview in popup inside sidebar").
In all cases this is a very nice feature !

[emvaized]

@mbnuqw
Thanks a lot for your detailed answer. I would agree that 2nd approach seems to be the most intuitive and easy to get used to.

However, I wanted to point out that by 3 (Visual Tabs-like approach) I actually meant that previews should be revealed on hover, not always visible on all tabs — extension has an option for this:

video.mp4

This way discarded tabs, which don't provide any preview, simply will not expand on mouse hover.

[guigirl42]

Looking forward to this so very much. It's a fantastic Vivaldi feature, sorely missed in FF, so if Sidebery would be able to provide this, i'll be delighted.

[megamorphg]

Firefox's MRU tab switcher has previews and for me it's the only ones I really would preview since I have very aggressive tab unloading policies (95% of my tabs are unloaded) with ATD.

Definitely would prefer the 1st option to make things more readable if it doesn't affect performance negatively too much.

[jathek]

Option 1 would be best, as it doesn't affect the sidebar's usability. The flickering is annoying though.

Next best is option 2 imo, since adding the preview to the tooltip isn't too bad when it comes to usability.

Option 3, where tabs change size when you hover over them, seems like it would have a lot of usability issues. Every time you hover over a tab, it looks like you triple the distance to the next tab.

[emvaized]

• Due to https://bugzilla.mozilla.org/show_bug.cgi?id=1271047 it's not possible set initial position of the window, only update it after creation

By the way, it seems that this bug has been resolved 2 months ago...

[guigirl42]

this bug has been resolved 2 months ago

OMZ, does this mean that in fact, Sidebery can now have tab hover thumbnails... or i'm misunderstanding?

[emvaized]

@guigirl42 Nah, it only means that "undesirable movement on show" is probably gone now. But the titlebar issue of the 1st approach is still there though

[guigirl42]

But

Oh rats. How disappointing.

Sidebery is a major part of why, after many years of being an avid Vivaldi fangirl, i switched to FF Nightly. It's so great. That said, the idea of it one day maybe also gaining tab hover thumbnails is quite intoxicating... 🤞

[mbnuqw]

@emvaized thanks for the info, I'll test this (as well as the variant with the inline preview).

btw, what aspects of this feature would you like to be configurable? Like, delay before showing, size of preview popup, maybe, some additional info in that popup?

[guigirl42]

I'll test this

Oooh, now i am getting excited again! 🤞

[emvaized]

what aspects of this feature would you like to be configurable

Configurable delay before showing sounds great! Probably, the most imprortant option for this feature

[guigirl42]

All quiet here; is this request likely to be available for Beta-testing soon-ish pls? 🤷‍♀️

[guigirl42]

Today i discovered this AddOn; https://addons.mozilla.org/en-US/firefox/addon/tab-preview-on-hover/, & it made me feel excited. I was thinking to install it, til i suddenly realised... "d'oh, it's coded for FF's native horizontal tabs, so it surely cannot work for Sidebery". I assume that's true? If so, is there any part of its code that can be borrowed & modified for Sidebery?

[mbnuqw]

tab-preview-on-hover
A very interesting approach (I'd say brilliant), but it will be impossible to adapt it to Sidebery due to the inability to set the vertical position of the popup (hm... or it is possible to somehow pass this value through Theme API). I'll check this.

All quiet here; is this request likely to be available for Beta-testing soon-ish pls?
Only after the v5 release.

[guigirl42]

Only after the v5 release.

Congratulations on your recent release of v5 Stable. Marvellous achievement! 🎉

So, now... 😉 🤞

[jerone]

There was an old Firefox extension called Tree Style Tab that had support for thumbnails inside the vertical tabs via Informational Tab.

Old screenshots:

Aldo this issue is about thumbnails on hover, showing it inside the vertical tab would be a nice feature for this addon and won't require a popover component.

[guigirl42]

https://blog.nightly.mozilla.org/2024/02/06/a-preview-of-tab-previews-these-weeks-in-firefox-issue-153/

Tab Previews! Congratulations to DJ for getting these landed. Currently disabled by default, but you can test them by setting browser.tabs.cardPreview.enabled to true

I have tried this in my Nightly, & it works well [but with the native horizontal tabs only, ofc]. Does the advent of this long overdue Firefox feature make it any easier to adopt the method into Sidebery?

[emvaized]

@guigirl42
Only if Firefox devs will introduce the API for 3rd party addons to use this feature. Without the API it's not much use.

[mbnuqw]

So, another round of experiments with this feature for a couple of hours, which smoothly turned into a couple of days, resulted in something more or less functional. Implemented two modes: inline (Visual Tabs-like) and popup. Will be released for testing in v5.1.1.2 tomorrow (or to be precise when I setup the auto-releasing of the "GitHub" version, which I have planned for tomorrow)

Inline mode:

Peek.2024-02-13.21-16.mp4

Popup mode:

Peek.2024-02-13.21-17.mp4

(Some artifacts and glitches are results of crappy recording...)

Of course, there are possible bugs or maybe unexpected behavior, so feedback is welcome.

[guigirl42]

Oh wow, this is exciting news indeed; thank you! ❤️

I shall be selecting/using the Popup mode: as that's what i'm used to & enjoy, from OperaPresto, Vivaldi, & even Chromium nowadays, as well as the new feature in Firefox Nightly. 💯✅👍

[llc0930]

Apparently popup mode doesn't work very well in bspwm.

[jathek]

Is there no way to just inject a div into the page area with very strict css rules to create the desired appearance? It seems like creating a new window is pretty clunky on anything except a few IDEs.

[mbnuqw]

@jathek, it won't work for all pages - for privileged Mozilla pages, Firefox pages, pages of other addons, local file pages. Although, in these cases I can just fall back to the current external window mode. I'll try it out.

It seems like creating a new window is pretty clunky on anything except a few IDEs.

That's why "popup" mode is experimental and will remain so even after release. (I'll add a note in settings page)

[dexeonify]

The second line I can't reproduce. Could you try testing it with a clean Firefox profile and see if this error persists?

sidebery.mp4

Tested in new profile, Firefox nightly, on Windows 11.
The error only appears if I click on a tab while the preview is shown.
Though I guess it's harmless, because I've not experienced the preview suddenly not working with the latest release (yet, fingers crossed 🤞)

[llc0930]

The second line I can't reproduce. Could you try testing it with a clean Firefox profile and see if this error persists?

Tested in new profile, Firefox nightly, on Windows 11. The error only appears if I click on a tab while the preview is shown

I can also reproduce this error in Firefox 122.0.1 on Debian sid, although not the new profile.

[guigirl42]

Just for the record, 5.1.1.4 Popup Mode is working beautifully for me now, in ArchLinux KDE Plasma Wayland. Thanks so much for your great work, Max.

[guigirl42]

This morning i got 5.1.1.5 & was momentarily displeased when i realised it had reset my preference from the popup window, to inline. However once i went into Settings to change it back, i realised why it happened, & have now happily chosen your new option popup in page. Great work, Max! 👍

[dexeonify]

Maybe a "Popup horizontal offset" is needed lol
Still an interesting implementation nonetheless

[gepz]

I found a slightly annoying UI problem caused by focus stealing.

When you click the "Open a new tab" button in the sidebar, the mouse points to the last tab, so it interrupts you in the middle of typing in the browser address bar when it pops up.

[mbnuqw]

@dexeonify, is this a userChrome.css? Completely forgot about auto-hide-sidebar modifications, so I'll add horizontal offset too.

@gepz, right, I should ignore active tab since it's pointless to show preview for it. This will solve the issue for the cases when a new tab is placed at the end of the list (and goes right under the cursor). Otherwise, use non-window mode.

[jathek]

I've been loving the new popup-in-page option, it's exactly what I was hoping for.

Maybe a "Popup horizontal offset" is needed lol Still an interesting implementation nonetheless

@dexeonify for now I have been using this small code in my userContent.css to fix margins:

/* --------------------- fix margin for in-page tab preview */
:root {
  --sdbr-tabs-margin: 6px;
}
#sdbr_preview_root {
  margin-right: calc(var(--sdbr-tabs-margin) - 2px) !important;
}

Edit: The popup has a "right" property of 2px by default, so I edited my style to remove that and get exactly the margin I want.

[jathek]

If the popup isn't shown for some reason (protected page, discarded tab), can the normal tooltip be shown?

[jathek]

Sorry for comment spam, but maybe a configurable amount to crop from the right of the preview image? Nearly all my previews are bordered on the right by the page scrollbar.

[jathek]

new crop feature from f648741 works great 👍

[ongots]

When the about:config browser.sessionstore.restore_pinned_tabs_on_demand option is enabled, unloaded pinned tabs have a white preview background, unpinned tabs have a dark background.

Is it possible to disable the frame on Windows 10, as in the screenshot above?

[emvaized]

to disable the frame on Windows 10

To achieve this on Windows you will likely need 3rd party window managers which can disable frames for specific type of windows. I could achieve it using something like Actual Window Manager, but it's a paid app (I think there might be free alternatives out there)

[mbnuqw]

When the about:config browser.sessionstore.restore_pinned_tabs_on_demand option is enabled, unloaded pinned tabs have a white preview background, unpinned tabs have a dark background.

Basically, it's #380. Workaround is #380 (comment). (I've already added a task to expose that hidden setting, so this will be simpler in the next release)

---

Closing this issue as implemented.

[the-a-man-006]

Wow guys, I've tried plenty of tab preview extensions (Visual Tabs being the best of them all), but my love for vertical tree-style tabs has always been more than that for previews, so always been making that compromise. Just tried Sidebery's Tab Previews and I'm flabbergasted! Why does anyone still use TST? Why does anyone still use any other browser than Firefox? I'm guessing they just don't know how Sidebery can utterly change their life for the better yet...

One thing,

• how to increase the height of the preview box?
  I'd like it to be twice as tall as it is wide; monitor in portrait mode.
  Visual Tabs could do it. So I guess it should be possible...

It is my opinion that with previews, the bigger the better, ALWAYS.
I already use Alt-Tab-Terminator on Windows and it does wonders!

But if it's not theoretically possible, no big deal; it's already working wonders!!!