Bug 572488 - New tab and toolbar style for Linux. r=gavin
authorDão Gottwald <dao@mozilla.com>
Sat, 04 Sep 2010 10:46:24 +0200
changeset 52008 19cd237c24b0079c7a0e4e2be57ec6051b1fe622
parent 52007 fdf0111f1a56ac11da9f7f0dcbd44035f366d3f2
child 52009 bd474ff6f86c4917752b4ffb344e87dd20032a5a
push idunknown
push userunknown
push dateunknown
reviewersgavin
bugs572488
milestone2.0b6pre
Bug 572488 - New tab and toolbar style for Linux. r=gavin
browser/themes/gnomestripe/browser/browser.css
browser/themes/gnomestripe/browser/jar.mn
browser/themes/gnomestripe/browser/tabbrowser/tab.png
--- a/browser/themes/gnomestripe/browser/browser.css
+++ b/browser/themes/gnomestripe/browser/browser.css
@@ -44,50 +44,74 @@
 %endif
 
 @import url("chrome://global/skin/");
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 @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 */
 }
 
 #main-menubar {
   -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 > 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;
 }
 
-#navigator-toolbox[inFullscreen="true"],
-#navigator-toolbox[inFullscreen="true"] > #nav-bar {
-  border-top: none;
-  padding-top: 0;
+#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 {
   /* opaque for layers optimization */
   background-color: -moz-Dialog;
 }
 
 #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;
   padding: 2px 3px;
 }
 
 toolbarbutton.bookmark-item:hover:active,
 toolbarbutton.bookmark-item[open="true"] {
@@ -1257,65 +1281,123 @@ statusbarpanel#statusbar-display {
   list-style-image: url("chrome://global/skin/icons/loading_16.png");
 }
 
 #navigator-throbber,
 #wrapper-navigator-throbber > #navigator-throbber {
   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: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-tabs[tabsontop="true"] > .tabbrowser-arrowscrollbox > scrollbox:not(:-moz-lwtheme) {
+  padding-bottom: 1px;
+  margin-bottom: -1px;
+  position: relative;
 }
 
-#TabsToolbar > toolbarbutton,
-#TabsToolbar > toolbarpaletteitem > toolbarbutton,
-#TabsToolbar > #bookmarks-menu-button-container > #bookmarks-menu-button {
-  margin-bottom: 1px;
+#tabbrowser-tabs[tabsontop="true"] > .tabbrowser-tab[selected="true"]:not(:-moz-lwtheme) {
+  margin-bottom: -1px;
+  padding-bottom: 1px;
 }
 
-.tabbrowser-tab {
-  padding: 0 2px 2px;
-  margin-bottom: 1px;
-  min-height: 25px; /* reserve space for the sometimes hidden close button */
+.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;
 }
 
 .tabbrowser-tab[busy] > .tab-icon-image {
   list-style-image: url("chrome://browser/skin/tabbrowser/progress.png") !important;
   -moz-image-region: rect(0, 16px, 16px, 0);
 }
@@ -1385,34 +1467,29 @@ statusbarpanel#statusbar-display {
 }
 
 .tabbrowser-tab[selected="true"] > .tab-close-button {
   /* Make this button focusable so clicking on it will not focus the tab while
      it's getting closed */
   -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;
   margin-bottom: -2px;
 }
 
 /* Tabstrip close button */
 .tabs-closebutton {
--- a/browser/themes/gnomestripe/browser/jar.mn
+++ b/browser/themes/gnomestripe/browser/jar.mn
@@ -69,16 +69,17 @@ browser.jar:
 #ifdef MOZ_SERVICES_SYNC
   skin/classic/browser/preferences/Options-sync.png   (preferences/Options-sync.png)
 #endif
 * skin/classic/browser/preferences/preferences.css    (preferences/preferences.css)
   skin/classic/browser/preferences/applications.css   (preferences/applications.css)
   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)
   skin/classic/browser/tabview/new-tab.png            (tabview/new-tab.png)
   skin/classic/browser/tabview/tabview.css            (tabview/tabview.css)
   skin/classic/browser/tabview/stack-expander.png     (tabview/stack-expander.png)
   skin/classic/browser/tabview/tabview.png            (tabview/tabview.png)
 #ifdef MOZ_SERVICES_SYNC
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..48bcf03d41a520846715c614358f56234be5c676
GIT binary patch
literal 411
zc$@*70c8G(P)<h;3K|Lk000e1NJLTq000aC000*V1^@s6KV+`I0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBUzJxN4CRCwCFl1)y8KoEtYY2sgkNMdvW
zF%mP;H3#qrY&i*6;67e}oflwdLf8-!F)=eyl!*-ZiYby_I5Uh3EBVrNSG}&Hx^!)A
zIuO8M1fTVw11qM}*&)FJxBw0~Rs^5m4ZMKmc<Uj!vu*n-Ns_iGijThUYg%bf=j5k2
zy5$I5<M1-evbpQJHTGZN8<^xT%km@$0;j5~XM+W|aU3tgFkImKo$J+jU0RmaHBF<X
zX?ji>&cJ=1=TE-x&y`@+3}mrA&zni^h>749YpeZkElMSyDU~j*xP_aH{Bq17Ie43(
z8wEPIwr4gO`3$wBy)#S^{4K*c9yBxc76HAwA(WD)*gp!yM1c^>PfyNZ>?5GIo=Pe8
zDba`<9_+?(oNC7$4YP!}SBT^+ilT=duROdo;vRnl7yyJzWY2X`E`$I8002ovPDHLk
FV1lLGt(E`)