Bug 787285 - Enhance the presence of the stop/resume/open buttons in the downloads views.

r=mak

browser/themes/gnomestripe/downloads/allDownloadsViewOverlay.css

@@ -46,16 +46,80 @@
   list-style-image: url("chrome://browser/skin/downloads/buttons.png");
 }
 
- /*** Button icons ***/
+/*** Button icons ***/
 
 .downloadButton.downloadCancel {
   -moz-image-region: rect(0px, 16px, 16px, 0px);
 }
+richlistitem.download:hover > .downloadButton.downloadCancel {
+  -moz-image-region: rect(0px, 32px, 16px, 16px);
+}
+richlistitem.download:hover > .downloadButton.downloadCancel:hover {
+  -moz-image-region: rect(0px, 48px, 16px, 32px);
+}
+richlistitem.download:hover > .downloadButton.downloadCancel:active {
+  -moz-image-region: rect(0px, 64px, 16px, 48px);
+}
+richlistitem.download[selected] > .downloadButton.downloadCancel {
+  -moz-image-region: rect(0px, 80px, 16px, 64px);
+}
+richlistitem.download:hover[selected] > .downloadButton.downloadCancel {
+  -moz-image-region: rect(0px, 96px, 16px, 80px);
+}
+richlistitem.download:hover[selected] > .downloadButton.downloadCancel:hover {
+  -moz-image-region: rect(0px, 112px, 16px, 96px);
+}
+richlistitem.download:hover[selected] > .downloadButton.downloadCancel:active {
+  -moz-image-region: rect(0px, 128px, 16px, 112px);
+}
 
 .downloadButton.downloadShow {
   -moz-image-region: rect(16px, 16px, 32px, 0px);
 }
+richlistitem.download:hover > .downloadButton.downloadShow {
+  -moz-image-region: rect(16px, 32px, 32px, 16px);
+}
+richlistitem.download:hover > .downloadButton.downloadShow:hover {
+  -moz-image-region: rect(16px, 48px, 32px, 32px);
+}
+richlistitem.download:hover > .downloadButton.downloadShow:active {
+  -moz-image-region: rect(16px, 64px, 32px, 48px);
+}
+richlistitem.download[selected] > .downloadButton.downloadShow {
+  -moz-image-region: rect(16px, 80px, 32px, 64px);
+}
+richlistitem.download:hover[selected] > .downloadButton.downloadShow {
+  -moz-image-region: rect(16px, 96px, 32px, 80px);
+}
+richlistitem.download:hover[selected] > .downloadButton.downloadShow:hover {
+  -moz-image-region: rect(16px, 112px, 32px, 96px);
+}
+richlistitem.download:hover[selected] > .downloadButton.downloadShow:active {
+  -moz-image-region: rect(16px, 128px, 32px, 112px);
+}
 
 .downloadButton.downloadRetry {
   -moz-image-region: rect(32px, 16px, 48px, 0px);
 }
+richlistitem.download:hover > .downloadButton.downloadRetry {
+  -moz-image-region: rect(32px, 32px, 48px, 16px);
+}
+richlistitem.download:hover > .downloadButton.downloadRetry:hover {
+  -moz-image-region: rect(32px, 48px, 48px, 32px);
+}
+richlistitem.download:hover > .downloadButton.downloadRetry:active {
+  -moz-image-region: rect(32px, 64px, 48px, 48px);
+}
+richlistitem.download[selected] > .downloadButton.downloadRetry {
+  -moz-image-region: rect(32px, 80px, 48px, 64px);
+}
+richlistitem.download:hover[selected] > .downloadButton.downloadRetry {
+  -moz-image-region: rect(32px, 96px, 48px, 80px);
+}
+richlistitem.download:hover[selected] > .downloadButton.downloadRetry:hover {
+  -moz-image-region: rect(32px, 112px, 48px, 96px);
+}
+richlistitem.download:hover[selected] > .downloadButton.downloadRetry:active {
+  -moz-image-region: rect(32px, 128px, 48px, 112px);
+}
+

browser/themes/gnomestripe/downloads/downloads.css

