Bug 990218 - Simplify OS X's titlebar styling rules for tabs in titlebar. r=MattN, feedback=Gijs, a=sledru.
authorMike Conley <mconley@mozilla.com>
Fri, 28 Mar 2014 13:36:00 -0400
changeset 183722 163d2250a03e9b801e225b554dea96b7dc4ac50f
parent 183721 3537a7b4b9924125f3d6f39c4cfb4028b40d590e
child 183723 9eca66ee5b10f3f3fcfb360013b9bbb30901135f
push id3458
push usermconley@mozilla.com
push dateSat, 12 Apr 2014 18:03:04 +0000
treeherdermozilla-beta@f1c211a4714d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersMattN, sledru
bugs990218
milestone29.0
Bug 990218 - Simplify OS X's titlebar styling rules for tabs in titlebar. r=MattN, feedback=Gijs, a=sledru.
browser/themes/osx/browser.css
browser/themes/shared/browser.inc
browser/themes/shared/tabs.inc.css
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -4,18 +4,20 @@
 
 @import url("chrome://global/skin/");
 
 %include shared.inc
 %filter substitution
 %define forwardTransitionLength 150ms
 %define conditionalForwardWithUrlbar window:not([chromehidden~="toolbar"]) #urlbar-container
 %define conditionalForwardWithUrlbarWidth 30
+%define nativeTitlebarHeight 22px
 %define spaceAboveTabbar 9px
 %define toolbarButtonPressed :hover:active:not([disabled="true"]):not([cui-areatype="menu-panel"])
+%define windowButtonMarginTop 11px
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 @namespace html url("http://www.w3.org/1999/xhtml");
 
 #urlbar:-moz-lwtheme:not([focused="true"]),
 .searchbar-textbox:-moz-lwtheme:not([focused="true"]) {
   opacity: .9;
 }
@@ -36,16 +38,18 @@
   text-shadow: inherit;
 }
 
 #main-window {
   -moz-appearance: none;
   background-color: #eeeeee;
 }
 
+/** Begin titlebar **/
+
 #titlebar-buttonbox > .titlebar-button {
   display: 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. */
 .titlebar-placeholder[type="caption-buttons"],
 #titlebar-buttonbox {
@@ -54,24 +58,54 @@
 
 @media (-moz-mac-lion-theme) {
   .titlebar-placeholder[type="fullscreen-button"],
   #titlebar-fullscreen-button {
     margin-right: 7px;
   }
 }
 
-#main-window[chromehidden~="toolbar"]:not(:-moz-lwtheme) > #titlebar {
-  padding-top: 22px;
-}
-
 #main-window:not(:-moz-lwtheme):not([privatebrowsingmode=temporary]) > #titlebar {
   -moz-appearance: -moz-window-titlebar;
 }
 
+#main-window:not([tabsintitlebar]) > #titlebar {
+  min-height: @nativeTitlebarHeight@;
+}
+
+/**
+ * When we hide #titlebar-content, we display the native window buttons in
+ * their default locations.
+ */
+#main-window:not([tabsintitlebar]) > #titlebar > #titlebar-content {
+  display: none;
+}
+
+/**
+ * For tabs in titlebar on OS X, we stretch the titlebar down so that the
+ * tabstrip can overlap it.
+ */
+#main-window[tabsintitlebar] > #titlebar {
+  min-height: calc(@tabHeight@ + @spaceAboveTabbar@ - @tabToolbarNavbarOverlap@);
+}
+
+/**
+ * We also vertically center the window buttons.
+ */
+#main-window[tabsintitlebar] > #titlebar > #titlebar-content > #titlebar-buttonbox-container,
+#main-window[tabsintitlebar] > #titlebar > #titlebar-content > #titlebar-fullscreen-button {
+  margin-top: @windowButtonMarginTop@;
+}
+
+#main-window[tabsintitlebar][customize-entered] > #titlebar {
+  -moz-appearance: none;
+}
+
+/** End titlebar **/
+
 #main-window[chromehidden~="toolbar"][chromehidden~="location"][chromehidden~="directories"] {
   border-top: 1px solid rgba(0,0,0,0.65);
 }
 
 /* Because of -moz-box-align: center above, separators will be invisible unless
    we set their min-height. See bug 583510 for more information. */
 toolbarseparator {
   min-height: 22px;
@@ -2734,21 +2768,16 @@ toolbarbutton.chevron > .toolbarbutton-m
   border: solid transparent;
   border-width: 0 11px;
 }
 
 .tabbrowser-tab:focus > .tab-stack > .tab-content > .tab-label {
   box-shadow: @focusRingShadow@;
 }
 
