Bug 572488 - New tab and toolbar style for Linux. r=gavin

browser/themes/gnomestripe/browser/browser.css

@@ -49,6 +49,8 @@
 @namespace html url("http://www.w3.org/1999/xhtml");
 
 %include ../../browserShared.inc
+%filter substitution
+%define toolbarHighlight rgba(255,255,255,.3)
 
 #menubar-items {
   -moz-box-orient: vertical; /* for flex hack */
@@ -58,14 +60,41 @@
   -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
 }
 
-#personal-bookmarks {
-  min-height: 29px;
+#navigator-toolbox {
+  -moz-appearance: none;
+  background-color: transparent;
+  border-top: none;
+  border-bottom: 1px solid ThreeDShadow;
 }
 
-#navigator-toolbox[inFullscreen="true"],
-#navigator-toolbox[inFullscreen="true"] > #nav-bar {
-  border-top: none;
-  padding-top: 0;
+#navigator-toolbox > toolbar:not(:-moz-lwtheme):not(#toolbar-menubar) {
+  -moz-appearance: none;
+  border-style: none;
+  background-color: -moz-Dialog;
+}
+
+#navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) {
+  padding-top: 1px;
+  padding-bottom: 1px;
+}
+
+#nav-bar:not(:-moz-lwtheme),
+#nav-bar[collapsed="true"] + toolbar:not(:-moz-lwtheme),
+#nav-bar[collapsed="true"] + #customToolbars + #PersonalToolbar:not(:-moz-lwtheme),
+#navigator-toolbox[tabsontop="true"] > #nav-bar,
+#navigator-toolbox[tabsontop="true"]:not([customizing]) > #nav-bar[collapsed="true"] + toolbar,
+#navigator-toolbox[tabsontop="true"]:not([customizing]) > #nav-bar[collapsed="true"] + #customToolbars + #PersonalToolbar {
+  background-image: -moz-linear-gradient(@toolbarHighlight@, rgba(255,255,255,0));
+}
+
+#navigator-toolbox[tabsontop="true"] > #nav-bar:not(:-moz-lwtheme),
+#navigator-toolbox[tabsontop="true"]:not([customizing]) > #nav-bar[collapsed="true"] + toolbar:not(:-moz-lwtheme),
+#navigator-toolbox[tabsontop="true"]:not([customizing]) > #nav-bar[collapsed="true"] + #customToolbars + #PersonalToolbar:not(:-moz-lwtheme) {
+  border-top: 1px solid ThreeDShadow;
+}
+
+#personal-bookmarks {
+  min-height: 29px;
 }
 
 #browser-bottombox {
@@ -74,15 +103,10 @@
 }
 
 #urlbar:-moz-lwtheme:not([focused="true"]),
-.searchbar-textbox:-moz-lwtheme:not([focused="true"]),
-.tabbrowser-tab:-moz-lwtheme:not([selected="true"]) {
+.searchbar-textbox:-moz-lwtheme:not([focused="true"]) {
   opacity: .85;
 }
 
-.tabbrowser-tab:-moz-lwtheme {
-  text-shadow: none;
-}
-
 /* Places toolbar */
 toolbarbutton.bookmark-item {
   margin: 0;
@@ -1262,55 +1286,113 @@ statusbarpanel#statusbar-display {
   list-style-image: url("chrome://global/skin/icons/notloading_16.png");
 }
 
-/* Tabs */
+/* Tabstrip */
 #TabsToolbar {
-  -moz-appearance: none;
   min-height: 0;
   padding: 0;
-  -moz-box-shadow: ThreeDShadow 0 -1px inset;
 }
 
-#TabsToolbar > toolbarbutton,
-#TabsToolbar > toolbarpaletteitem > toolbarbutton,
-#TabsToolbar > #bookmarks-menu-button-container > #bookmarks-menu-button {
-  margin-bottom: 1px;
+#TabsToolbar:not(:-moz-lwtheme),
+#TabsToolbar[tabsontop="false"] {
+  background-image: -moz-linear-gradient(transparent, transparent 50%,
+                                         rgba(0,0,0,.05) 90%, rgba(0,0,0,.1));
 }
 
