[Bug] Firefox Nightly bug whith auto hide sidebar

[UaHummer]

1. Start Firefox with clean profile.
2. Install TST.
3. Write userChrome.css code for Shrink sidebar until hovered, when using Tree Style Tab
4. install build 2024-09-27-21-38-49
5. auto hide sidebar work
6. install build with Bug 1909986 2024-09-28-08-53-35
7. don`t work

userChrome.css

``` /* Hide main tabs toolbar */ #main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items { opacity: 0; pointer-events: none; } #main-window:not([tabsintitlebar="true"]) #TabsToolbar { visibility: collapse !important; } /* Sidebar min and max width removal */ #sidebar-box { max-width: none !important; min-width: 0px !important; } /* Hide splitter, when using Tree Style Tab. */ #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] + #sidebar-splitter { display: none !important; } /* Hide sidebar header, when using Tree Style Tab. */ #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header { visibility: collapse; } /* Shrink sidebar until hovered, when using Tree Style Tab. */ :root { --thin-tab-width: 30px; --wide-tab-width: 200px; } #sidebar-box:not([sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]) { min-width: var(--wide-tab-width) !important; max-width: none !important; } #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] { position: relative !important; transition: all 100ms !important; min-width: var(--thin-tab-width) !important; max-width: var(--thin-tab-width) !important; } #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover { transition: all 200ms !important; transition-delay: 0.2s !important; min-width: var(--wide-tab-width) !important; max-width: var(--wide-tab-width) !important; margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important; z-index: 1; } ```

Expected result

auto hide work

https://github.com/user-attachments/assets/bec070b9-3ce1-408a-89cb-b599857f1c8a

Actual result

after Bug 1909986

https://github.com/user-attachments/assets/77d03b24-f7df-4705-b4aa-19d500d7df97

Environment

• Platform (OS): windows 11 / Arch Linux
• Version of Firefox: 132.0a1
• Version (or revision) of Tree Style Tab: 4.0.23

[piroor]

You need to add following declaration to user userChrome.css:

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
    z-index: calc(var(--browser-area-z-index-tabbox, 2) + 1);
}

[piroor]

It is not a bug of both Firefox and TST so I label this as "invalid".

[UaHummer]

You need to add following declaration to user userChrome.css:

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
    z-index: calc(var(--browser-area-z-index-tabbox, 2) + 1);
}

nope, don`t work

[piroor]

I've confirmed it on Nightly 133.0a1 Build ID 20240930215150 on Windows 11. Full userChrome.css:

/* Hide main tabs toolbar */

#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
    opacity: 0;
    pointer-events: none;
}

#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
    visibility: collapse !important;
}

/* Sidebar min and max width removal */

#sidebar-box {
    max-width: none !important;
    min-width: 0px !important;
}
/* Hide splitter, when using Tree Style Tab. */

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] + #sidebar-splitter {
    display: none !important;
}
/* Hide sidebar header, when using Tree Style Tab. */

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
    visibility: collapse;
}

/* Shrink sidebar until hovered, when using Tree Style Tab. */
:root {
    --thin-tab-width: 30px;
    --wide-tab-width: 200px;
}

#sidebar-box:not([sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]) {
    min-width: var(--wide-tab-width) !important;
    max-width: none !important;
}

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
    position: relative !important;
    transition: all 100ms !important;
    min-width: var(--thin-tab-width) !important;
    max-width: var(--thin-tab-width) !important;
    z-index: calc(var(--browser-area-z-index-tabbox, 2) + 1); /* added */
}

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover {
    transition: all 200ms !important;
    transition-delay: 0.2s !important;
    min-width: var(--wide-tab-width) !important;
    max-width: var(--wide-tab-width) !important;
    margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;
    z-index: 1;
}

Try z-index: 99999; or something very large value if it still doesn't work.

[UaHummer]

Try z-index: 99999; or something very large value if it still doesn't work.

Yeah, it works, but I had to add !important; for it to work for me.

[piroor]

OK, I've finally updated the snippet: https://github.com/piroor/treestyletab/wiki/Code-snippets-for-custom-style-rules#full-auto-showhide-theme