Bug 1385852 - Remove drag space above the tabs. r=jorgk
authorRichard Marti <richard.marti@gmail.com>
Mon, 31 Jul 2017 16:34:38 +0200
changeset 21864 045fa1d535b59654f4fa3ddbe01364ee51738db9
parent 21863 a6e0661213c93f7efdb3221e9190fb58718cabc0
child 21865 317ad7aa38be8274e207d0b2bdecdd2361a2e813
push id13350
push usermozilla@jorgk.com
push dateTue, 01 Aug 2017 10:02:17 +0000
treeherdercomm-central@045fa1d535b5 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjorgk
bugs1385852
Bug 1385852 - Remove drag space above the tabs. r=jorgk
mail/base/content/msgMail3PaneWindow.js
mail/base/jar.mn
mail/themes/osx/mail/messenger.css
mail/themes/shared/mail/tabmail.css
mail/themes/windows/mail/primaryToolbar.css
--- a/mail/base/content/msgMail3PaneWindow.js
+++ b/mail/base/content/msgMail3PaneWindow.js
@@ -12,16 +12,17 @@ Components.utils.import("resource:///mod
 Components.utils.import("resource:///modules/mailInstrumentation.js");
 Components.utils.import("resource:///modules/mailnewsMigrator.js");
 Components.utils.import("resource:///modules/mailServices.js");
 Components.utils.import("resource:///modules/msgDBCacheManager.js");
 Components.utils.import("resource:///modules/sessionStoreManager.js");
 Components.utils.import("resource:///modules/summaryFrameManager.js");
 Components.utils.import("resource:///modules/MailUtils.js");
 Components.utils.import("resource://gre/modules/Services.jsm");
+Components.utils.import("resource://gre/modules/AppConstants.jsm");
 Components.utils.import("resource://gre/modules/Color.jsm");
 
 /* This is where functions related to the 3 pane window are kept */
 
 // from MailNewsTypes.h
 var nsMsgKey_None = 0xFFFFFFFF;
 var nsMsgViewIndex_None = 0xFFFFFFFF;
 var kMailCheckOncePrefName = "mail.startup.enabledMailCheckOnce";
@@ -349,28 +350,28 @@ function OnLoadMessenger()
   migrateMailnews();
   // Rig up our TabsInTitlebar early so that we can catch any resize events.
   TabsInTitlebar.init();
   // update the pane config before we exit onload otherwise the user may see a flicker if we poke the document
   // in delayedOnLoadMessenger...
   UpdateMailPaneConfig(false);
   document.loadBindingDocument('chrome://global/content/bindings/textbox.xml');
 
-#ifdef XP_WIN
-  // On Win8 set an attribute when the window frame color is too dark for black text.
-  if (window.matchMedia("(-moz-os-version: windows-win8)").matches &&
-      window.matchMedia("(-moz-windows-default-theme)").matches) {
-    let windowFrameColor = new Color(...Cu.import("resource:///modules/Windows8WindowFrameColor.jsm", {})
-                                          .Windows8WindowFrameColor.get());
-    // Default to black for foreground text.
-    if (!windowFrameColor.isContrastRatioAcceptable(new Color(0, 0, 0))) {
-      document.documentElement.setAttribute("darkwindowframe", "true");
+  if (AppConstants.platform == "win") {
+    // On Win8 set an attribute when the window frame color is too dark for black text.
+    if (window.matchMedia("(-moz-os-version: windows-win8)").matches &&
+        window.matchMedia("(-moz-windows-default-theme)").matches) {
+      let windowFrameColor = new Color(...Cu.import("resource:///modules/Windows8WindowFrameColor.jsm", {})
+                                            .Windows8WindowFrameColor.get());
+      // Default to black for foreground text.
+      if (!windowFrameColor.isContrastRatioAcceptable(new Color(0, 0, 0))) {
+        document.documentElement.setAttribute("darkwindowframe", "true");
+      }
     }
   }
-#endif
 
   ToolbarIconColor.init();
 
   // Set a sane starting width/height for all resolutions on new profiles.
   // Do this before the window loads.
   if (!document.documentElement.hasAttribute("width"))
   {
     // Prefer 1024xfull height.
@@ -1655,79 +1656,78 @@ function InitPageMenu(menuPopup, event) 
   PageMenuParent.buildAndAddToPopup(menuPopup.triggerNode, menuPopup);
 
   if (menuPopup.children.length == 0)
     event.preventDefault();
 }
 
 var TabsInTitlebar = {
   init: function () {
-#ifdef CAN_DRAW_IN_TITLEBAR
-    // Don't trust the initial value of the sizemode attribute; wait for the
-    // resize event.
-    this._readPref();
-    Services.prefs.addObserver(this._drawInTitlePref, this, false);
-    Services.prefs.addObserver(this._autoHidePref, this, false);
+    if (AppConstants.CAN_DRAW_IN_TITLEBAR) {
+      // Don't trust the initial value of the sizemode attribute; wait for the
+      // resize event.
+      this._readPref();
+      Services.prefs.addObserver(this._drawInTitlePref, this, false);
+      Services.prefs.addObserver(this._autoHidePref, this, false);
 
-    this.allowedBy("sizemode", false);
-    window.addEventListener("resize", function (event) {
-      if (event.target != window)
-        return;
-      TabsInTitlebar.allowedBy("sizemode", true);
-    }, false);
+      this.allowedBy("sizemode", false);
+      window.addEventListener("resize", function (event) {
+        if (event.target != window)
+          return;
+        TabsInTitlebar.allowedBy("sizemode", true);
+      }, false);
 
-    // We need to update the appearance of the titlebar when the menu changes
-    // from the active to the inactive state. We can't, however, rely on
-    // DOMMenuBarInactive, because the menu fires this event and then removes
-    // the inactive attribute after an event-loop spin.
-    //
-    // Because updating the appearance involves sampling the heights and
-    // margins of various elements, it's important that the layout be more or
-    // less settled before updating the titlebar. So instead of listening to
-    // DOMMenuBarActive and DOMMenuBarInactive, we use a MutationObserver to
-    // watch the "invalid" attribute directly.
-    let menu = document.getElementById("mail-toolbar-menubar2");
-    this._menuObserver = new MutationObserver(this._onMenuMutate);
-    this._menuObserver.observe(menu, {attributes: true});
+      // We need to update the appearance of the titlebar when the menu changes
+      // from the active to the inactive state. We can't, however, rely on
+      // DOMMenuBarInactive, because the menu fires this event and then removes
+      // the inactive attribute after an event-loop spin.
+      //
+      // Because updating the appearance involves sampling the heights and
+      // margins of various elements, it's important that the layout be more or
+      // less settled before updating the titlebar. So instead of listening to
+      // DOMMenuBarActive and DOMMenuBarInactive, we use a MutationObserver to
+      // watch the "invalid" attribute directly.
+      let menu = document.getElementById("mail-toolbar-menubar2");
+      this._menuObserver = new MutationObserver(this._onMenuMutate);
+      this._menuObserver.observe(menu, {attributes: true});
 
-    let sizeMode = document.getElementById("messengerWindow");
-    this._sizeModeObserver = new MutationObserver(this._onSizeModeMutate);
-    this._sizeModeObserver.observe(sizeMode, {attributes: true});
+      let sizeMode = document.getElementById("messengerWindow");
+      this._sizeModeObserver = new MutationObserver(this._onSizeModeMutate);
+      this._sizeModeObserver.observe(sizeMode, {attributes: true});
 
-    this._initialized = true;
-#endif
+      this._initialized = true;
+    }
   },
 
   allowedBy: function (condition, allow) {
-#ifdef CAN_DRAW_IN_TITLEBAR
-    if (allow) {
-      if (condition in this._disallowed) {
-        delete this._disallowed[condition];
-        this._update(true);
-      }
-    } else {
-      if (!(condition in this._disallowed)) {
-        this._disallowed[condition] = null;
-        this._update(true);
+    if (AppConstants.CAN_DRAW_IN_TITLEBAR) {
+      if (allow) {
+        if (condition in this._disallowed) {
+          delete this._disallowed[condition];
+          this._update(true);
+        }
+      } else {
+        if (!(condition in this._disallowed)) {
+          this._disallowed[condition] = null;
+          this._update(true);
+        }
       }
     }
-#endif
   },
 
   updateAppearance: function updateAppearance(aForce) {
-#ifdef CAN_DRAW_IN_TITLEBAR
-    this._update(aForce);
-#endif
+    if (AppConstants.CAN_DRAW_IN_TITLEBAR) {
+      this._update(aForce);
+    }
   },
 
   get enabled() {
     return document.documentElement.getAttribute("tabsintitlebar") == "true";
   },
 
-#ifdef CAN_DRAW_IN_TITLEBAR
   observe: function (subject, topic, data) {
     if (topic == "nsPref:changed")
       this._readPref();
   },
 
   _onMenuMutate: function (aMutations) {
     for (let mutation of aMutations) {
       if (mutation.attributeName == "inactive" ||
@@ -1797,42 +1797,49 @@ var TabsInTitlebar = {
       document.documentElement.setAttribute("tabsintitlebar", "true");
       updateTitlebarDisplay();
 
       // Try to avoid reflows in this code by calculating dimensions first and
       // then later set the properties affecting layout together in a batch.
 
       // Get the full height of the tabs toolbar:
       let tabsToolbar = $("tabs-toolbar");
-      let fullTabsHeight = rect(tabsToolbar).height;
+      let tabsStyles = window.getComputedStyle(tabsToolbar);
+      let fullTabsHeight = rect(tabsToolbar).height + verticalMargins(tabsStyles);
       let gNavToolbox = $("navigation-toolbox");
       // Buttons first:
       let captionButtonsBoxWidth = rect($("titlebar-buttonbox")).width;
 
-#ifdef XP_MACOSX
-      let secondaryButtonWidth = rect($("titlebar-fullscreen-button")).width;
-#endif
-
-      // Get the height and margins separately for the menubar
-      let menuHeight = rect(menubar).height;
-      let menuStyles = window.getComputedStyle(menubar);
-      let fullMenuHeight = verticalMargins(menuStyles) + menuHeight;
-      let tabsStyles = window.getComputedStyle(tabsToolbar);
-      fullTabsHeight += verticalMargins(tabsStyles);
-
-      // If the #tabmail overlaps the tabbar using negative margins, we need to
-      // take those into account so we don't overlap it
-      let tabmailMarginTop = parseFloat(window.getComputedStyle($("tabmail")).marginTop);
-      tabmailMarginTop = Math.min(tabmailMarginTop, 0);
+      let secondaryButtonsWidth, menuHeight, fullMenuHeight, menuStyles;
+      if (AppConstants.platform == "macosx") {
+        secondaryButtonsWidth = rect($("titlebar-fullscreen-button")).width;
+        // No need to look up the menubar stuff on OS X:
+        menuHeight = 0;
+        fullMenuHeight = 0;
+      } else {
+        // Otherwise, get the height and margins separately for the menubar
+        menuHeight = rect(menubar).height;
+        menuStyles = window.getComputedStyle(menubar);
+        fullMenuHeight = verticalMargins(menuStyles) + menuHeight;
+      }
 
       // And get the height of what's in the titlebar:
       let titlebarContentHeight = rect(titlebarContent).height;
 
       // Begin setting CSS properties which will cause a reflow
 
+      if (AppConstants.isPlatformAndVersionAtLeast("win", "10.0")) {
+        if (!menuHeight && window.windowState == window.STATE_MAXIMIZED) {
+          titlebarContentHeight = Math.max(titlebarContentHeight, fullTabsHeight);
+          $("titlebar-buttonbox").style.height = titlebarContentHeight + "px";
+        } else {
+          $("titlebar-buttonbox").style.removeProperty("height");
+        }
+      }
+
       // If the menubar is around (menuHeight is non-zero), try to adjust
       // its full height (i.e. including margins) to match the titlebar,
       // by changing the menubar's bottom padding
       if (menuHeight) {
         // Calculate the difference between the titlebar's height and that of
         // the menubar
         let menuTitlebarDelta = titlebarContentHeight - fullMenuHeight;
         let paddingBottom;
@@ -1857,57 +1864,39 @@ var TabsInTitlebar = {
         }
       }
 
       // Next, we calculate how much we need to stretch the titlebar down to
       // go all the way to the bottom of the tab strip, if necessary.
       let tabAndMenuHeight = fullTabsHeight + fullMenuHeight;
 
       if (tabAndMenuHeight > titlebarContentHeight) {
-        // We need to increase the titlebar content's outer height
-        // (ie including margins) to match the tab and menu height:
+        // We need to increase the titlebar content's outer height (ie including
+        // margins) to match the tab and menu height:
         let extraMargin = tabAndMenuHeight - titlebarContentHeight;
-        // We need to reduce the height by the amount of navbar overlap
-        // (this value is 0 or negative):
-        extraMargin += tabmailMarginTop;
-        // On non-OSX, we can just use bottom margin:
-#ifndef XP_MACOSX
-        titlebarContent.style.marginBottom = extraMargin + "px";
-#endif
+        if (AppConstants.platform != "macosx") {
+          titlebarContent.style.marginBottom = extraMargin + "px";
+        }
         titlebarContentHeight += extraMargin;
       } else {
         titlebarContent.style.removeProperty("margin-bottom");
       }
 
-      // Then we bring up the titlebar by the same amount, but we add any
-      // negative margin:
-      titlebar.style.marginBottom = "-" + titlebarContentHeight + "px";
+      // Then add a negative margin to the titlebar, so that the following elements
+      // will overlap it by the greater of the titlebar height or the tabstrip+menu.
+      let maxTitlebarOrTabsHeight = Math.max(titlebarContentHeight, tabAndMenuHeight);
+      titlebar.style.marginBottom = "-" + maxTitlebarOrTabsHeight + "px";
 
       // Finally, size the placeholders:
-#ifdef XP_MACOSX
-      this._sizePlaceholder("fullscreen-button", secondaryButtonWidth);
-#endif
+      if (AppConstants.platform == "macosx") {
+        this._sizePlaceholder("fullscreen-button", secondaryButtonWidth);
+      }
 
       this._sizePlaceholder("caption-buttons", captionButtonsBoxWidth);
 
-      if (!this._draghandles) {
-        this._draghandles = {};
-        let tmp = {};
-        Components.utils.import("resource://gre/modules/WindowDraggingUtils.jsm", tmp);
-
-        let mouseDownCheck = function () {
-          return !this._dragBindingAlive && TabsInTitlebar.enabled;
-        };
-
-        this._draghandles.tabsToolbar = new tmp.WindowDraggingElement(tabsToolbar);
-        this._draghandles.tabsToolbar.mouseDownCheck = mouseDownCheck;
-
-        this._draghandles.navToolbox = new tmp.WindowDraggingElement(gNavToolbox);
-        this._draghandles.navToolbox.mouseDownCheck = mouseDownCheck;
-      }
     } else {
       document.documentElement.removeAttribute("tabsintitlebar");
       updateTitlebarDisplay();
 
       // Reset the margins and padding that might have been modified:
       titlebarContent.style.marginTop = "";
       titlebarContent.style.marginBottom = "";
       titlebar.style.marginBottom = "";
@@ -1916,65 +1905,61 @@ var TabsInTitlebar = {
 
     ToolbarIconColor.inferFromText();
   },
 
   _sizePlaceholder: function (type, width) {
     Array.from(document.querySelectorAll(".titlebar-placeholder[type='"+ type +"']"))
          .forEach(node => node.width = width);
   },
-#endif
 
   uninit: function () {
-#ifdef CAN_DRAW_IN_TITLEBAR
-    this._initialized = false;
-    Services.prefs.removeObserver(this._drawInTitlePref, this);
-    Services.prefs.removeObserver(this._autoHidePref, this);
-    this._menuObserver.disconnect();
-#endif
+    if (AppConstants.CAN_DRAW_IN_TITLEBAR) {
+      this._initialized = false;
+      Services.prefs.removeObserver(this._drawInTitlePref, this);
+      Services.prefs.removeObserver(this._autoHidePref, this);
+      this._menuObserver.disconnect();
+    }
   }
 };
 
-#ifdef CAN_DRAW_IN_TITLEBAR
-function updateTitlebarDisplay() {
-
-#ifdef XP_MACOSX
-    // OS X and the other platforms differ enough to necessitate this kind of
-    // special-casing. Like the other platforms where we CAN_DRAW_IN_TITLEBAR,
-    // we draw in the OS X titlebar when putting the tabs up there. However, OS X
-    // also draws in the titlebar when a lightweight theme is applied, regardless
-    // of whether or not the tabs are drawn in the titlebar.
-    if (TabsInTitlebar.enabled) {
-      document.documentElement.setAttribute("chromemargin-nonlwtheme", "0,2,2,2");
-      document.documentElement.setAttribute("chromemargin", "0,2,2,2");
-      document.documentElement.setAttribute("tabsintitlebar", "true");
+if (AppConstants.CAN_DRAW_IN_TITLEBAR) {
+  function updateTitlebarDisplay() {
+    if (AppConstants.platform == "macosx") {
+      // OS X and the other platforms differ enough to necessitate this kind of
+      // special-casing. Like the other platforms where we CAN_DRAW_IN_TITLEBAR,
+      // we draw in the OS X titlebar when putting the tabs up there. However, OS X
+      // also draws in the titlebar when a lightweight theme is applied, regardless
+      // of whether or not the tabs are drawn in the titlebar.
+      if (TabsInTitlebar.enabled) {
+        document.documentElement.setAttribute("chromemargin-nonlwtheme", "0,2,2,2");
+        document.documentElement.setAttribute("chromemargin", "0,2,2,2");
+        document.documentElement.setAttribute("tabsintitlebar", "true");
+      } else {
+        // We set chromemargin-nonlwtheme to "" instead of removing it as a way of
+        // making sure that LightweightThemeConsumer doesn't take it upon itself to
+        // detect this value again if and when we do a lwtheme state change.
+        document.documentElement.setAttribute("chromemargin-nonlwtheme", "");
+        let hasLWTheme = document.documentElement.hasAttribute("lwtheme");
+        if (hasLWTheme) {
+          document.documentElement.setAttribute("chromemargin", "0,2,2,2");
+        } else {
+          document.documentElement.removeAttribute("chromemargin");
+        }
+      }
     } else {
-      // We set chromemargin-nonlwtheme to "" instead of removing it as a way of
-      // making sure that LightweightThemeConsumer doesn't take it upon itself to
-      // detect this value again if and when we do a lwtheme state change.
-      document.documentElement.setAttribute("chromemargin-nonlwtheme", "");
-      let hasLWTheme = document.documentElement.hasAttribute("lwtheme");
-      if (hasLWTheme) {
-        document.documentElement.setAttribute("chromemargin", "0,2,2,2");
-      } else {
-        document.documentElement.removeAttribute("chromemargin");
-      }
-    }
+       document.getElementById("titlebar").hidden = !TabsInTitlebar.enabled;
 
-#else
-  document.getElementById("titlebar").hidden = !TabsInTitlebar.enabled;
-
-  if (TabsInTitlebar.enabled)
-    document.documentElement.setAttribute("chromemargin", "0,2,2,2");
-  else
-    document.documentElement.removeAttribute("chromemargin");
-
-#endif
+       if (TabsInTitlebar.enabled)
+         document.documentElement.setAttribute("chromemargin", "0,2,2,2");
+       else
+         document.documentElement.removeAttribute("chromemargin");
+    }
+  }
 }
-#endif
 
 /* Draw */
 function onTitlebarMaxClick() {
   if (window.windowState == window.STATE_MAXIMIZED)
     window.restore();
   else
     window.maximize();
 }
--- a/mail/base/jar.mn
+++ b/mail/base/jar.mn
@@ -31,17 +31,17 @@ messenger.jar:
     content/messenger/hiddenWindow.js               (content/hiddenWindow.js)
     content/messenger/msgHdrViewOverlay.js          (content/msgHdrViewOverlay.js)
     content/messenger/msgHdrViewOverlay.xul         (content/msgHdrViewOverlay.xul)
     content/messenger/msgViewNavigation.js          (content/msgViewNavigation.js)
     content/messenger/mailWidgets.xml               (content/mailWidgets.xml)
     content/messenger/nsDragAndDrop.js              (content/nsDragAndDrop.js)
     content/messenger/editContactOverlay.js         (content/editContactOverlay.js)
 *   content/messenger/editContactOverlay.xul        (content/editContactOverlay.xul)
-*   content/messenger/msgMail3PaneWindow.js         (content/msgMail3PaneWindow.js)
+    content/messenger/msgMail3PaneWindow.js         (content/msgMail3PaneWindow.js)
     content/messenger/mail3PaneWindowCommands.js    (content/mail3PaneWindowCommands.js)
     content/messenger/mailCommands.js               (content/mailCommands.js)
     content/messenger/mailCore.js                   (content/mailCore.js)
     content/messenger/customizeToolbarOverlay.xul   (content/customizeToolbarOverlay.xul)
     content/messenger/mailTabs.js                   (content/mailTabs.js)
     content/messenger/commandglue.js                (content/commandglue.js)
 *   content/messenger/SearchDialog.xul              (content/SearchDialog.xul)
     content/messenger/SearchDialog.js               (content/SearchDialog.js)
--- a/mail/themes/osx/mail/messenger.css
+++ b/mail/themes/osx/mail/messenger.css
@@ -34,17 +34,17 @@
                                     0 1px 1px hsla(0, 0%, 0%, .2) inset;
   --toolbarbutton-inactive-bordercolor: rgba(0, 0, 0, 0.1);
   --toolbarbutton-inactive-boxshadow: 0 1px 0 hsla(0, 0%, 0%, .05) inset;
   --toolbarbutton-checkedhover-backgroundcolor: hsla(0, 0%, 0%, .09);
 
   --lwt-header-image: none;
 }
 
-#titlebar {
+#messengerWindow:not([tabsintitlebar]) #titlebar {
   height: 22px;
 }
 
 @media (-moz-mac-yosemite-theme) {
   :root:-moz-window-inactive {
     --fgTabTexture: linear-gradient(transparent 2px, hsl(0, 0%, 99%) 2px, hsl(0, 0%, 97%));
   }
 
@@ -53,20 +53,16 @@
     border-bottom: solid 1px rgba(0, 0, 0, 0.2);
   }
 
   #tabmail:-moz-window-inactive {
     border-top-color: rgba(0, 0, 0, 0.05);
   }
 }
 
-#messengerWindow[tabsintitlebar="true"] #titlebar-content {
-  margin-bottom: 9px;
-}
-
 #messengerWindow:not([tabsintitlebar="true"]) >
 #titlebar:not(:-moz-lwtheme),
 #messengerWindow[sizemode="fullscreen"]:not([tabsintitlebar="true"]) >
 #titlebar {
   display: none;
 }
 
 #titlebar:-moz-lwtheme {
@@ -432,64 +428,56 @@ notification[type="critical"] .messageCl
 @media (min-resolution: 2dppx) {
   notification[type="critical"] .messageCloseButton:not(:hover) {
     -moz-image-region: rect(0, 128px, 32px, 96px);
   }
 }
 
 /* ::::: Tabs in Titlebar :::::: */
 
+#messengerWindow[tabsintitlebar="true"] > #titlebar {
+  min-height: 30px;
+}
+
 #messengerWindow[tabsintitlebar="true"]:not(:-moz-lwtheme) > #titlebar {
   -moz-appearance: -moz-window-titlebar;
 }
 
-#messengerWindow:not([tabsintitlebar]) #titlebar-buttonbox-container {
+#messengerWindow:not([tabsintitlebar]) > #titlebar > #titlebar-content > #titlebar-buttonbox-container {
   margin-top: 3px;
-  margin-inline-start: 7px;
 }
 
-#messengerWindow[tabsintitlebar="true"] #titlebar-buttonbox-container,
-#messengerWindow[tabsintitlebar="true"] #titlebar-fullscreen-button {
-  position: relative;
-  margin-top: 11px;
-  margin-bottom: 3px;
-  padding-bottom: 0px;
+#messengerWindow[tabsintitlebar] > #titlebar > #titlebar-content > #titlebar-buttonbox-container,
+#messengerWindow[tabsintitlebar] > #titlebar > #titlebar-content > #titlebar-fullscreen-button {
+  margin-top: 6px;
 }
 
