Bug 743629 - Implement the Australis tabs on Aero. r,ui-r=andreasn

mail/base/content/messenger.xul

@@ -75,6 +75,7 @@
   -  3-pane view inside of tabs.
   -->
 <window id="messengerWindow"
+        xmlns:svg="http://www.w3.org/2000/svg"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
         title="&titledefault.label;@PRE_RELEASE_SUFFIX@"
         titlemodifier="&titledefault.label;@PRE_RELEASE_SUFFIX@"
@@ -587,5 +588,13 @@
     <statusbarpanel id="unreadMessageCount"/>
     <statusbarpanel id="totalMessageCount"/>
   </statusbar>
+
+  <svg:svg height="0">
+    <svg:clipPath id="tab-curve-clip-path">
+      <svg:path d="M30,31C21,31,2,31,2,31s0,0,0-1c9,0,11-5,13-13 C16,12,17,2,30,2L30,31z" />
+      <svg:rect x="30" y="2" width="1" height="30" />
+    </svg:clipPath>
+  </svg:svg>
+
 </window>
 

mail/themes/qute/jar.mn

@@ -452,6 +452,7 @@ classic.jar:
   skin/classic/aero/messenger/icons/quick-search-icons.png         (mail/icons/quick-search-icons-aero.png)
   skin/classic/aero/messenger/icons/quick-search-clear.png         (mail/icons/quick-search-clear.png)
   skin/classic/aero/messenger/icons/close-button.png               (mail/icons/close-button.png)
+  skin/classic/aero/messenger/icons/closeTab.png                   (mail/icons/closeTab.png)
   skin/classic/aero/messenger/icons/remote-blocked.png             (mail/icons/remote-blocked.png)
   skin/classic/aero/messenger/icons/phishing.png                   (mail/icons/phishing.png)
   skin/classic/aero/messenger/icons/junk.png                       (mail/icons/junk-aero.png)
@@ -467,7 +468,12 @@ classic.jar:
   skin/classic/aero/messenger/icons/tick.png                       (mail/icons/tick.png)
   skin/classic/aero/messenger/icons/error.png                      (mail/icons/error.png)
   skin/classic/aero/messenger/icons/cancel.png                     (mail/icons/cancel.png)
-  skin/classic/aero/messenger/icons/tab.png                        (mail/icons/tab.png)
+  skin/classic/aero/messenger/icons/tabActiveEnd.png               (mail/icons/tabActiveEnd.png)
+  skin/classic/aero/messenger/icons/tabActiveMiddle.png            (mail/icons/tabActiveMiddle.png)
+  skin/classic/aero/messenger/icons/tabActiveStart.png             (mail/icons/tabActiveStart.png)
+  skin/classic/aero/messenger/icons/tabBackgroundEnd.png           (mail/icons/tabBackgroundEnd.png)
+  skin/classic/aero/messenger/icons/tabBackgroundMiddle.png        (mail/icons/tabBackgroundMiddle.png)
+  skin/classic/aero/messenger/icons/tabBackgroundStart.png         (mail/icons/tabBackgroundStart.png)
   skin/classic/aero/messenger/icons/tab-arrow-left.png             (mail/icons/tab-arrow-left.png)
   skin/classic/aero/messenger/icons/tab-arrow-left-inverted.png    (mail/icons/tab-arrow-left-inverted.png)
   skin/classic/aero/messenger/icons/mainwindow-dropdown-arrow.png  (mail/icons/mainwindow-dropdown-arrow.png)

mail/themes/qute/mail/primaryToolbar-aero.css

@@ -75,7 +75,7 @@
 }
 
 #navigation-toolbox #tabs-toolbar:not(:-moz-lwtheme) {
-  border-bottom: 1px solid ThreeDDarkShadow;
+  border-bottom: 1px solid ThreeDShadow;
 }
 
 #navigation-toolbox #tabs-toolbar:-moz-lwtheme {
@@ -377,6 +377,13 @@ toolbox[labelalign="end"] > toolbar[mode="full"] .toolbarbutton-1[type="menu"] {
     border-style: none;
   }
 
+  #tabs-toolbar:not(:-moz-lwtheme) {
+    margin-left: 1px;
+    margin-right: 1px;
+    background-image: -moz-linear-gradient(hsla(210, 23%, 74%, .05),
+                      hsla(210, 23%, 74%, .8)) !important;
+  }
+
   #mail-toolbox:not(:-moz-lwtheme),
   #navigation-toolbox:not(:-moz-lwtheme),
   .glodaTabToolbar {

mail/themes/qute/mail/tabmail-aero.css

@@ -47,12 +47,6 @@
   color: inherit;
 }
 
