If you want to remove only the small expansion of the bar on new tab (or otherwise change the styling), you can use userChome.css. If you want to remove padding all the time, remove the ":not([open])" parts of the below.

/* based on https://old.reddit.com/comments/fwhlva//fmolndz */
#urlbar[breakout][breakout-extend]:not([open]) {
  top: calc((var(--urlbar-toolbar-height) - var(--urlbar-height)) / 2) !important;
  left: 0 !important;
  width: 100% !important;
}
#urlbar[breakout][breakout-extend]:not([open]) > #urlbar-input-container {
  height: var(--urlbar-height) !important;
  padding-block: 0px !important;
  padding-inline: 0px !important;
}
#urlbar[breakout][breakout-extend][breakout-extend-animate] > #urlbar-background {
  animation-name: none !important;
}
#urlbar[breakout][breakout-extend]:not([open]) > #urlbar-background {
  box-shadow: none !important;
}

(Source: https://bugzilla.mozilla.org/show_bug.cgi?id=1627861#c3)

If you've not used userChrome.css before, you'll need to enable it.

1. First, go to about:config, then set toolkit.legacyUserProfileCustomizations.stylesheets to true.
2. Open about:support, then click the "Open Folder" button under "Profile Folder"
3. Create a new directory called chrome.
4. Under the chrome directory, create a file called userChrome.css.

Add the rules specified above and restart Firefox.

If you want a more thoroughly modified address bar, userchrome.org now offers some interactive dropdowns where you can choose exactly how you want the bar to look, along with some screenshots showing you what it will look like.

The megabar pref browser.urlbar.update1 to allow going back to the old version of the bar will be removed entirely as of Firefox 77.

(Source: https://bugzilla.mozilla.org/show_bug.cgi?id=1627969)

The native way is to use the custom stylesheet in Firefox: userChrome.css

Firefox does not load userChrome.css by default in Firefox 69 and later. To make the custom stylesheet effective again, open about:config in Firefox and set the preference toolkit.legacyUserProfileCustomizations.stylesheets to true

Before this answer was updated, Mike G wrote a follow-up answer earlier.

How it works

The following code block is the content of userChrome.css that will hide the tab bar, navigation bar and scrollbars in Firefox. Ensure to use valid element names and IDs.

/*
 * 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 */

/*
 * Hide tab bar, navigation bar and scrollbars
 * !important may be added to force override, but not necessary
 * #content is not necessary to hide scroll bars
 */
#TabsToolbar {visibility: collapse;}
#navigator-toolbox {visibility: collapse;}
browser {margin-right: -14px; margin-bottom: -14px;}

Limitation: No keyboard shortcuts. Tedious to enable or disable on-demand.

• To restore the default interface, rename userChrome.css to other name like userChrome.tmp and restart Firefox to take effect.

• To use side by side with another instance of Firefox with default interface, use a separate profile.

All profiles are stored in the profile folder, which can be located from Firefox using menu bar or toolbar, then navigate to Help > Troubleshooting Information.

How to setup and use

The following are generic steps regardless of system platform.

1. Run Profile Manager of Firefox, then create a new profile named 'hidebars' (any name of choice) and close the Profile Manager.

2. Run a file manager and open the profile folder that was created in step 1.

3. Under the new profile folder, create new files chrome/userChrome.css including the parent folder chrome if does not exist.

4. Copy and paste the content of userChrome.css from above into the created file in step 3.

5. Finally, save and close the file.

To start using, run an instance of Firefox with the new profile.

The following screenshot combo shows Firefox Legacy (left) and Firefox Quantum on Linux, each browsing in small window size when the custom stylesheet is used.

Works with all releases of Firefox, except Firefox 69 and later now disregard userChrome.css by default. Tested with Firefox 10, 20, 50 (Firefox Legacy) and 60, 63, 69 (Firefox Quantum) on Linux and all seemed to work as expected.

References

• This answer by by user1929 on Firefox Support Forum mentioned #TabToolbar element name and ID for modifying tab bar.

• This custom file by Timvde on GitHub mentioned #navigator-toolbox element name and ID for modifying navigation bar.

• This answer by by cor-el on Firefox Support Forum mentioned #content browser element name and ID for modifying scrollbars.

• CSS overflow on w3schools to understand overflow is not necessary.

• CSS visibility Property on w3schools to understand value for visibility.

• What are the implications of using “!important” in CSS? on Stack Overflow to understand !important is not necessary.

• Firefox 60 broke hide scrollbar css and Hide Scrollbar Firefox 60 : FirefoxCSS on reddit.com both suggested to remove #content and leave only browser to properly hide the scollbar.

• Firefox 69: userChrome.css and userContent.css disabled by default on ghacks.net and PSA: Firefox v69 users will have to set a pref to enable userChrome.css and userContent.css on reddit.com both have noted a new preference toolkit.legacyUserProfileCustomizations.stylesheets in about:config.

Answerer's note: This answer was written two years later, only after I had suggested using add-ons in the first answer. Since then, several more answers based on userChrome.css were written instead of improving this answer. Hence this answer is now a community wiki, so that anyone with minimum reputation can improve this post to keep up with latest changes in Firefox.