-@media (-moz-mac-yosemite-theme) {
-  #messengerWindow[tabsintitlebar="true"][sizemode="fullscreen"] #titlebar-buttonbox-container,
-  #messengerWindow[tabsintitlebar="true"][sizemode="fullscreen"] #titlebar-fullscreen-button {
-    margin-top: 0px;
-    margin-bottom: 0px;
-    padding-bottom: 14px;
-  }
-}
-
-#messengerWindow[tabsintitlebar="true"] #titlebar-spacer {
+#titlebar-spacer {
   pointer-events: none;
 }
 
 #messengerWindow:not([tabsintitlebar]) .titlebar-placeholder {
   visibility: collapse;
 }
 
 /* NB: these would be margin-inline-start/end if it wasn't for the fact that OS X
  * doesn't reverse the order of the items in the titlebar in RTL mode. */
-#messengerWindow[tabsintitlebar="true"] .titlebar-placeholder[type="caption-buttons"],
-#messengerWindow[tabsintitlebar="true"] #titlebar-buttonbox {
+.titlebar-placeholder[type="caption-buttons"],
+#titlebar-buttonbox {
   margin-left: 7px;
 }
 
-#messengerWindow[tabsintitlebar="true"] .titlebar-placeholder[type="fullscreen-button"] {
+.titlebar-placeholder[type="fullscreen-button"],
+#titlebar-fullscreen-button {
   margin-right: 7px;
