Firefox userChrome to autohide Sideberry panel and hide titlebar tabs, and autohide Page Actions.

userChrome.css

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/*
 * This style will hide the tab bar. For MacOS Big Sur
 *
 * Contributor(s): Isaac-Newt, Ivan0xFF, millerdev, AMomchilov
 */

 #titlebar {
  visibility: collapse;
}

/* Position window controls */
#TabsToolbar .titlebar-buttonbox-container {
  display: block;
  position: absolute;
  visibility: visible;
}

/* Reposition the close/maximize/minimize buttons for the "normal" toolbar density  */
/* When the UI density is set to "normal", the `uidensity` attribute is undefined.  */
/* `window.document.documentElement.getAttribute("uidensity")` will be null.        */
:root:not([uidensity]) #TabsToolbar .titlebar-buttonbox-container {
  margin-left: 12px;
  margin-top: 12px;
}

/* Reposition the close/maximize/minimize buttons for the "compact" toolbar density */
:root[uidensity="compact"] #TabsToolbar .titlebar-buttonbox-container {
  margin-left: 10px;
  margin-top: 9px;
}

#TabsToolbar .titlebar-buttonbox.titlebar-color {
  margin-left: 0px !important;
}

/*
 * Make room for window controls and a bit of extra space for window drag/move.
 * Only apply this style when not in fullscreen mode.
 */
#main-window:not([inFullscreen]) #nav-bar {
  padding: 0px 0px 0px 70px !important;
}

/*  Sideberry Dynamic sidebar   */

/* Add the following to Sideberry settings/Styles Editor/Sidebar:
.Tab[data-pin="false"] .ctx {
  right: unset !important;
}
*/

#sidebar-box {
  background-color: #2B2A33;
  overflow: hidden;
  height: calc(100% + 6px);
  position: fixed;
  max-width: 26em !important;
  width: 100% !important;
  display: block;
  transition: 90ms;
}

#sidebar-box:hover {
  padding-bottom: 50px;
  position: absolute;
  z-index: 1;
}

#sidebar-header {
  background-color: #2B2A33;
}

#sidebar {
  width: calc(45px * 7) !important;
  max-width: 50vw !important;
  height: 100%;
}

#sidebar:hover {
  max-width: 100% !important;
}

#appcontent {
  margin-left: 45px;
}

/* Page Actions Hide and Show on Hover */

/* Hide Buttons and Reveal on Hover */

#page-action-buttons:not(:hover) .urlbar-page-action,
#page-action-buttons:not(:hover) #star-button
{
  width: 0px !important;
  min-width: 0px !important;
  padding-left: 0px !important;
  padding-right: 10px !important;
  margin-right: -5px !important;
  transition: all 250ms ease-in-out;
}

#page-action-buttons:not(:hover) #userContext-indicator {
  margin-right : 45px !important;
  transition: all 250ms ease-in-out;
}

#page-action-buttons:hover .urlbar-page-action,
#page-action-buttons:hover #star-button  {
  visibility: visible;
  min-width: unset !important;
}

#page-action-buttons:hover #userContext-indicator {
  margin-right : 0px !important;
}

/* Create page actions hover "button" */
#page-action-buttons::after {
  content: "•••";
  position: absolute;
  top: 0.7em;
  font-size: 0.7em;
  opacity: 0.5;
  right: 8px;
  transition: all 50ms ease-in-out;
}

/* Hide the button on hover */
#page-action-buttons:hover::after {
  display: none !important;
  width: 0px !important;
  margin-left: 0px !important;
  transition: all 50ms ease-in-out;
}

/* Hide URLBar Buttons and Reveal on Hover Finished*/
#urlbar,#searchbar {
  font-size: 13px !important;
	margin-top: 1px !important;
}

Hey dude, Very cool!!!

Any chance of changing the side the sidebar shows? WIth this enabled I can no longer move my sidebar to the right, Also I like to make use of the history and arrow menu, but when i re-enabled it it made the visuals all wonky.

Great! Thanks!

Hi,thank you for this excellent script. How to modify the width of the hover bar and the max width of the sidebar? Best regards!

Thanks for the great script; however when playing Youtube videos in fullscreen mode the place where sidebery is located stays there shaded and full screen video is not shown..

The picture below shows the dark vertical bar on the left of the screen where Sidebery is located:

@minshifu look for the "max-width" of 30px (closed) and 50vw (hovered).

This script works well with other similar extensions like Tab Stash. (Thanks!)

Was wondering the same thing as @ameeno , if the script may be able to be used on the right hand side. Tried a few things but my CSS is pretty bad and I cannot make it work.

Cheers.

Was wondering the same thing as @ameeno , if the script may be able to be used on the right hand side. Tried a few things but my CSS is pretty bad and I cannot make it work.

Cheers.

I'm pretty busy with a work project at the moment and this isn't a high priority for me, but I'll try to take a look when I have some time.

The most likely cause in my CSS is probably this line https://gist.github.com/BrianGilbert/1ad7e3931406f485a86a35aefb0aa1b1#file-userchrome-css-L61 you could try changing it to relative.

Was wondering the same thing as @ameeno , if the script may be able to be used on the right hand side. Tried a few things but my CSS is pretty bad and I cannot make it work.
Cheers.

I'm pretty busy with a work project at the moment and this isn't a high priority for me, but I'll try to take a look when I have some time.

The most likely cause in my CSS is probably this line https://gist.github.com/BrianGilbert/1ad7e3931406f485a86a35aefb0aa1b1#file-userchrome-css-L61 you could try changing it to relative.

Thank you for getting back to me so quickly, @BrianGilbert . It is appreciated.

I had in fact already tried that, hoping that it would work and yes, it does allow for the sidebar to move to the right. Also, I had reduce the size of the window by 50%. As per included picture -- albeit this is how I have it for the left hand side.

However, once moved to the right hand side, the sidebar does not respect the 50% difference, leaving a huge black space below and the auto hide does not work.

This is the snippet that I am using and it works great for the left hand side but I cannot for the life of me make it work on the right hand side. it simply does not behave the same way. If you could take a look, albeit as you said, you are busy, so hopefully at some point in the future you might be able to spare a couple of minutes. If not, then no worries, I understand.

---

#sidebar-box {
background-color: #2B2A33;
overflow: hidden;
height: calc(50% + 6px);
position: absolute;
right: 0px;
max-width: 26em !important;
width: 50% !important;
display: block;
transition: 90ms;

}

#sidebar-box:hover {
padding-bottom: 0px;
position: absolute;
z-index: 1;
}

#sidebar-header {
background-color: #2B2A33;
}

#sidebar {
width: calc(45px * 7) !important;
max-width: 50vw !important;
height: 100%;
border: 1px solid black;
}

#sidebar:hover {
max-width: 100% !important;
}

#appcontent {
margin-left: 1px;
}

---

Update: I was playing around with the code above since posting. Changing the line to relative kept breaking your CSS. However, after looking at some documentation, and for anyone else who might be curious in wanting to change sides, what is needed is to keep the line as originally intended, however add:

right: 0px;

Right below it. I have done so above on this edit, in case anyone wants to use if for themselves. You will have a 1px on the right hand side showing the active tabs. That can be changed. I prefer it that way as it lets me know where the active tabs is.

Thank for the help anyway. Hopefully this will help other people. Cheers

This is how it looks:

How to remove this blank space?