aAPT
dDebian
fFFmpeg
jJava
mMercurial: Usage
oOCaml
pPostgreSQL

Home Applications

Firefox

Quirks

FF 141 picking wrong theme (light instead of dark) bug

FF 141 starts with light theme, although its theme is set to system (e.g. Arc-dark).

Solution:

Check d-bus for the current theme:

$ gsettings get org.gnome.desktop.interface color-scheme

If it returns 'default', change it to 'prefer-dark':

$ gsettings set org.gnome.desktop.interface color-scheme "'prefer-dark'"

UI Customization

Fix UI scaling (FF 131+)

about:config

ui.textScaleFactor → 0

Enable user content/chrome (FF 69+)

about:config

toolkit.legacyUserProfileCustomizations.stylesheets → true

Dark home and new tab pages

chrome/userContent.css 
@-moz-document url("about:home"), url("about:newtab") {
    .activity-stream {
        background-color: #2a2a2e !important;
    }
    .title {
        color: gray !important;
    }
    .top-site-icon {
        background-color: #2a2a2e !important;
        opacity: 0.5 !important;
    }
    .top-site-outer .tile::before {
        content: none !important;
    }
    .top-site-outer .screenshot.active {
        opacity: 0.5 !important;
    }
}

Fix url bar size on focus (FF 76+)

chrome/userChrome.css 
@-moz-document url(chrome://browser/content/browser.xhtml) {
    /* DISABLE EXPANDING START */
    #urlbar[breakout][breakout-extend] {
        top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
        left: 0 !important;
        width: 100% !important;
    }
    
    #urlbar[breakout][breakout-extend] > #urlbar-input-container {
        height: var(--urlbar-height) !important;
        padding-block: 0 !important;
        padding-inline: 0 !important;
    }
    
    #urlbar[breakout][breakout-extend] > #urlbar-background {
        animation-name: none !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .05) !important;
    }
    /* DISABLE EXPANDING END */
    
    /* REMOVE URL RESULT PADDING START */
    .urlbarView {
        margin-inline: 0 !important;
        width: 100% !important;
    }

    .urlbarView-row {
        padding-block: 0 !important;
    }
    /* REMOVE URL RESULT PADDING END */
    
    /* MOVE URL RESULT TYPE ICON TO LEFT START */
    .urlbarView-type-icon {
        min-width: 16px !important;
        height: 16px !important;
        margin-bottom: 0 !important;
        margin-inline-start: 0 !important;
    }
    
    .urlbarView-favicon {
        margin-inline-start: 20px !important;
    }
    /* MOVE URL RESULT TYPE ICON TO LEFT END */
}

Fix font size in url & search bars (FF 78+)

chrome/userChrome.css 
@-moz-document url(chrome://browser/content/browser.xhtml) {
    #urlbar,
    #searchbar {
        font-size: 12px !important;
    }
}

Don't round corners of the input boxes in url & search bars (FF 78+)

chrome/userChrome.css 
@-moz-document url(chrome://browser/content/browser.xhtml) {
    #urlbar[breakout] > :first-child,
    #searchbar {
        border-radius: 1px !important;
    }

    .urlbarView-row-inner {
        border-radius: 0 !important;
    }
}

Enable compact layout (FF 89+)

about:config

browser.compactmode.show → true

and optionally

chrome/userChrome.css 
:root {
  --tab-min-height: 30px !important;
}

#TabsToolbar {
    height: var(--tab-min-height) !important;
}

Classic tabs (FF 89+)

chrome/userChrome.css:

FF 89-95 
@media (-moz-proton) {
    .tab-background {
        border-radius: 0 !important;
        margin-block: 0 !important;
    }
}
FF 96+ 
.tab-background {
    border-radius: 0 !important;
    margin-block: 0 !important;
}

Compact menus (FF 89+)

chrome/userChrome.css 
menupopup > menuitem, menupopup > menu {
  padding-block: 4px !important;
}

:root {
  --arrowpanel-menuitem-padding: 4px 8px !important;
}

Active tab color (FF 100+)

chrome/userChrome.css 
.tab-background[selected="true"] {
    background-color: #262b38 !important;
}

Compact tabs (FF 108+)

chrome/userChrome.css 
:root {
    --tab-min-height: 30px !important;
}

