Customize style with userChrome.css

Hint

Each profile requires a separate userChrome.css copy.

Prerequisites

Profile customization style sheet support must be enabled:

  1. Type about:config into address bar and confirm (accept risk, when asked)

  2. Type toolkit.legacyUserProfileCustomizations.stylesheet into search field

  3. Set the resulting entry value to true and restart the browser

Steps

  1. Open Firefox.

  2. Type about:profiles into search bar and confirm.

  3. For each profile open the Root directory.

  4. Within there, create a new directory called chrome.

  5. Within ./chrome, create a new file called UserChrome.css and open it.

  6. Add or change the content of UserChrome.css.

  7. Save the file and restart Firefox to apply changes.

Get Firefox style elements

Important

Use a clean profile without extensions as those (e.g. uBlock) may break functions of the browser toolbox.

  1. Enable Browser Toolbox.

  2. Open the Browser Toolbox.

  3. In case you need to inspect elements from pop-up elements (e.g. app menu), open the setting (three dots button in the top right) and check Disable Popup Auto-Hide.

  4. Get your browser into the state in which you have access your desired element.

  5. Select the element picker (top left button) and select the browser element.

  6. On the right side, select the Rules tab to the see all CSS rules applicable to your element.

  7. Edit the rules freely to your needs.

  8. Save the changed or new rules to your userChrome.css file. Make sure to mark them all as !important to prevent the rules from being overwritten by the browser.

  9. Restart the browser using the respective profile to check the result.

UserChrome.css Snippets

Save Bookmarks menu

Windows (1920 x 1080):

/* Removes pointless bookmark thumbnail image*/
#editBookmarkPanelImage, #editBookmarkPanelFaviconContainer {
  display: none !important;
}

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/*Define size of folder tree window*/
#editBMPanel_folderTree {
    min-height: 600px !important;
    min-width: 40em !important;
}

/*Define edit bookmark panel size*/
#editBookmarkPanel {
  min-width: 44em !important;
  font-size: 13px;
}

#editBMPanel_tagsSelector[collapsed="true"] {
    display:none !important;
}

/* Remove tag definition*/
#editBMPanel_tagsRow {
    display:none !important;
}

/*Auto-expand folder tree view*/
#editBMPanel_folderTreeRow {
    visibility:visible !important;
    -moz-box-align:stretch !important;
}

/* reduces vertical size of bookmark menu items */
menupopup:not(.in-menulist) > menuitem,
menupopup:not(.in-menulist) > menu {
  padding-block: 2px !important;
  min-height: unset !important; /* v92.0 - for padding below 4px */
}

iMac (5120 x 2880):

coming later

MacBook Air (1440 × 900):

/* Hide Giant Thumbnail on Edit Bookmark Panel */
#editBookmarkPanelImage {
  display: none !important;
}

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/*Define size of folder tree window*/
#editBMPanel_folderTree {
    min-height: 400px !important;
    min-width: 40em !important;
}

/*Define edit bookmark panel size*/
#editBookmarkPanel {
  min-width: 44em !important;
  font-size: 13px;
}

#editBMPanel_tagsSelector[collapsed="true"] {
    display:none !important;
}

/* Remove tag definition*/
#editBMPanel_tagsRow {
    display:none !important;
}

/*Auto-expand folder tree view*/
#editBMPanel_folderTreeRow {
    visibility:visible !important;
    -moz-box-align:stretch !important;
}

/* reduces vertical size of bookmark menu items */
menupopup:not(.in-menulist) > menuitem,
menupopup:not(.in-menulist) > menu {
  padding-block: 2px !important;
  min-height: unset !important; /* v92.0 - for padding below 4px */
}

Application Menu

/*Decrease app menu size*/
:root {
    --arrowpanel-menuitem-padding-block: 2px !important;
    --arrowpanel-menutiem-padding-inline: 2px !important;
}

Toolbar bookmark popup menu

/* Increase bookmark popup window max-width (default: 41em)*/
menupopup > menuitem {
    max-width: 100em !important;
}

All open tabs popup menu

/*Set "all open tabs" popup menu width to fit content*/
:root {
    --menu-panel-width: max-content !important;
}