Bug 990384 - Define tabToolbarNavbarOverlap to reduce magic numbers in CSS for the overlap between the tabs and nav-bar. r=mconley a=sylvestre
authorMatthew Noorenberghe <mozilla@noorenberghe.ca>
Wed, 02 Apr 2014 11:43:03 -0400
changeset 183636 a2fccb7d55f7
parent 183635 6c1da25749a0
child 183637 4d27870d3fdc
push id3429
push usermozilla@noorenberghe.ca
push date2014-04-04 22:11 +0000
Treeherderresults
reviewersmconley, sylvestre
bugs990384
milestone29.0
Bug 990384 - Define tabToolbarNavbarOverlap to reduce magic numbers in CSS for the overlap between the tabs and nav-bar. r=mconley a=sylvestre
browser/themes/linux/browser.css
browser/themes/osx/browser.css
browser/themes/shared/browser.inc
browser/themes/shared/tabs.inc.css
browser/themes/windows/browser.css
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@@ -48,17 +48,17 @@
 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar) {
   padding-top: 1px;
   padding-bottom: 1px;
 }
 
 #nav-bar {
   background-image: linear-gradient(@toolbarHighlight@, rgba(255,255,255,0));
   box-shadow: 0 1px 0 @toolbarHighlight@ inset;
-  margin-top: -1px; /* Move up 1px into the TabsToolbar */
+  margin-top: -@tabToolbarNavbarOverlap@; /* Move up into the TabsToolbar */
   padding-top: 2px;
   padding-bottom: 2px;
   /* Position the toolbar above the bottom of background tabs */
   position: relative;
   z-index: 1;
 }
 
 #nav-bar-overflow-button {
@@ -1550,17 +1550,17 @@ richlistitem[type~="action"][actiontype=
 }
 
 /*
  * Draw the bottom border of the tabstrip:
  */
 #TabsToolbar::after {
   content: "";
   position: absolute;
-  bottom: 1px;
+  bottom: @tabToolbarNavbarOverlap@;
   left: 0;
   right: 0;
   z-index: 0;
   border-bottom: 1px solid hsla(0,0%,0%,.3);
 }
 
 #TabsToolbar:not(:-moz-lwtheme) {
   -moz-appearance: menubar;
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@@ -92,17 +92,17 @@ toolbarseparator {
   /* Move the noise texture out of the top 1px strip because that overlaps
      with the tabbar and we don't want to repaint it when animating tabs.
      The noise image is at least 100px high, so repeating it only horizontally
      is enough. */
   background-repeat: repeat-x, no-repeat;
   background-position: 0 1px, 0 0;
 
   box-shadow: inset 0 1px 0 hsla(0,0%,100%,.4);
-  margin-top: -1px;
+  margin-top: -@tabToolbarNavbarOverlap@;
   /* Position the toolbar above the bottom of background tabs */
   position: relative;
   z-index: 1;
 }
 
 @media (min-resolution: 2dppx) {
   #nav-bar {
     background-size: 100px 100px, auto;
@@ -2778,17 +2778,17 @@ toolbarbutton.chevron > .toolbarbutton-m
   content: '';
   /* Because we use placeholders for window controls etc. in the tabstrip,
    * and position those with ordinal attributes, and because our layout code
    * expects :before/:after nodes to come first/last in the frame list,
    * we have to reorder this element to come last, hence the
    * ordinal group value (see bug 853415). */
   -moz-box-ordinal-group: 1001;
   position: absolute;
-  bottom: 1px;
+  bottom: @tabToolbarNavbarOverlap@;
   left: 0;
   right: 0;
   z-index: 0;
   border-bottom: 1px solid hsla(0,0%,0%,.3);
   visibility: hidden;
 }
 
 #main-window:-moz-any([privatebrowsingmode=temporary],[sizemode="fullscreen"],[customize-entered]) #TabsToolbar::after,
--- a/browser/themes/shared/browser.inc
+++ b/browser/themes/shared/browser.inc
@@ -6,8 +6,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
--- a/browser/themes/shared/tabs.inc.css
+++ b/browser/themes/shared/tabs.inc.css
@@ -268,35 +268,34 @@
 /* Pinned tab separators need position: absolute when positioned (during overflow). */
 #tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]::before {
   height: 100%;
   position: absolute;
 }
 
 .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) > .tab-stack > .tab-content {
   background-image: radial-gradient(farthest-corner at center bottom, rgb(255,255,255) 3%, rgba(186,221,251,0.75) 20%, rgba(127,179,255,0.25) 40%, rgba(127,179,255,0) 70%);
-  background-position: center bottom 1px;
+  background-position: center bottom @tabToolbarNavbarOverlap@;
   background-repeat: no-repeat;
   background-size: 85% 100%;
 }
 
 /* Background tab separators (3px wide).
    Also show separators beside the selected tab when dragging it. */
 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
 .tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
   -moz-margin-start: -1.5px;
   -moz-margin-end: -1.5px;
   background-image: url(chrome://browser/skin/tabbrowser/tab-separator.png);
-  background-position: left bottom;
+  background-position: left bottom @tabToolbarNavbarOverlap@;
   background-repeat: no-repeat;
   background-size: 3px 100%;
   content: "";
   display: -moz-box;
-  margin-bottom: 1px;
   width: 3px;
 }
 
 /* New tab button */
 
 .tabs-newtab-button {
   width: 66px;
 }
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -261,17 +261,17 @@
         rgb(214, 216, 190) 2px, rgb(214, 216, 190) 3px,
         transparent 3px);
   }
 }
 
 #nav-bar {
   background-image: linear-gradient(@toolbarHighlight@, rgba(255,255,255,0));
   box-shadow: 0 1px 0 @toolbarHighlight@ inset;
-  margin-top: -1px; /* Move up 1px into the TabsToolbar */
+  margin-top: -@tabToolbarNavbarOverlap@; /* Move up into the TabsToolbar */
   /* Position the toolbar above the bottom of background tabs */
   position: relative;
   z-index: 1;
 }
 
 #personal-bookmarks {
   min-height: 24px;
 }