Bug 1496752 - Part 1: Add optional drag space on top of the tabstrip. r=jorgk
authorRichard Marti <richard.marti@gmail.com>
Thu, 11 Oct 2018 22:20:31 +0200
changeset 33568 50a2faafdfbfebbf5291d0df17b8976b1d957a31
parent 33567 97c5ad955dd4cc7e162cc418af4248aff595a5ce
child 33569 c19d24ccbc89c18e37cff5005bf80ef505a17c2f
push id388
push userclokep@gmail.com
push dateMon, 28 Jan 2019 20:54:56 +0000
reviewersjorgk
bugs1496752
Bug 1496752 - Part 1: Add optional drag space on top of the tabstrip. r=jorgk
mail/app/profile/all-thunderbird.js
mail/base/content/msgMail3PaneWindow.js
mail/themes/linux/mail/messenger.css
mail/themes/osx/mail/messenger.css
mail/themes/osx/mail/tabmail.css
mail/themes/shared/mail/messenger.css
mail/themes/shared/mail/tabmail.css
mail/themes/windows/mail/mailWindow1.css
--- a/mail/app/profile/all-thunderbird.js
+++ b/mail/app/profile/all-thunderbird.js
@@ -472,16 +472,20 @@ pref("mail.tabs.closeButtons", 1);
 
 // Allow the tabs to be in the titlebar on supported systems
 #ifdef UNIX_BUT_NOT_MAC
 pref("mail.tabs.drawInTitlebar", false);
 #else
 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/");
 
 // OS Integrated Search and Indexing
 #ifdef XP_WIN
 pref("mail.winsearch.enable", false);
 pref("mail.winsearch.firstRunDone", false);
 #else
--- a/mail/base/content/msgMail3PaneWindow.js
+++ b/mail/base/content/msgMail3PaneWindow.js
@@ -1780,16 +1780,18 @@ var TabsInTitlebar = {
 
     let sizeMode = document.getElementById("messengerWindow");
     this._sizeModeObserver = new MutationObserver(this._onSizeModeMutate);
     this._sizeModeObserver.observe(sizeMode, {attributes: true});
 
     window.addEventListener("resolutionchange", this);
     window.addEventListener("resize", this);
 
+    gDragSpaceObserver.init();
+
     this._initialized = true;
     this.update();
   },
 
   allowedBy(condition, allow) {
     if (allow) {
       if (condition in this._disallowed) {
         delete this._disallowed[condition];
@@ -2060,21 +2062,54 @@ var TabsInTitlebar = {
 
   _sizePlaceholder(type, width) {
     Array.forEach(document.querySelectorAll(".titlebar-placeholder[type='" + type + "']"),
                   function(node) { node.style.width = width + "px"; });
   },
 
   uninit() {
     this._initialized = false;
+    gDragSpaceObserver.uninit();
     Services.prefs.removeObserver(this._drawInTitlePref, this);
     Services.prefs.removeObserver(this._autoHidePref, this);
     this._menuObserver.disconnect();
   }
 };
 
 /* Draw */
 function onTitlebarMaxClick() {
   if (window.windowState == window.STATE_MAXIMIZED)
     window.restore();
   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();
+  },
+};
--- a/mail/themes/linux/mail/messenger.css
+++ b/mail/themes/linux/mail/messenger.css
@@ -127,16 +127,21 @@ toolbar[brighttext] {
 
   :root[tabsintitlebar][sizemode="normal"] > #titlebar {
     -moz-appearance: -moz-window-titlebar;
   }
   :root[tabsintitlebar][sizemode="maximized"] > #titlebar {
     -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).
       */
   :root[tabsintitlebar] #tabs-toolbar,
   :root[tabsintitlebar] #mail-toolbar-menubar2 {
     -moz-appearance: none;
   }
 