-#main-window:not(:-moz-lwtheme) > #titlebar {
-  padding-top: @spaceAboveTabbar@;
-  min-height: @tabHeight@;
-}
-
 /* We want the titlebar to be unified, but we still want to be able
  * to give #TabsToolbar a background. So we can't set -moz-appearance:
  * toolbar on #TabsToolbar itself. Instead, we set it on a box of the
  * right size which is put underneath #TabsToolbar.
  *
  * Because of Bug 941309, we make sure this pseudoelement always exists,
  * but we only make it visible when we need it.
  */
@@ -4199,46 +4228,21 @@ window > chatbox {
   border-bottom-left-radius: @toolbarbuttonCornerRadius@;
   border-bottom-right-radius: @toolbarbuttonCornerRadius@;
 }
 
 /* Customization mode */
 
 %include ../shared/customizableui/customizeMode.inc.css
 
-#main-window[customize-entered] > #titlebar {
-  padding-top: 0;
-}
-
-#main-window[tabsintitlebar]:not([customizing]):not(:-moz-lwtheme) > #titlebar > #titlebar-content,
-#main-window[tabsintitlebar][customize-entering] > #titlebar > #titlebar-content,
-#main-window[tabsintitlebar][customize-exiting] > #titlebar > #titlebar-content {
-  margin-top: 2px;
-  margin-bottom: 11px;
-}
-
-#main-window[tabsintitlebar][customize-entered] > #titlebar > #titlebar-content,
-#main-window:not([tabsintitlebar]):not(:-moz-lwtheme) > #titlebar > #titlebar-content {
-  margin-top: 11px;
-  margin-bottom: 0px;
-}
-
-#main-window:not([tabsintitlebar]):-moz-lwtheme > #titlebar {
-  margin-bottom: 5px;
-}
-
-#main-window[tabsintitlebar]:-moz-lwtheme > #titlebar > #titlebar-content {
-  margin-top: 11px;
-  margin-bottom: 11px;
-}
-
 #main-window[customizing] {
   background-color: rgb(178,178,178);
 }
 
+#main-window[tabsintitlebar][customize-entered] > #titlebar,
 #main-window[customize-entered] > #tab-view-deck {
   background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png"),
                     url("chrome://browser/skin/customizableui/background-noise-toolbar.png"),
                     linear-gradient(to bottom, rgb(233,233,233), rgb(178,178,178) 40px);
   background-attachment: fixed;
 }
 
 #main-window[customize-entered] #browser-bottombox,
@@ -4253,20 +4257,16 @@ window > chatbox {
   -moz-border-left-colors: hsla(0,0%,0%,.05) hsla(0,0%,0%,.1) hsla(0,0%,0%,.2);
 }
 
 #main-window[customize-entered] #customization-container,
 #main-window[customize-entered] #navigator-toolbox > toolbar:not(#TabsToolbar) {
   border-bottom-width: 0;
 }
 
-#main-window[tabsintitlebar][customize-entered] #TabsToolbar {
-  margin-top: 8px;
-}
-
 #main-window[customize-entered] #TabsToolbar {
   background-clip: padding-box;
   border-right: 3px solid transparent;
   border-left: 3px solid transparent;
 }
 
 @media (min-resolution: 2dppx) {
   #customization-titlebar-visibility-button {
--- a/browser/themes/shared/browser.inc
+++ b/browser/themes/shared/browser.inc
@@ -7,8 +7,9 @@
 %ifdef XP_MACOSX
 % Prior to 10.7 there wasn't a native fullscreen button so we use #restore-button to exit fullscreen
 % and want it to behave like other toolbar buttons.
 %define primaryToolbarButtons @primaryToolbarButtons@, #restore-button
 %endif
 
 %define inAnyPanel :-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
 %define tabToolbarNavbarOverlap 1px
+%define tabHeight 31px
\ No newline at end of file
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -1,15 +1,14 @@
 %if 0
 /* 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/. */
 %endif
 
-%define tabHeight 31px
 %define tabCurveWidth 30px
 %define tabCurveHalfWidth 15px
 
 /* image preloading hack */
 #tabbrowser-tabs::before {
   /* Because of bug 853415, we need to ordinal this to the first position: */
   -moz-box-ordinal-group: 0;
   content: '';