Sunday, August 22nd 2010

Move Tabs to Titlebar in Firefox 4

Edit: As of Firefox 4 beta 9, tabs will automatically move to the title bar when the window is maximized. So the following hack isn’t really needed any more …

Firefox 4 beta has moved the tabs up above the navigation bar, but not all the way up in the title bar where Chrome and Opera both have put them.

Firefox 4 beta with tabs on top.

Firefox 4 beta

Opera 10.6 with tabs in title bar.

Opera 10.6

Chrome 6 beta with tabs in title bar.

Chrome 6 beta

The hack

Now, the Firefox developers seem to be working on a fix for this, but in the mean time there’s a quick hack which lets you do this right now in your Firefox 4 beta.

First, locate (or create) your userChrome.css file.

Then add the following code:

#toolbar-menubar{
padding-left: 110px !important;
margin-right: 110px !important;
padding-top: 8px !important;
margin-top: -30px !important;
}

#appmenu-button-container{
position: fixed !important;
}

#navigator-toolbox[tabsontop="false"] #nav-bar{
margin-left: 108px !important;
margin-right: 140px !important;
padding-top: 12px !important;
}

#navigator-toolbox[tabsontop="true"] #TabsToolbar{
margin-left: 108px !important;
margin-right: 140px !important;
padding-top: 8px !important;

Edit 2: Thanks to dsid who posted this css code which seems to work with the latest nightlies and betas (as of 2010-09-10).

Firefox 4 beta with the tabs in the title bar.

This will make the tabs go all the way to the top of the window, which makes them very easy to target with your mouse when the window is maximized. (Since it doesn’t matter if you push your mouse outside the screen.) However, this means you can’t grab the window above the tabs to drag it. You can still grab it to the right of the tabs though. With the code above, there will always be an area next to the minimize-maximize-close-buttons which you can drag.

If you like, you can move the tabs down from the edge by increasing the padding-top values.

Hope you found this as useful as I did. Thanks to Gdgtry for the original code!

