Firefox Compact View to Optimize Screen Space

Jake G April 02, 2022 #Firefox #Configuration #Appearance

Newer Firefox Versions keep taking more and more of my screen space for the title, bookmarks, and bookmarks bar.

Even the bookmarks themselves have more padding around them, so less of them fit into a given amount of space.

For me I need Firefox to offer utility over style.

Here are the steps to reclaim and make better use of your screen space.

Open firefox browser and enter about:config into the address bar and hit enter, click show all.

change these values:

next copy this userChrome.css file to your firefox profile folders, eg:

/home/jake/.mozilla/firefox/2i2v2j27.default-release/chrome/userChrome.css

/*

open firefox browser and enter about:config into the address bar and hit enter

change these values:
browser.uidensity   1
browser.proton.contextmenus.enabled   false
toolkit.legacyUserProfileCustomizations.stylesheets   true

next copy this userChrome.css file to your firefox profile folders, eg:

/home/jake/.mozilla/firefox/2i2v3j21.default-release/chrome/userChrome.css

*/

/*** Tighten up drop-down/context/popup menu spacing (8 Sep 2021) ***/

menupopup:not(.in-menulist) > menuitem,
menupopup:not(.in-menulist) > menu {
  padding-block: 2px !important; /* reduce to 3px, 2px, 1px or 0px as needed */
  min-height: unset !important; /* v92.0 - for padding below 4px */
}
:root {
  --arrowpanel-menuitem-padding: 4px 8px !important;
}

/*** Proton Tabs Tweaks ***/

/* Adjust tab corner shape, optionally remove space below tabs */

#tabbrowser-tabs {
    --user-tab-rounding: 0px;
}

.tab-background {
    border-radius: var(--user-tab-rounding) var(--user-tab-rounding) 0px 0px !important;
    margin-block: 1px 0 !important;
}
#scrollbutton-up, #scrollbutton-down { /* 6/10/2021 */
    border-top-width: 1px !important;
    border-bottom-width: 0 !important;
}
/* Container color bar visibility */
.tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
    margin: 0px max(calc(var(--user-tab-rounding) - 3px), 0px) !important;
}

/* Override Normal Density height to Compact Density height only for tabs */

#TabsToolbar, #tabbrowser-tabs {
    --tab-min-height: 29px !important;
}
    /* Tweak for covering a line at the bottom of the active tab on some themes 8/11/2021 */
#main-window[sizemode="normal"] #toolbar-menubar[autohide="true"] + #TabsToolbar,
#main-window[sizemode="normal"] #toolbar-menubar[autohide="true"] + #TabsToolbar #tabbrowser-tabs {
    --tab-min-height: 30px !important;
}
#scrollbutton-up,
#scrollbutton-down {
    border-top-width: 0 !important;
    border-bottom-width: 0 !important;
}

    /* [Connected Tabs] Set a max height based on min-height plus margin-block: 1px 0 */
#TabsToolbar, #TabsToolbar > hbox, #TabsToolbar-customization-target, #tabbrowser-arrowscrollbox  {
    max-height: calc(var(--tab-min-height) + 1px) !important;
}
    /* [Connected Tabs] Adjust padding around icons on buttons to avoid crushed images */
#TabsToolbar-customization-target toolbarbutton > .toolbarbutton-icon,
#TabsToolbar-customization-target .toolbarbutton-text,
#TabsToolbar-customization-target .toolbarbutton-badge-stack,
#scrollbutton-up,#scrollbutton-down {
    padding-top: 7px !important;
    padding-bottom: 6px !important;
}

/* Tweak Options as of 8/13/2021; Generated Sat Sep 18 2021 23:13:45 GMT-0700 (Pacific Daylight Time) */