Bug 1496752 - Part 1: Add optional drag space on top of the tabstrip. r=jorgk

mail/app/profile/all-thunderbird.js

@@ -477,6 +477,10 @@ pref("mail.tabs.drawInTitlebar", false);
 pref("mail.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("mail.tabs.extraDragSpace", false);
+
 // The breakpad report server to link to in about:crashes
 pref("breakpad.reportURL", "https://crash-stats.mozilla.com/report/index/");
 

mail/base/content/msgMail3PaneWindow.js

@@ -1785,6 +1785,8 @@ var TabsInTitlebar = {
     window.addEventListener("resolutionchange", this);
     window.addEventListener("resize", this);
 
+    gDragSpaceObserver.init();
+
     this._initialized = true;
     this.update();
   },
@@ -2065,6 +2067,7 @@ var TabsInTitlebar = {
 
   uninit() {
     this._initialized = false;
+    gDragSpaceObserver.uninit();
     Services.prefs.removeObserver(this._drawInTitlePref, this);
     Services.prefs.removeObserver(this._autoHidePref, this);
     this._menuObserver.disconnect();
@@ -2078,3 +2081,35 @@ function onTitlebarMaxClick() {
   else
     window.maximize();
 }
+
+// Adds additional drag space to the window by listening to
+// the corresponding preference.
+var gDragSpaceObserver = {
+  pref: "mail.tabs.extraDragSpace",
+
+  init() {
+    this.update();
+    Services.prefs.addObserver(this.pref, this);
+  },
+
+  uninit() {
+    Services.prefs.removeObserver(this.pref, this);
+  },
+
+  observe(aSubject, aTopic, aPrefName) {
+    if (aTopic != "nsPref:changed" || aPrefName != this.pref) {
+      return;
+    }
+
+    this.update();
+  },
+
+  update() {
+    if (Services.prefs.getBoolPref(this.pref)) {
+      document.documentElement.setAttribute("extradragspace", "true");
+    } else {
+      document.documentElement.removeAttribute("extradragspace");
+    }
+    TabsInTitlebar.update();
+  },
+};

mail/themes/linux/mail/messenger.css

@@ -132,6 +132,11 @@ toolbar[brighttext] {
     -moz-appearance: -moz-window-titlebar-maximized;
   }
 
+  /* Add extra space to titlebar for dragging */
+  :root[sizemode="normal"] #mail-toolbar-menubar2[autohide="true"][inactive] ~ #tabs-toolbar {
+    padding-top: var(--space-above-tabbar);
+  }
+
   /* Make #TabsToolbar transparent as we style underlying #titlebar with
       * -moz-window-titlebar (Gtk+ theme).
       */

mail/themes/osx/mail/messenger.css

@@ -570,8 +570,12 @@ notification[value="addon-install-complete"] > button:active:hover {
 
 /* ::::: Tabs in Titlebar :::::: */
 
-#messengerWindow[tabsintitlebar="true"] > #titlebar {
-  min-height: 30px;
+/**
+ * For tabs in titlebar on OS X, we stretch the titlebar down so that the
+ * tabstrip can overlap it.
+ */
+#messengerWindow[tabsintitlebar] > #titlebar {
+  min-height: calc(var(--tab-min-height) + var(--space-above-tabbar));
 }
 
 #messengerWindow[tabsintitlebar="true"]:not(:-moz-lwtheme) > #titlebar {

mail/themes/osx/mail/tabmail.css

@@ -8,6 +8,10 @@
  * Tabmail Tabs
  */
 
+#tabs-toolbar {
+  padding-top: var(--space-above-tabbar);
+}
+
 #tabs-toolbar:not(:-moz-lwtheme) {
   color: #333;
   text-shadow: 0 1px rgba(255, 255, 255, 0.4);
@@ -71,6 +75,12 @@
   box-shadow: var(--focus-ring-box-shadow);
 }
 
+:root[tabsintitlebar][extradragspace] .tabmail-tab::after,
+:root[tabsintitlebar][extradragspace] .tabmail-tab::before {
+  margin-top: 0;
+  margin-bottom: var(--tab-toolbar-overlap);
+}
+
 #tabmail-tabs {
   -moz-box-align: stretch;
   padding-left: 0;

mail/themes/shared/mail/messenger.css

@@ -11,6 +11,8 @@
   --autocomplete-popup-border-color: ThreeDShadow;
   --autocomplete-popup-highlight-background: Highlight;
   --autocomplete-popup-highlight-color: HighlightText;
+  /* Note: Setting this to 0 (without px) breaks CSS calculations for OSX. */
+  --space-above-tabbar: 0px;
 }
 
 :root:-moz-lwtheme {
@@ -26,6 +28,10 @@
   --urlbar-popup-action-color: #30e60b;
 }
 
+:root[extradragspace][tabsintitlebar]:not([inFullscreen]) {
+  --space-above-tabbar: 8px;
+}
+
 description.error {
   color: #f00;
 }

mail/themes/shared/mail/tabmail.css

@@ -116,11 +116,13 @@
   background-clip: padding-box;
 }
 
+:root[extradragspace],
 :root:not([tabsintitlebar]) #tabs-toolbar,
 #mail-toolbar-menubar2[toolbarname]:not([autohide=true]) ~ #tabs-toolbar {
   --tabs-top-border-width: 1px;
 }
 
+:root[extradragspace] .tab-background,
 :root:not([tabsintitlebar]) .tab-background,
 #mail-toolbar-menubar2[toolbarname]:not([autohide=true]) ~ #tabs-toolbar > #tabmail-tabs >
   .tabmail-tab > .tab-stack > .tab-background {
@@ -221,8 +223,10 @@
 .tabmail-tab:not([selected=true]):last-child:hover::after,
 .tabmail-tab:not([selected]) + .tabmail-tab:not([selected]):hover::before,
 .tabmail-tab:not([selected]):hover + .tabmail-tab:not([selected])::before,
-:root[tabsintitlebar] #mail-toolbar-menubar2[autohide=true] ~ #tabs-toolbar > #tabmail-tabs > .tabmail-tab::after,
-:root[tabsintitlebar] #mail-toolbar-menubar2[autohide=true] ~ #tabs-toolbar > #tabmail-tabs > .tabmail-tab::before {
+:root[tabsintitlebar]:not([extradragspace]) #mail-toolbar-menubar2[autohide=true] ~
+  #tabs-toolbar > #tabmail-tabs > .tabmail-tab::after,
+:root[tabsintitlebar]:not([extradragspace]) #mail-toolbar-menubar2[autohide=true] ~
+  #tabs-toolbar > #tabmail-tabs > .tabmail-tab::before {
   margin-top: var(--tabs-top-border-width);
   margin-bottom: var(--tab-toolbar-overlap);
 }

mail/themes/windows/mail/mailWindow1.css

@@ -147,6 +147,18 @@ treechildren::-moz-tree-cell-text(dummy) {
   visibility: collapse;
 }
 
+/* Add extra space to titlebar for dragging */
+:root[sizemode="normal"] #mail-toolbar-menubar2[autohide="true"][inactive] ~ #tabs-toolbar {
+  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"] #mail-toolbar-menubar2[autohide="true"][inactive] ~ #tabs-toolbar {
+    padding-top: calc(var(--space-above-tabbar) + 4px);
+  }
+}
+
 @media (-moz-windows-compositor) {
   @media (-moz-os-version: windows-win7),
          (-moz-os-version: windows-win8) {