--- a/mail/themes/osx/mail/messenger.css
+++ b/mail/themes/osx/mail/messenger.css
@@ -565,18 +565,22 @@ notification[value="addon-install-comple
   background-color: transparent;
   background-image: linear-gradient(rgba(45, 54, 71, 0.3),
                                     rgba(45, 54, 71, 0.1));
   border-color: rgba(60, 73, 97, 0.7);
 }
 
 /* ::::: 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 {
   -moz-appearance: -moz-window-titlebar;
 }
 
 #messengerWindow:not([tabsintitlebar]) .titlebar-placeholder {
   visibility: collapse;
--- a/mail/themes/osx/mail/tabmail.css
+++ b/mail/themes/osx/mail/tabmail.css
@@ -3,16 +3,20 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @import url("chrome://messenger/skin/shared/tabmail.css");
 
 /**
  * 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);
 }
 
 :root[tabsintitlebar][sizemode=normal] > #navigation-toolbox > #tabs-toolbar >
   #tabbar-toolbar {
   margin-inline-start: 40px;
@@ -66,16 +70,22 @@
 .tabmail-tab[selected="true"]:not(:-moz-lwtheme) {
   -moz-font-smoothing-background-color: var(--toolbar-bgcolor);
 }
 
 .tabmail-tab:focus > .tab-stack > .tab-content > .tab-label-container {
   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;
   padding-right: 0;
   margin-bottom: 0;
   position: static;
 }
 
--- a/mail/themes/shared/mail/messenger.css
+++ b/mail/themes/shared/mail/messenger.css
@@ -6,31 +6,37 @@
 @namespace html url("http://www.w3.org/1999/xhtml");
 
 :root {
   --autocomplete-popup-background: -moz-field;
   --autocomplete-popup-color: -moz-fieldtext;
   --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 {
   --toolbarbutton-icon-fill-opacity: 1;
   --autocomplete-popup-background: #fff;
   --autocomplete-popup-color: #0c0c0d;
   --urlbar-popup-url-color: hsl(210, 77%, 47%);
   --urlbar-popup-action-color: hsl(178, 100%, 28%);
 }
 
 :root[lwt-popup-brighttext] {
   --urlbar-popup-url-color: #0a84ff;
   --urlbar-popup-action-color: #30e60b;
 }
 
+:root[extradragspace][tabsintitlebar]:not([inFullscreen]) {
+  --space-above-tabbar: 8px;
+}
+
 description.error {
   color: #f00;
 }
 
 toolbar[printpreview="true"] {
   -moz-binding: url("chrome://global/content/printPreviewBindings.xml#printpreviewtoolbar");
 }
 
--- a/mail/themes/shared/mail/tabmail.css
+++ b/mail/themes/shared/mail/tabmail.css
@@ -111,21 +111,23 @@
 
 /* Selected tab */
 
 .tab-background {
   border: 1px none transparent;
   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 {
   border-top-style: solid;
 }
 
 .tab-background[selected=true] {
   border-top-color: var(--tabs-border-color);
@@ -216,18 +218,20 @@
 .tabmail-tab:last-child::after {
   margin-inline-end: -1px;
 }
 
 /* Show full height tab separators on hover. */
 .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);
 }
 
 /* Show full height tab separators on selected tabs. */
 .tabmail-tab[visuallyselected]::before,
 .tabmail-tab[visuallyselected]::after,
 .tabmail-tab[visuallyselected] + .tabmail-tab::before {
--- a/mail/themes/windows/mail/mailWindow1.css
+++ b/mail/themes/windows/mail/mailWindow1.css
@@ -142,16 +142,28 @@ treechildren::-moz-tree-cell-text(dummy)
 #messengerWindow[tabsintitlebar] .titlebar-placeholder[type="caption-buttons"] {
   margin-inline-start: 10px; /* additional space for Aero Snap */
 }
 
 #messengerWindow:not([tabsintitlebar]) .titlebar-placeholder {
   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) {
     :root {
       -moz-appearance: -moz-win-borderless-glass;
       background-color: transparent;
     }