Graphical aspect may vary depending on your choices in following the instructions below, but the end result should look something like this:
Go to about:config and set all of the following to true:
toolkit.legacyUserProfileCustomizations.stylesheets
layers.acceleration.force-enabled
gfx.webrender.all
gfx.webrender.enabled
layout.css.backdrop-filter.enabled
svg.context-properties.content.enabled
# LINUX ONLY - WORKAROUND FOR BAR HIDING ON DRAG EVENT
widget.gtk.ignore-bogus-leave-notify = 1
- Find your Firefox profile folder (
about:support--> "Profile Directory") - Create a folder named
chromeinside it. - Create a file named
userChrome.cssinside thechromefolder you just created. - Paste in
userChrome.csswhatever you like from above - Restart Firefox for changes to take effect. If nothing changes, try going to
about:profilesand click the "Restart Normally" button in the upper right portion of the screen. Thanks @kr1s7ian for pointing this out.
Paste this in your userChrome.css:
#TabsToolbar
{
visibility: collapse;
}
Paste this in your userChrome.css:
/**
* Decrease size of the sidebar header
*/
#sidebar-header {
font-size: 1.2em !important;
padding: 2px 6px 2px 3px !important;
}
#sidebar-header #sidebar-close {
padding: 3px !important;
}
#sidebar-header #sidebar-close .toolbarbutton-icon {
width: 14px !important;
height: 14px !important;
opacity: 0.6 !important;
}
Paste this in your userChrome.css:
#sidebar-header {
display: none;
}
Paste this in your userChrome.css:
#sidebar-header {
/* display: none; */
visibility: collapse !important;
}
/* Hide splitter */
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] + #sidebar-splitter {
display: none !important;
}
/* Shrink sidebar until hovered */
:root {
--thin-tab-width: 32px;
--wide-tab-width: 300px;
}
#sidebar-box:not([sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]) {
min-width: var(--wide-tab-width) !important;
max-width: none !important;
}
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] {
overflow: hidden !important;
position: relative !important;
transition: all 300ms !important;
/*transition: all 0ms 0s !important;*/
min-width: var(--thin-tab-width) !important;
max-width: var(--thin-tab-width) !important;
z-index: 2;
}
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover,
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar {
/*transition-delay: 0s !important;*/
transition: all 300ms !important;
min-width: var(--wide-tab-width) !important;
max-width: var(--wide-tab-width) !important;
z-index: 1;
}
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover {
margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;
}
Paste this in your userChrome.css:
#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; }
And then go to Sidebery settings > General > Preface value, enable it and set it to XXX.
Now You also need to remove indent when the bar is collapsed, or you won't be able to see all tabs
Go to SideBery settings --> Styles editor and add:
#root:not(:hover){
--tabs-indent: 0;
}
Credits: AndryGabry on my Patreon and @XargonWan here on github.
If you need the "window close" button, you can add it to your address bar.
- Comment out this line:
/* Hidden state: Hide native tabs strip */
/*#main-window[titlepreface*="XXX"] #titlebar { height: 0 !important; }*/
- Add the following:
/*Reference https://www.userchrome.org/*/
/* Hide title bar but keep window controls (minimize, maximize, close) */
/*Hide tabs and other things inside the titlebar, except window buttons*/
#main-window[titlepreface*="XXX"] .tabbrowser-tab{ display: none !important; }
#main-window[titlepreface*="XXX"] .scrollbox-clip{ width: 0 !important; }
#main-window[titlepreface*="XXX"] #alltabs-button{ display: none !important; }
#main-window[titlepreface*="XXX"] .toolbar-items{ display: none !important; }
/*Make sure that the titlebar and navbar are both on the same line*/
#main-window[titlepreface*="XXX"] #navigator-toolbox{ display: flex !important; box-sizing: border-box; justify-content:space-between; flex-direction: row-reverse; flex-wrap: wrap; }
#main-window[titlepreface*="XXX"] .titlebar-spacer{ display: none !important; }
#main-window[titlepreface*="XXX"] #nav-bar{border-radius: 5px 0 0 0; display: flex; box-sizing: border-box; padding-top: 2px; align-items: center; flex: 1; flex-basis: 50%; width: 100% !important; }
/* on GNOME you can use max-width: 48px below, if you only have the "Close" button on windows (default) */
#main-window[titlepreface*="XXX"] #titlebar{border-radius: 0 5px 0 0; border-left: none !important; margin-top: 1px; flex: 1; flex-basis: 50%; width:10% !important; display: flex; max-width: 100px; align-items: center;background-color: var(--toolbar-bgcolor) !important; border-left: 1px solid var(--toolbar-color);}
#main-window[titlepreface*="XXX"] #titlebar:-moz-window-inactive{opacity: 1 !important;}
#main-window[titlepreface*="XXX"] #TabsToolbar > *:not(.titlebar-buttonbox-container) {display: none !important;}
#PersonalToolbar {width: 100% !important; }
#tab-notification-deck {width: 100% !important; flex-basis: 100%; width: 100% !important;}
My post was referred to the comment of @IvanLusso about showing the horizontal tab bar.