Firefox recently changed the address bar in a way that it is now horrible. I want the old address bar back, which simply yields results from my history and bookmarks, I don't need a big box popping out when I simply click in the address bar, I don't want top sites, search suggestions, buttons to search on specific websites, and all the bullshit that changed.
Before v77 some options could be tweaked but it seems this was temporary. These hidden settings kinda work but it is still not good enough, and some things still are forced and can't be changed this way. Whatever, let force some customizations of our own..
Note that after some Firefox update, these customization files are ignored by default, but it can be enabled again in the about:config page by setting toolkit.legacyUserProfileCustomizations.stylesheets to true.
First thing is to locate the profile folder, simply opening about:profiles and clicking the button to open the root directory is enough.
Open (or create if it doesn't exist yet) the chrome folder inside the root directory of your Firefox profile, and inside it we need two new files which will allow some CSS overrides.
userChrome.css contains some CSS for new tabs customization, I want new tabs to match my system and GTK theme, and not them to be plain white, as I also use Dark Reader extension and I'm used to never have plain white on any website. It kinda hurt my eyes when at night a white page opens when I spent the previous minutes/hours on dark websites.
/*** Dark background for new tabs ***/
@-moz-document url-prefix(about:blank) {
html > body:empty {
background-color: rgb(53,53,53) !important;
}
}
@-moz-document url(about:blank) {
html > body:empty {
background-color: rgb(53,53,53) !important;
}
}userContent.css was generated from the Megabar Styler by Jefferson Scher, where you can dynamically select various settings which will provide you a proper userContent.css file to customize the address bar to your liking and get back your old one. I added a few lines at the bottom to also change the white address and search bars to match the dark theme.
/*** Megabar Styler General - version 2020-04-19 ***/
/*** General Preferences ***/
:root {
/* Number of pixels of enlargement when URL bar is focused */
--mbarstyler-popout-pixels: 1px; /* [0px - 7px] */
/* Top Bar Display or Not */
--mbarstyler-top-bar-display: none; /* [block,none] */
/* Font sizes (default: 13.8px for title, 10.2px for URL) */
--mbarstyler-title-font-size: 15px; /* [13px - 18px] */
--mbarstyler-url-font-size: 13px; /* [12px - 16px] */
/* Rows to show without scrolling */
--mbarstyler-max-rows-without-scrolling: 10;
/* Bottom border for each result row */
--mbarstyler-bottom-border-width: 1px; /* [0px or 1px] */
/* Match display style */
--mbarstyler-match-weight: 700; /* [400,700] */
--mbarstyler-match-background-opacity: 0.05; /* [0.0,0.05,0.1] */
}
/*** URL bar enlargement or lack thereof ***/
/* Compute new position, width, and padding */
#urlbar[breakout][breakout-extend] {
top: calc(5px - var(--mbarstyler-popout-pixels)) !important;
left: calc(0px - var(--mbarstyler-popout-pixels)) !important;
width: calc(100% + (2 * var(--mbarstyler-popout-pixels))) !important;
padding: var(--mbarstyler-popout-pixels) !important;
}
[uidensity="compact"] #urlbar[breakout][breakout-extend] {
top: calc(3px - var(--mbarstyler-popout-pixels)) !important;
}
[uidensity="touch"] #urlbar[breakout][breakout-extend] {
top: calc(4px - var(--mbarstyler-popout-pixels)) !important;
}
/* Prevent shift of URL bar contents */
#urlbar[breakout][breakout-extend] > #urlbar-input-container {
height: var(--urlbar-height) !important;
padding: 0 !important;
}
/* Do not animate */
#urlbar[breakout][breakout-extend] > #urlbar-background {
animation: none !important;;
}
/* Remove shadows */
#urlbar[breakout][breakout-extend] > #urlbar-background {
box-shadow: none !important;
}
/*** Top "Blue Bar" Display ***/
.urlbarView-row:first-of-type {
display: var(--mbarstyler-top-bar-display) !important;
}
/*** Font Sizes and Scrolling ***/
/* Title font-size */
.urlbarView-row .urlbarView-title {
font-size: var(--mbarstyler-title-font-size) !important;
}
/* URL / action font-size */
.urlbarView-row .urlbarView-secondary,
.urlbarView-row .urlbarView-url,
.urlbarView-row .urlbarView-action {
font-size: var(--mbarstyler-url-font-size) !important;
}
/* Set max-height for items visible without scrolling */
#urlbarView-results, #urlbar-results {
height: unset !important;
max-height: calc(2.5 * (var(--mbarstyler-title-font-size) + var(--mbarstyler-bottom-border-width)) * var(--mbarstyler-max-rows-without-scrolling)) !important;
}
#urlbar-results {
overflow-y: auto !important;
}
/* Clean up extra spacing at the top and bottom */
#urlbar-results {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Subtle border between results */
.urlbarView-row:not(:last-of-type) {
border-bottom: var(--mbarstyler-bottom-border-width) solid rgba(0, 0, 0, 0.1) !important;
}
/* Match Styling Like Fx43-47 */
[lwt-popup-darktext] .urlbarView-row:not([selected]) .urlbarView-title strong,
[lwt-popup-darktext] .urlbarView-row:not([selected]) .urlbarView-url strong {
font-weight: var(--mbarstyler-match-weight) !important;
box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, calc(var(--mbarstyler-match-background-opacity) * 2));
background-color: rgba(0, 0, 0, var(--mbarstyler-match-background-opacity));
border-radius: 2px;
}
[lwt-popup-brighttext] .urlbarView-row:not([selected]) .urlbarView-title strong,
[lwt-popup-brighttext] .urlbarView-row:not([selected]) .urlbarView-url strong {
font-weight: var(--mbarstyler-match-weight) !important;
box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, calc(var(--mbarstyler-match-background-opacity) * 2));
background-color: rgba(255, 255, 255, var(--mbarstyler-match-background-opacity));
border-radius: 2px;
}
/*** End of: Megabar Styler General ***/
/*** Megabar Styler One-Offs - version 2020-05-31 ***/
/*** One-Off Search Button Preferences ***/
:root {
/* One-Offs Display or Not */
--mbarstyler-oneoffs-display: none; /* [flex,none] */
}
/* Show or Hide the One-Offs Search Icon Bar */
#urlbar .search-one-offs:not([hidden]) {
display: var(--mbarstyler-oneoffs-display) !important;
}
/* Shorten the One-Offs Search Icon Bar Vertically */
#urlbar .search-one-offs:not([hidden]) {
padding-block: unset !important;
}
/* We don't need the text */
#urlbar .search-one-offs .search-panel-header {
display: none !important;
}
/*** End of: Megabar Styler One-Offs ***/
/*** Dark address and search bars background with light transparency, with white text ***/
#urlbar-background {
background-color: rgba(53, 53, 53, 0.9) !important;
}
#urlbar {
color: white !important;
}
#searchbar {
background-color: rgba(53, 53, 53, 0.9) !important;
color: white !important;
}With these modifications, my Firefox now has a proper dark theme in the last bits that were missing it and a nice address bar, without the new bullshit that Firefox forces down our throat (apparently they will not back it up, even with all the bad user feedback they received they'll keep their changes).