--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@@ -459,16 +459,20 @@ pref("browser.tabs.loadBookmarksInBackgr
 pref("browser.tabs.loadBookmarksInTabs", false);
 pref("browser.tabs.tabClipWidth", 140);
 #ifdef UNIX_BUT_NOT_MAC
 pref("browser.tabs.drawInTitlebar", false);
 #else
 pref("browser.tabs.drawInTitlebar", true);
 #endif
 
+// Offer additional drag space to the user. The drag space
+// will only be shown if browser.tabs.drawInTitlebar is true.
+pref("browser.tabs.extraDragSpace", false);
+
 // 0 - Disable the tabbar session restore button.
 // 1 - Enable the tabbar session restore button.
 // 2 - Control group. The tabbar session restore button is disabled,
 // but we will record data on other session restore usage.
 // To be enabled with shield.
 pref("browser.tabs.restorebutton", 0);
 
 // When tabs opened by links in other tabs via a combination of

--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -1328,16 +1328,20 @@ var gBrowserInit = {
     // Certain kinds of automigration rely on this notification to complete
     // their tasks BEFORE the browser window is shown. SessionStore uses it to
     // restore tabs into windows AFTER important parts like gMultiProcessBrowser
     // have been initialized.
     Services.obs.notifyObservers(window, "browser-window-before-show");
 
     gUIDensity.init();
 
+    if (AppConstants.CAN_DRAW_IN_TITLEBAR) {
+      gDragSpaceObserver.init();
+    }
+
     let isResistFingerprintingEnabled = gPrefService.getBoolPref("privacy.resistFingerprinting");
 
     // Set a sane starting width/height for all resolutions on new profiles.
     if (isResistFingerprintingEnabled) {
       // When the fingerprinting resistance is enabled, making sure that we don't
       // have a maximum window to interfere with generating rounded window dimensions.
       document.documentElement.setAttribute("sizemode", "normal");
     } else if (!document.documentElement.hasAttribute("width")) {
@@ -1816,16 +1820,20 @@ var gBrowserInit = {
     gSync.uninit();
 
     gExtensionsNotifications.uninit();
 
     Services.obs.removeObserver(gPluginHandler.NPAPIPluginCrashed, "plugin-crashed");
 
     gUIDensity.uninit();
 
+    if (AppConstants.CAN_DRAW_IN_TITLEBAR) {
+      gDragSpaceObserver.uninit();
+    }
+
     try {
       gBrowser.removeProgressListener(window.XULBrowserWindow);
       gBrowser.removeTabsProgressListener(window.TabsProgressListener);
     } catch (ex) {
     }
 
     PlacesToolbarHelper.uninit();
 
@@ -5586,16 +5594,48 @@ var gTabletModePageCounter = {
     }
   },
 };
 
 function displaySecurityInfo() {
   BrowserPageInfo(null, "securityTab");
 }
 
+// Adds additional drag space to the window by listening to
+// the corresponding preference.
+var gDragSpaceObserver = {
+  pref: "browser.tabs.extraDragSpace",
+
+  init() {
+    this.update();
+    gPrefService.addObserver(this.pref, this);
+  },
+
+  uninit() {
+    gPrefService.removeObserver(this.pref, this);
+  },
+
+  observe(aSubject, aTopic, aPrefName) {
+    if (aTopic != "nsPref:changed" || aPrefName != this.pref) {
+      return;
+    }
+
+    this.update();
+  },
+
+  update() {
+    if (gPrefService.getBoolPref(this.pref)) {
+      document.documentElement.setAttribute("extradragspace", "true");
+    } else {
+      document.documentElement.removeAttribute("extradragspace");
+    }
+    TabsInTitlebar.updateAppearance(true);
+  },
+};
+
 // Updates the UI density (for touch and compact mode) based on the uidensity pref.
 var gUIDensity = {
   MODE_NORMAL: 0,
   MODE_COMPACT: 1,
   MODE_TOUCH: 2,
   uiDensityPref: "browser.uidensity",
   autoTouchModePref: "browser.touchmode.auto",
 

--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -86,29 +86,34 @@
   height: 22px; /* The native titlebar on OS X is 22px tall. */
 }
 
 /**
  * For tabs in titlebar on OS X, we stretch the titlebar down so that the
  * tabstrip can overlap it.
  */
 #main-window[tabsintitlebar] > #titlebar {
-  min-height: calc(var(--tab-min-height) - var(--tab-toolbar-navbar-overlap));
+  min-height: calc(var(--tab-min-height) + var(--space-above-tabbar) - var(--tab-toolbar-navbar-overlap));
 }
 
 /**
  * We also vertically center the window buttons.
  */
 #titlebar-buttonbox-container {
   -moz-box-align: start;
 }
 
 #main-window[tabsintitlebar] > #titlebar > #titlebar-content > #titlebar-buttonbox-container,
 #main-window[tabsintitlebar] > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > #titlebar-fullscreen-button {
