My Firefox userChrome.css

This is my Firefox userChrome.css. This userChrome was originally based on tweaks from xiaoxiaoflood/firefox-scripts, but I was not satisfied with the way many of these looked and so I spent some time to get them looking like they belong.

In addition to looking nice, this also attempts to make the browser more minimal and more functional by removing clutter and maximizing vertical space.

Features

• Auto one-line top bar (combines tabs and navbar). Automatically disabled when the window gets too small via a media query
• Chromium style findbar in top right corner
• Consistent placement of new tab button in the top right
• Remove overflow button for tabs and navbar
• Enhanced bookmarks bar readability (adj. margins and padding)
• Widely compatible with Firefox themes
• Compact mode targeted for maximum reading area

Preview

Wide UI

Slim UI

Setup

To begin, it is highly suggested that you set density to compact in the "Customize Toolbar" menu in order to sace additional vertical space. Note that this userChrome is designed and tested only with compact mode, other modes are not supported.

It is suggested to install this via home-manager. If you are not already using home-manager, then refer to Legacy installation.

Home-manager (Nix) installation (suggested)

First, refer to this example flake.nix that you might use for a home-manager setup:

{
  inputs = {
    nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
    home-manager = {
      url = "github:nix-community/home-manager";
      inputs.nixpkgs.follows = "nixpkgs";
    };
    firefox-userchrome.url = "git://git.tjkeller.xyz/firefox-chrome";
  };

  outputs = { nixpkgs, home-manager, firefox-userchrome, ... }: {
    homeConfigurations.timmy = home-manager.lib.homeManagerConfiguration {
      pkgs = nixpkgs.legacyPackages.x86_64-linux;
      extraSpecialArgs = { inherit firefox-userchrome; };
      modules = [ ./home.nix ];
    };
  };
}

Then configure Firefox in home-manager (./home.nix in this case) as follows:

{ firefox-userchrome, ... }: {
  programs.firefox = {
    enable = true;
    profiles.Personal = {
      id = 0;
      isDefault = true;
      userChrome = firefox-userchrome.userChrome;
      settings = {
        "browser.compactmode.show" = true;
        "browser.uidensity" = 1;  # Compact
      };
    };
  };
  # ...
}

Legacy installation

To setup compact mode, you will need to set the following in about:config: * browser.compactmode.show = true * browser.uidensity = 1 (or set this in the aformentioned "Customize Toolbar" menu)

You can then enable the userChrome settings and install userChrome.css in your profile as described here (userchrome.org) and elsewhere. Note that the easiest way to manage this is to git clone the repository directly into the chrome directory located within your profile (e.g. ~/.config/mozilla/firefox/Personal/chrome).