Megabar – Configuring and Styling the Firefox 75+ Address Bar

The "focused" address bar in Firefox 75+ has been controversial in the days since it debuted. Some users do not recognize or want to see the list of sites that drops down automatically when you click in the bar, while others object to the way it bulges and casts a shadow over the Bookmarks Toolbar. This page provides information and tools for managing the behavior and appearance of the bar and its drop-down.

• Turn off the automatically dropping Shortcuts (Top Sites) list
• The Show History button is gone!
• Change the types of suggested matches Firefox shows as you type
• Reduce automatic address bar enlargement (Firefox 78+)
• Re-styling the bar to reduce the bulging, URL on its own row, other modifications (userChrome.css rules)
• [Archived] Firefox 75-76 roll back option

If you don't find an automatic list useful, you can set Firefox not to open the drop-down at all when you first click in the address bar. There is a checkbox for this in the "Address Bar" section of the Privacy & Security panel on the Settings page (formerly known as the Options or Preferences page). Alternately, you can make the change using about:config:

1. In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button accepting the risk.
2. In the search box in the page, type or paste URLB and pause while the list is filtered.
3. Double-click the browser.urlbar.suggest.topsites preference to switch the value from true to false.

With that change, you can type a space in the address bar to display the classic "Show History" list.

 

Four Types of Suggestions

Search Engine Suggestions are retrieved dynamically from your current default search engine site. You can move these before or after other kinds of suggestions, or disable them completely using checkboxes on the search panel of the Options/Preferences page. For more information, see the Mozilla Support article: Search suggestions in Firefox.

Bookmark Suggestions show matches among your bookmarked sites, Open Tab Suggestions show matches to currently open pages, and History Suggestions show matches among sites you have visited. Want to hide some of those? To learn how to turn various of those categories on and off, see the Mozilla Support article: Address bar autocomplete in Firefox - Search your bookmarks, history and tabs.

In-URL-bar Autofill

This feature can be disabled as follows:

1. In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button accepting the risk.
2. In the search box in the page, type or paste URLB and pause while the list is filtered.
3. To stop showing autofill suggestions in the address bar: Double-click the browser.urlbar.autoFill preference to switch the value from true to false. (To re-enable this feature, double-click again, or use the reset arrow icon at the far right of the row.)

What about the informational bar (formerly the "blue bar")?

The top row always provides information about what Firefox will do if you press the Enter/Return key, or click the Go arrow, right now. When there is an autofill match, the bar shows what URL will be loaded. If there isn't an autofill match but instead one or more search terms, Firefox will inform you what search engine it will use. If you are using a search engine keyword or bookmark keyword, the top row should indicate where that leads. Here's what those look like (screenshot from Firefox 75):

It's handy, but some people prefer not to see it. There is no checkbox or preference to hide the top row, but you can do it with a custom style rule in a userChrome.css file. More on that below.

 

How to Tame the Enlarging Address Bar (Firefox 78+)

Having the address bar enlarge immediately upon the cursor entering has been unpopular, and advocates for people affected by animations asked that an option be added to honor their system settings for preferring reduced motion. This option arrived in Firefox 78. When the cursor enters the bar automatically, for example, on a new tab, with this setting in place, there will not be any enlargement animation or auto-opening of the drop-down. You can interact with the page and other toolbar controls without distraction. As soon as you start interacting with the address bar, which opens the drop-down, then it will expand at that point. If you don't want any enlargement ever, please see the following section on userChrome.css rules.

If you do not want to change this preference at the system level, you can trigger this feature by creating a preference in Firefox. Note that this affects various other types of animation meant to communicate updated states, such as the blue swipe across a tab that just finished loading. If you're worried you'll miss something, this might not be the best option for you. But if you want to try it, here's how:

1. In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button accepting the risk.
2. In the search box in the page, type or paste ui.prefersReducedMotion and pause while the list is filtered.
   If this preference was already created and shows a value of 0, skip to step D.
3. On the bar with the preference name, click the radio button next to Number and click the + button to add the preference. Then Firefox should display the new value.
4. Set the value to 1 (double-click to edit if necessary) and click the blue checkmark button to save the change.

For the visually oriented, here is a sequence of screenshots of the above:

If you decide to undo this change, go back to about:config, find this preference, and use the little trash can icon at the right end of the row to delete it.

Megabar Styler – Rules for userChrome.css

You can use these controls to generate a rules file to restyle the Firefox 75 URL bar and drop-down. The rules can be incorporated directly into a userChrome.css file, or you could include them by reference as described in Adding Style Recipes to userChrome.css. The buttons to grab the CSS you tweak using the following form controls follow after the form.

As a shortcut to get rules simply to prevent the bar from expanding when you click in it, you can download the following file: userChrome-ZeroEnlargement.css. If you do not have a userChrome.css file yet, you can shorten that name by removing -ZeroEnlargement from the middle of it, and place that in your chrome folder (the one you create using the steps in How to Create a userChrome.css File). If you already have a userChrome.css file, you can copy paste rules from the download into yours.

Amount of URL bar enlargement: None 1 pixel 2 pixels 3 pixels 4 pixels 5 pixels 6 pixels 7 pixels (default) Animation effect and shadow are removed in all cases.
Show the Visit / Search top row? Yes, I like it! (default) No, hide it Use a two-row layout? Let Firefox decide (1 row unless too narrow) (default) Yes, always put the URL below the title Show a thin line between suggestions ? No thanks (default) Sure, good idea Remove "Firefox Suggest" and other labels? No thanks (default) Yes, they're distracting Show a scroll bar when there are more than X rows on the drop-down: more than 8 more than 10 (typical max. rows) more than 12 more than 15 more than 18 more than 20 Note: If you set browser.urlbar.maxRichResults to a higher value, a scroll bar will appear. The additional suggestions can be reached using the mouse, but not the down arrow key. One-off Search Button row: Show the bar full-height with header (default) Minimum height, just buttons, no header Hide the row (down/up arrows still go in)
Title font size: 13 pixels 14 pixels 15 pixels 16 pixels 18 pixels	URL font size: 12 pixels 13 pixels 14 pixels 15 pixels 16 pixels	Modify bolding of text matches ? Bold text, no background (default) Bold text, lightly shaded background Regular text, lightly shaded background Regular text, moderately shaded background

CSS based on above options: Select CSS Save below as .css File