Make Firefox look OK

When I open a freshly installed Firefox browser, it does not look good.

It needs a bit of fine-tuning to look better. When you spend much of your day inside the browser window, the browser needs to become invisible.

These are the steps to make it look OK:

1. Enable “compact” mode

In about:config, set the browser.compactmode.show setting. This will show the otherwise hidden, “Compact” density mode in the “Customize toolbar” menu. Set the density mode to compact.

2. Disable favicons

Disable the browser.chrome.site_icons setting. This removes the site icons from the browser’s tabs.

3. Disable tabs preview

Disable the browser.tabs.hoverPreview.enabled and browser.tabs.hoverPreview.showThumbnails settings. This disables the previews when one hovers over the tabs, and just show the tooltip.

4. Enable userChrome.css

Activate the toolkit.legacyUserProfileCustomizations.stylesheets setting.

Then, create a userChrome.css file in the Firefox’s current profile directory, %PROFILE%/chrome/userChrome.css, and add the styles:

:root {
    &[uidensity=compact] {
        --tab-min-height: 24px !important;
    }

    --tab-block-margin: 3px !important;
}

#tabbrowser-tabs {
    .tab-background:is([selected], [multiselected]) {
        box-shadow:
            0 0 1px inset rgba(0,0,0,0.1),
            0 -1px 1px rgba(0,0,0,0.1),
            0 1px  1px rgba(0,0,0,0.1),
            0 0    2px rgba(0,0,0,0.1),
            0 0    4px rgba(0,0,0,0.1),
            0 0    6px rgba(0,0,0,0.05) !important;
        outline: none !important;
    }

    .tabbrowser-tab:not(:hover) .tab-close-button {
        display: none;
    }

    .tab-close-button {
        width: 18px !important;
        height: 18px !important;
        padding: 3px !important;
    }
}

#alltabs-button {
    display: none !important;
}

#navigator-toolbox .titlebar-spacer {
    width: 10px !important;
}

5. Install a good light theme

I use the “Safari - MacOS Monterey Light” theme, which is very minimal and fits nicely into macOS.