Skip to content

Instantly share code, notes, and snippets.

@nullfx
Last active May 15, 2024 22:51
Show Gist options
  • Select an option

  • Save nullfx/fe70912a52723507124007e1abfd6ba9 to your computer and use it in GitHub Desktop.

Select an option

Save nullfx/fe70912a52723507124007e1abfd6ba9 to your computer and use it in GitHub Desktop.
Fix Firefox's bloated UX
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */
/* Prevent massive mega url bar */
#urlbar[breakout],
#urlbar[breakout][breakout-extend] {
width: 100% !important;
top: calc((var(--urlbar-container-height) - var(--urlbar-height)) / 2) !important;
left: 0 !important;
}
#urlbar[breakout][breakout-extend] > #urlbar-input-container,
#urlbar-input-container {
height: var(--urlbar-height) !important;
width: 100% !important;
padding-block: unset !important;
padding-inline: unset !important;
transition: none !important;
}
#urlbar[breakout][breakout-extend] > #urlbar-background {
box-shadow: 0 1px 4px rgba(0,0,0,.05) !important;
animation: none !important;
}
/*** Prevent massively padded, forever elongated bookmark toolbar menu items (pre FF92 style menu items) ***/
menupopup > menuitem, menupopup > menu {
padding-block: 4px !important;
max-width: 20em !important;
}
:root {
--arrowpanel-menuitem-padding: 4px 8px !important;
}
@nullfx
Copy link
Author

nullfx commented Sep 8, 2021

mega-bar style fix:

  • regular url bar
    image
  • cursor in url bar
    image
  • typing in url bar
    image

menu padding / spacing fix:

  • before (FF 92+ style):
    image
  • after (pre FF 92 style):
    image

File Location:

userChrome.css file path:

  • mac: /Users/<user>/Library/Application Support/Firefox/Profiles/<profile>/chrome/userChrome.css
  • win: %appdata%\Mozilla\Firefox\Profiles\<profile>\chrome\userChrome.css
  • linux: ~/.mozilla/firefox/<profile>/chrome/userChrome.css

If the file or chrome folder doesn't exist, create the chrome folder, then create the userChrome.css file inside it and add the above contents, save and restart Firefox.

@marczellm
Copy link

I had to change --urlbar-toolbar-height to --urlbar-container-height in FF126, otherwise the urlbar search suggestions box moved way up so that its top part wasn't even visible.

@nullfx
Copy link
Author

nullfx commented May 15, 2024

I had to change --urlbar-toolbar-height to --urlbar-container-height in FF126, otherwise the urlbar search suggestions box moved way up so that its top part wasn't even visible.

Cheers for that. It was on my list of todo's to investigate as I'd noticed that it changed just recently!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment