Skip to content

Instantly share code, notes, and snippets.

@nullfx
Last active Oct 5, 2021
Embed
What would you like to do?
Fix Firefox's terrible UX design choices
@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-toolbar-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

This comment has been minimized.

Copy link
Owner Author

@nullfx 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.

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