How to adjust `hide_tabs_toolbar_v2.css` or `autohide_tabstoolbar_v2.css` to react to `titlepreface`?

[trallnag]

Hello,

thanks a lot for sharing these CSS hacks. I am using vanilla Firefox 133+ with the Sidebery extension (vertical tabs). I want to hide the tabs toolbar when Sidebery is active. The two sheets hide_tabs_toolbar_v2.css and autohide_tabstoolbar_v2.css seem perfect for that.

But it would like for these styles to only be active when Sidebery is active. For this, Sidebery provides a titlepreface. For example XXX. Is there a way to adjust the style sheets for that?

Sidebery mentions in the wiki https://github.com/mbnuqw/sidebery/wiki/Firefox-Styles-Snippets-(via-userChrome.css)#dynamic-native-tabs following style. But it is not working by itself and I also failed to kinda merge it with the style sheets provided here.

#main-window #titlebar {
  overflow: hidden;
  transition: height 0.3s 0.3s !important;
}
/* Default state: Set initial height to enable animation */
#main-window #titlebar { height: 3em !important; }
#main-window[uidensity="touch"] #titlebar { height: 3.35em !important; }
#main-window[uidensity="compact"] #titlebar { height: 2.7em !important; }
/* Hidden state: Hide native tabs strip */
#main-window[titlepreface*="XXX"] #titlebar { height: 0 !important; }
/* Hidden state: Fix z-index of active pinned tabs */
#main-window[titlepreface*="XXX"] #tabbrowser-tabs { z-index: 0 !important; }

[MrOtherGuy]

You can add your desired titlepreface attribute selector to lines of hide_tabs_toolbar_v2.css:

• 7 -> #main-window[titlepreface="XXX"] #sidebar-main{
• 20 -> #main-window[titlepreface="XXX"] #TabsToolbar{
• 26 -> :root[tabsintitlebar][titlepreface="XXX"] #toolbar-menubar:not([autohide="false"]) ~ #nav-bar{

[trallnag]

Awesome, now it works! Thanks. Here is the full style sheet:

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/hide_tabs_toolbar_v2.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* This requires Firefox 133+ to work */

@media (-moz-bool-pref: "sidebar.verticalTabs"){
  #main-window[titlepreface*="XXX"] #sidebar-main{
    visibility: collapse;
  }
}
@media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"){
  #nav-bar > .titlebar-buttonbox-container{
    order: -1 !important;
    > .titlebar-buttonbox{
      flex-direction: row-reverse;
    }
  }
}
@media not (-moz-bool-pref: "sidebar.verticalTabs"){
  #main-window[titlepreface*="XXX"] #TabsToolbar{
    visibility: collapse;
  }
  :root[sizemode="fullscreen"] #nav-bar > .titlebar-buttonbox-container{
    display: flex !important;
  }
  :root[tabsintitlebar][titlepreface*="XXX"] #toolbar-menubar:not([autohide="false"]) ~ #nav-bar{
    > .titlebar-buttonbox-container{
      display: flex !important;
    }
    :root[sizemode="normal"] & {
      > .titlebar-spacer{
        display: flex !important;
      }
    }
    :root[sizemode="maximized"] & {
      > .titlebar-spacer[type="post-tabs"]{
        display: flex !important;
      }
      @media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"),
        (-moz-gtk-csd-reversed-placement),
        (-moz-platform: macos){
        > .titlebar-spacer[type="post-tabs"]{
          display: none !important;
        }
        > .titlebar-spacer[type="pre-tabs"]{
          display: flex !important;
        }
      }
    }
  }
}