-@media (-moz-windows-default-theme) {
-  .tabmail-tabs {
-    padding: 0 3px;
-  }
-}
-
 .tabmail-tabs > .tabmail-tab:first-child > .tab-close-button {
   visibility: collapse;
 }
@@ -63,90 +57,159 @@
 
 .tabmail-tab {
   -moz-appearance: none;
-  background: -moz-linear-gradient(bottom, rgba(10%, 10%, 10%, .4) 1px,
-              transparent 1px), -moz-linear-gradient(transparent,
-              hsla(0, 0%, 45%, .1) 1px, hsla(0, 0%, 32%, .2) 80%,
-              hsla(0, 0%, 0%, .2)),
-              -moz-linear-gradient(-moz-dialog, -moz-dialog);
-  background-origin: border-box;
-  background-position: 1px 2px;
-  background-size: -moz-calc(100% - 2px) -moz-calc(100% - 2px);
-  background-repeat: no-repeat;
-  margin: 0;
-  padding: 2px 0 4px;
-  border-width: 4px 3px 0;
-  border-style: solid;
-  -moz-border-image: url(icons/tab.png) 4 3 0 fill repeat stretch;
-  border-radius: 0;
-  color: -moz-dialogText;
+  color: -moz-DialogText;
+  height: 30px;
+  margin: 0 -14px 0;
+  padding: 0;
+  border-width: 0;
+  background: none;
+}
+
+.tabmail-tab:first-child {
+  -moz-margin-start: 0;
+}
+
+.tabmail-tab[selected] {
+  position: relative;
+  z-index: 1;
   text-shadow: none;
 }
 
-.tabmail-tab:hover {
-  background-image: -moz-linear-gradient(bottom, rgba(10%, 10%, 10%, .4) 1px,
-                    transparent 1px), -moz-linear-gradient(hsla(0, 0%, 100%, .3) 1px,
-                    hsla(0, 0%, 75%, .2) 80%, hsla(0, 0%, 60%, .2)),
-                    -moz-linear-gradient(-moz-dialog, -moz-dialog);
-}
-
-.tabmail-tab[selected="true"] {
-  background-image: -moz-linear-gradient(rgba(255, 255, 255, .7),
-                    rgba(255, 255, 255, .5) 30%),
-                    -moz-linear-gradient(-moz-dialog, -moz-dialog);
-}
-
 .tabmail-tab:-moz-lwtheme {
   color: inherit;
   text-shadow: inherit;
 }
 
-.tabmail-tab[selected="true"]:-moz-lwtheme {
+.tabmail-tab:hover {
+  background-repeat: no-repeat;
+  background-position: 29px 2px,
+                       left 0,
+                       30px 0,
+                       right 0;
+  background-size: -moz-calc(100% - 58px) 31px,
+                   30px 31px,
+                   -moz-calc(100% - 60px) 29px,
+                   30px 31px;
+}
+
+.tabmail-tab[selected] {
+  background-repeat: no-repeat;
+  background-position: 29px 2px,
+                       29px 2px,
+                       left 0,
+                       30px 0,
+                       right 0;
+  background-size: -moz-calc(100% - 58px) 31px,
+                   -moz-calc(100% - 58px) 31px,
+                   30px 31px,
+                   -moz-calc(100% - 60px) 29px,
+                   30px 31px;
+}
+
+.tabmail-tab:hover {
+  background-image: -moz-linear-gradient(transparent, transparent),
+                    url(icons/tabBackgroundStart.png),
+                    url(icons/tabBackgroundMiddle.png),
+                    url(icons/tabBackgroundEnd.png);
+}
+
+.tabmail-tab[selected]:not(:-moz-lwtheme) {
   background-image: -moz-linear-gradient(rgba(255, 255, 255, .7),
-                    rgba(255, 255, 255, .5) 50%);
-  background-color: rgba(255, 255, 255, 0.3);
+                    rgba(255, 255, 255, .5)),
+                    -moz-linear-gradient(-moz-dialog, -moz-dialog),
+                    url(icons/tabActiveStart.png),
+                    url(icons/tabActiveMiddle.png),
+                    url(icons/tabActiveEnd.png);
 }
 
