Remove Firefox address bar whitespace

Martin Brinkmann
Sep 8, 2017
Updated • Sep 9, 2017
Firefox
|
39

Recent versions of the Firefox web browser come with a bit of whitespace on the left and right side of the browser's address bar (apparently this will launch in Firefox 57).

Some Firefox users may want to recover the whitespace to make room for the address bar or other interface elements displayed on Firefox's main toolbar.

This is important especially on low resolution devices, and if Firefox's window uses part of the screen only and not all of it.

Take a look at the following screenshot to see how the default address bar layout looks like in the web browser.

It is rather easy, thankfully, to get rid of the whitespace and recover the space in the address bar. The method requires no knowledge of CSS or editing of the userChrome.css file of Firefox.

Here is what you need to do:

  • Right-click on one of the whitespace areas and select customize from the menu that opens. You can select customize from the main Firefox menu instead, or tap on the Alt-key and select it from View > Toolbars.
  • All that is left to do now is to drag and drop the blocks of whitespace from the address bar to the area that displays all available icons that you can add to the Firefox toolbar or menus.

The change is visible right away. You should notice that the browser's address bar is extended automatically to use the free space. It is wider now so that you see more of the URL or other elements.

You can add the whitespace to the main toolbar of the browser again at any time by dragging and dropping the "flexible space" icon to the desired location on the toolbar.

Closing Words

I run the Firefox window on one half of my Full HD monitor usually, as I display another browser or program in the other part at the same time. The use of whitespace in the browser's address bar led to URLs not being displayed fully which is problematic from a security, privacy and usability point of view.

Check out the following screenshot to see what I mean:

It is certainly possible to optimize the default interface to make more room for the URL part of the address bar. You can remove the whitespace, but also search if you don't use it, and move some of the functional icons on the right to the menu for example to make up more room.

Mozilla could also consider displaying only icons for containers in the browser's URL bar instead of the container icon and name if space is scarce.

Now You: How does your Firefox address bar look like? Which elements do you consider essential?

Summary
Article Name
Remove Firefox address bar whitespace
Description
Find out how to remove the extra whitespace that is displayed on the Firefox address bar to make more room for other browser elements.
Author
Publisher
Ghacks Technology News
Logo
Advertisement

Tutorials & Tips


Previous Post: «
Next Post: «

