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;
}

Firefox 149+

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;
        }

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

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

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

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

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

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

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

    .urlbarView-row {
        padding-block: 0 !important;
        border-radius: 1px !important;
    }
    
    .urlbarView-row-inner {
        padding-block: 3px !important;
        min-height: unset !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;
    }

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

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

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

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

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

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

    #searchbar-new[breakout][breakout-extend] > .urlbar-input-container {
        height: var(--urlbar-height) !important;
        padding-block: var(--urlbar-container-padding) !important;
        padding-inline: 1px !important;
        transform: none !important;
    }

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

    #searchbar-new:focus-within .urlbar-background {
        border-color: var(--toolbar-field-focus-border-color) !important;
    }
}

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

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

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

panel {
  --panel-border-radius: 1px !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;
    }
}

149 had searchbar → searcbar-new trnasition and few # → . changes.

Also see:

Using Firefox without PulseAudio