[Bug] "Grouping tabs with spaces" snippet crops tab list

[TheFou]

I was trying some CSS to customize appearance.
However, this code snippet induces a bug where the tabs list in TST is cropped at the end.
The more space I use, the more tabs are cropped in TST.
I tried messing with other parameters, and even removing everything in the CSS except from this snippet, and I got the same issue as soon as I enable this snippet.
I tried closing / re-opening the sidebar, and even quitting / relaunching Firefox after applying, still the same.
I have around 2000 tabs, in many groups via "Simple Groups" extension.
The group I was testing on has ~270 opened tabs.
I should mention, all tabs appear correctly in the real tab bar at the top.

Here are some screenshots, with exactly the same tabs opened.
The second one with spaces uses margin-top: calc(var(--tab-size) / 5); so that you can see what's missing relative to the "normal" one.

• Platform (OS): macOS Ventura 13.6.7 (22G720)
• Version of Firefox: 128.0
• Version (or revision) of Tree Style Tab: 4.0.20

Thanks for your help.
Regards.

[piroor]

Hmm... sadly the CSS hack is unfriendly to the virtual scrolling architecture of TST 4.0 and later. TST 4.0's virtual scrolling assumes that all tabs have same height and zero vertical margins (except negative margin for collapsed tabs), so virtually scrolled tabs are cut off for margins added by your user stylesheets - it is unavoidable. We may need to implement something new API to register extra margins for tabs and implement a new helper addon which uses the API, instead of the CSS hack.

[piroor]

I'm afraid that such a new API may make virtual scrolling calculations more slow. Does anyone have something solution idea?

[TheFou]

Thanks for considering the issue.
I can't help unfortunately, I'm a simple user... Hope you'll figure something out.
Regards.

[irvinm]

@piroor want to move this over to the discussions as this is CSS related? (I did try playing around and thinking about how to solve this and couldn't come up with anything ... I use spacing between my tabs too, but uniformly across all tabs, not just at the root level)

[piroor]

I have an idea based on blank tabs just for separators, like following:

• Tab A
  • Tab A-1
  • Tab A-2
• Blank tab for the separator
• Tab B
  • Tab B-1
  • Tab B-2
• Blank tab for the separator
• Tab C

Something helper addon maintaining such blank tabs for separators between (before) top level tabs and hiding them by CSS may provide the "grouping tabs with spaces" feature virtually. There are some restrictions: the size of spaces for grouping will be same to the height of a tab always, and the space between groups will be clickable unexpectedly so we need to do something for such click events.

[irvinm]

A helper addon I think could certainly facilitate all of this ... within the limitations you mentioned.

• I would guess the "spacing being the same size as a tab" might be a deal breaker for some ... big gap. :)

The addon could:

• Monitor/evaluate each "root" tab and insert/ensure a spacer tab above it
• It could add a "state" to those spacer tabs via TST that could be acted upon by CSS
• CSS could then style all the elements to match the background of the sidebar
• CSS could disable "pointer events" for all of the elements as well (this is the one I am least confident it for all elements)

Additionally, couldn't you really do this manually with some CSS?

• Create a tab to be used as a spacer (Just need something unique about this tab for CSS)
• CSS could then style all the elements to match the background of the sidebar
• CSS could disable "pointer events" for all of the elements as well (this is the one I am least confident it)
• Would need to enable pointer events if need to duplicate the tab and move to another location
• Maybe too much work for the return for the manual process?

Either way, not sure there is anything more to do on the TST side. :)