The wiki suggestion to use "dynamic native tabs" using userChrome.css doesn't work with firefox 133

[ricardoseriani]

Steps to reproduce

• Open Firefox in a new profile
• Install Sidebery
• Enable using userChrome.css
• Configure userChrome.css and sidebery like https://github.com/mbnuqw/sidebery/wiki/Firefox-Styles-Snippets-(via-userChrome.css)#dynamic-native-tabs

Actual behavior

When you open firefox 133 the tabs are not hidding when Sidebery is opened

Expected behavior

Firefox tabs should be hide when Sidebery is open.
After some research, I found that the #titlebar "selector" is removed from this version.
I tried to update the userChrome.css and get to a new version that is working for me, but I can't change or submit a PR to change the wiki.
All that it's need is to update the selector to .toolbar-items like the following snippet.

#main-window .toolbar-items {
    overflow: hidden;
    transition: height 0.3s 0.3s !important;
}

/* Default state: Set initial height to enable animation */
#main-window .toolbar-items {
    height: 3em !important;
}

#main-window[uidensity="touch"] .toolbar-items {
    height: 3.35em !important;
}

#main-window[uidensity="compact"] .toolbar-items {
    height: 2.7em !important;
}

/* Hidden state: Hide native tabs strip */
#main-window[titlepreface*="[Sidebery]"] .toolbar-items {
    height: 0 !important;
}

/* Hidden state: Fix z-index of active pinned tabs */
#main-window[titlepreface*="[Sidebery]"] #tabbrowser-tabs {
    z-index: 0 !important;
}

Please, note that I only tested on my machine and I'm no expert in CSS.

System

Xubuntu 22.04

Firefox version

133.0

Sidebery version

5.2.0

Logs

No response

[cem-okulmus]

Even when using this exact userChrome snippet, I still see Firefox bringing up the native tabs. It even shows Sideberry as a "sidebar extension", so this looks like it is almost hard-coded behaviour to have them both visible (which is pretty strange, clearly the point should be that Firefox hands off things to the dedicated "sidebar extension" then). I would suspect this is a bug.

I should perhaps mention that I am using the "vertical tabs" option inside Firefox, as that also fixes things like window controls. Under horizontal tabs (and with sidebar.revamp set to false), I think this fix works.

[oktayacikalin]

I'm using horizontal tabs with sidebery. That fix above works fine in 133 using Gnome.

I'm also using the firefox-gnome-theme and setting the sizes to 2.7em, 3.05em and 2.4em seems to fit better.

[cem-okulmus]

I'm using horizontal tabs with sidebery. That fix above works fine in 133 using Gnome.

I'm also using the firefox-gnome-theme and setting the sizes to 2.7em, 3.05em and 2.4em seems to fit better.

Yeah, I decided to switch to horizontal tabs. Long-term, I think now that Firefox does support vertical stuff natively, perhaps Firefox could just allow extensions to swap in their own side bars instead of the native vertical bar, which would be the best of both world, where you get custom sidebar extensions without having to mess with userChrome at all.

[ricardoseriani]

I'm using horizontal tabs with sidebery. That fix above works fine in 133 using Gnome.
I'm also using the firefox-gnome-theme and setting the sizes to 2.7em, 3.05em and 2.4em seems to fit better.

Yeah, I decided to switch to horizontal tabs. Long-term, I think now that Firefox does support vertical stuff natively, perhaps Firefox could just allow extensions to swap in their own side bars instead of the native vertical bar, which would be the best of both world, where you get custom sidebar extensions without having to mess with userChrome at all.

Please, although I have not mentioned, be aware that you have to set the configuration preface value to [Sidebery] inside Sidebery configuration -> General.
By the way, my Firefox doesn't have an option to enable vertical support for tabs in the current release, only in the nightly release.
But I agree that will be awesome if Firefox allow extension to swap with the native bar.

[winter-again]

I found that this appears to work (using empty char for the preface). I used TabsToolbar instead of titlebar.

#main-window[titlepreface*="​"] #TabsToolbar {
    /* height: 0 !important; */
    visibility: collapse;
}

[emiliopedrollo]

Here's some css with animations working

#main-window #TabsToolbar {⤶
··transition: visibility 0s 0s;⤶
}⤶
#main-window #TabsToolbar .toolbar-items {⤶
··overflow: hidden;⤶
··transition: height 0.3s 0.3s !important;⤶
}⤶
/* Default state: Set initial height to enable animation */⤶
#main-window #TabsToolbar .toolbar-items { height: 40px !important; }⤶
/* Hidden state: Hide native tabs strip */⤶
#main-window[titlepreface*="<200b>"] #TabsToolbar { visibility: collapse; transition: visibility 0s 0.6s !important }⤶
#main-window[titlepreface*="<200b>"] #TabsToolbar .toolbar-items { height: 0 !important; }⤶
/* Hidden state: Fix z-index of active pinned tabs */⤶
#main-window[titlepreface*="<200b>"] #tabbrowser-tabs { z-index: 0 !important; }⤶