-.tabbrowser-tab {
-  padding: 0 2px 2px;
-  margin-bottom: 1px;
-  min-height: 25px; /* reserve space for the sometimes hidden close button */
+#tabbrowser-tabs[tabsontop="true"] > .tabbrowser-arrowscrollbox > scrollbox:not(:-moz-lwtheme) {
+  padding-bottom: 1px;
+  margin-bottom: -1px;
+  position: relative;
+}
+
+#tabbrowser-tabs[tabsontop="true"] > .tabbrowser-tab[selected="true"]:not(:-moz-lwtheme) {
+  margin-bottom: -1px;
+  padding-bottom: 1px;
+}
+
+.tabbrowser-tab,
+.tabs-newtab-button {
+  position: static;
+  -moz-appearance: none;
+  background: -moz-linear-gradient(hsla(0,0%,100%,.3), hsla(0,0%,50%,.1) 2px, hsla(0,0%,37%,.1) 50%);
+  background-position: -5px -2px;
+  background-repeat: no-repeat;
+  background-size: 200%;
+  margin: 0;
+  padding: 0;
+  -moz-border-image: url(tabbrowser/tab.png) 4 5 3 6 / 4px 5px 3px 6px;
+  -moz-border-radius: 10px 8px 0 0;
+  min-height: 27px; /* reserve space for the sometimes hidden close button */
+}
+
+.tabbrowser-tab:hover,
+.tabs-newtab-button:hover {
+  background-image: -moz-linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.4) 2px, hsla(0,0%,75%,.4) 50%);
 }
 
 .tabbrowser-tab[selected="true"] {
-  margin-bottom: 0;
-  padding-top: 2px; /* compensates the top margin of background tabs */
-  padding-bottom: 3px; /* compensates the bottom margin of background tabs */
-  min-height: 28px;
+  background-image: -moz-linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.5) 2px, @toolbarHighlight@ 20%),
+                    -moz-linear-gradient(-moz-dialog, -moz-dialog);
+}
+
+.tabbrowser-tab:-moz-lwtheme {
+  color: inherit;
+}
+
+.tabbrowser-tab[selected="true"]:-moz-lwtheme {
+  background-image: -moz-linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.5) 2px, @toolbarHighlight@ 20%);
+}
+
+.tabbrowser-tab:-moz-lwtheme-brighttext:not([selected="true"]),
+.tabs-newtab-button:-moz-lwtheme-brighttext {
+  background-image: -moz-linear-gradient(hsla(0,0%,60%,.6), hsla(0,0%,40%,.6) 2px, hsla(0,0%,30%,.6) 50%);
+}
+
+.tabbrowser-tab:-moz-lwtheme-brighttext:not([selected="true"]):hover,
+.tabs-newtab-button:-moz-lwtheme-brighttext:hover {
+  background-image: -moz-linear-gradient(hsla(0,0%,80%,.6), hsla(0,0%,60%,.6) 2px, hsla(0,0%,45%,.6) 50%);
+}
+
+.tabbrowser-tab:-moz-lwtheme-darktext:not([selected="true"]),
+.tabs-newtab-button:-moz-lwtheme-darktext {
+  background-image: -moz-linear-gradient(hsla(0,0%,100%,.5), hsla(0,0%,60%,.5) 2px, hsla(0,0%,45%,.5) 50%);
+}
+
+.tabbrowser-tab:-moz-lwtheme-darktext:not([selected="true"]):hover,
+.tabs-newtab-button:-moz-lwtheme-darktext:hover {
+  background-image: -moz-linear-gradient(hsla(0,0%,100%,.5), hsla(0,0%,80%,.5) 2px, hsla(0,0%,60%,.5) 50%);
+}
+
+.tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) {
+  background-image: -moz-linear-gradient(rgba(255,0,0,.5), rgba(255,0,0,.5)) !important;
 }
 
 .tabbrowser-tab[pinned] {
   min-height: 20px; /* corresponds to the max. height of non-textual tab contents, i.e. the tab close button */
 }
 
-.tabbrowser-tab[pinned] + .tabbrowser-tab:not([pinned]) {
-  -moz-margin-start: 0;
+.tabbrowser-tab > .tab-text {
+  border: 1px dotted transparent;
+  margin: -1px !important; /* let the border not consume any space, like outline */
 }
 
-.tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) {
-  -moz-box-shadow: 0 0 0 1em rgba(255,0,0,.5) inset;
+.tabbrowser-tab:focus > .tab-text {
+  border: 1px dotted -moz-DialogText;
+}
+
+.tabbrowser-tab[pinned]:focus > .tab-icon-image {
+  outline: 1px dotted;
 }
 
 .tab-icon-image {
   width: 16px;
   height: 16px;
-  -moz-margin-start: 1px;
-  -moz-margin-end: 4px;
+  -moz-margin-end: 3px;
   list-style-image: url("chrome://global/skin/icons/folder-item.png");
   -moz-image-region: rect(0px, 16px, 16px, 0px);
 }
 
-.tabbrowser-tab[pinned] > .tab-icon-image {
+.tabbrowser-tab[pinned] > .tab-icon-image,
+.tabs-newtab-button > .toolbarbutton-icon {
   -moz-margin-start: 2px;
   -moz-margin-end: 2px;
 }
@@ -1390,24 +1472,19 @@ statusbarpanel#statusbar-display {
   -moz-user-focus: normal;
 }
 
-.tab-close-button:focus {
-  outline: none !important;
-}
-
 /* Tabstrip new tab button */
 .tabs-newtab-button,
 #TabsToolbar > #new-tab-button ,
 #TabsToolbar > #wrapper-new-tab-button > #new-tab-button {
   list-style-image: url("moz-icon://stock/gtk-add?size=menu");
   -moz-image-region: auto;
+}
+
+#TabsToolbar > #new-tab-button,
+#TabsToolbar > #wrapper-new-tab-button > #new-tab-button {
   margin-bottom: 1px;
 }
 
-.tabs-newtab-button {
-  width: 32px;
-}
-
-.tabs-newtab-button > .toolbarbutton-icon,
 #TabsToolbar > #new-tab-button > .toolbarbutton-icon,
 #TabsToolbar > #wrapper-new-tab-button > #new-tab-button > .toolbarbutton-icon {
   margin-top: -2px;

browser/themes/gnomestripe/browser/jar.mn

@@ -74,6 +74,7 @@ browser.jar:
   skin/classic/browser/tabbrowser/alltabs.png          (tabbrowser/alltabs.png)
   skin/classic/browser/tabbrowser/progress.png         (tabbrowser/progress.png)
   skin/classic/browser/tabbrowser/progress-pulsing.png (tabbrowser/progress-pulsing.png)
+  skin/classic/browser/tabbrowser/tab.png             (tabbrowser/tab.png)
   skin/classic/browser/tabbrowser/tabDragIndicator.png (tabbrowser/tabDragIndicator.png)
   skin/classic/browser/tabview/edit-light.png         (tabview/edit-light.png)
   skin/classic/browser/tabview/edit.png               (tabview/edit.png)