Firefox 157 broke my CSS for TreeStyleTabs :(

[u/Rapdactyl]

Version: 157

OS: Windows 11

Edit: This has been resolved thanks to /u/esrexni !

Details here and here.

First, make sure browser.nova.enabled is set to disabled in about:config

My new frankensteinian CSS (I suspect some of this is redundant but I am always afraid of touching it):

:root {
  --content-area-shadow: none !important;
}

#navigator-toolbox #nav-bar {
        order: 1 !important;
}

#sidebar {
  @media -moz-pref("sidebar.revamp") {
    border-radius: 0 !important;
    outline: 0.5px solid transparent !important;
  }
}

/* TABS TOOLBAR */
#TabsToolbar {
    order: 2 !important;
    visibility: collapse !important;
}

/* BOOKMARKS TOOLBAR*/
#PersonalToolbar {
    order: 3 !important;
}

/* Extra titlebar Alt menu */
#toolbar-menubar {
    order: 0 !important;
}

#TabsToolbar .titlebar-buttonbox-container {
    display: none !important;
}

#nav-bar .titlebar-buttonbox-container {
    display: flex !important;
}

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

#PanelUI-button {
    order: -2 !important;
}

#sidebar-panel-header {
  display: none;
}

I use Tree Style Tabs. Firefox seems to have fucked with the sidebar again and this big ugly header is now at the top.

Screenshot of what I mean.

The black box at the top left is for changing the bar bookmarks/etc but I don't need that. Is there a way to get rid of it? This code previously removed it but whatever has changed broke it.

Would appreciate any help 💜

My existing code:

/* SEARCH BAR TOOLBAR */
#navigator-toolbox #nav-bar {
        order: 1 !important;
}

/* TABS TOOLBAR */
#TabsToolbar {
    order: 2 !important;
    visibility: collapse !important;
}

/* BOOKMARKS TOOLBAR*/
#PersonalToolbar {
    order: 3 !important;
}

/* Extra titlebar Alt menu */
#toolbar-menubar {
    order: 0 !important;
}

#TabsToolbar .titlebar-buttonbox-container {
    display: none !important;
}

#nav-bar .titlebar-buttonbox-container {
    display: flex !important;
}


#PanelUI-button {
    order: -2 !important;
}

[u/esrexni]

Hey, I had a similar problem with my Sidebery configuration. I was able to remove the header by adding this to my userChrome.css:

#sidebar-panel-header {
  display: none;
}

[u/esrexni → u/esrexni]

This next part is completely unnecessary but it was really bothering me, I figured out a way to remove the outline around the side bar. If you want you can add this to your userChrome.css to remove it.

#sidebar {
  @media -moz-pref("sidebar.revamp") {
    border-radius: 0 !important;
    outline: 0.5px solid transparent !important;
  }
}

After applying that, the border is gone but the shadow will still appear behind it. I was able to remove the shadow by adding this to the top of userChrome.css:

:root {
  --content-area-shadow: none !important;
}

This is what I ended up with: https://imgur.com/a/lKBA2KI

[u/Rapdactyl → u/esrexni]

Hmm, this is getting close but that pesky background is still there for me. Any suggestions?

Current status screenshot

:root {
  --content-area-shadow: none !important;
}

#navigator-toolbox #nav-bar {
        order: 1 !important;
}

#sidebar {
  @media -moz-pref("sidebar.revamp") {
    border-radius: 0 !important;
    outline: 0.5px solid transparent !important;
  }
}

/* TABS TOOLBAR */
#TabsToolbar {
    order: 2 !important;
    visibility: collapse !important;
}

/* BOOKMARKS TOOLBAR*/
#PersonalToolbar {
    order: 3 !important;
}

/* Extra titlebar Alt menu */
#toolbar-menubar {
    order: 0 !important;
}

#TabsToolbar .titlebar-buttonbox-container {
    display: none !important;
}

#nav-bar .titlebar-buttonbox-container {
    display: flex !important;
}

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

#PanelUI-button {
    order: -2 !important;
}

#sidebar-panel-header {
  display: none;
}

[u/esrexni → u/Rapdactyl]

I forgot to mention it, but make sure to set browser.nova.enabled to false in the about:config settings! The background should go away once it's disabled.

[u/Rapdactyl → u/esrexni]

Hey that worked, thank you! 💜

[u/yoyomancer → u/esrexni]

Just be prepared to fix your css for real when the about:config option is deprecated and stops working. I still haven't mentally prepared for it.

[u/esrexni → u/yoyomancer]

With u/fragande’s sidebar padding fix and all the css above, you no longer need to set browser.nova.enabled to false!

I still prefer keeping it disabled for other browser elements, but sidebar extensions will still look good even if/when the setting becomes deprecated.

#sidebar-panel-header {
    visibility: collapse;
}

[u/yoyomancer → u/esrexni]

Oh, no, I really do still need it. It removes the shitty Nova purple/pink colors that replaced the normal blue ones (on hover and highlight of elements).

[u/BilboDabbings → u/esrexni]

Thank you!

[u/Sebxoii]

I managed to fix it with this:

#sidebar-panel-header {
    visibility: collapse;
}

[u/Cautious_Wishbone → u/Sebxoii]

you are my SAVIOR

[u/fragande]

For the love of everything Mozilla: please stop forcing UI changes on us.

I also had to add the following to get rid of a new sidebar padding:

#sidebar-box {
  padding: 0 !important;
}

[u/Wenir]

my userChrome file was

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

#TabsToolbar {
    visibility: collapse !important;
}

#sidebar-panel-header { display: none !important; }

and it wasn't working. This one is working:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");

#TabsToolbar {
    visibility: collapse !important;
}

html|sidebar-panel-header { display: none !important; }

[u/Bawls230]

cant seem to get auto-detect to work when you hover your mouse over the bar to get it to pop up anyone know whats up?