how to firefox chrome.css.md

ctrl+shift+i → … → settings →

1. Enable browser chrome and add-on debugging toolboxes
2. Enable remote debugging

Enable toolkit.legacyUserProfileCustomizations.stylesheets in about:config

Navigate to about:support to figure out your profile directory.

Go to it, create directory called chrome.

In that new directory, create userChrome.css and userContent.css

The former is for your browser UI, the latter is for page css (things like about:newtab, about:config, etc).

Add this at the top of userChrome.css:

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

And restart firefox.

You can now press ctrl+shift+alt+i to open browser-level dev tools.
Navigate to the "Style Editor" tab and, in the left sidebar, filter (search) for userChrome.css.
Blammo, when you change this file here, firefox hot reloads it.
So you can keep all of your css in some conveniently placed file, and copy paste its contents into here, so that you don't have to restart firefox every time to see the changes.

userContent.css, on the other hand, doesn't even appear in the list of stylesheets, either on browser level or on page level, so for its changes to be applied, you do need to keep restarting firefox like a freak.