Bug 768516 - Add the ability for tabs to be moved into the titlebar on OS X. r=mconley,a=Standard8
authorJosiah Bruner <josiah@programmer.net>
Sat, 29 Mar 2014 17:48:27 -0400
changeset 18005 01be4135cb03f3a8f91e5f0871dec91bbf848e6e
parent 18004 a8c45c656654ad80c49dbb170d2ae6b51d87bd79
child 18006 bdc1746d44501bd349927a08790e78a73ac44bea
push id1209
push usermbanner@mozilla.com
push dateThu, 08 May 2014 08:45:08 +0000
treeherdercomm-aurora@876c363ab270 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersmconley, Standard8
bugs768516
Bug 768516 - Add the ability for tabs to be moved into the titlebar on OS X. r=mconley,a=Standard8
mail/base/content/messenger.xul
mail/base/content/msgMail3PaneWindow.js
mail/themes/osx/mail/messenger.css
--- a/mail/base/content/messenger.xul
+++ b/mail/base/content/messenger.xul
@@ -261,16 +261,19 @@
     <spacer id="titlebar-spacer" flex="1"/>
     <hbox id="titlebar-buttonbox-container" align="start">
       <hbox id="titlebar-buttonbox">
         <toolbarbutton class="titlebar-button" id="titlebar-min" oncommand="window.minimize();"/>
         <toolbarbutton class="titlebar-button" id="titlebar-max" oncommand="onTitlebarMaxClick();"/>
         <toolbarbutton class="titlebar-button" id="titlebar-close" oncommand="window.close()"/>
       </hbox>
     </hbox>
+#ifdef XP_MACOSX
+    <hbox id="titlebar-fullscreen-button"/>
+#endif
   </hbox>
 </vbox>
 #endif
 
   <!-- navigation-toolbox is augmented by mailWindowOverlay.xul -->
   <toolbox id="navigation-toolbox" class="toolbox-top">
 
     <toolbar id="tabs-toolbar" class="toolbar-primary">
@@ -306,17 +309,27 @@
                      id="alltabs-button"
                      type="menu"
                      tooltiptext="&listAllTabs.label;">
         <menupopup class="tabs-alltabs-popup"
                    id="alltabs-popup" position="after_end"
                    tabcontainer="tabcontainer"/>
       </toolbarbutton>
 #ifdef CAN_DRAW_IN_TITLEBAR
-      <hbox class="titlebar-placeholder" type="caption-buttons" ordinal="1000"/>
+      <hbox class="titlebar-placeholder" type="caption-buttons"
+            id="titlebar-placeholder-on-TabsToolbar-for-captions-buttons" persist="width"
+#ifndef XP_MACOSX
+            ordinal="1000"
+#endif
+            />
+#ifdef XP_MACOSX
+      <hbox class="titlebar-placeholder" type="fullscreen-button"
+            id="titlebar-placeholder-on-TabsToolbar-for-fullscreen-button" persist="width"
+            />
+#endif
 #endif
     </toolbar>
 
   </toolbox>
 
   <!-- XXX This extension point (tabmail-container) is only temporary!
        Horizontal space shouldn't be wasted if it isn't absolutely critical.
        A mechanism for adding sidebar panes will be added in bug 476154. -->
--- a/mail/base/content/msgMail3PaneWindow.js
+++ b/mail/base/content/msgMail3PaneWindow.js
@@ -1818,16 +1818,21 @@ let TabsInTitlebar = {
       // 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 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
@@ -1887,16 +1892,20 @@ let TabsInTitlebar = {
         titlebarContentHeight += extraMargin;
       }
 
       // Then we bring up the titlebar by the same amount, but we add any
       // negative margin:
       titlebar.style.marginBottom = "-" + titlebarContentHeight + "px";
 
       // Finally, size the placeholders:
+#ifdef XP_MACOSX
+      this._sizePlaceholder("fullscreen-button", secondaryButtonWidth);
+#endif
+
       this._sizePlaceholder("caption-buttons", captionButtonsBoxWidth);
 
       if (!this._draghandles) {
         this._draghandles = {};
         let tmp = {};
         Components.utils.import("resource://gre/modules/WindowDraggingUtils.jsm", tmp);
 
         let mouseDownCheck = function () {
@@ -1933,22 +1942,49 @@ let TabsInTitlebar = {
     Services.prefs.removeObserver(this._prefName, this);
     this._menuObserver.disconnect();
 #endif
   }
 };
 
 #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");
+    } 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
   document.getElementById("titlebar").hidden = !TabsInTitlebar.enabled;
 
   if (TabsInTitlebar.enabled)
     document.documentElement.setAttribute("chromemargin", "0,2,2,2");
   else
     document.documentElement.removeAttribute("chromemargin");
+
+#endif
 }
 #endif
 
 /* Draw */
 function onTitlebarMaxClick() {
   if (window.windowState == window.STATE_MAXIMIZED)
     window.restore();
   else
--- a/mail/themes/osx/mail/messenger.css
+++ b/mail/themes/osx/mail/messenger.css
@@ -8,24 +8,26 @@
 
 @import url("chrome://global/skin/");
 @import url("chrome://messenger/content/messenger.css");
 @import url("chrome://messenger/skin/shared/messenger.css");
 
 #titlebar {
   -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
   height: 22px;
-
-  /* Until we draw tabs in the titlebar on OS X we must
-   * force margin-bottom to be 0px.
-   */
-  margin-bottom: 0px !important;
 }
 