29 Responses to this post:

  1. jozepablo says:

    THANK YOU

  2. Niko P. says:

    beta 5pre+.


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

    #TabsToolbar
    {
    position: fixed;
    outline: 1px solid green;
    right: 0px;
    top: 5px;
    }
    #TabsToolbar>tabs
    {
    position: fixed;
    outline: 1px solid red;
    left: 80px;
    top: 8px;
    }

  3. David Naylor says:

    Niko, I couldn’t get that to work properly. And what’s with the outlines? :)

  4. David Naylor says:

    Or to be precise, your code seems to affect tab width …

  5. dirtyharry says:

    NikoP gave me this code at forums, it works, but I just noticed there is one problem. Menu bar opens (with Alt) under the Minefield button, next to tabs and goes partly under them.

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

    #TabsToolbar
    {
    margin-top: -22px;
    margin-left: 115px;
    margin-right: 115px;
    }

  6. krej says:

    I tried to do what dirty harry said in 4.ob5pre and it works but I can’t click on the Tab Candy button anymore. The button to the left of it works though.

    Is there anyway to get this to work and have tab candy still work?

  7. Rodalpho says:

    Yeah, that code works fine but buttons in the tab bar (like tab candy) are inaccessible and the menubar is obscured when you pop it up with the ALT key. Still, a major improvement, thank you NikoP.

  8. dsid says:

    whats the code to move nav bar on title bar

    #nav-bar{
    padding-left: 80px !important;
    margin-right: 105px !important;
    top: 3px !important;
    }

    also tried margin-top: 3px ….
    ait workin ether

  9. dsid says:

    when i i use position: fixed;
    it breakes

  10. dsid says:

    oke i asked around and got it
    this seems to be the best for moi

    #toolbar-menubar{
    padding-left: 85px !important;
    margin-right: 110px !important;
    padding-top: 3px !important;
    margin-top: -30px !important;
    }

    #appmenu-button-container{
    position: fixed !important;
    }

    #appmenu-button{
    padding: 3px 5px 3px 5px !important;
    height: 20px !important;
    background-color: rgba(54, 121, 166, 0.2) !important;
    }

    #navigator-toolbox[tabsontop="false"] #nav-bar{
    margin-left: 85px !important;
    margin-right: 110px !important;
    padding-top: 3px !important;
    }

    #navigator-toolbox[tabsontop="true"] #TabsToolbar{
    margin-left: 85px !important;
    margin-right: 110px !important;
    padding-top: 3px !important;

  11. David Naylor says:

    dsid, those values seem to cut the tabs at the top when the window is maximized. Personally I think these values work and look better:

    #toolbar-menubar{
    padding-left: 110px !important;
    margin-right: 110px !important;
    padding-top: 8px !important;
    margin-top: -30px !important;
    }

    #appmenu-button-container{
    position: fixed !important;
    }

    #navigator-toolbox[tabsontop="false"] #nav-bar{
    margin-left: 108px !important;
    margin-right: 140px !important;
    padding-top: 12px !important;
    }

    #navigator-toolbox[tabsontop="true"] #TabsToolbar{
    margin-left: 108px !important;
    margin-right: 140px !important;
    padding-top: 8px !important;

    This keeps the Firefox button the original size, and stops the tabs from being cut at the top. It also leaves 30 pixels of draggable area at the right.

  12. Mark says:

    I’ve made the selectors more specific to avoid problems when the menu bar is not hidden and/or tabs aren’t on top. Here’s my version:

    /*
    * Do not remove the @namespace line — it’s required for correct functioning
    */
    @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul); /* set default namespace to XUL */

    #appmenu-button-container{ position: fixed !important; }

    /* Taller orange #appmenu-button – it’s an important mouse target */
    #appmenu-button{ min-height: 18px !important; }

    /* Only narrow things when the #toolbar-menubar is hidden */
    #toolbar-menubar[autohide= rue]{
    padding-left: 110px !important;
    margin-right: 110px !important;
    padding-top: 8px !important;
    margin-top: -31px !important;
    background: transparent !important;
    }

    #toolbar-menubar[autohide= rue] #menubar-items { background: rgba(255,255,255,0.4) !important; }

    #navigator-toolbox[tabsontop= alse] #toolbar-menubar[autohide= rue] ~ #nav-bar{
    margin-left: 108px !important;
    margin-right: 140px !important;
    margin-top: -5px !important;
    padding-top: 8px !important;
    background-color: transparent !important;
    background-image: none !important;
    }

    #navigator-toolbox[tabsontop= rue] #toolbar-menubar[autohide= rue] ~ #TabsToolbar{
    margin-left: 108px !important;
    margin-right: 140px !important;
    padding-top: 8px !important;
    background-color: transparent !important;
    }

    #navigator-toolbox[tabsontop= rue] #toolbar-menubar[autohide= rue] ~ #TabsToolbar .tabbrowser-tab:not([selected=true]),
    #navigator-toolbox[tabsontop= rue] #toolbar-menubar[autohide= rue] ~ #TabsToolbar .tabs-newtab-button{
    background-image: -moz-linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.0)) !important;
    }

  13. Mark says:

    (note to readers – change rue back to true and alse back to false before using. The posting filter added that)

  14. ck.linux says:

    what if i can move title bar on left side.
    having all tabs on left side.
    so i can be benefited of my wide screen.

  15. ck.linux says:

    you can see such thing in windows xp or vista by putting taskbar on left or right side.
    or in gnome(linux) putting taskbar on left and right side.
    I dont know how to develop gnome or firefox.

    so posting here so that a good thing can be incorporated

  16. doninss says:

    Thanks Mark.

  17. Ken says:

    Mark’s nice code no longer works with 4beta8.

    The changelog for 4b8 includes some fixes for the titlebar, so not surprising.

    Also, this comment software does not include dates, so there is no way to know how recent – and therefore how relevant – the comments are…

  18. Max says:

    How can this be done in Firefox 3.6.13 including getting rid of the Firefox logo icon on the far left hand side please ? The same Minimize, Restore Down/Maximize, and Close buttons too please with a little bit of space on the left and right hand side so the tabs are not all the way on the edge of the window. If I want more title bar space as well but the tabs still in the title bar how do I add a little bit ? What I am basically looking for is a chrome like tabs in the title bar but not all the way. Chrome seems to always leave a little bit of room in the title bar but not much.

    I will not be surprised if no one replies. Think I am asking basically for to much. All I can do is try though.

  19. [...] means there is no need for hacks like this one any [...]

  20. Mathew says:

    After firefox beta9 came out they patched this one allredy. So if someone wants to go back the old style. Its way more convinient (spell right?) to get out of the big screen if to many tabs are oppend

    #toolbar-menubar{
    padding-left: 110px !important;
    margin-right: 110px !important;
    padding-top: 50px !important;
    margin-top: -40px !important;
    }

    #appmenu-button-container{
    position: fixed !important;
    }

    #navigator-toolbox[tabsontop="false"] #nav-bar{
    margin-left: 108px !important;
    margin-right: 140px !important;
    padding-top: 12px !important;
    }

    #navigator-toolbox[tabsontop="true"] #TabsToolbar{
    margin-left: 20px !important;
    margin-right: 140px !important;
    padding-top: 50px !important;

  21. neyel8r says:

    scrolling in the last few builds (b9+) of Minefield is way too slow & choppy for me. had to revert to b8, so thanks to everyone for the code!

    i did a bit of tinkering with it myself & this is what looks best to me:

    #toolbar-menubar{
    padding-left: 110px !important;
    margin-right: 110px !important;
    padding-top: 8px !important;
    margin-top: -30px !important;
    }

    #appmenu-button-container{
    position: fixed !important;
    }

    #appmenu-button{
    padding: 2px 5px 3px 5px !important;
    height: 22px !important;
    background-color: rgba(54, 121, 166, 0.2) !important;
    }

    #navigator-toolbox[tabsontop= alse] #nav-bar{
    margin-left: 108px !important;
    margin-right: 140px !important;
    padding-top: 12px !important;
    }

    #navigator-toolbox[tabsontop= rue] #TabsToolbar{
    margin-left: 83px !important;
    margin-right: 110px !important;
    padding-top: 8px !important;

  22. Max says:

    Well at least I proved myself right hehe.

  23. MK Safi says:

    Hey! I just wanted to say thank you for sharing this. This code is still useful even for Firefox 4 (final).

    I have a widescreen display and I have my browser’s window always at restore/non-maximized mode. The extra space at the titlebar is annoying and I don’t need it. Your code helped me get rid of it. So, thanks. And thanks to Mozilla for making Firefox so customizable — unlike the arrogant Chrome.

  24. MK Safi says:

    Oh, I actually just found out that when I maximize the window things get a little ugly…

    Can I have different CSS for when not maximized and when maximized?

  25. MK Safi says:

    I ended up using a different code:


    #appmenu-button .button-menu-dropmarker {
    display:none !important;
    }
    #main-window[sizemode=normal][tabsontop] #appmenu-button-container {
    position: fixed !important;
    z-index: 2 !important;
    }
    #main-window[sizemode=normal][tabsontop] #toolbar-menubar[autohide="true"]{
    margin-top:-14px;
    -moz-padding-start:70px!important;
    }
    #main-window[sizemode=normal] #navigator-toolbox[tabsontop] > #toolbar-menubar[autohide] ~ #TabsToolbar {
    -moz-padding-start:85px!important;
    -moz-padding-end:110px!important;
    }

    I found it here: http://userstyles.org/styles/42417/ff4-tabs-in-titlebar-in-restored-window

  26. David Naylor says:

    Glad to hear you sorted it out!

  27. [...] can consolidate it with a change to your userChrome.css file. Just paste in this code (courtesy of blogger David Naylor and his commenters): #main-window[sizemode=normal][tabsontop] #appmenu-button-container { position: fixed !important; [...]

  28. [...] can consolidate it with a change to your userChrome.css file. Just paste in this code (courtesy of blogger David Naylor and his commenters): #main-window[sizemode=normal][tabsontop] #appmenu-button-container { position: fixed !important; [...]

  29. [...] If you’ve moved the Firefox button as described above, you’ll notice your tabs don’t move up at all, you just have some wasted space on the title bar. You can consolidate it with a change to your userChrome.css file. Just paste in this code (courtesy of blogger David Naylor and his commenters): [...]