Bug 575403 - New theme for tab controls [r=mfinkle]

--HG--
rename : mobile/themes/core/images/close-active-40.png => mobile/themes/core/images/close-active-hdpi.png
rename : mobile/themes/core/images/close-default-40.png => mobile/themes/core/images/close-default-hdpi.png
extra : rebase_source : 594551d52a43a057ff345a3b0b5260e79c5add30

mobile/chrome/content/tabs.xml

@@ -12,7 +12,7 @@
         <html:canvas anonid="thumbnail" class="documenttab-thumbnail" left="0" width="104" height="65" moz-opaque="true" empty="true"
           onclick="document.getBindingParent(this)._onClick()"/>
         <xul:hbox class="documenttab-reload" left="0" top="0" width="104" height="65" onclick="document.getBindingParent(this)._onUndo();"/>
-        <xul:hbox class="documenttab-close-container" left="0" top="0" height="65" width="55" align="center" onclick="document.getBindingParent(this)._onClose()">
+        <xul:hbox class="documenttab-close-container" left="-16" top="0" height="65" width="55" align="center" onclick="document.getBindingParent(this)._onClose()">
           <xul:image anonid="close" class="documenttab-close" mousethrough="always"/>
         </xul:hbox>
       </xul:stack>
@@ -85,8 +85,8 @@
 
   <binding id="tablist">
     <content>
-      <xul:vbox anonid="tabs-children" flex="1"/>
-      <xul:box anonid="tabs-undo"/>
+      <xul:vbox class="tabs-list" anonid="tabs-children" flex="1"/>
+      <xul:box class="tabs-list" anonid="tabs-undo"/>
     </content>
     <implementation>
       <field name="children">document.getAnonymousElementByAttribute(this, "anonid", "tabs-children");</field>

mobile/themes/core/browser.css

@@ -817,6 +817,7 @@ autocompleteresult.noresults > .autocomplete-item-container {
 
 /* Left sidebar (tabs)  ---------------------------------------------------- */
 #tabs-container {
+  padding-top: 8px;
   -moz-border-end: 3px solid #262629;
   background: #2e2e2f url("chrome://browser/skin/images/sidebar-bg.png") top left repeat-x;
 }
@@ -825,7 +826,7 @@ autocompleteresult.noresults > .autocomplete-item-container {
   -moz-box-align: start;
 }
 
-#tabs > * {
+#tabs > .tabs-list {
   display: block;
   -moz-column-width: 121px;
   -moz-column-gap: 0;
@@ -837,10 +838,6 @@ autocompleteresult.noresults > .autocomplete-item-container {
   -moz-padding-start: 4px; /* allow the thumbnails to get close to the edge */
 }
 
-#tabs documenttab:only-child .documenttab-close {
-  display: none;
-}
-
 #tabs-controls {
   margin-top: 8px; /* core spacing */
   -moz-box-pack: center;
@@ -855,54 +852,66 @@ documenttab {
   margin-bottom: 8px;
   width: 121px;
   padding: 8px;
-  background-color: rgb(101,121,227);
-  border-bottom: 3px rgb(66,78,146) solid;
-  border-radius: 4px;
-  opacity: 0.5;
-}
-
-documenttab .documenttab-thumbnail {
-  background-color: white;
-}
-
-documenttab .documenttab-close-container {
-  -moz-margin-end: 49px;
-}
-
-documenttab .documenttab-close-container > .documenttab-close {
-  width: 40px;
-  height: 40px;
-  list-style-image: url("chrome://browser/skin/images/close-default-40.png");
-}
-
-documenttab .documenttab-close-container:hover:active > .documenttab-close {
-  list-style-image: url("chrome://browser/skin/images/close-active-40.png");
-}
-
-documenttab .documenttab-reload {
-  display: none;
+  padding-bottom: 11px;
+  background: url("chrome://browser/skin/images/tab-inactive-hdpi.png") bottom repeat-x;
+  border-radius: 6px;
+  background-clip: padding-box;
+  border: 1px solid rgba(0,0,0,.1);
+  border-bottom-width: 3px;
 }
 
 documenttab[selected="true"] {
-  opacity: 1;
+  border-bottom-color: rgba(0,0,0,.2);
+  background: url("chrome://browser/skin/images/tab-active-hdpi.png") bottom repeat-x;
 }
 
