Bug 535410 - Red close buttons should have a pushed-in state [r=mark.finkle]

--HG--
rename : mobile/themes/hildon/images/close-40.png => mobile/themes/hildon/images/close-default-40.png
rename : mobile/themes/wince/images/close-16.png => mobile/themes/wince/images/close-default-16.png
rename : mobile/themes/wince/images/close-40.png => mobile/themes/wince/images/close-default-40.png

mobile/themes/hildon/browser.css

@@ -532,6 +532,10 @@ placeitem[ui="manage"] > .bookmark-manage > image {
   list-style-image: url("chrome://browser/skin/images/close-40.png");
 }
 
+.close-button:hover:active {
+  list-style-image: url("chrome://browser/skin/images/close-active-40.png");
+}
+
 .tool-search {
   list-style-image: url("chrome://browser/skin/images/navigation-magnifier-30.png");
   margin-right: 8px;
@@ -729,6 +733,10 @@ box[type="documenttab"] .documenttab-close {
   list-style-image: url("chrome://browser/skin/images/close-40.png");
 }
 
+box[type="documenttab"] hbox:hover:active .documenttab-close {
+  list-style-image: url("chrome://browser/skin/images/close-active-40.png");
+}
+
 box[type="documenttab"]:only-child .documenttab-close {
   display: none;
 }

mobile/themes/hildon/jar.mn

@@ -96,7 +96,8 @@ chrome.jar:
   images/toolbarbutton-active-64.png   (images/toolbarbutton-active-64.png)
   images/lock-40.png                   (images/lock-40.png)
   images/unlock-40.png                 (images/unlock-40.png)
-  images/close-40.png                  (images/close-40.png)
+  images/close-default-40.png          (images/close-default-40.png)
+  images/close-active-40.png           (images/close-active-40.png)
   images/check-30.png                  (images/check-30.png)
   images/search-glass-30.png           (images/search-glass-30.png)
   images/search-clear-30.png           (images/search-clear-30.png)

mobile/themes/hildon/notification.css

@@ -7,11 +7,15 @@ notification, notification[type="warning"] {
 }
 
 notification .messageCloseButton {
-  list-style-image: url("chrome://browser/skin/images/close-40.png");
+  list-style-image: url("chrome://browser/skin/images/close-default-40.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");
+}
+
 notification .outset {
   border-color: #6897bd !important;
 }

mobile/themes/wince/browser-high.css

@@ -37,7 +37,7 @@
  * ***** END LICENSE BLOCK ***** */
 
 @media all and (min-device-width: 401px) {
-	
+
 /* main toolbar (URL bar) -------------------------------------------------- */
 #tool-app-close {
   visibility: hidden;
@@ -259,7 +259,11 @@ placeitem[type="folder"] > .bookmark-manage > image {
   border: none;
   margin: 0;
   padding: 0;
-  list-style-image: url("chrome://browser/skin/images/close-40.png");
+  list-style-image: url("chrome://browser/skin/images/close-default-40.png");
+}
+
+.close-button:hover:active {
+  list-style-image: url("chrome://browser/skin/images/close-active-40.png");
 }
 
 .tool-search {
@@ -307,7 +311,11 @@ box[type="documenttab"][selected="true"] .documenttab-canvas {
 box[type="documenttab"] .documenttab-close {
   width: 40px;
   height: 40px;
-  list-style-image: url("chrome://browser/skin/images/close-40.png");
+  list-style-image: url("chrome://browser/skin/images/close-default-40.png");
+}
+
+box[type="documenttab"] hbox:hover:active .documenttab-close {
+  list-style-image: url("chrome://browser/skin/images/close-active-40.png");
 }
 
 #newtab-button {

mobile/themes/wince/browser-low.css

@@ -261,6 +261,10 @@ placeitem[type="folder"] > .bookmark-manage > image {
   list-style-image: url("chrome://browser/skin/images/close-16.png");
 }
 
+.close-button:hover:active {
+  list-style-image: url("chrome://browser/skin/images/close-active-16.png");
+}
+
 .tool-search {
   list-style-image: url("chrome://browser/skin/images/navigation-magnifier-16.png");
 }
@@ -309,6 +313,10 @@ box[type="documenttab"] .documenttab-close {
   list-style-image: url("chrome://browser/skin/images/close-16.png");
 }
 
+box[type="documenttab"] hbox:hover:active .documenttab-close {
+  list-style-image: url("chrome://browser/skin/images/close-active-16.png");
+}
+
 #newtab-button {
   list-style-image: url("images/newtab-default-36.png");
 }

mobile/themes/wince/jar.mn

@@ -69,7 +69,8 @@ chrome.jar:
   images/identitySSL-64.png            (images/identitySSL-64.png)
   images/lock-40.png                   (images/lock-40.png)
   images/unlock-40.png                 (images/unlock-40.png)
-  images/close-40.png                  (images/close-40.png)
+  images/close-default-40.png          (images/close-default-40.png)
+  images/close-active-40.png           (images/close-active-40.png)
   images/check-30.png                  (images/check-30.png)
   images/fullscreen-close-40.png       (images/fullscreen-close-40.png)
   images/fullscreen-up-40.png          (images/fullscreen-up-40.png)
@@ -114,7 +115,8 @@ chrome.jar:
   images/newtab-default-36.png         (images/newtab-default-36.png)
   images/newtab-active-36.png          (images/newtab-active-36.png)
   images/navigation-magnifier-16.png   (images/navigation-magnifier-16.png)
-  images/close-16.png                  (images/close-16.png)
+  images/close-default-16.png          (images/close-default-16.png)
+  images/close-active-16.png           (images/close-active-16.png)
   images/bookmarks-24.png              (images/bookmarks-24.png)
   images/go-16.png                     (images/go-16.png)
   images/reload-16.png                 (images/reload-16.png)

mobile/themes/wince/notification.css

@@ -12,13 +12,21 @@ notification .messageCloseButton {
 
 @media all and (min-device-width: 401px) {
 notification .messageCloseButton {
-  list-style-image: url("chrome://browser/skin/images/close-40.png");
+  list-style-image: url("chrome://browser/skin/images/close-default-40.png");
+}
+
+notification .messageCloseButton:hover:active {
+  list-style-image: url("chrome://browser/skin/images/close-active-40.png");
 }
 }
 
 @media all and (max-device-width: 400px) {
 notification .messageCloseButton {
-  list-style-image: url("chrome://browser/skin/images/close-16.png");
+  list-style-image: url("chrome://browser/skin/images/close-default-16.png");
+}
+
+notification .messageCloseButton:hover:active {
+  list-style-image: url("chrome://browser/skin/images/close-active-16.png");
 }
 }