Megabar – Configuring and Styling the Firefox 75+ Address Bar

Updated June 2, 2020; Originally posted by jscher2000 on April 11, 2020.

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.

Temporary Preference to Disable Enlargement Feature

If you're not ready to work with it, Firefox 75 and 76 include a preference to disable the new "enlarging" design and revert to the Firefox 74 design. You can use it temporarily and return to this page for additional styling-related suggestions in the future.

  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.update1 preference to switch the value from true to false.

This change doesn't take effect in currently open windows, but you will see the old bar in new windows or after exiting/quitting out of Firefox and starting it up again.

 

What is this unfamiliar Top/Frequent Sites list?

The Firefox Home page (internal address about:home) and New Tab page (internal address about:newtab) share a Top Sites section containing a combination of pre-pinned search shortcuts, popular sites, and URLs from your history. In Firefox 75, the first eight Top Sites appears on the drop-down. If you have been ignoring this section, it's probably confusing to see this list. For information on how to add, remove, and rearrange those sites, see the Mozilla Support article: Customize the New Tab page.

If you want to prevent the Top Sites list from automatically dropping down, you have two choices using preference changes:

(1) Switch back to showing sites from history when clicking in the address bar:

You can do this by disabling the Top Sites section on the Firefox Home / new tab page, as described in the Mozilla Support article Hide or display content in New Tab. On the Options/Preferences page, Home panel, uncheck the box for Top Sites:

Alternately, you can toggle a preference 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 topsi and pause while the list is filtered.
  3. Double-click the browser.newtabpage.activity-stream.feeds.topsites preference to switch the value from true to false.

(2) Don't open the drop-down at all when first clicking in the address bar:

  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. (Firefox 75-77) Double-click the browser.urlbar.openViewOnFocus preference to switch the value from true to false.
  4. (Firefox 78-79) Double-click the browser.urlbar.suggest.topsites preference to switch the value from true to false.

With that change, you can delete the current page URL or, if the bar is empty, press the down arrow to display the "Show History" list.

 

Where is my "Show History" button?

You can access the classic frequent sites list in an empty address bar by pressing the down arrow. I created an extension called Show History Frequent Sites Button if you prefer an actual button. Its list looks like the following. You can configure the number of items and how the URLs open (for example, in a new tab, in a background tab, etc.), but it has some limitations noted in the description on the Mozilla Add-ons site.

Managing Standard Address Bar / Drop-down Features

You can disable many of the features of the drop-down to see the matches you find most useful. Many of these changes can be made on the Options/Preferences page, while some require a visit to the Advanced Configuration Editor (about:config).

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 and One-Click Search Buttons

These features 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.)
  4. To stop showing the one-off search buttons at the bottom of the drop-down (through Firefox 77): Double-click the browser.urlbar.oneOffSearches 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 "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:

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.

 

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:

Animation effect and shadow are removed in all cases.

Show the Visit / Search top row?

Use a two-row layout?

Show a thin line between suggestions ?

Show a scroll bar when there are more than X rows on the drop-down:

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:

Title font size:

URL font size:

Modify bolding of text matches ?

CSS based on above options:

CSS to be shown here, assuming JavaScript is not disabled.