Bug 990387 - Toolbar buttons on the TabsToolbar appear below the nav-bar border with a theme. r=dao a=sylvestre
authorMatthew Noorenberghe <mozilla@noorenberghe.ca>
Sat, 05 Apr 2014 13:30:44 -0700
changeset 183639 81075b35ee13
parent 183638 577e8eb4980b
child 183640 75c7e2c98e0c
push id3431
push usermozilla@noorenberghe.ca
push date2014-04-06 02:19 +0000
treeherdermozilla-beta@f7faeaf19dfa [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao, sylvestre
bugs990387
milestone29.0
Bug 990387 - Toolbar buttons on the TabsToolbar appear below the nav-bar border with a theme. r=dao a=sylvestre
browser/themes/linux/browser.css
browser/themes/osx/browser.css
browser/themes/windows/browser.css
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -1657,17 +1657,17 @@ richlistitem[type~="action"][actiontype=
      use evil CSS to give the impression of smaller content */
   margin: -2px;
 }
 
 /* Tabbrowser arrowscrollbox arrows */
 .tabbrowser-arrowscrollbox > .scrollbutton-up,
 .tabbrowser-arrowscrollbox > .scrollbutton-down {
   -moz-appearance: none;
-  margin: 0;
+  margin: 0 0 @tabToolbarNavbarOverlap@;
 }
 
 .tabbrowser-arrowscrollbox > .scrollbutton-up {
   -moz-border-start: 0;
   -moz-border-end: 2px solid transparent;
 }
 
 .tabbrowser-arrowscrollbox > .scrollbutton-down {
@@ -1691,16 +1691,20 @@ richlistitem[type~="action"][actiontype=
 
 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):-moz-locale-dir(ltr),
 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):-moz-locale-dir(rtl) {
   border-width: 0 0 0 2px;
   border-style: solid;
   border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;
 }
 
+#TabsToolbar .toolbarbutton-1 {
+  margin-bottom: @tabToolbarNavbarOverlap@;
+}
+
 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-icon,
 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
   margin-top: -2px;
   margin-bottom: -2px;
 }
 
 #alltabs-button > .toolbarbutton-menu-dropmarker {
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -2849,17 +2849,17 @@ toolbarbutton.chevron > .toolbarbutton-m
   .tab-close-button.close-icon:not([selected=true]):not(:hover):-moz-lwtheme-brighttext {
     -moz-image-region: rect(0, 128px, 32px, 96px);
   }
 }
 
 .tabbrowser-arrowscrollbox > .scrollbutton-up,
 .tabbrowser-arrowscrollbox > .scrollbutton-down {
   -moz-image-region: rect(0, 13px, 20px, 0);
-  margin: 0;
+  margin: 0 0 @tabToolbarNavbarOverlap@;
   padding: 0 4px;
   border: none;
 }
 
 .tabbrowser-arrowscrollbox > .scrollbutton-up {
   -moz-border-end: 2px solid transparent;
 }
 
@@ -2973,31 +2973,35 @@ toolbarbutton.chevron > .toolbarbutton-m
 /**
  * Tabstrip & add-on bar toolbar buttons
  */
 
 #TabsToolbar .toolbarbutton-1,
 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
   -moz-appearance: none;
+  margin: 0;
   /* !important flags needed because of bug 561154: */
-  margin: 0 !important;
+  /* Bug 990390: -moz-any is no longer used in the selector so the !important aren't necessary for that anymore. */
   padding: 0 !important;
   border: none !important;
   border-radius: 0 !important;
   background: none !important;
   box-shadow: none !important;
 }
 
 #TabsToolbar .toolbarbutton-1:not([type="menu-button"]),
 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
-  margin: 0;
   padding: 0 1px;
 }
 
+#TabsToolbar .toolbarbutton-1 {
+  margin-bottom: @tabToolbarNavbarOverlap@;
+}
+
 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
   padding-left: 4px;
   padding-right: 4px;
 }
 
 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]):hover,
 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]):hover,
 #TabsToolbar .toolbarbutton-1:not([type="menu-button"]):not([disabled=true]):not([open]):hover,
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -828,16 +828,20 @@ toolbarbutton[sdk-button="true"][cui-are
 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
 .tabbrowser-arrowscrollbox > .scrollbutton-up,
 .tabbrowser-arrowscrollbox > .scrollbutton-down {
   -moz-appearance: none;
   border-style: none;
   padding: 0 3px;
 }
 
+#TabsToolbar .toolbarbutton-1 {
+  margin-bottom: @tabToolbarNavbarOverlap@;
+}
+
 #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
 #TabsToolbar .toolbarbutton-1[open],
 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
   background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.5)),
                     linear-gradient(transparent, rgba(0,0,0,.25) 30%),
                     linear-gradient(transparent, rgba(0,0,0,.25) 30%);
@@ -1848,17 +1852,17 @@ toolbarbutton[type="socialmark"] > .tool
   border: none;
 }
 
 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
 
 .tabbrowser-arrowscrollbox > .scrollbutton-up,
 .tabbrowser-arrowscrollbox > .scrollbutton-down {
   list-style-image: url("chrome://browser/skin/tabbrowser/tab-arrow-left.png");
-  margin: 0;
+  margin: 0 0 @tabToolbarNavbarOverlap@;
   padding-right: 2px;
   border-right: 2px solid transparent;
   background-origin: border-box;
 }
 
 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,