Comments

  1. Anonymous said on September 12, 2017 at 11:46 am
    Reply

    FYI Firefox ESR 52 will stay updated until Firefox 61 so more like August next year :)

  2. TelV said on September 9, 2017 at 3:56 pm
    Reply

    I’ve read elsewhere that these two spaces serve no other purpose than to centre the location/search bars. Because the spaces are flexible they’ll adjust automatically to accommodate more buttons added either side. Or in other words, purely a cosmetic exercise.

    But do we really care if the location bar is slightly left or right of center? I certainly don’t.

    1. Jody Thornton said on September 10, 2017 at 2:28 pm
      Reply

      Well no we don’t care, but it’s just how Mozilla wants to present and brand their browser. It’s the “Firefox look”

      1. TelV said on September 10, 2017 at 5:36 pm
        Reply

        Whoever designed it doesn’t care much for the way the browser is going to be used.

        For example, I prefer a series of small menus which are relevant to the purpose they’re intended for, not all jumbled together on one long menu which stretches the length of the browser by the look of it. I’ve never liked those javascript menus come to that because you have to keep the mouse pointer within the menu borders otherwise it disappears and you have to begin all over again.

        Hopefully Waterfox which will be what I’ll probably switch to come June 26 next year won’t follow the same ugly Photon design.

  3. mikef90000 said on September 8, 2017 at 11:43 pm
    Reply

    Geez, how pathetic that people should have to do this to regain some address bar space.
    Maybe Mozilla will come to their senses (HA HA HA HA) and give us back an optional Add-On bar in v57+.

    1. Jody Thornton said on September 9, 2017 at 9:17 am
      Reply

      Oh relax! Mozilla is trying style their browser the way they want. Just remove the spaces. That’s like getting all out of whack because Microsoft decided to use a default blue background for the Windows desktop. Sheesh!

  4. CHEF-KOCH said on September 8, 2017 at 10:03 pm
    Reply

    I guess there placeholders for something. But it’s guessing. Maybe for ghacks integration – who knows?! ;))))

    1. AnorKnee Merce said on September 9, 2017 at 11:33 am
      Reply

      Yes. Those 2 white spaces are most likely placeholders for Mozilla to sell ads, similar to the revenue that Mozilla get from selling the Search box.
      ……. If so, Mozilla will likely remove the user-option to remove those 2 white spaces in later versions of FF.

      1. Anonymous said on September 9, 2017 at 9:25 pm
        Reply

        You can remove it and add it anywhere you like to do what I think you love most: Customize UI, in this case customize how icons and UI elements are ordered and spaced.

      2. AnorKnee Merce said on September 9, 2017 at 4:02 pm
        Reply

        @ Anonymous

        That was funny, thanks. Especially the part where you actually believe this, ie the whitespace that existed some time ago but were removed, and now they’re back and even IMPROVED.

        If the whitespace has been improved by Mozilla, it’s quite ‘funny’ for the author to publish an article on how to remove Firefox address bar whitespaces in the latest FF.

      3. Anonymous said on September 9, 2017 at 2:37 pm
        Reply

        *customizable whitespaces. Their purpose is to let people arrange UI icons in a more free style way.

      4. Anonymous said on September 9, 2017 at 1:44 pm
        Reply

        That was funny, thanks. Especially the part where you actually believe this. Whitespace existed some time ago but were removed, I don’t know when, maybe Firefox 45. And now they’re back and even improved.

  5. o_O said on September 8, 2017 at 5:39 pm
    Reply

    This is ridiculous…

    1. Johnny said on September 8, 2017 at 9:16 pm
      Reply

      Yup, it’s ridiculous that those white spaces even exist!

    2. George said on September 8, 2017 at 8:56 pm
      Reply

      It’s the modern Firefox customisation… :P

    3. Anonymous said on September 8, 2017 at 8:53 pm
      Reply

      Yeah, how ridiculous that we can add and remove whitespace as we see fit.

      1. Jody Thornton said on September 9, 2017 at 9:19 am
        Reply

        I know, it’s amazing what people will be offended or stirred up by. Just remove the spaces like I did. But everyone has to get in their anti-Mozilla dig in somewhere.

        It’s kinda like fake outrage on Facebook. “How can I hate on Mozilla today?”

  6. Sylvio Haas said on September 8, 2017 at 2:59 pm
    Reply

    Hello, Martin
    I tried to eliminate the white space following your instructions but it did not work. Then I remembered that I’m using Padlock which is another extension you indicated some months ago. I turned it off and the white spaces disappeared left and right, without my interference. My question is: what is SAFER: have no spaces left and right and therefore don’t use Padlock or keep on using Padlock and browse with the white spaces? Thank you in advance.

    1. Django said on September 8, 2017 at 4:30 pm
      Reply

      What is safer here is the ability to read the URL, or at least the left part of it, e.g. https://www.ghacks.net/ , so that you know you really are on ghacks and not on ghacked.

      (You just need enough room in the address bar.)

    2. Martin Brinkmann said on September 8, 2017 at 3:22 pm
      Reply

      Well, it depends on whether you see the URL all the time, or not. If you do, keep Padlock. If you don’t, maybe remove the whitespace and the extension, or try to remove other elements that you don’t use that are on the toolbar.

      1. Anonymous said on September 8, 2017 at 3:35 pm
        Reply

        Thank you!

  7. Anonymous said on September 8, 2017 at 2:44 pm
    Reply

    Right click on this blank space -> select “Remove from toolbar”

    1. Martin Brinkmann said on September 8, 2017 at 2:47 pm
      Reply

      Good point, that is definitely easier ;)

  8. Marcin said on September 8, 2017 at 2:16 pm
    Reply

    This is how my address bar looks for now (FF55) : https://i.imgur.com/VIvGib0.png.

    This is all what I need in my main toolbar : the address field.
    So the fact we can remove whitespaces in Firefox 56+ is a good news for me.

    But as you can see, I also use and need the favicon into address bar.
    Currently, this feature is possible thanks to CTR, so I’m not sure how I will handle this when Firefox will reach 57.

    1. Django said on September 8, 2017 at 3:40 pm
      Reply

      You don’t need CTR for that, Firefox can natively allow you to put favicons into the address bar, assuming you mean “bookmarks without text, just an icon”.

      Enable the Bookmarks toolbar and in customize mode, move the bookmarks toolbar element out of its toolbar and into the address bar. Then you can add bookmarks in the address bar.

      To remove text from bookmarks you can either rename them manually or hide text with a one line CSS tweak. Create a userChrome.css file and put it in a new folder named “chrome” in your profile. The CSS file should contain :

      @namespace url(http: //www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

      .bookmark-item > .toolbarbutton-text {
      display: none !important;
      }

      1. Marcin said on September 8, 2017 at 9:21 pm
        Reply

        Thank you Django for the tips !

        But this is not exacty what I’m mean…
        I should have been more precise – What I like is to have the favicon of the site currently opened, whether it’s bookmarked or not, into the address FIELD, as in the capture above (https://i.imgur.com/VIvGib0.png).

        Which, I’m afraid, is only possible thanks to CTR.

      2. Django said on September 8, 2017 at 8:40 pm
        Reply

        No problem, although I just realized I misunderstood his need. He wants to change the “i” bubble in the address bar into the current site’s favicon.

        It’s possible to change the “i” with userChrome.css, but in a dynamic, site-dependent way I don’t know how. We would need to replace the URL with something that does Domain + “favicon.ico”. Maybe someone reading this will know.

      3. Richard Allen said on September 8, 2017 at 7:24 pm
        Reply

        Just for clarification. There are Two boxes that need to be checked and the wording is different, “Enable browser chrome and add-on debugging toolboxes” And “Enable remote debugging”. Maybe the wording you posted is from an older FF version or maybe an inaccurate language translation to English. Anyway, with the browser in focus, Ctrl+Alt+Shift+I will open up the browser debugger, you can then inspect elements of the UI, edit userChrome.css in real-time, and any changes will immediately work and persist for that browser session. If you use a userChrome.css file, that is inside a chrome folder, that is inside your profile folder, then any changes to That file will need a browser restart before the css works. I’ve included a screenshot to visualize what goes where, it can be confusing. I’ve been using a userChrome.css file since FF v3 and still feel like a newbie most of the time. https://s26.postimg.org/dexvwo7pl/user_Chrome.css_file_inside_chrome_folder.png

        Appreciate the code, added to the collection. ;)

      4. Django said on September 8, 2017 at 4:07 pm
        Reply

        The following CSS makes it more compact, so it looks exactly as if you removed text manually from bookmarks :

        @namespace url(http: //www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

        .bookmark-item > .toolbarbutton-text {
        display: none !important;
        }

        .bookmark-item > .toolbarbutton-icon {
        margin-inline-end: 0px !important;
        }

        Note: To apply changes to userChrome.css, a browser restart is needed.

        Modifying Firefox CSS is almost as easy as using uBlock Origin’s element picker, if you want an idea. It relies on DevTools inspector with a couple options enabled so it can inspect Firefox UI too.

        Inspector can be accessed with F12, the options can be accessed from there by clicking on the cog wheel to the right, and they are “Activate distant debugging” and “Activate chrome debugging (…)”. Then open the “super inspector” with CTRL+ALT+SHIFT+I and from there you should be in familiar territory if you know the regular inspector.

      5. Martin Brinkmann said on September 8, 2017 at 6:11 pm
        Reply

        Thank you for the code, really useful.

  9. PD said on September 8, 2017 at 1:48 pm
    Reply

    Why would they release such a junk design, even in beta? Eeeediots.

  10. TelV said on September 8, 2017 at 1:37 pm
    Reply

    If they’re going to be added in a later version, what purpose do they serve? I can’t imagine Mozilla adding something to Firefox just for decoration.

  11. Gerard said on September 8, 2017 at 1:04 pm
    Reply

    I use Firefox 55 for Linux and don’t have these whitespaces on the left and right side of the address bar.

    1. Martin Brinkmann said on September 8, 2017 at 1:16 pm
      Reply

      I think it is coming in version 56, I added beta to the first sentence to make that clearer.

      1. Jody Thornton said on September 9, 2017 at 9:21 am
        Reply

        @WaltS48

        I think Photon features can be enabled in v56 (at least it was in Nightly) using an about:config setting. I’d have to go look it up. But the Photon layout was more refined in v57 Nightly.
        :)

      2. Mozillaboresme said on September 9, 2017 at 7:38 am
        Reply

        dont Think Martin, it might break a Brain cell. but those white spaces are only in 57 an beyond, not in 56

      3. WaltS48 said on September 8, 2017 at 4:00 pm
        Reply

        The Photon redesign is coming in Firefox 57, which will be Beta in a few weeks.

        Firefox 56 will still have the Australis theme that everybody hated.

      4. Martin Brinkmann said on September 8, 2017 at 6:10 pm
        Reply

        Thanks for the info!

      5. Jody Thornton said on September 8, 2017 at 3:49 pm
        Reply

        Found it myself in 57 Nightly. I remember when you first showed the model screenshots for Photon, how everyone was worried a about it. It’s looking good if you ask me
        :)

Leave a Reply

Check the box to consent to your data being stored in line with the guidelines set out in our privacy policy

We love comments and welcome thoughtful and civilized discussion. Rudeness and personal attacks will not be tolerated. Please stay on-topic.
Please note that your comment may not appear immediately after you post it.