-  margin-top: 6px;
+  /*
+   * To vertically center the window controls, we place them at half the
+   * height of the tabstrip ((tab height + drag space) / 2) - half the height
+   * of the window controls (16px / 2).
+   * */
+  margin-top: calc((var(--tab-min-height) + var(--space-above-tabbar)) / 2 - 8px);
 }
 
 #main-window:not([tabsintitlebar]) > #titlebar > #titlebar-content > #titlebar-buttonbox-container,
 #main-window:not([tabsintitlebar]) > #titlebar > #titlebar-content > #titlebar-secondary-buttonbox > #titlebar-fullscreen-button {
   margin-top: 3px;
 }
 
 /** End titlebar **/
@@ -897,16 +902,17 @@ html|span.ac-emphasize-text-url {
   -moz-appearance: toolbar;
 }
 
 #TabsToolbar:not(:-moz-lwtheme) {
   color: #333;
   text-shadow: @loweredShadow@;
 }
 
+#main-window[tabsintitlebar] > #titlebar:not(:-moz-lwtheme),
 :root:-moz-any([inFullscreen], [tabsintitlebar]) #TabsToolbar:not(:-moz-lwtheme) {
   -moz-appearance: -moz-mac-vibrancy-dark;
   background-color: #232323;
   color: hsl(240, 9%, 98%);
   text-shadow: none;
 }
 
 #tabbrowser-tabs {

--- a/browser/themes/shared/browser.inc.css
+++ b/browser/themes/shared/browser.inc.css
@@ -13,16 +13,25 @@
 %endif
 {
   padding-inline-start: 40px;
 }
 %endif
 
 %include downloads/indicator.inc.css
 
+:root {
+  /* Note: Setting this to 0 (without px) breaks CSS calculations for OSX. */
+  --space-above-tabbar: 0px;
+}
+
+:root[extradragspace][tabsintitlebar]:not([inFullscreen]) {
+  --space-above-tabbar: 8px;
+}
+
 /* Toolbar / content area border */
 
 #navigator-toolbox::after {
   content: "";
   display: -moz-box;
   border-bottom: 1px solid var(--toolbox-border-bottom-color);
 }
 

--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -517,21 +517,21 @@
      device pixels (bug 477157), so we also set a width to match the margin. */
   width: 1px;
   box-sizing: border-box;
   opacity: 0.2;
 }
 
 %ifdef CAN_DRAW_IN_TITLEBAR
 %ifdef MENUBAR_CAN_AUTOHIDE
-:root[tabsintitlebar] #toolbar-menubar[autohide=true] ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab::after,
-:root[tabsintitlebar] #toolbar-menubar[autohide=true] ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab::before
+:root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide=true] ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab::after,
+:root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide=true] ~ #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab::before
 %else
-:root[tabsintitlebar] .tabbrowser-tab::after,
-:root[tabsintitlebar] .tabbrowser-tab::before
+:root[tabsintitlebar]:not([extradragspace]) .tabbrowser-tab::after,
+:root[tabsintitlebar]:not([extradragspace]) .tabbrowser-tab::before
 %endif
 {
   border-image: none;
 }
 %endif
 
 /* Also show separators beside the selected tab when dragging it. */
 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,

--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -65,16 +65,21 @@
 }
 
 /* Hides the titlebar-placeholder underneath the window caption buttons when we
    are not autohiding the menubar. */
 #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-placeholder[type="caption-buttons"] {
   display: none;
 }
 
+:root[sizemode="normal"][chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
+:root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
+  margin-top: var(--space-above-tabbar);
+}
+
 #navigator-toolbox,
 #navigator-toolbox > toolbar {
   -moz-appearance: none;
 }
 
 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
   background-color: var(--toolbar-bgcolor);
   background-image: var(--toolbar-bgimage);