Backed out changeset 2ee25a7f42f2 (bug 1701990) for causing failures at browser_970511_undo_restore_default.js. CLOSED TREE

browser/app/profile/firefox.js

@@ -571,6 +571,10 @@ pref("browser.tabs.secondaryTextUnsupportedLocales", "ar,bn,bo,ckb,fa,gu,he,hi,j
 //Control the visibility of Tab Manager Menu.
 pref("browser.tabs.tabmanager.enabled", false);
 
+// 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);
+
 // When tabs opened by links in other tabs via a combination of
 // browser.link.open_newwindow being set to 3 and target="_blank" etc are
 // closed:

browser/base/content/browser-tabsintitlebar.js

@@ -3,93 +3,123 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-var TabsInTitlebar = {
-  init() {
-    this._readPref();
-    Services.prefs.addObserver(this._prefName, this);
+var TabsInTitlebar;
 
-    this._initialized = true;
-    this._update();
-  },
+{
+  // start private TabsInTitlebar scope
+  TabsInTitlebar = {
+    init() {
+      this._readPref();
+      Services.prefs.addObserver(this._prefName, this);
 
-  allowedBy(condition, allow) {
-    if (allow) {
-      if (condition in this._disallowed) {
-        delete this._disallowed[condition];
+      dragSpaceObserver.init();
+      this._initialized = true;
+      this._update();
+    },
+
+    allowedBy(condition, allow) {
+      if (allow) {
+        if (condition in this._disallowed) {
+          delete this._disallowed[condition];
+          this._update();
+        }
+      } else if (!(condition in this._disallowed)) {
+        this._disallowed[condition] = null;
         this._update();
       }
-    } else if (!(condition in this._disallowed)) {
-      this._disallowed[condition] = null;
-      this._update();
-    }
-  },
+    },
 
-  get systemSupported() {
-    let isSupported = false;
-    switch (AppConstants.MOZ_WIDGET_TOOLKIT) {
-      case "windows":
-      case "cocoa":
-        isSupported = true;
-        break;
-      case "gtk":
-        isSupported = window.matchMedia("(-moz-gtk-csd-available)").matches;
-        break;
-    }
-    delete this.systemSupported;
-    return (this.systemSupported = isSupported);
-  },
+    get systemSupported() {
+      let isSupported = false;
+      switch (AppConstants.MOZ_WIDGET_TOOLKIT) {
+        case "windows":
+        case "cocoa":
+          isSupported = true;
+          break;
+        case "gtk":
+          isSupported = window.matchMedia("(-moz-gtk-csd-available)").matches;
+          break;
+      }
+      delete this.systemSupported;
+      return (this.systemSupported = isSupported);
+    },
 
-  get enabled() {
-    return document.documentElement.getAttribute("tabsintitlebar") == "true";
-  },
+    get enabled() {
+      return document.documentElement.getAttribute("tabsintitlebar") == "true";
+    },
 
-  observe(subject, topic, data) {
-    if (topic == "nsPref:changed") {
-      this._readPref();
-    }
-  },
+    observe(subject, topic, data) {
+      if (topic == "nsPref:changed") {
+        this._readPref();
+      }
+    },
 
-  _initialized: false,
-  _disallowed: {},
-  _prefName: "browser.tabs.drawInTitlebar",
+    _initialized: false,
+    _disallowed: {},
+    _prefName: "browser.tabs.drawInTitlebar",
 
-  _readPref() {
-    let hiddenTitlebar = Services.prefs.getBoolPref(
-      "browser.tabs.drawInTitlebar",
-      window.matchMedia("(-moz-gtk-csd-hide-titlebar-by-default)").matches
-    );
-    this.allowedBy("pref", hiddenTitlebar);
-  },
+    _readPref() {
+      let hiddenTitlebar = Services.prefs.getBoolPref(
+        "browser.tabs.drawInTitlebar",
+        window.matchMedia("(-moz-gtk-csd-hide-titlebar-by-default)").matches
+      );
+      this.allowedBy("pref", hiddenTitlebar);
+    },
 
-  _update() {
-    if (!this._initialized) {
-      return;
-    }
+    _update() {
+      if (!this._initialized) {
+        return;
+      }
 
-    let allowed =
-      this.systemSupported &&
-      !window.fullScreen &&
-      !Object.keys(this._disallowed).length;
-    if (allowed) {
-      document.documentElement.setAttribute("tabsintitlebar", "true");
-      if (AppConstants.platform == "macosx") {
-        document.documentElement.setAttribute("chromemargin", "0,-1,-1,-1");
-        document.documentElement.removeAttribute("drawtitle");
+      let allowed =
+        this.systemSupported &&
+        !window.fullScreen &&
+        !Object.keys(this._disallowed).length;
+      if (allowed) {
+        document.documentElement.setAttribute("tabsintitlebar", "true");
+        if (AppConstants.platform == "macosx") {
+          document.documentElement.setAttribute("chromemargin", "0,-1,-1,-1");
+          document.documentElement.removeAttribute("drawtitle");
+        } else {
+          document.documentElement.setAttribute("chromemargin", "0,2,2,2");
+        }
       } else {
-        document.documentElement.setAttribute("chromemargin", "0,2,2,2");
+        document.documentElement.removeAttribute("tabsintitlebar");
+        document.documentElement.removeAttribute("chromemargin");
+        if (AppConstants.platform == "macosx") {
+          document.documentElement.setAttribute("drawtitle", "true");
+        }
       }
-    } else {
-      document.documentElement.removeAttribute("tabsintitlebar");
-      document.documentElement.removeAttribute("chromemargin");
-      if (AppConstants.platform == "macosx") {
-        document.documentElement.setAttribute("drawtitle", "true");
+
+      ToolbarIconColor.inferFromText("tabsintitlebar", allowed);
+    },
+
+    uninit() {
+      Services.prefs.removeObserver(this._prefName, this);
+      dragSpaceObserver.uninit();
+    },
+  };
+
+  // Adds additional drag space to the window by listening to
+  // the corresponding preference.
+  let dragSpaceObserver = {
+    pref: "browser.tabs.extraDragSpace",
+
+    init() {
+      Services.prefs.addObserver(this.pref, this);
+      this.observe();
+    },
+
+    uninit() {
+      Services.prefs.removeObserver(this.pref, this);
+    },
+
+    observe() {
+      if (Services.prefs.getBoolPref(this.pref)) {
+        document.documentElement.setAttribute("extradragspace", "true");
+      } else {
+        document.documentElement.removeAttribute("extradragspace");
       }
-    }
-
-    ToolbarIconColor.inferFromText("tabsintitlebar", allowed);
-  },
-
-  uninit() {
-    Services.prefs.removeObserver(this._prefName, this);
-  },
-};
+    },
+  };
+} // end private TabsInTitlebar scope

browser/base/content/browser.js

@@ -6499,6 +6499,13 @@ function setToolbarVisibility(
   };
   let event = new CustomEvent("toolbarvisibilitychange", eventParams);
   toolbar.dispatchEvent(event);
+
+  if (
+    toolbar.getAttribute("type") == "menubar" &&
+    CustomizationHandler.isCustomizing()
+  ) {
+    gCustomizeMode._updateDragSpaceCheckbox();
+  }
 }
 
 function updateToggleControlLabel(control) {

browser/components/customizableui/CustomizeMode.jsm

@@ -11,6 +11,7 @@ const kPaletteId = "customization-palette";
 const kDragDataTypePrefix = "text/toolbarwrapper-id/";
 const kSkipSourceNodePref = "browser.uiCustomization.skipSourceNodeCheck";
 const kDrawInTitlebarPref = "browser.tabs.drawInTitlebar";
+const kExtraDragSpacePref = "browser.tabs.extraDragSpace";
 const kCompactModeShowPref = "browser.compactmode.show";
 const kBookmarksToolbarPref = "browser.toolbars.bookmarks.visibility";
 const kKeepBroadcastAttributes = "keepbroadcastattributeswhencustomizing";
@@ -171,9 +172,12 @@ function CustomizeMode(aWindow) {
 
   if (this._canDrawInTitlebar()) {
     this._updateTitlebarCheckbox();
+    this._updateDragSpaceCheckbox();
     Services.prefs.addObserver(kDrawInTitlebarPref, this);
+    Services.prefs.addObserver(kExtraDragSpacePref, this);
   } else {
     this.$("customization-titlebar-visibility-checkbox").hidden = true;
+    this.$("customization-extra-drag-space-checkbox").hidden = true;
   }
 
   // Observe pref changes to the bookmarks toolbar visibility,
@@ -231,6 +235,7 @@ CustomizeMode.prototype = {
   uninit() {
     if (this._canDrawInTitlebar()) {
       Services.prefs.removeObserver(kDrawInTitlebarPref, this);
+      Services.prefs.removeObserver(kExtraDragSpacePref, this);
     }
     Services.prefs.removeObserver(kBookmarksToolbarPref, this);
   },
@@ -1810,6 +1815,7 @@ CustomizeMode.prototype = {
         this._updateUndoResetButton();
         if (this._canDrawInTitlebar()) {
           this._updateTitlebarCheckbox();
+          this._updateDragSpaceCheckbox();
         }
         break;
     }
@@ -1859,9 +1865,40 @@ CustomizeMode.prototype = {
     }
   },
 
+  _updateDragSpaceCheckbox() {
+    let extraDragSpace = Services.prefs.getBoolPref(kExtraDragSpacePref);
+    let drawInTitlebar = Services.prefs.getBoolPref(
+      kDrawInTitlebarPref,
+      this.window.matchMedia("(-moz-gtk-csd-hide-titlebar-by-default)").matches
+    );
+    let menuBar = this.$("toolbar-menubar");
+    let menuBarEnabled =
+      menuBar &&
+      AppConstants.platform != "macosx" &&
+      menuBar.getAttribute("autohide") != "true";
+
+    let checkbox = this.$("customization-extra-drag-space-checkbox");
+    if (extraDragSpace) {
+      checkbox.setAttribute("checked", "true");
+    } else {
+      checkbox.removeAttribute("checked");
+    }
+
+    if (!drawInTitlebar || menuBarEnabled) {
+      checkbox.setAttribute("disabled", "true");
+    } else {
+      checkbox.removeAttribute("disabled");
+    }
+  },
+
   toggleTitlebar(aShouldShowTitlebar) {
     // Drawing in the titlebar means not showing the titlebar, hence the negation:
     Services.prefs.setBoolPref(kDrawInTitlebarPref, !aShouldShowTitlebar);
+    this._updateDragSpaceCheckbox();
+  },
+
+  toggleDragSpace(aShouldShowDragSpace) {
+    Services.prefs.setBoolPref(kExtraDragSpacePref, aShouldShowDragSpace);
   },
 
   _getBoundsWithoutFlushing(element) {

browser/components/customizableui/content/customizeMode.inc.xhtml

@@ -29,6 +29,9 @@
 # NB: because oncommand fires after click, by the time we've fired, the checkbox binding
 #    will already have switched the button's state, so this is correct:
           oncommand="gCustomizeMode.toggleTitlebar(this.checked)" data-l10n-id="customize-mode-titlebar"/>
+<checkbox id="customization-extra-drag-space-checkbox" class="customizationmode-checkbox"
+          data-l10n-id="customize-mode-extra-drag-space"
+          oncommand="gCustomizeMode.toggleDragSpace(this.checked)"/>
 <button id="customization-toolbar-visibility-button" class="customizationmode-button" type="menu" data-l10n-id="customize-mode-toolbars">
   <menupopup id="customization-toolbar-menu" onpopupshowing="onViewToolbarsPopupShowing(event)"/>
 </button>

browser/components/customizableui/test/browser.ini

@@ -143,6 +143,8 @@ skip-if = verify
 [browser_currentset_post_reset.js]
 [browser_customizemode_contextmenu_menubuttonstate.js]
 skip-if = os == "win" && bits == 64 # 1526429
+[browser_customizemode_dragspace.js]
+skip-if = os == "linux" # linux doesn't get drag space (no tabsintitlebar)
 [browser_customizemode_uidensity.js]
 [browser_disable_commands_customize.js]
 [browser_drag_outside_palette.js]

browser/components/customizableui/test/browser_customizemode_dragspace.js

@@ -0,0 +1,137 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const PREF_DRAG_SPACE = "browser.tabs.extraDragSpace";
+
+add_task(async function setup() {
+  await startCustomizing();
+});
+
+add_task(async function test_dragspace_checkbox() {
+  let win = document.getElementById("main-window");
+  let checkbox = document.getElementById(
+    "customization-extra-drag-space-checkbox"
+  );
+  is(
+    Services.prefs.getBoolPref(PREF_DRAG_SPACE),
+    false,
+    "Drag space is disabled initially."
+  );
+  ok(!checkbox.checked, "Checkbox state reflects disabled drag space.");
+
+  let dragSpaceEnabled = BrowserTestUtils.waitForAttribute(
+    "extradragspace",
+    win,
+    "true"
+  );
+  EventUtils.synthesizeMouseAtCenter(checkbox, {});
+  await dragSpaceEnabled;
+  is(
+    Services.prefs.getBoolPref(PREF_DRAG_SPACE),
+    true,
+    "Drag space is enabled."
+  );
+
+  EventUtils.synthesizeMouseAtCenter(checkbox, {});
+  await BrowserTestUtils.waitForCondition(
+    () => !win.hasAttribute("extradragspace")
+  );
+  is(
+    Services.prefs.getBoolPref(PREF_DRAG_SPACE),
+    false,
+    "Drag space is disabled."
+  );
+});
+
+add_task(async function test_dragspace_checkbox_disable() {
+  let dragSpaceCheckbox = document.getElementById(
+    "customization-extra-drag-space-checkbox"
+  );
+  let titleBarCheckbox = document.getElementById(
+    "customization-titlebar-visibility-checkbox"
+  );
+
+  ok(!titleBarCheckbox.checked, "Title bar is disabled initially.");
+  ok(
+    !dragSpaceCheckbox.hasAttribute("disabled"),
+    "Drag space checkbox is enabled initially."
+  );
+
+  let checkboxDisabled = BrowserTestUtils.waitForAttribute(
+    "disabled",
+    dragSpaceCheckbox,
+    "true"
+  );
+  EventUtils.synthesizeMouseAtCenter(titleBarCheckbox, {});
+  await checkboxDisabled;
+  info("Checkbox was disabled!");
+
+  EventUtils.synthesizeMouseAtCenter(titleBarCheckbox, {});
+  await BrowserTestUtils.waitForCondition(
+    () => !dragSpaceCheckbox.hasAttribute("disabled")
+  );
+  info("Checkbox was enabled!");
+});
+
+add_task(async function test_dragspace_reset() {
+  let win = document.getElementById("main-window");
+  let checkbox = document.getElementById(
+    "customization-extra-drag-space-checkbox"
+  );
+  is(
+    Services.prefs.getBoolPref(PREF_DRAG_SPACE),
+    false,
+    "Drag space is disabled initially."
+  );
+  ok(!checkbox.checked, "Checkbox state reflects disabled drag space.");
+
+  // Enable dragspace manually.
+  let dragSpaceEnabled = BrowserTestUtils.waitForAttribute(
+    "extradragspace",
+    win,
+    "true"
+  );
+  EventUtils.synthesizeMouseAtCenter(checkbox, {});
+  await dragSpaceEnabled;
+  is(
+    Services.prefs.getBoolPref(PREF_DRAG_SPACE),
+    true,
+    "Drag space is enabled."
+  );
+
+  // Disable dragspace through reset.
+  await gCustomizeMode.reset();
+  await BrowserTestUtils.waitForCondition(
+    () => !win.hasAttribute("extradragspace")
+  );
+  is(
+    Services.prefs.getBoolPref(PREF_DRAG_SPACE),
+    false,
+    "Drag space is disabled."
+  );
+
+  // Undo reset and check that dragspace is enabled again.
+  dragSpaceEnabled = BrowserTestUtils.waitForAttribute(
+    "extradragspace",
+    win,
+    "true"
+  );
+  await gCustomizeMode.undoReset();
+  await dragSpaceEnabled;
+  is(
+    Services.prefs.getBoolPref(PREF_DRAG_SPACE),
+    true,
+    "Drag space is enabled."
+  );
+
+  Services.prefs.clearUserPref(PREF_DRAG_SPACE);
+});
+
+add_task(async function cleanup() {
+  await endCustomizing();
+
+  Services.prefs.clearUserPref(PREF_DRAG_SPACE);
+});

browser/docs/BrowserUsageTelemetry.rst

@@ -41,6 +41,7 @@ For the purposes of this telemetry a set of areas are defined:
 
   * ``menu-bar`` - The main menu.
   * ``menu-toolbar`` - The normally hidden toolbar that holds the main menu.
+  * ``drag-space`` - The optional drag space.
   * ``titlebar`` - The optional title bar.
   * ``tabs-bar`` - The area where tabs are displayed.
   * ``bookmarks-bar`` - The bookmarks toolbar.

browser/locales/en-US/browser/customizeMode.ftl

@@ -23,6 +23,8 @@ customize-mode-uidensity-menu-touch =
     .tooltiptext = Touch
 customize-mode-uidensity-auto-touch-mode-checkbox =
     .label = Use Touch for Tablet Mode
+customize-mode-extra-drag-space =
+    .label = Drag Space
 customize-mode-lwthemes =
     .label = Themes
 customize-mode-overflow-list-description = Drag and drop items here to keep them within reach but out of your toolbar…

browser/modules/BrowserUsageTelemetry.jsm

@@ -448,6 +448,7 @@ let BrowserUsageTelemetry = {
     this._setupAfterRestore();
     this._inited = true;
 
+    Services.prefs.addObserver("browser.tabs.extraDragSpace", this);
     Services.prefs.addObserver("browser.tabs.drawInTitlebar", this);
 
     this._recordUITelemetry();
@@ -511,6 +512,15 @@ let BrowserUsageTelemetry = {
         break;
       case "nsPref:changed":
         switch (data) {
+          case "browser.tabs.extraDragSpace":
+            this._recordWidgetChange(
+              "drag-space",
+              Services.prefs.getBoolPref("browser.tabs.extraDragSpace")
+                ? "on"
+                : "off",
+              "pref"
+            );
+            break;
           case "browser.tabs.drawInTitlebar":
             this._recordWidgetChange(
               "titlebar",
@@ -617,6 +627,11 @@ let BrowserUsageTelemetry = {
 
     widgetMap.set("menu-toolbar", menuBarHidden ? "off" : "on");
 
+    widgetMap.set(
+      "drag-space",
+      Services.prefs.getBoolPref("browser.tabs.extraDragSpace") ? "on" : "off"
+    );
+
     // Drawing in the titlebar means not showing the titlebar, hence the negation.
     widgetMap.set(
       "titlebar",

browser/modules/test/browser/browser_UsageTelemetry_toolbars.js

@@ -79,6 +79,7 @@ function organizeToolbars(state = {}) {
       pageActionsInUrlBar: [],
 
       // Areas to show or hide.
+      dragSpaceVisible: false,
       titlebarVisible: false,
       menubarVisible: false,
       personalToolbarVisible: false,
@@ -111,6 +112,10 @@ function organizeToolbars(state = {}) {
     targetState.personalToolbarVisible
   );
 
+  Services.prefs.setBoolPref(
+    "browser.tabs.extraDragSpace",
+    !targetState.titlebarVisible && targetState.dragSpaceVisible
+  );
   Services.prefs.setBoolPref(
     "browser.tabs.drawInTitlebar",
     !targetState.titlebarVisible
@@ -164,6 +169,7 @@ add_task(async function widgetPositions() {
   BrowserUsageTelemetry._recordUITelemetry();
 
   assertVisibilityScalars([
+    "drag-space_pinned_off",
     "menu-toolbar_pinned_off",
     "titlebar_pinned_off",
     "bookmarks-bar_pinned_off",
@@ -197,12 +203,14 @@ add_task(async function widgetPositions() {
       "library-button",
     ],
 
+    dragSpaceVisible: true,
     personalToolbarVisible: true,
   });
 
   BrowserUsageTelemetry._recordUITelemetry();
 
   assertVisibilityScalars([
+    "drag-space_pinned_on",
     "menu-toolbar_pinned_off",
     "titlebar_pinned_off",
     "bookmarks-bar_pinned_on",
@@ -251,6 +259,7 @@ add_task(async function customizeMode() {
     BrowserUsageTelemetry._recordUITelemetry();
 
     assertVisibilityScalars([
+      "drag-space_pinned_off",
       "menu-toolbar_pinned_off",
       "titlebar_pinned_off",
       "bookmarks-bar_pinned_off",
@@ -372,6 +381,7 @@ add_task(async function contextMenus() {
     BrowserUsageTelemetry._recordUITelemetry();
 
     assertVisibilityScalars([
+      "drag-space_pinned_off",
       "menu-toolbar_pinned_off",
       "titlebar_pinned_off",
       "bookmarks-bar_pinned_off",
@@ -471,6 +481,7 @@ add_task(async function pageActions() {
     BrowserUsageTelemetry._recordUITelemetry();
 
     assertVisibilityScalars([
+      "drag-space_pinned_off",
       "menu-toolbar_pinned_off",
       "titlebar_pinned_off",
       "bookmarks-bar_pinned_off",
@@ -577,6 +588,7 @@ add_task(async function extensions() {
     BrowserUsageTelemetry._recordUITelemetry();
 
     assertVisibilityScalars([
+      "drag-space_pinned_off",
       "menu-toolbar_pinned_off",
       "titlebar_pinned_off",
       "bookmarks-bar_pinned_off",
@@ -603,6 +615,7 @@ add_task(async function extensions() {
     BrowserUsageTelemetry._recordUITelemetry();
 
     assertVisibilityScalars([
+      "drag-space_pinned_off",
       "menu-toolbar_pinned_off",
       "titlebar_pinned_off",
       "bookmarks-bar_pinned_off",
@@ -624,6 +637,7 @@ add_task(async function extensions() {
     BrowserUsageTelemetry._recordUITelemetry();
 
     assertVisibilityScalars([
+      "drag-space_pinned_off",
       "menu-toolbar_pinned_off",
       "titlebar_pinned_off",
       "bookmarks-bar_pinned_off",
@@ -671,6 +685,7 @@ add_task(async function extensions() {
     BrowserUsageTelemetry._recordUITelemetry();
 
     assertVisibilityScalars([
+      "drag-space_pinned_off",
       "menu-toolbar_pinned_off",
       "titlebar_pinned_off",
       "bookmarks-bar_pinned_off",

browser/themes/linux/browser.css

@@ -439,7 +439,13 @@ menuitem.bookmark-item {
     height: var(--tab-min-height);
   }
   :root[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"] {
-    height: var(--tab-min-height);
+    height: calc(var(--tab-min-height) + var(--space-above-tabbar));
+  }
+
+  /* Add extra space to titlebar for dragging */
+  :root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items,
+  :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items {
+    padding-top: var(--space-above-tabbar);
   }
 
   /* Make #TabsToolbar transparent as we style underlying #titlebar with

browser/themes/osx/browser.css

@@ -570,6 +570,10 @@ moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left {
 }
 } /*** END !proton ***/
 
+#TabsToolbar > .toolbar-items {
+  padding-top: var(--space-above-tabbar);
+}
+
 @media not (-moz-proton) {
 #TabsToolbar:not(:-moz-lwtheme) {
   color: #333;

browser/themes/shared/browser.inc.css

@@ -14,6 +14,8 @@
   --toolbar-bgimage: var(--toolbar-non-lwt-bgimage);
   --toolbar-color: var(--toolbar-non-lwt-textcolor);
 
+  /* Note: Setting this to 0 (without px) breaks CSS calculations for OSX. */
+  --space-above-tabbar: 0px;
   --tabs-navbar-shadow-size: 1px;
 
   --panelui-subview-transition-duration: 150ms;
@@ -111,6 +113,10 @@
 }
 } /*** END proton ***/
 
+:root[extradragspace][tabsintitlebar]:not([inFullscreen]) {
+  --space-above-tabbar: 8px;
+}
+
 @media (min-resolution: 1.5dppx) {
   :root {
     --tabs-navbar-shadow-size: 0.5px;

browser/themes/shared/tabs.inc.css

@@ -766,14 +766,16 @@
 %ifdef MENUBAR_CAN_AUTOHIDE
 #toolbar-menubar:not([autohide=true]) + #TabsToolbar,
 %endif
-:root:not([tabsintitlebar]) {
+:root:not([tabsintitlebar]),
+:root[extradragspace] {
   --tabs-top-border-width: 1px;
 }
 
 %ifdef MENUBAR_CAN_AUTOHIDE
 #toolbar-menubar:not([autohide=true]) + #TabsToolbar .tabbrowser-tab > .tab-stack > .tab-background,
 %endif
-:root:not([tabsintitlebar]) .tab-background {
+:root:not([tabsintitlebar]) .tab-background,
+:root[extradragspace] .tab-background {
   border-top-style: solid;
 }
 } /*** END !proton ***/
@@ -962,9 +964,9 @@
 }
 
 %ifdef MENUBAR_CAN_AUTOHIDE
-:root[tabsintitlebar] #toolbar-menubar[autohide=true] + #TabsToolbar .tabbrowser-tab::after,
+:root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide=true] + #TabsToolbar .tabbrowser-tab::after,
 %else
-:root[tabsintitlebar] .tabbrowser-tab::after,
+:root[tabsintitlebar]:not([extradragspace]) .tabbrowser-tab::after,
 %endif
 /* Show full height tab separators on hover and multiselection. */
 .tabbrowser-tab:hover::after,

browser/themes/windows/browser.css

@@ -112,16 +112,21 @@
       height: calc(var(--tab-min-height) - var(--tabs-navbar-shadow-size));
     }
     :root[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"] {
-      height: calc(var(--tab-min-height) - var(--tabs-navbar-shadow-size));
+      height: calc(var(--tab-min-height) + var(--space-above-tabbar) - var(--tabs-navbar-shadow-size));
     }
   }
 }
 
+:root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items,
+:root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items {
+  padding-top: var(--space-above-tabbar);
+}
+
 /* Add 4px extra margin on top of the tabs toolbar on Windows 7. */
 @media (-moz-os-version: windows-win7) {
   :root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items,
   :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items {
-    padding-top: 4px;
+    padding-top: calc(var(--space-above-tabbar) + 4px);
   }
 }