-#titlebar:not(:-moz-lwtheme) {
+#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 {
   -moz-appearance: none;
 }
 
 /* :::::: throbber :::::::::: */
@@ -128,8 +130,94 @@ notification[value="addon-install-comple
   border-color: rgba(60, 73, 97, 0.7);
 }
 
 @media (min-resolution: 2dppx) {
   notification[value="addon-install-failed"] .messageCloseButton {
     list-style-image: url("chrome://messenger/skin/icons/close-inverted@2x.png");
   }
 }
+
+/* ::::: Tabs in Titlebar :::::: */
+
+#messengerWindow[tabsintitlebar="true"]:not(:-moz-lwtheme) > #titlebar {
+  -moz-appearance: -moz-window-titlebar;
+}
+
+/* We modify the .tabs-alltabs-button to make it seem like a titlebar button */
+#messengerWindow[tabsintitlebar="true"]:not([sizemode="fullscreen"]) >
+  #navigation-toolbox > #tabs-toolbar  > .tabs-alltabs-button {
+  margin-bottom: 8px;
+  opacity: .8;
+}
+
+#messengerWindow[tabsintitlebar="true"]:not([sizemode="fullscreen"]) >
+  #navigation-toolbox > #tabs-toolbar  > .tabs-alltabs-button:hover {
+  opacity: 1;
+}
+
+#messengerWindow[tabsintitlebar="true"]:not([sizemode="fullscreen"]):-moz-window-inactive >
+  #navigation-toolbox > #tabs-toolbar  > .tabs-alltabs-button {
+  opacity: .5;
+}
+
+#messengerWindow[tabsintitlebar="true"] #titlebar-buttonbox-container,
+#messengerWindow[tabsintitlebar="true"] #titlebar-fullscreen-button {
+  position: relative;
+  margin-top: 11px;
+  margin-bottom: 3px;
+}
+
+#messengerWindow[tabsintitlebar="true"] #titlebar-spacer {
+  pointer-events: none;
+}
+
+/* NB: these would be -moz-margin-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 {
+  margin-left: 7px;
+}
+
+@media (-moz-mac-lion-theme) {
+  #messengerWindow[tabsintitlebar="true"] .titlebar-placeholder[type="fullscreen-button"] {
+    margin-right: 7px;
+  }
+
+  #titlebar-fullscreen-button {
+    -moz-appearance: -moz-mac-fullscreen-button;
+    margin-right: 7px;
+  }
+}
+
+#titlebar-buttonbox {
+  -moz-appearance: -moz-window-button-box;
+}
+
+/* Because these buttons don't move, they should always be aligned the same,
+ * left and right were deprecated, so we have to do work to get it to mean that: */
+#titlebar-buttonbox-container:-moz-locale-dir(ltr) {
+  -moz-box-align: start;
+}
+
+#titlebar-buttonbox-container:-moz-locale-dir(rtl) {
+  -moz-box-align: end;
+}
+
+/* Fullscreen and caption buttons don't move with RTL on OS X so override the automatic ordering. */
+#titlebar-fullscreen-button:-moz-locale-dir(ltr),
+#titlebar-buttonbox-container:-moz-locale-dir(rtl),
+.titlebar-placeholder[type="fullscreen-button"]:-moz-locale-dir(ltr),
+.titlebar-placeholder[type="caption-buttons"]:-moz-locale-dir(rtl) {
+  -moz-box-ordinal-group: 1000;
+}
+
+#titlebar-fullscreen-button:-moz-locale-dir(rtl),
+#titlebar-buttonbox-container:-moz-locale-dir(ltr),
+.titlebar-placeholder[type="caption-buttons"]:-moz-locale-dir(ltr),
+.titlebar-placeholder[type="fullscreen-button"]:-moz-locale-dir(rtl) {
+  -moz-box-ordinal-group: 0;
+}
+
+#messengerWindow[sizemode="fullscreen"] .titlebar-placeholder[type="fullscreen-button"],
+#messengerWindow[sizemode="fullscreen"] .titlebar-placeholder[type="caption-buttons"] {
+  display: none;
+}