Notes on Customizing Firefox's Chrome

2 minutes read Mar 23, 2022

userChrome.css

The userChrome.css may be used to override the default browser chrome styles. Styles are reloaded on browser restart.

This is a legacy feature which must first be enabled.

# about:config
toolkit.legacyUserProfileCustomizations.stylesheets = True

And then the file $FIREFOX_PROFILE/chrome/userChrome.css will be loaded on start.

Vertical Tabs

Install Tree Style Tabs or another addon of choice.

And then modify the browser chrome to accommodate the new tab bar location.

/* userChrome.css */

/* hide native horizontal tab bar */
#tabbrowser-tabs
{
  display: none;
}

/* move sidebar header to bottom */
#sidebar-box
{
  -moz-box-direction: reverse;
}

#sidebar-switcher-arrow
{
  transform: rotate(180deg);
}

#sidebar-close
{
  display: none;
}

/* remove min width */
#sidebar
{
  min-width: 0 !important;
}

See GitHub: UserChrome-Tweaks for a list of premade customizations.

Compact Top Bar

# about:config
browser.uidensity = 1

Ref: Support Question.

Auto-Hide Nav Bar

/* userChrome.css */
#navigator-toolbox:not(:hover) #nav-bar
{
  /*
   note: Hiding the toolbox immediately causes weird layout behavior so an animation
   is used to introduce a delay before the style is applied. However this hack does
   result in the toolbox being visible at launch for a brief period.
  */
  animation: .01s linear forwards hide_hack;
}

@keyframes hide_hack
{
  from
  {
    visibility: auto;
  }

  to
  {
    visibility: collapse;
  }
}

Misc

Browser Toolbox

The browser chrome may be inspected using the Browser Toolbox which is like the web inspector and may be opened via Cmd + Opt + Shift + I.