.tab-label-container{
    height: unset !important; 
}

Remove "List all tabs" menu button

about:config

browser.tabs.tabmanager.enabled → false

for 131+:

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

Remove line between tabs and navigation bar (FF 123+)

chrome/userChrome.css 
#nav-bar {
    box-shadow: none !important;
    border-top: none;
}

Remove tab left padding

chrome/userChrome.css 
.tabbrowser-tab {
    padding-left: 0 !important;
}

Restore background downloads to $TMP (FF 102+)

about:config

browser.download.start_downloads_in_tmp_dir → true

All combined

Firefox < 126

chrome/userChrome.css 
@-moz-document url(chrome://browser/content/browser.xhtml) {
    #urlbar[breakout][breakout-extend] {
        top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
        left: 0 !important;
        width: 100% !important;
    }

    #urlbar[breakout][breakout-extend] > #urlbar-input-container {
        height: var(--urlbar-height) !important;
        padding-block: 0 !important;
        padding-inline: 0 !important;
    }
    
    #urlbar[breakout][breakout-extend] > #urlbar-background {
        animation-name: none !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .05) !important;
    }
    
    .urlbarView {
        margin-inline: 0 !important;
        width: 100% !important;
    }

    .urlbarView-row {
        padding-block: 0 !important;
    }
    
    .urlbarView-type-icon {
        min-width: 16px !important;
        height: 16px !important;
        margin-bottom: 0 !important;
        margin-inline-start: 0 !important;
    }
    
    .urlbarView-favicon {
        margin-inline-start: 20px !important;
    }

    #urlbar[breakout] > :first-child,
    #searchbar {
        border-radius: 1px !important;
    }

    .urlbarView-row-inner {
        border-radius: 0 !important;
    }

    #nav-bar {
      box-shadow: none !important;
      border-top: none;
    }

    .tab-background {
        border-radius: 0 !important;
        margin-block: 0 !important;
    }

    .tab-label-container {
        height: unset !important;
    }

    .tabbrowser-tab {
        padding-left: 0 !important;
    }
}

menupopup {
    --panel-border-radius: 0 !important;
}

menupopup, menupopup > menuitem {
    border-radius: 0 !important;
}

menupopup > menuitem, menupopup > menu {
  padding-block: 4px !important;
}

:root {
  --arrowpanel-border-radius: 0px !important;
  --arrowpanel-menuitem-padding: 4px 8px !important;
  --tab-min-height: 30px !important;
  --tab-block-margin: 0px !important;
}

Firefox 126+

chrome/userChrome.css 
@-moz-document url(chrome://browser/content/browser.xhtml) {
    #urlbar[breakout][breakout-extend] {
        top: 4px !important;
        left: 0 !important;
        width: 100% !important;
    }

    #urlbar[breakout][breakout-extend] > #urlbar-input-container {
        height: 100% !important;
        padding-block: 0 !important;
        padding-inline: 0 !important;
        padding: 1px 0 0 1px !important;
    }

    #urlbar[breakout][breakout-extend] > #urlbar-background {
        animation-name: none !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .05) !important;
    }

    #urlbar[breakout][breakout-extend]:focus-within > #urlbar-background {
        border-color: var(--toolbar-field-focus-border-color) !important;
    }

    #urlbar[breakout] > :first-child,
    #searchbar {
        border-radius: 1px !important;
    }

    #urlbar[breakout]:focus-within > :first-child,
    #searchbar:focus-within {
        outline-offset: -1px !important;
        outline-width: 1px !important;
    }

    #urlbar[breakout][breakout-extend] .search-one-offs {
        padding: 4px 0 4px 0 !important;
    }

    #urlbar-input {
        min-height: 22px;
    }

    .urlbarView {
        margin-inline: 0 !important;
        width: 100% !important;
    }

    .urlbarView-row {
        padding-block: 0 !important;
    }
    
    .urlbarView-type-icon {
        min-width: 16px !important;
        height: 16px !important;
        margin-bottom: 0 !important;
        margin-inline-start: 0 !important;
    }
    
    .urlbarView-favicon {
        margin-inline-start: 20px !important;
    }

    .urlbarView-row {
        border-radius: 0 !important;
    }

    #nav-bar {
      box-shadow: none !important;
      border-top: none !important;
    }

    .tab-background {
        border-radius: 0 !important;
        margin-block: 0 !important;
    }

    .tab-label-container {
        height: unset !important;
    }

    .tabbrowser-tab {
        padding-left: 0 !important;
    }
}