-.tabmail-tab:-moz-lwtheme-brighttext:not([selected="true"]) {
-  background-image: -moz-linear-gradient(hsla(0, 0%, 40%, .6),
-                    hsla(0, 0%, 30%, .6) 80%);
+.tabmail-tab[selected]:-moz-lwtheme {
+  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .7),
+                    rgba(255, 255, 255, .5)),
+                    -moz-linear-gradient(rgba(255, 255, 255, .3),
+                    rgba(255, 255, 255, .3)),
+                    url(icons/tabActiveStart.png),
+                    url(icons/tabActiveMiddle.png),
+                    url(icons/tabActiveEnd.png);
+  background-position: 31px 2px,
+                       31px 2px,
+                       left 0,
+                       30px 0,
+                       right 0;
+  background-size: -moz-calc(100% - 62px) 31px,
+                   -moz-calc(100% - 62px) 31px,
+                   30px 31px,
+                   -moz-calc(100% - 60px) 29px,
+                   30px 31px;
 }
 
-.tabmail-tab:-moz-lwtheme-brighttext:not([selected="true"]):hover {
-  background-image: -moz-linear-gradient(hsla(0, 0%, 60%, .6),
-                    hsla(0, 0%, 45%, .6) 80%);
+.tabmail-tab:not([selected]):not(:hover) +
+.tabmail-tab:not([selected]):not(:hover)::before,
+.tabmail-tab:last-child:not([selected]):not(:hover)::after {
+  content: "";
+  display: -moz-box;
+  width: 2px;
+  height: 28px;
+  -moz-margin-start: 12px;
+  -moz-margin-end: -14px;
+  background: -moz-linear-gradient(bottom, hsla(210, 23%, 10%, .4),
+              hsla(210, 23%, 10%, .1) 80%, transparent),
+              -moz-linear-gradient(bottom, hsla(0, 0%, 100%, .4),
+              hsla(0, 0%, 100%, .1) 80%, transparent);
+  background-position: 0 0, 1px 0;
+  background-size: 1px 100%;
+  background-repeat: no-repeat;
 }
 
-.tabmail-tab:-moz-lwtheme-darktext:not([selected="true"]) {
-  background-image: -moz-linear-gradient(hsla(0, 0%, 60%, .5),
-                    hsla(0, 0%, 45%, .5) 80%);
+.tabmail-tab:last-child:not([selected]):not(:hover)::after {
+  -moz-margin-start: -14px;
+  -moz-margin-end: 12px;
 }
 
-.tabmail-tab:-moz-lwtheme-darktext:not([selected="true"]):hover {
-  background-image: -moz-linear-gradient(hsla(0, 0%, 80%, .5),
-                    hsla(0, 0%, 60%, .5) 80%);
+.tab-image-left,
+.tab-image-right {
+  width: 31px;
+  height: 30px;
+  clip-path: url(chrome://messenger/content/messenger.xul#tab-curve-clip-path);
+}
+
+.tab-image-right:-moz-locale-dir(ltr),
+.tab-image-left:-moz-locale-dir(rtl) {
+  -moz-transform: scaleX(-1);
+}
+
+.tab-image-middle {
+  position: relative;
+}
+
+.tab-image-left[selected]:not(:-moz-lwtheme),
+.tab-image-right[selected]:not(:-moz-lwtheme) {
+  background-image: -moz-linear-gradient(rgba(255, 255, 255, .7),
+                    rgba(255, 255, 255, .5)),
+                    -moz-linear-gradient(-moz-dialog, -moz-dialog);
+}
+
+.tab-image-left[selected]:-moz-lwtheme,
+.tab-image-right[selected]:-moz-lwtheme {
+  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .7),
+                    rgba(255, 255, 255, .5)),
+                    -moz-linear-gradient(rgba(255, 255, 255, .3),
+                    rgba(255, 255, 255, .3));
 }
 
 @media (-moz-windows-default-theme) {
-  .tabmail-tab:not(:-moz-lwtheme):not([selected="true"]) {
-    background-image: -moz-linear-gradient(bottom, transparent 1px, transparent),
-                      -moz-linear-gradient(transparent, hsla(0, 0%, 45%, .1) 1px,
-                                           hsla(0, 0%, 32%, .2) 80%,
-                                           hsla(0, 0%, 0%, .2)),
-                      -moz-linear-gradient(hsl(214, 44%, 87%), hsl(214, 44%, 87%));
-    background-size: -moz-calc(100% - 2px) -moz-calc(100% - 3px);
+  .tabmail-tab[selected]:not(:-moz-lwtheme) {
+    background-image: -moz-linear-gradient(top, hsl(204, 33%, 97%),
+                      hsl(210, 58%, 95%)),
+                      -moz-linear-gradient(transparent, transparent),
+                      url(icons/tabActiveStart.png),
+                      url(icons/tabActiveMiddle.png),
+                      url(icons/tabActiveEnd.png);
   }
 
-  .tabmail-tab:not(:-moz-lwtheme):not([selected="true"]):hover {
-    background-image: -moz-linear-gradient(bottom, transparent 1px, transparent),
-                      -moz-linear-gradient(hsla(0, 0%, 100%, .3) 1px,
-                                           hsla(0, 0%, 75%, .2) 80%,
-                                           hsla(0, 0%, 60%, .2)),
-                      -moz-linear-gradient(hsl(214, 44%, 87%), hsl(214, 44%, 87%));
-  }
-
-  .tabmail-tab[selected="true"]:not(:-moz-lwtheme) {
-    background-image: -moz-linear-gradient(white, rgba(255, 255, 255, .5) 50%),
-                      -moz-linear-gradient(hsl(214, 44%, 87%), hsl(210, 75%, 92%));
+  .tab-image-left[selected]:not(:-moz-lwtheme),
+  .tab-image-right[selected]:not(:-moz-lwtheme) {
+    background-image: -moz-linear-gradient(top, hsl(204, 33%, 97%),
+                      hsl(210, 58%, 95%));
   }
 }
 
@@ -160,14 +223,14 @@
   list-style-image: url("chrome://global/skin/icons/Search-glass.png");
 }
 
-.tabmail-tab[selected="true"] > .tab-image-middle > .tab-text {
+.tabmail-tab[selected] > .tab-image-middle > .tab-text {
   opacity: 1.0 !important;
 }
 
 .tab-throbber,
 .tab-icon-image {
-  -moz-margin-start: 2px;
-  -moz-margin-end: 3px;
+  -moz-margin-start: -6px;
+  -moz-margin-end: 5px;
   margin-bottom: 1px;
   width: 16px;
   height: 16px;
@@ -195,46 +258,48 @@ tabpanels {
 /* Tab DnD indicator */
 .tab-drop-indicator {
   list-style-image: url(chrome://messenger/skin/icons/tabDragIndicator.png);
+  -moz-padding-start: 26px;
   margin-bottom: -11px;
 }
 
 /**
 * close buttons
 */
-.tab-close-button > .toolbarbutton-icon {
-  -moz-margin-end: 0px !important;
-}
-
 .tab-close-button,
 .tabs-closebutton {
   -moz-appearance: none;
-  -moz-image-region: rect(0, 64px, 16px, 48px);
-  border: none !important;
-  padding: 0 !important;
+  -moz-image-region: rect(0, 16px, 16px, 0);
+  border: none;
   cursor: default;
-  list-style-image: url("chrome://global/skin/icons/close.png");
-  background: none !important;
+  list-style-image: url(icons/closeTab.png);
 }
 
 .tabs-closebutton {
   padding: 0 2px !important;
 }
 
+.tab-close-button {
+  margin-top: 2px;
+  -moz-padding-start: 5px !important;
+  -moz-padding-end: 0 !important;
+  -moz-margin-end: -6px;
+  position: relative;
+  z-index: 2;
+}
+
 .tab-close-button:hover,
 .tabs-closebutton:hover,
-.tabmail-tab[selected="true"] > .tab-close-button:hover {
+.tabmail-tab[selected] > .tab-close-button:hover {
   -moz-image-region: rect(0, 32px, 16px, 16px);
-  opacity: 1.0;
 }
 
 .tab-close-button:hover:active,
 .tabs-closebutton:hover:active,
-.tabmail-tab[selected="true"] > .tab-close-button:hover:active {
+.tabmail-tab[selected] > .tab-close-button:hover:active {
   -moz-image-region: rect(0, 48px, 16px, 32px);
-  opacity: 1.0;
 }
 
-.tabmail-tab[selected="true"] > .tab-close-button {
+.tabmail-tab[selected] > .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;
@@ -319,7 +384,7 @@ tabpanels {
   -moz-image-region: rect(0px, 16px, 16px, 0px);
 }
 
-.alltabs-item[selected="true"] {
+.alltabs-item[selected] {
   font-weight: bold;
 }
 
@@ -341,9 +406,8 @@ tabpanels {
 .tabs-alltabs-button:hover,
 .tabs-alltabs-button[open],
 .tabs-alltabs-button:hover:active,
-.tabmail-tabs toolbarbutton[open],
-.tabmail-tabs toolbarbutton:hover:active,
-.tabmail-tabs toolbarbutton:not([disabled]):hover {
+.tabmail-arrowscrollbox > .scrollbutton-up:not([disabled]):hover,
+.tabmail-arrowscrollbox > stack > .scrollbutton-down:not([disabled]):hover {
   background-image: -moz-linear-gradient(rgba(255, 255, 255, 0),
                     rgba(255, 255, 255, .5)),
                     -moz-linear-gradient(transparent, rgba(0, 0, 0, .25) 30%),