@@ -144,41 +144,42 @@ richlistitem[type="download"][state="1"]:hover {
 .downloadButton.downloadCancel {
   -moz-image-region: rect(0px, 16px, 16px, 0px);
 }
-.downloadButton.downloadCancel:hover {
+richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel {
   -moz-image-region: rect(0px, 32px, 16px, 16px);
 }
-.downloadButton.downloadCancel:active {
+richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:hover {
   -moz-image-region: rect(0px, 48px, 16px, 32px);
 }
+richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:active {
+  -moz-image-region: rect(0px, 64px, 16px, 48px);
+}
 
 .downloadButton.downloadShow {
   -moz-image-region: rect(16px, 16px, 32px, 0px);
 }
-.downloadButton.downloadShow:hover {
-  -moz-image-region: rect(16px, 32px, 32px, 16px);
+richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow {
+  -moz-image-region: rect(16px, 96px, 32px, 80px);
 }
-.downloadButton.downloadShow:active {
-  -moz-image-region: rect(16px, 48px, 32px, 32px);
+richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:hover {
+  -moz-image-region: rect(16px, 112px, 32px, 96px);
 }
+richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:active {
+  -moz-image-region: rect(16px, 128px, 32px, 112px);
+}
+
+/** TODO: state="1"**/
 
 .downloadButton.downloadRetry {
   -moz-image-region: rect(32px, 16px, 48px, 0px);
 }
-.downloadButton.downloadRetry:hover {
+richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry {
   -moz-image-region: rect(32px, 32px, 48px, 16px);
 }
-.downloadButton.downloadRetry:active {
+richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:hover {
   -moz-image-region: rect(32px, 48px, 48px, 32px);
 }
-
-richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow {
-  -moz-image-region: rect(48px, 16px, 64px, 0px);
-}
-richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:hover {
-  -moz-image-region: rect(48px, 32px, 64px, 16px);
-}
-richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:active {
-  -moz-image-region: rect(48px, 48px, 64px, 32px);
+richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:active {
+  -moz-image-region: rect(32px, 64px, 48px, 48px);
 }
 
 /*** Status and progress indicator ***/

browser/themes/pinstripe/downloads/allDownloadsViewOverlay.css

@@ -51,11 +51,74 @@
 .downloadButton.downloadCancel {
   -moz-image-region: rect(0px, 16px, 16px, 0px);
 }
+richlistitem.download:hover > .downloadButton.downloadCancel {
+  -moz-image-region: rect(0px, 32px, 16px, 16px);
+}
+richlistitem.download:hover > .downloadButton.downloadCancel:hover {
+  -moz-image-region: rect(0px, 48px, 16px, 32px);
+}
+richlistitem.download:hover > .downloadButton.downloadCancel:active {
+  -moz-image-region: rect(0px, 64px, 16px, 48px);
+}
+richlistitem.download[selected] > .downloadButton.downloadCancel {
+  -moz-image-region: rect(0px, 80px, 16px, 64px);
+}
+richlistitem.download:hover[selected] > .downloadButton.downloadCancel {
+  -moz-image-region: rect(0px, 96px, 16px, 80px);
+}
+richlistitem.download:hover[selected] > .downloadButton.downloadCancel:hover {
+  -moz-image-region: rect(0px, 112px, 16px, 96px);
+}
+richlistitem.download:hover[selected] > .downloadButton.downloadCancel:active {
+  -moz-image-region: rect(0px, 128px, 16px, 112px);
+}
 
 .downloadButton.downloadShow {
   -moz-image-region: rect(16px, 16px, 32px, 0px);
 }
+richlistitem.download:hover > .downloadButton.downloadShow {
+  -moz-image-region: rect(16px, 32px, 32px, 16px);
+}
+richlistitem.download:hover > .downloadButton.downloadShow:hover {
+  -moz-image-region: rect(16px, 48px, 32px, 32px);
+}
+richlistitem.download:hover > .downloadButton.downloadShow:active {
+  -moz-image-region: rect(16px, 64px, 32px, 48px);
+}
+richlistitem.download[selected] > .downloadButton.downloadShow {
+  -moz-image-region: rect(16px, 80px, 32px, 64px);
+}
+richlistitem.download:hover[selected] > .downloadButton.downloadShow {
+  -moz-image-region: rect(16px, 96px, 32px, 80px);
+}
+richlistitem.download:hover[selected] > .downloadButton.downloadShow:hover {
+  -moz-image-region: rect(16px, 112px, 32px, 96px);
+}
+richlistitem.download:hover[selected] > .downloadButton.downloadShow:active {
+  -moz-image-region: rect(16px, 128px, 32px, 112px);
+}
 
 .downloadButton.downloadRetry {
   -moz-image-region: rect(32px, 16px, 48px, 0px);
 }
+richlistitem.download:hover > .downloadButton.downloadRetry {
+  -moz-image-region: rect(32px, 32px, 48px, 16px);
+}
+richlistitem.download:hover > .downloadButton.downloadRetry:hover {
+  -moz-image-region: rect(32px, 48px, 48px, 32px);
+}
+richlistitem.download:hover > .downloadButton.downloadRetry:active {
+  -moz-image-region: rect(32px, 64px, 48px, 48px);
+}
+richlistitem.download[selected] > .downloadButton.downloadRetry {
+  -moz-image-region: rect(32px, 80px, 48px, 64px);
+}
+richlistitem.download:hover[selected] > .downloadButton.downloadRetry {
+  -moz-image-region: rect(32px, 96px, 48px, 80px);
+}
+richlistitem.download:hover[selected] > .downloadButton.downloadRetry:hover {
+  -moz-image-region: rect(32px, 112px, 48px, 96px);
+}
+richlistitem.download:hover[selected] > .downloadButton.downloadRetry:active {
+  -moz-image-region: rect(32px, 128px, 48px, 112px);
+}

browser/themes/pinstripe/downloads/downloads.css

@@ -163,23 +163,41 @@ richlistitem[type="download"][state="1"]:hover {
 .downloadButton.downloadCancel {
   -moz-image-region: rect(0px, 16px, 16px, 0px);
 }
+richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel {
+  -moz-image-region: rect(0px, 32px, 16px, 16px);
+}
+richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:hover {
+  -moz-image-region: rect(0px, 48px, 16px, 32px);
+}
+richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:active {
+  -moz-image-region: rect(0px, 64px, 16px, 48px);
+}
 
 .downloadButton.downloadShow {
   -moz-image-region: rect(16px, 16px, 32px, 0px);
 }
 richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow {
-  -moz-image-region: rect(16px, 32px, 32px, 16px);
+  -moz-image-region: rect(16px, 96px, 32px, 80px);
 }
 richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:hover {
-  -moz-image-region: rect(16px, 48px, 32px, 32px);
+  -moz-image-region: rect(16px, 112px, 32px, 96px);
 }
 richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:active {
-  -moz-image-region: rect(16px, 64px, 32px, 48px);
+  -moz-image-region: rect(16px, 128px, 32px, 112px);
 }
 
 .downloadButton.downloadRetry {
   -moz-image-region: rect(32px, 16px, 48px, 0px);
 }
+richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry {
+  -moz-image-region: rect(32px, 32px, 48px, 16px);
+}
+richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:hover {
+  -moz-image-region: rect(32px, 48px, 48px, 32px);
+}
+richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:active {
+  -moz-image-region: rect(32px, 64px, 48px, 48px);
+}
 
 /*** Status and progress indicator ***/
 

browser/themes/winstripe/downloads/allDownloadsViewOverlay.css

@@ -57,10 +57,96 @@
   -moz-image-region: rect(0px, 16px, 16px, 0px);
 }
 
+richlistitem.download:hover > .downloadButton.downloadCancel {
+   -moz-image-region: rect(0px, 32px, 16px, 16px);
+}
+
+richlistitem.download:hover > .downloadButton.downloadCancel:hover {
+  -moz-image-region: rect(0px, 48px, 16px, 32px);
+}
+
+richlistitem.download:hover > .downloadButton.downloadCancel:active {
+  -moz-image-region: rect(0px, 64px, 16px, 48px);
+}
+
 .downloadButton.downloadShow {
   -moz-image-region: rect(16px, 16px, 32px, 0px);
 }
 
+richlistitem.download:hover > .downloadButton.downloadShow {
+   -moz-image-region: rect(16px, 32px, 32px, 16px);
+}
+
+richlistitem.download:hover > .downloadButton.downloadShow:hover {
+  -moz-image-region: rect(16px, 48px, 32px, 32px);
+}
+
+richlistitem.download:hover > .downloadButton.downloadShow:active {
+  -moz-image-region: rect(16px, 64px, 32px, 48px);
+}
+
 .downloadButton.downloadRetry {
   -moz-image-region: rect(32px, 16px, 48px, 0px);
 }
+
+richlistitem.download:hover > .downloadButton.downloadRetry {
+   -moz-image-region: rect(32px, 32px, 48px, 16px);
+}
+
+richlistitem.download:hover > .downloadButton.downloadRetry:hover {
+  -moz-image-region: rect(32px, 48px, 48px, 32px);
+}
+
+richlistitem.download:hover > .downloadButton.downloadRetry:active {
+  -moz-image-region: rect(32px, 64px, 48px, 48px);
+}
+
+%ifndef WINSTRIPE_AERO
+richlistitem.download[selected] > .downloadButton.downloadCancel {
+  -moz-image-region: rect(0px, 80px, 16px, 64px);
+}
+
+richlistitem.download[selected]:hover > .downloadButton.downloadCancel {
+  -moz-image-region: rect(0px, 96px, 16px, 80px);
+}
+
+richlistitem.download[selected]:hover > .downloadButton.downloadCancel:hover {
+  -moz-image-region: rect(0px, 112px, 16px, 96px);
+}
+
+richlistitem.download[selected]:hover > .downloadButton.downloadCancel:active {
+  -moz-image-region: rect(0px, 128px, 16px, 112px);
+}
+
+richlistitem.download[selected] > .downloadButton.downloadShow {
+  -moz-image-region: rect(16px, 80px, 32px, 64px);
+}
+
+richlistitem.download[selected]:hover > .downloadButton.downloadShow {
+  -moz-image-region: rect(16px, 96px, 32px, 80px);
+}
+
+richlistitem.download[selected]:hover > .downloadButton.downloadShow:hover {
+  -moz-image-region: rect(16px, 112px, 32px, 96px);
+}
+
+richlistitem.download[selected]:hover > .downloadButton.downloadShow:active {
+  -moz-image-region: rect(16px, 128px, 32px, 112px);
+}
+
+richlistitem.download[selected] > .downloadButton.downloadRetry {
+  -moz-image-region: rect(32px, 80px, 48px, 64px);
+}
+
+richlistitem.download[selected]:hover > .downloadButton.downloadRetry {
+  -moz-image-region: rect(32px, 96px, 48px, 80px);
+}
+
+richlistitem.download[selected]:hover > .downloadButton.downloadRetry:hover {
+  -moz-image-region: rect(32px, 112px, 48px, 96px);
+}
+
+richlistitem.download[selected]:hover > .downloadButton.downloadRetry:active {
+  -moz-image-region: rect(32px, 128px, 48px, 112px);
+}
+%endif

browser/themes/winstripe/downloads/downloads.css

@@ -145,50 +145,52 @@ richlistitem[type="download"][state="1"]:hover {
 .downloadButton.downloadCancel {
   -moz-image-region: rect(0px, 16px, 16px, 0px);
 }
-.downloadButton.downloadCancel:hover {
+richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel {
   -moz-image-region: rect(0px, 32px, 16px, 16px);
 }
-.downloadButton.downloadCancel:active {
+richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:hover {
   -moz-image-region: rect(0px, 48px, 16px, 32px);
 }
+richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:active {
+  -moz-image-region: rect(0px, 64px, 16px, 48px);
+}
 
 .downloadButton.downloadShow {
   -moz-image-region: rect(16px, 16px, 32px, 0px);
 }
-.downloadButton.downloadShow:hover {
+richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow {
   -moz-image-region: rect(16px, 32px, 32px, 16px);
 }
-.downloadButton.downloadShow:active {
+richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow:hover {
   -moz-image-region: rect(16px, 48px, 32px, 32px);
 }
+richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow:active {
+  -moz-image-region: rect(16px, 64px, 32px, 48px);
+}
+%ifndef WINSTRIPE_AERO
+richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow {
+  -moz-image-region: rect(16px, 96px, 32px, 80px);
+}
+richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:hover {
+  -moz-image-region: rect(16px, 112px, 32px, 96px);
+}
+richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:active {
+  -moz-image-region: rect(16px, 128px, 32px, 112px);
+}
+%endif
 
 .downloadButton.downloadRetry {
   -moz-image-region: rect(32px, 16px, 48px, 0px);
 }
-.downloadButton.downloadRetry:hover {
+richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry {
   -moz-image-region: rect(32px, 32px, 48px, 16px);
 }
-.downloadButton.downloadRetry:active {
+richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:hover {
   -moz-image-region: rect(32px, 48px, 48px, 32px);
 }
-
-%ifdef WINSTRIPE_AERO
-@media not all and (-moz-windows-default-theme) {
-%endif
-
-richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow {
-  -moz-image-region: rect(48px, 16px, 64px, 0px);
+richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:active {
+  -moz-image-region: rect(32px, 64px, 48px, 48px);
 }
-richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:hover {
-  -moz-image-region: rect(48px, 32px, 64px, 16px);
-}
-richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:active {
-  -moz-image-region: rect(48px, 48px, 64px, 32px);
-}
-
-%ifdef WINSTRIPE_AERO
-}
-%endif
 
 /*** Status and progress indicator ***/