# My Firefox userChrome.css
This is my Firefox `userChrome.css`.
This `userChrome` was originally based on tweaks from
[xiaoxiaoflood/firefox-scripts](https://github.com/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 preview](./pics/wide.png)
*Wide UI*

![Slim UI preview](./pics/slim.png)
*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](https://home-manager.dev/).
If you are not already using `home-manager`, then refer to
[Legacy installation](#legacy-installation).

### Home-manager (Nix) installation (suggested)
First, refer to this example `flake.nix` that you might use for a
`home-manager` setup:

```nix
{
  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-userchrome";
  };

  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:

```nix
{ 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)](https://www.userchrome.org/how-create-userchrome-css.html)
and elsewhere.