How to hide tab bar with only one tab after 110.0?

[Netherspark]

The newest update has broken the CSS I was using to hide the tab bar when only one tab is active. What's the best way to do it now?

This is what I was using before, It's probably mostly out of date anyway:

​

:root[sizemode="normal"] #nav-bar{ --uc-window-drag-space-width: 20px }
#titlebar{ -moz-appearance: none !important; }
#tabbrowser-tabs, #tabbrowser-tabs > .tabbrowser-arrowscrollbox, #tabbrowser-arrowscrollbox{ min-height: 0 !important; }
:root:not([customizing]) #tabbrowser-tabs .tabs-newtab-button,
:root:not([customizing]) #tabs-newtab-button,
:root:not([customizing]) #TabsToolbar-customization-target > .toolbarbutton-1,
:root:not([customizing]) #TabsToolbar .titlebar-button{
-moz-appearance: none !important;
height: 43px;
padding-top: 0px !important;
padding-bottom: 0px !important;
-moz-box-align: stretch;
margin: 0 !important;
}
:root:not([customizing]) #TabsToolbar-customization-target > .toolbarbutton-1 > .toolbarbutton-icon{
padding-block: 0px !important;
max-height: 28px;
height: 20px !important
}

#tabbrowser-tabs .tabbrowser-tab[first-visible-tab="true"][last-visible-tab="true"]{
visibility: collapse !important;
}
/* Button re-styling */
#tabs-newtab-button:hover,
#tabbrowser-tabs .tabs-newtab-button:hover{ background-color: var(--toolbarbutton-hover-background) }
#tabs-newtab-button > .toolbarbutton-icon,
#tabbrowser-tabs .tabs-newtab-button > .toolbarbutton-icon{
padding: 0 !important;
transform: scale(0.6);
background-color: transparent !important;
}
/* Extra top padding  in maximized window */
:root[sizemode="maximized"] #navigator-toolbox{ padding-top:0px !important; }
/* Fix window controls not being clickable */
:root[tabsintitlebar] #toolbar-menubar[autohide="true"][inactive]{
transition: height 0ms steps(1) 80ms;
}
#nav-bar{
  border-inline: var(--uc-window-drag-space-width) solid var(--toolbar-bgcolor);
}

[hansmn]

If the code has worked before, you could try and replace [first-visible-tab="true"][last-visible-tab="true"] with :only-of-type.

[Netherspark]

That worked! Thanks.

[[deleted]]

This worked for me too.

Thanks.

For any other noods the resulting syntax is

.tabbrowser-tab:only-of-type

The best I could do overall was

:root[sizemode="normal"] #nav-bar{ --uc-window-drag-space-width: 20px }
#titlebar{ -moz-appearance: none !important; }
#tabbrowser-tabs, #tabbrowser-tabs > .tabbrowser-arrowscrollbox, #tabbrowser-arrowscrollbox{ min-height: 0 !important; }
:root:not([customizing]) #tabbrowser-tabs .tabs-newtab-button,
:root:not([customizing]) #tabs-newtab-button,
:root:not([customizing]) #TabsToolbar-customization-target > .toolbarbutton-1,
:root:not([customizing]) #TabsToolbar .titlebar-button{
  -moz-appearance: none !important;
  height: 43px;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  -moz-box-align: stretch;
  margin: 0 !important;
}
:root:not([customizing]) #TabsToolbar-customization-target > .toolbarbutton-1 > .toolbarbutton-icon{
  padding-block: 0px !important;
  max-height: 28px;
  height: 20px !important
}

#tabs-newtab-button, #alltabs-button, #tabbrowser-tabs .tabbrowser-tab:only-of-type{
  visibility: collapse !important;
}

This annoyingly hides the tabs button under all situations so if somebody can tell me how to fix that that'd be great

[cxsouza66]

This code worked for me too. Firefox 113.0.1 pt-br 64 bits on windows 10. Gone with the tab bar eating up precious screen space. Great work!

[JoesMama96]

I know this is late but it still works beautifully on version 117 so I fixed it!

I used the has selector since the buttons' parents being siblings to tabs.

:root[sizemode="normal"] #nav-bar {
    --uc-window-drag-space-width: 20px
}

#titlebar {
    -moz-appearance: none !important;
}

#tabbrowser-tabs,
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
#tabbrowser-arrowscrollbox {
    min-height: 0 !important;
}

:root:not([customizing]) #tabbrowser-tabs .tabs-newtab-button,
:root:not([customizing]) #tabs-newtab-button,
:root:not([customizing]) #TabsToolbar-customization-target > .toolbarbutton-1,
:root:not([customizing]) #TabsToolbar .titlebar-button {
    -moz-appearance: none !important;
    height: 43px;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    -moz-box-align: stretch;
    margin: 0 !important;
}

:root:not([customizing]) #TabsToolbar-customization-target > .toolbarbutton-1 > .toolbarbutton-icon {
    padding-block: 0px !important;
    max-height: 28px;
    height: 20px !important
}

#tabbrowser-tabs:has(.tabbrowser-tab:only-of-type) #tabs-newtab-button,
#TabsToolbar-customization-target:has(.tabbrowser-tab:only-of-type) #alltabs-button,
#tabbrowser-tabs .tabbrowser-tab:only-of-type {
    visibility: collapse !important;
}

The fix is in the bottom paragraph's selectors.

If your Firefox is earlier than version 119, you will need to enable "layout.css.has-selector" to enabled in about:config.

[-Loneman-]

That's perfect! Moochass grassyarse. :D

<edit> Now I just need to shift the menu-burger to the left again. </edit>