[ricardoseriani]

I found that this appears to work (using empty char for the preface). I used TabsToolbar instead of titlebar.

#main-window[titlepreface*="​"] #TabsToolbar {
    /* height: 0 !important; */
    visibility: collapse;
}

I used the [titlepreface*="​=<something>"] to hide the Firefox native tabs only when Sidebery is opened, and set the height over .toolbar-items because it allows for transition using CSS, making the action smoother.
But your solution should work too.

[slash213]

The fixes posted here work, but unfortunately on Mac new Firefox layout still leaves an extra strip at the top, and it's mostly empty except for the "close/minimize/maximize" buttons.

Previously those window control buttons were squished to the left of Firefox's top toolbar, and it made it a bit challenging to drag windows, but saved those extra pixels for web content.

[resiehnnes]

For someone who wants to hide native tab bar completely despite if sidebery is shown or hidden, check out this css. Works for FF 133+ and does not leave title bar @ the top as @slash213 mentioned.

[SevenFactors]

Tried what was available here but no real solution fix to get the tab-bar hiding when sidebery is active and showing when sidebery is inactive.

The following code got it working again as it was meant to work prior to Firefox ver:133 release on Windows.

NOTE: I may or may not have made changes to the values to fit my LibreWolf custom theme. The Min/Maximize & Close buttons should show cleanly on the UI. Tab-bar should completely hide. For those who opt to use/show the Title-bar, this should leave a small clean space between the navigation-toolbar thus the top of the URL-bar outline should show cleanly.

I hope this helps others.

`#main-window #TabsToolbar .toolbar-items {
overflow: unset;
transition: height 0.3s 0.3s !important;
}

/* Default state: Set initial height to enable animation */
#main-window #TabsToolbar .toolbar-items {
height: 3.77em !important;
}

#main-window[uidensity="touch"] #TabsToolbar .toolbar-items {
height: 3.35em !important;
}
#main-window[uidensity="compact"] #TabsToolbar .toolbar-items {
height: 2.7em !important;
}

#main-window[uidensity="normal"] #TabsToolbar .toolbar-items {
height: 3.11em !important;
}

/* Hidden state: Hide native tabs strip /
#main-window[titlepreface="[Sidebery] "] #TabsToolbar .toolbar-items {
height: 0px !important;
}

/* Hidden state: Fix z-index of active pinned tabs /
#main-window[titlepreface="[Sidebery] "] #tabbrowser-tabs {
z-index: 0 !important;
}

}`

[SevenFactors]

The fixes posted here work, but unfortunately on Mac new Firefox layout still leaves an extra strip at the top, and it's mostly empty except for the "close/minimize/maximize" buttons.

Previously those window control buttons were squished to the left of Firefox's top toolbar, and it made it a bit challenging to drag windows, but saved those extra pixels for web content.

Looking at the image.

Sidebery vertical tab panel is minimized to only show site icon and container color bar. Is this a feature or a custom theme you have going on?

[Wise2D]

Hi, I did another code that works, it's dynamic animated too.

Sorry if something's it's off on my English, it's not my native.

https://unicode-explorer.com/c/200B

/* Transição suave para o TabsToolbar */
#main-window #TabsToolbar {
    overflow: hidden;
    max-height: 3em; /* Estado expandido */
    transition: max-height 0.3s ease-in-out !important;
}

/* Toolbar items */
#main-window #TabsToolbar .toolbar-items {
    overflow: hidden;
    max-height: 40px; /* Estado expandido */
    transition: max-height 0.3s ease-in-out !important;
}

/* Estado oculto: TabsToolbar colapsado */
#main-window[titlepreface*="​"] #TabsToolbar {
    max-height: 0; /* Estado colapsado */
    visibility: hidden; /* Evita conteúdo interativo enquanto colapsado */
    transition: max-height 0.3s ease-in-out, visibility 0s 0.3s !important; /* atraso para ocultar */
}

/* Estado oculto para os itens da toolbar */
#main-window[titlepreface*="​"] #TabsToolbar .toolbar-items {
    max-height: 0;
}

/* Corrige o z-index de abas fixadas */
#main-window[titlepreface*="​"] #tabbrowser-tabs {
    z-index: 0 !important;
}