How to merge the URL bar and the tabs toolbar

Easy way:
Use either of these:
Mozilla Labs: Prospector - OneLiner
https://addons.mozilla.org/en-US/firefox/addon/prospector-oneLiner
Line
https://addons.mozilla.org/en-US/firefox/addon/line-1
Both do the same thing, but the latter has configuration options... and might cause interface glitches under circumstances unknown to me. Perhaps it'll work for you. Note that the merged bar will not disappear in full screen mode (F11), you can only remove it the hard way. HTML5 and Flash full screen will work properly so you might be fine with that.

Medium difficulty way:
Install the CSS below via Stylish, and if necessary, search the CSS for "url bar width" and "tabs toolbar left margin" and adjust to make it fit your other stuff. Note that fullscreen (F11) will look weird - the URL bar will stay visible.

Hard way:
Install the same CSS, plus the CSS-fix, plus the keyconfig extension, plus FireGestures (only if you want to use mouse gestures and are using an extension other than FireGestures).
keyconfig
http://mozilla.dorando.at/keyconfig.xpi
FireGestures
https://addons.mozilla.org/en-US/firefox/addon/firegestures

After that, open the CSS-fix in Stylish and see its style ID in the URL bar. Should be like that:

about:stylish-edit?id=20

Go to Add-ons manager, find keyconfig on the list of addons and press Options. Find the F11 (Full screen) key and press Disable (unless you want to set some other key to launch the script below). Press Add a new key and paste this code:

(function(){
var id = [20]; //replace with your style's ID
var service = Components.classes["@userstyles.org/style;1"].getService(Components.interfaces.stylishStyle)
for (var i=0; i < id.length; i++){
var style = service.find(id[i], service.REGISTER_STYLE_ON_CHANGE);
style.enabled = !style.enabled;
style.save();
BrowserFullScreen();
}
View:FullScreen;
})();

Do not forget to put your style's ID. Assign it to F11 or anywhere you want. Save the new hotkey. If you want to make a mouse gesture in FireGestures, go to Options - Mapping - Add Script and paste the same code there.

The CSS-fix:

@namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
    #nav-bar {
        width: 0 !important; height: 0 !important;
        position: fixed !important; left: -1px !important; top: -1px !important;
        overflow: hidden !important; visibility: hidden !important;}
   #TabsToolbar, #tabbrowser-tabs {
        -moz-appearance: none !important;
        margin-left: 0px !important;}

The CSS itself:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
/*Offset the tabs toolbar to free up some space for the URL bar*/
#TabsToolbar, #tabbrowser-tabs {
        -moz-appearance: none !important;
        height: 24px !important; min-height: 24px!important;
        font-family: Verdana!important;
        margin: 0 0px !important;
        margin-left: 158px !important; /*tabs toolbar left margin*/

}
/*Ensure consistent text positioning in the tabs*/
.tabbrowser-tab .tab-text {
        margin-left: 0px !important;
        margin-right: 0px !important;
        margin-top: -7px !important;
        padding-top: 0px !important;
/*        font-size: 16px !important;  */
}
/*Put URL bar in the space*/
#nav-bar {
        position: fixed !important; top: 1px !important; left: 0 !important;
        width: 338px !important; min-width: 338px !important; max-width: 338px !important;/*url bar width*/
        z-index: 100 !important;
/*        font-family: Verdana!important;*/
}
/*Hide some UI elements*/
@-moz-document url(chrome://browser/content/browser.xul) {
    #back-button, #forward-button, #back-button *, #forward-button *, #urlbar-reload-button, #urlbar-stop-button, #urlbar-go-button,
    /**/#PanelUI-button, /**/ #home-button,
    #notification-popup-box, #new-tab-button, #private-browsing-indicator, #search-container, #nav-bar-overflow-button,  .tab-close, .tab-throbber { display: none !important; }}