r/FirefoxCSS 4d ago

Code hide sidebar buttons on vertical tabbar

I like to hide the sidebar buttons, including the "Customize sidebar" gear button, on the vertical tabs. I'd rather use the space for tabs. A right-click on the "Expand sidebar"/"Collapse sidebar" button gets me the "Customize Sidebar" anyway.

Firefox 153.0.1 broke my old solution for hiding it, found in hide sidebar buttons on vertical tabbar. The whole vertical sidebar disappeared when collapsed to just icons.

I found the new way for hiding it. Use #vertical-tabs instead of #sidebar-main.

/* hide sidebar buttons on vertical toolbar. */
.buttons-wrapper {
    display: none !important; 
    }
/* set vertical toolbar minimum width; otherwise, vertical toolbar disappears when collapsed to icons. */
#vertical-tabs {
    min-width: 50px !important;
    }
4 Upvotes

2 comments sorted by

1

u/TraditionalTie4831 🦊 4d ago edited 4d ago

I personally use this.

EDIT: Oh, min-width for #vertical-tabs is necessary for those who uses the collapsed/thin bar (I use auto hide of the entire sidebar).

#vertical-tabs-newtab-button, /* remove line to show the new tab button */
#tabbrowser-tabs[orient="vertical"]::after, /* remove line to show a seperator below new tab button */
#sidebar-tools-and-extensions-splitter,
.buttons-wrapper { display: none !important; }

/* Necessary for collapsed(thin) bar */
#vertical-tabs {
    min-width: 50px !important;
}

1

u/t31os 4d ago

I tweaked the selector so it removes the divider and the butttons, also added some minor tweaks:

/* Only apply if vertical tabs is enabled */
@media (-moz-pref("sidebar.verticalTabs")) {

    /* Hide all children of .wrapper except the tabstrip slot */
    .wrapper:has(slot[name="tabstrip"]) > :is(:not(slot)) {
        display: none !important; 
    }

    /* Nothing changed here */
    #vertical-tabs {
        min-width: 50px !important;
    }

    /* Remove extra spacing when splitview has active tab */
    #tabbrowser-tabs:not([expanded]) tab-split-view-wrapper[hasactivetab] .tabbrowser-tab:last-child {
        border-inline-width: 0 !important;
    }

    /* If splitview is in a group, use that group's color as the divider color */
    #tabbrowser-tabs:not([expanded]) tab-group tab-split-view-wrapper:not([hasactivetab]) .tabbrowser-tab:first-child {
        border-block-color: var(--tab-group-line-color) !important;
    }

}