+  margin-left: 7px;
 }
 
 #titlebar-fullscreen-button {
   -moz-appearance: -moz-mac-fullscreen-button;
-  margin-right: 7px;
 }
 
 #titlebar-buttonbox {
   -moz-appearance: -moz-window-button-box;
 }
 
 /* Fullscreen and caption buttons don't move with RTL on OS X so override the automatic ordering. */
 #titlebar-fullscreen-button:-moz-locale-dir(ltr),
--- a/mail/themes/shared/mail/tabmail.css
+++ b/mail/themes/shared/mail/tabmail.css
@@ -27,16 +27,25 @@
   display: block;
   background-image: var(--tabBackgroundImage);
 }
 
 .tabmail-arrowscrollbox {
   margin-bottom: -1px;
 }
 
+.tabmail-tabs {
+  min-height: var(--tabHeight);
+}
+
+:root[tabsintitlebar][sizemode=normal] #mail-toolbar-menubar2[autohide=true] ~
+  #tabs-toolbar > #tabbar-toolbar {
+  padding-inline-start: 40px;
+}
+
 .tabmail-tab {
   -moz-appearance: none;
   -moz-box-align: stretch;
   background-color: transparent;
   border-radius: 0;
   border-width: 0;
   margin: 0;
   padding: 0;
--- a/mail/themes/windows/mail/primaryToolbar.css
+++ b/mail/themes/windows/mail/primaryToolbar.css
@@ -8,45 +8,43 @@
    == native-OS-style toolbars at the top of various windows, as well as
    == the specifically about the ones that appear on the 3-pane window and
    == the standalone message window.  The other native-OS-style toolbars
    == (addressbook and compose) are already styled elsewhere.
    ====================================================================== */
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
-/* We want a 4px gap between the tabs-toolbar and the mail-toolbar-menubar2
-   when the toolbar-menu is displayed, and a 16px gap when it is not. 1px is
-   taken care of by the (light) outer shadow of the tab, the remaining 3/15
-   are these margins. */
-#mail-toolbar-menubar2:not([autohide="true"]) ~ #tabs-toolbar,
-#mail-toolbar-menubar2[autohide="true"]:not([inactive]) ~ #tabs-toolbar {
-  margin-top: 3px;
-}
-
-#messengerWindow[tabsintitlebar][sizemode="normal"]
-#mail-toolbar-menubar2[autohide="true"][inactive] ~ #tabs-toolbar {
-  margin-top: 15px;
-}
-
 @media (-moz-windows-compositor: 0),
        (-moz-windows-default-theme: 0) {
+/* We want a 4px gap between the tabs-toolbar and the mail-toolbar-menubar2
+   when the toolbar-menu is displayed. 1px is taken care of by the (light)
+   outer shadow of the tab, the remaining 3 is these margins. */
+  #mail-toolbar-menubar2:not([autohide="true"]) ~ #tabs-toolbar,
+  #mail-toolbar-menubar2[autohide="true"]:not([inactive]) ~ #tabs-toolbar {
+    margin-top: 3px;
+  }
+
   #messengerWindow[tabsintitlebar] > #navigation-toolbox:not(:-moz-lwtheme) {
     color: CaptionText;
   }
 
   #messengerWindow[tabsintitlebar] > #navigation-toolbox:not(:-moz-lwtheme):-moz-window-inactive {
     color: InactiveCaptionText;
   }
 }
 
 #navigation-toolbox {
   -moz-appearance: none;
 }
 