-documenttab[reload="true"] {
-  background-color: rgb(70,70,70);
-  border-bottom: 3px rgb(60,60,60) solid;
-  opacity: 1;
-}
-
-documenttab[reload="true"] .documenttab-thumbnail {
+.documenttab-thumbnail {
+  background-color: white;
   opacity: 0.5;
 }
 
-documenttab[reload="true"] .documenttab-close-container {
+documenttab[selected="true"] > stack > .documenttab-thumbnail {
+  opacity: 1.0;
+}
+
+.documenttab-close-container {
+  position: relative;
+  left: -16px;
+  -moz-margin-end: 49px;
+}
+
+.documenttab-close {
+  width: 40px;
+  height: 40px;
+  list-style-image: url("chrome://browser/skin/images/close-inactive-tab-hdpi.png");
+}
+
+documenttab[selected="true"] > stack > hbox > .documenttab-close {
+  list-style-image: url("chrome://browser/skin/images/close-default-hdpi.png");
+}
+
+.documenttab-close-container:hover:active > .documenttab-close {
+  list-style-image: url("chrome://browser/skin/images/close-active-hdpi.png");
+}
+
+documenttab:only-child > stack > hbox > .documenttab-close {
   display: none;
 }
 
-documenttab[reload="true"] .documenttab-reload {
-  background: rgba(137,215,21,0.8) url("chrome://browser/skin/images/reload-tab.png") no-repeat center center;
+documenttab[reload="true"] {
+  background: url("chrome://browser/skin/images/tab-closed-hdpi.png") bottom repeat-x;
+}
+
+.documenttab-reload {
+  background: url("chrome://browser/skin/images/tab-reopen-hdpi.png");
+  display: none;
+}
+
+documenttab[reload="true"] > stack > .documenttab-close-container {
+  display: none;
+}
+
+documenttab[reload="true"] > stack > .documenttab-reload {
   display: -moz-box;
 }
 

mobile/themes/core/jar.mn

@@ -46,7 +46,6 @@ chrome.jar:
   skin/images/folder-32.png                 (images/folder-32.png)
   skin/images/stop-30.png                   (images/stop-30.png)
   skin/images/reload-30.png                 (images/reload-30.png)
-  skin/images/reload-tab.png                (images/reload-tab.png)
   skin/images/alert-addons-30.png           (images/alert-addons-30.png)
   skin/images/alert-downloads-30.png        (images/alert-downloads-30.png)
   skin/images/addons-default-64.png         (images/addons-default-64.png)
@@ -62,6 +61,10 @@ chrome.jar:
   skin/images/preferences-default-64.png    (images/preferences-default-64.png)
   skin/images/console-default-64.png        (images/console-default-64.png)
   skin/images/newtab-default-64.png         (images/newtab-default-64.png)
+  skin/images/tab-active-hdpi.png           (images/tab-active-hdpi.png)
+  skin/images/tab-inactive-hdpi.png         (images/tab-inactive-hdpi.png)
+  skin/images/tab-closed-hdpi.png           (images/tab-closed-hdpi.png)
+  skin/images/tab-reopen-hdpi.png           (images/tab-reopen-hdpi.png)
   skin/images/remotetabs-32.png             (images/remotetabs-32.png)
   skin/images/remotetabs-48.png             (images/remotetabs-48.png)
   skin/images/mozilla-32.png                (images/mozilla-32.png)
@@ -104,8 +107,9 @@ chrome.jar:
   skin/images/identity-48.png               (images/identity-48.png)
   skin/images/lock-40.png                   (images/lock-40.png)
   skin/images/unlock-40.png                 (images/unlock-40.png)
-  skin/images/close-default-40.png          (images/close-default-40.png)
-  skin/images/close-active-40.png           (images/close-active-40.png)
+  skin/images/close-default-hdpi.png        (images/close-default-hdpi.png)
+  skin/images/close-active-hdpi.png         (images/close-active-hdpi.png)
+  skin/images/close-inactive-tab-hdpi.png   (images/close-inactive-tab-hdpi.png)
   skin/images/check-30.png                  (images/check-30.png)
   skin/images/search-glass-30.png           (images/search-glass-30.png)
   skin/images/search-clear-30.png           (images/search-clear-30.png)

mobile/themes/core/notification.css

@@ -7,13 +7,13 @@ notification, notification[type="warning"] {
 }
 
 notification .messageCloseButton {
-  list-style-image: url("chrome://browser/skin/images/close-default-40.png");
+  list-style-image: url("chrome://browser/skin/images/close-default-hdpi.png");
   -moz-image-region: -moz-initial;
   -moz-box-align: start;
 }
 
 notification .messageCloseButton:hover:active {
-  list-style-image: url("chrome://browser/skin/images/close-active-40.png");
+  list-style-image: url("chrome://browser/skin/images/close-active-hdpi.png");
 }
 
 notification .outset {