[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)

https://user-images.githubusercontent.com/6276694/174867152-5bdf373c-3c63-456c-ad34-550ff0d27882.mp4

---

Preview in popup inside sidebar

Pros:

• Predictable appearance

Cons:

• Size restriction
• It overlays tabs

https://user-images.githubusercontent.com/6276694/174867200-4fbc9427-5446-439a-b424-6e0b835990fb.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:

https://user-images.githubusercontent.com/37851576/175440304-d8636f41-b60c-415c-9ad5-19b9ec352280.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... :crossed_fingers:

[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! :crossed_fingers:

[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? :woman_shrugging:

[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! :tada:

So, now... :wink: :crossed_fingers:

[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:

https://github.com/mbnuqw/sidebery/assets/6276694/00af4adb-033e-42bd-a2bc-91ad682c6d98

Popup mode:

https://github.com/mbnuqw/sidebery/assets/6276694/b2a89612-8402-444b-bfd4-4dcf0733090b

(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! :heart:

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.

[mbnuqw]

@llc0930, theoretically, position of popup could be corrected with option "Sidebar side", which in your case is the "right" value. But the size... Since the width of preview popup is taken directly from the "Preview width (px)" setting, could you check if the width of the resulting window depends on changing this ("Preview width (px)") setting? If not, could you try to put

browser.windows.update(previewWindow.id, { width: previewWidth, height: previewHeight, top, left })

to the end of showPreviewPopup function in tabs.preview.ts and check? It will update size of that window and position, which should be also shifted because of the wrong size and the fact that Firefox reassign the given coordinates if the window is out of the screen boundaries. If this helps, I'll update the code to also check size of created window.

Another thought, that popup window might trigger some bspwm rule for auto placement. You can use the "Tab Preview[U+200E]" (there is an invisible char) from the window name to exclude it.

[guigirl42]

Hi @mbnuqw Max. The post by @llc0930 made me wonder this...

Does your tab image feature rely at all on the display protocol of the operating system? Specifically, i prefer using Wayland in my KDE Plasma daily sessions, & atm am hoping very much that your new design does not require X11 / Xorg only.

[llc0930]

@mbnuqw, sadly, when I set it to the right, all I see is a window that flashes and then disappears. I have tried changing the "Preview width (px)", which will change the clarity of the preview screenshot. After adding that line at the end of the showPreviewPopup function, the preview size will return to the expected size after flashing. This should be the only line in my rule that might affect that popup window: bspc rule -a firefox desktop='^2' follow=off. I tried adding an invisible char but nothing changed.

[llc0930]

But when other windows exist, the behavior is abnormal.

https://github.com/mbnuqw/sidebery/assets/14966910/7a353511-cdbd-4248-84b0-c04a4a9a2ce1

[mbnuqw]

@guigirl42

Does your tab image feature rely at all on the display protocol of the operating system?

No, sidebery asks Firefox for all needed info: current window size, current window position and width of sidebar. Then, from that data sidebery calc appropriate coordinates for popup window and open it using WebExtentions API (windows.create), so from perspective of addon it doesn't matter what environment is (theoretically...). But in practical terms, problems can arise if:

• System's WM (window manager) gives incorrect data about current window to Firefox (unlikely, because it would break everything)
• Firefox return incorrect window info to sidebery
• I've made a mistake somewhere here or here
• Firefox opens popup window with incorrect coordinates or size. e.g. if you have multiple monitors and FF window is rendered on both of them, there might be surprises (very similar to what @llc0930 described after changing the setting to "right").
• WM doesn’t care about the coordinates given by Firefox and positions the popup window as it pleases.

So... yeah, it's quite experimental feature. That's the reason why there are two modes, and the popup mode is turned off by default.

But, I've just tested it on the latest Manjaro with Plasma on Wayland and it appears to work ok:

• In maximized and full-screen Firefox window the popup appears as it should.
• In floating Firefox window the popup appears with some (~ -40px) static horizontal shift, which is bearable.

---

@llc0930

Let's do an experiment:

1. Alt+click on the settings button in sidebar (this will copy devtools url for debugging the addon and open a new tab)
2. Ctrl+V, Enter (Paste devtools url and open it)
3. In console tab, run the code browser.windows.create({ top: 10, left: 10, width: 100, height: 100, state: 'normal', type: 'popup', url: 'https://example.com' })
4. Play with width and height in that code to check if the new window corresponds to these parameters.
5. (if you use multi-monitor setup) Try to change screen of parent Firefox window and check the results
6. Try to use floating mode and check the results in different places of screen and with different size of parent Firefox window

If the new window in all cases opens with wrong size, then try to run this code: browser.windows.update((await browser.windows.create({ top: 10, left: 10, width: 100, height: 100, state: 'normal', type: 'popup', url: 'https://example.com' })).id, { width: 100, height: 100 }): It will open a new window and then update it size.

If this doesn't work (a new window will also open with the wrong size), then I'm afraid there's nothing that can be done on sidebery part. You can try to check xev -root output to see what's going on in X11 when Firefox creates a new window. Or just use inline mode for tab preview.

[mbnuqw]

@llc0930, you can also try to add the bspc rule -a 'firefox:*:Tab Preview‎' ... rule to reset attributes. Here is the related issue in bspwm repo.