Autohide expands behind window content

[ned-martin]

Abstract

TST is set to autohide. When mouse hover it should expand over the top of the window, but it is now expanding behind the window content.

Steps to reproduce

1. Upgrade Firefox to 133.0b2 when TST is set to auto-hide and expand on hover. This works on previous versions of Firefox.

Expected result

Actual result

TST auto-hidden

TST with mouse hover - now expanded behind the window content

How it should work

Environment

• Platform (OS): Windows 11
• Version of Firefox: 133.0b2
• Version (or revision) of Tree Style Tab: 4.0.23

[piroor]

Autohide is not a feature of TST, it is a userChrome.css customization topic. Thus I move this from issues to discussions.

[lediur]

I fixed this issue by increasing the z-index in #sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover to 3 in my userChrome.css styles for the sidebar on hover.

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover,
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]
  #sidebar {
  min-width: var(--sidebar-visible-width) !important;
  max-width: var(--sidebar-visible-width) !important;
  transition-delay: 0s;
  transition-duration: 0.15s;
  z-index: 3;
}

More info

I ran into this issue with 133.0b3 (Firefox Developer Edition).

I noticed that the sidebar displayed over the browser viewport when it was animating, but then was covered by the viewport when it finished animating.

After using the browser developer tools to inspect the user chrome styling, I noticed that the z-index for the browser <tabbox> element (#tabbrowser-tabbox) is now set to 2 in var(--browser-area-z-index-tabbox). No idea what the value was in prior Firefox versions 🤷

This explained the behavior I observed, since the example userChrome.css styles set a higher z-index for the non-:hover-state sidebar than the :hover-state, so the z-index would remain at the higher value until the transition animation was complete.

Increasing the z-index for the hovered state above var(--browser-area-z-index-tabbox) fixed this issue for me.

Edit: I edited the example in the Wiki to fix this issue.

[ned-martin]

Thanks, that fixed it!

I note that in the Wiki the two examples differ - the "Full Auto-show/hide Theme" has different CSS to the "Auto-show/hide sidebar by mouseover (hover)"

The "Full Auto-show/hide Theme" contains this, which (theoretically) protects against this problem occurring again. Perhaps both sections should be updated to be the same for simplicity?

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