menupopup {
    --panel-border-radius: 0 !important;
}

menupopup, menupopup > menuitem {
    border-radius: 0 !important;
}

menupopup > menuitem, menupopup > menu {
  padding-block: 4px !important;
}

:root {
  --arrowpanel-border-radius: 0px !important;
  --arrowpanel-menuitem-padding: 4px 8px !important;
  --tab-min-height: 30px !important;
  --tab-block-margin: 0px !important;
  --toolbar-field-focus-border-color: rgb(82, 148, 226) !important;
}

panel {
  --panel-border-radius: 1px !important;
}

Firefox 145+

chrome/userChrome.css 
@-moz-document url(chrome://browser/content/browser.xhtml) {
    #urlbar[breakout][breakout-extend] {
        margin-left: 0 !important;
        width: var(--urlbar-width) !important;
        margin-top: calc((var(--urlbar-container-height) - var(--urlbar-height)) / 2) !important;

        > .urlbar-input-container {
            height: var(--urlbar-height) !important;
            padding-block: var(--urlbar-container-padding) !important;
            padding-inline: var(--urlbar-container-padding) !important;
        }

        > #urlbar-background {
            animation-name: none !important;
            box-shadow: 0 1px 4px rgba(0, 0, 0, .05) !important;
        }

        .search-one-offs {
            padding: 4px 0 4px 0 !important;
        }

        &:focus-within > #urlbar-background {
            border-color: var(--toolbar-field-focus-border-color) !important;
            border-radius: 1px !important;
        }
    }

    #urlbar[breakout] > :first-child,
    #searchbar {
        border-radius: 1px !important;
    }

    #urlbar,
    #searchbar {
        font-size: 13px !important;
    }

    #urlbar[breakout]:focus-within > :first-child,
    #searchbar:focus-within {
        outline-offset: -1px !important;
        outline-width: 1px !important;
    }

    .urlbarView {
        margin-inline: 0 !important;
        width: 100% !important;
    }

    .urlbarView-row {
        height: 28px !important;
        border-radius: 0 !important;
    }
    
    .urlbarView-type-icon {
        min-width: 16px !important;
        height: 16px !important;
        margin-bottom: 0 !important;
        margin-inline-start: 0 !important;
    }
    
    .urlbarView-favicon {
        margin-inline-start: 8px !important;
        margin-inline-end: 8px !important;
    }

    #nav-bar {
      box-shadow: none !important;
      border-top: none !important;
    }

    .tab-background {
        border-radius: 0 !important;
        margin-block: 0 !important;
    }

    .tab-label-container {
        height: unset !important;
    }

    .tabbrowser-tab {
        padding-left: 0 !important;
    }
}

menupopup {
    --panel-border-radius: 0 !important;
}

menupopup, menupopup > menuitem {
    border-radius: 0 !important;
}

menupopup > menuitem, menupopup > menu {
  padding-block: 4px !important;
}

:root {
  --arrowpanel-border-radius: 0px !important;
  --arrowpanel-menuitem-padding: 4px 8px !important;
  --tab-min-height: 30px !important;
  --tab-block-margin: 0px !important;
  --toolbar-field-focus-border-color: rgb(82, 148, 226) !important;
  --urlbar-inner-border-radius: 2px !important;
  --border-radius-medium: 4px !important;
}

panel {
  --panel-border-radius: 1px !important;
}

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

Version specific CSS notes

In 128 #urlbar-input-container changed to .urlbar-input-container.

In 133 megabar changed coordinate calculation (relative to absolute), the proper css section should be

#urlbar[breakout][breakout-extend] 
#urlbar[breakout][breakout-extend] {
    margin-left: 0 !important;
    width: var(--urlbar-width) !important;
    margin-top: calc((var(--urlbar-container-height) - var(--urlbar-height)) / 2) !important;

    > .urlbar-input-container {
        height: var(--urlbar-height) !important;
        padding-block: var(--urlbar-container-padding) !important;
        padding-inline: var(--urlbar-container-padding) !important;
    }
}
Also see:

Using Firefox without PulseAudio