+:root[sizemode="maximized"] #tabs-toolbar {
+  margin-top: -1px;
+}
+
 #tabs-toolbar {
   background-image: linear-gradient(to top, hsla(209, 67%, 12%, 0.35) 1px,
                                     transparent 1px);
 }
 
 @media (-moz-os-version: windows-win10) and (-moz-windows-default-theme) {
 
   #tabs-toolbar:not(:-moz-lwtheme) {
@@ -993,26 +991,16 @@ toolbar:not([mode="text"]) > toolbarpale
     height: 0;
     margin: 0 60px; /* (30px + 30px) from box-shadow */
     position: absolute;
     pointer-events: none;
     top: 50%;
     width: -moz-available;
     z-index: -1;
   }
-
-  #messengerWindow[tabsintitlebar][sizemode="normal"] > #navigation-toolbox >
-  #tabs-toolbar {
-    margin-top: 16px !important;
-  }
-
-  #messengerWindow[tabsintitlebar][sizemode="maximized"] > #navigation-toolbox >
-  #tabs-toolbar {
-    margin-top: 0 !important;
-  }
 }
 
 @media (-moz-os-version: windows-win7) and (-moz-windows-default-theme) {
   #appmenuSecondaryPane {
     --appMenu-bg-color: #f1f5fb;
     --appMenu-bg-box-shadow: rgb(204, 214, 234);
   }
 }