Step-by-step instructions to auto-hide the sidebar (displaying Bitwarden add-on) in Firefox browser

Hello everyone,

This post is regarding displaying Bitwarden in Firefox browser’s sidebar and how to auto-hide this sidebar.

Those who are not aware of this feature, press Ctrl+B and then select Bitwarden from the drop-down at the top.

Actually, I like this feature because it is very handy and makes it extremely easy to work in the Bitwarden add-on. However, there is one small problem, the sidebar could become a major distraction especially to those who like a minimalistic interface. So there are two ways to deal with this:

  1. Press Ctrl+B to hide or display the sidebar every time. Not very convenient, right?

  2. Do a small hack to auto-hide the sidebar so that it display only if we hover the mouse to the extreme left corner of the browser window. Sounds easy, right?

So let’s get this thing up and running in less than 2-3 minutes. Here are the step-by-step instructions.

  1. In the browser’s address bar, type about:config and press enter. Click “Accept the Risk and Continue” button.

  2. Search for “toolkit.legacyUserProfileCustomizations.stylesheets” (without the quotes) and change it to true.

  3. In the browser’s address bar, type about:profiles and press enter. You will be presented with the list of profiles. Look for the Default Profile heading in blue background with value yes. This is your default profile. Exactly below this row, you will find Root Directory heading in blue background. Click the Open Folder button in this row.

  4. Once the new folder has been opened, look for “chrome” (all small case) sub-folder. If it doesn’t exist, then create one.

  5. Inside the “chrome” folder, create a new file “userChrome.css” and copy & paste the following contents:

    /* Show sidebar only when the cursor is over it /
    /
    The border controlling sidebar width will be removed so you’ll need to modify these values to change width */

    #sidebar-box{
    –uc-sidebar-width: 0px;
    –uc-sidebar-hover-width: 400px;
    position: relative;
    min-width: var(–uc-sidebar-width) !important;
    width: var(–uc-sidebar-width) !important;
    max-width: var(–uc-sidebar-width) !important;
    z-index:1;
    }

    #main-window[sizemode=“fullscreen”] #sidebar-box{ --uc-sidebar-width: 1px; }

    #sidebar-splitter{ display: none }

    #sidebar-header{ overflow: hidden; color: var(–chrome-color, inherit) !important}

    #sidebar{
    transition: min-width 60ms linear !important;
    min-width: var(–uc-sidebar-width) !important;
    will-change: min-width;
    }

    #sidebar-box:hover > #sidebar{ min-width: var(–uc-sidebar-hover-width) !important; }

    .sidebar-panel{
    background-color: transparent !important;
    color: var(–newtab-text-primary-color) !important;
    }

    .sidebar-panel #search-box{
    -moz-appearance: none !important;
    background-color: rgba(249,249,250,0.1) !important;
    color: inherit !important;
    }

    /* Add sidebar divider and give it background */

    #sidebar,
    #sidebar-header{
    background-color: var(–toolbar-bgcolor) !important;
    border-right: 1px solid #000;
    }

You may wish to customize the width of the sidebar by changing the value of –uc-sidebar-hover-width: 400px; (6th line from the top) to whatever you wish. I am using 400px which seems to be a comfortable value.

  1. That’s it. Now restart the Firefox browser and voilà.

The above solution is very much working for me so thought to share it with the Bitwarden community.

Please let me know your thoughts.

Thanks,

Alok

3 Likes

Hello,

For some reasons, the above CSS is not working correctly. Kindly try the following:

/*

/* To right-align the sidebar, replace all occurrences of “left” with “right”, and “margin-right” with “margin-left” */

:root {
–sidebar-hover-width: 10px;
–sidebar-visible-width: 400px;
}

#sidebar-box {
position: relative !important;
overflow-x: hidden !important;
margin-right: calc(var(–sidebar-hover-width) * -1) !important;
left: var(–sidebar-hover-width) !important;
min-width: var(–sidebar-hover-width) !important;
max-width: var(–sidebar-hover-width) !important;
border-right: 1px solid var(–sidebar-border-color);
z-index: 1;
}

#sidebar-box:hover {
margin-right: calc(var(–sidebar-visible-width) * -1) !important;
left: var(–sidebar-visible-width) !important;
min-width: var(–sidebar-visible-width) !important;
max-width: var(–sidebar-visible-width) !important;
}

#sidebar {
opacity: 0 !important;
}

#sidebar-box:hover #sidebar {
opacity: 1 !important;
}

/* #sidebar-header is hidden by default, change “none” to “inherit” to restore it. */
#sidebar-header {
display: none !important;
}

/* #sidebar-splitter styles the divider between the sidebar and the rest of the browser. */
#sidebar-splitter {
display: none;
}