Bug 1244473 - Part 6 - Shorten complex rules for download items in the panel. r=jaws draft
authorPaolo Amadini <paolo.mozmail@amadzone.org>
Thu, 04 Feb 2016 00:18:50 +0000
changeset 328913 bfab9cd23a9117eb8c7d5e8b7f85a556a7363a7b
parent 328912 0507aef79a270da8a92d947cfe2d90d3ab22bd1a
child 328914 b725b26f1fcc31aa3b566eea388e9872b86bf22f
push id10432
push userpaolo.mozmail@amadzone.org
push dateThu, 04 Feb 2016 15:40:22 +0000
reviewersjaws
bugs1244473
milestone47.0a1
Bug 1244473 - Part 6 - Shorten complex rules for download items in the panel. r=jaws
browser/themes/linux/downloads/downloads.css
browser/themes/osx/downloads/downloads.css
browser/themes/shared/downloads/downloads.inc.css
browser/themes/windows/downloads/downloads.css
--- a/browser/themes/linux/downloads/downloads.css
+++ b/browser/themes/linux/downloads/downloads.css
@@ -41,67 +41,67 @@
 }
 
 .downloadButton:focus > .button-box {
   outline: 1px -moz-dialogtext dotted;
 }
 
 /*** Highlighted list items ***/
 
-#downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"][selected] {
+@keyfocus@ @itemFocused@ {
   outline: 1px -moz-dialogtext dotted;
   outline-offset: -1px;
 }
 
-#downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover {
+@notKeyfocus@ @itemFinished@[exists]:hover {
   border-radius: 3px;
   border-top: 1px solid hsla(0,0%,100%,.3);
   border-bottom: 1px solid hsla(0,0%,0%,.2);
   background-color: Highlight;
   background-image: linear-gradient(hsla(0,0%,100%,.1), transparent);
   color: HighlightText;
   cursor: pointer;
 }
 
 /*** Button icons ***/
 
 .downloadButton.downloadConfirmBlock,
 .downloadButton.downloadCancel {
   -moz-image-region: rect(0px, 16px, 16px, 0px);
 }
-richlistitem[type="download"]:hover > stack > .downloadButton.downloadConfirmBlock,
-richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel {
+@item@:hover .downloadButton.downloadConfirmBlock,
+@item@:hover .downloadButton.downloadCancel {
   -moz-image-region: rect(0px, 32px, 16px, 16px);
 }
-richlistitem[type="download"]:hover > stack > .downloadButton.downloadConfirmBlock:hover,
-richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:hover {
+@item@:hover .downloadButton.downloadConfirmBlock:hover,
+@item@:hover .downloadButton.downloadCancel:hover {
   -moz-image-region: rect(0px, 48px, 16px, 32px);
 }
-richlistitem[type="download"]:hover > stack > .downloadButton.downloadConfirmBlock:active,
-richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:active {
+@item@:hover .downloadButton.downloadConfirmBlock:active,
+@item@:hover .downloadButton.downloadCancel:active {
   -moz-image-region: rect(0px, 64px, 16px, 48px);
 }
 
 .downloadButton.downloadShow {
   -moz-image-region: rect(16px, 16px, 32px, 0px);
 }
-#downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow {
+@notKeyfocus@ @itemFinished@:hover .downloadButton.downloadShow {
   -moz-image-region: rect(16px, 96px, 32px, 80px);
 }
-#downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:hover {
+@notKeyfocus@ @itemFinished@:hover .downloadButton.downloadShow:hover {
   -moz-image-region: rect(16px, 112px, 32px, 96px);
 }
-#downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:active {
+@notKeyfocus@ @itemFinished@:hover .downloadButton.downloadShow:active {
   -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 {
+@item@:hover .downloadButton.downloadRetry {
   -moz-image-region: rect(32px, 32px, 48px, 16px);
 }
-richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:hover {
+@item@:hover .downloadButton.downloadRetry:hover {
   -moz-image-region: rect(32px, 48px, 48px, 32px);
 }
-richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:active {
+@item@:hover .downloadButton.downloadRetry:active {
   -moz-image-region: rect(32px, 64px, 48px, 48px);
 }
--- a/browser/themes/osx/downloads/downloads.css
+++ b/browser/themes/osx/downloads/downloads.css
@@ -44,204 +44,204 @@
 
 .downloadButton:focus > .button-box {
   outline: 2px -moz-mac-focusring solid;
   outline-offset: -2px;
 }
 
 /*** Highlighted list items ***/
 
-#downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"][selected],
-#downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover {
+@keyfocus@ @itemFocused@,
+@notKeyfocus@ @itemFinished@[exists]:hover {
   border-radius: 3px;
   border-top: 1px solid hsla(0,0%,100%,.2);
   border-bottom: 1px solid hsla(0,0%,0%,.4);
   background-color: Highlight;
   color: HighlightText;
 }
 
-#downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover {
+@notKeyfocus@ @itemFinished@[exists]:hover {
   cursor: pointer;
 }
 
 /*** Button icons ***/
 
 .downloadButton.downloadConfirmBlock,
 .downloadButton.downloadCancel {
   -moz-image-region: rect(0px, 16px, 16px, 0px);
 }
-richlistitem[type="download"]:hover > stack > .downloadButton.downloadConfirmBlock,
-richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel {
+@item@:hover .downloadButton.downloadConfirmBlock,
+@item@:hover .downloadButton.downloadCancel {
   -moz-image-region: rect(0px, 32px, 16px, 16px);
 }
-richlistitem[type="download"]:hover > stack > .downloadButton.downloadConfirmBlock:hover,
-richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:hover {
+@item@:hover .downloadButton.downloadConfirmBlock:hover,
+@item@:hover .downloadButton.downloadCancel:hover {
   -moz-image-region: rect(0px, 48px, 16px, 32px);
 }
-richlistitem[type="download"]:hover > stack > .downloadButton.downloadConfirmBlock:active,
-richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:active {
+@item@:hover .downloadButton.downloadConfirmBlock:active,
+@item@:hover .downloadButton.downloadCancel:active {
   -moz-image-region: rect(0px, 64px, 16px, 48px);
 }
-#downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"][selected] > stack > .downloadButton.downloadConfirmBlock,
-#downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"][selected] > stack > .downloadButton.downloadCancel {
+@keyfocus@ @itemFocused@ .downloadButton.downloadConfirmBlock,
+@keyfocus@ @itemFocused@ .downloadButton.downloadCancel {
   -moz-image-region: rect(0px, 80px, 16px, 64px);
 }
-#downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadConfirmBlock,
-#downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadCancel {
+@keyfocus@ @itemFocused@:hover .downloadButton.downloadConfirmBlock,
+@keyfocus@ @itemFocused@:hover .downloadButton.downloadCancel {
   -moz-image-region: rect(0px, 96px, 16px, 80px);
 }
-#downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadConfirmBlock:hover,
-#downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadCancel:hover {
+@keyfocus@ @itemFocused@:hover .downloadButton.downloadConfirmBlock:hover,
+@keyfocus@ @itemFocused@:hover .downloadButton.downloadCancel:hover {
   -moz-image-region: rect(0px, 112px, 16px, 96px);
 }
-#downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadConfirmBlock:active,
-#downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadCancel:active {
+@keyfocus@ @itemFocused@:hover .downloadButton.downloadConfirmBlock:active,
+@keyfocus@ @itemFocused@:hover .downloadButton.downloadCancel:active {
   -moz-image-region: rect(0px, 128px, 16px, 112px);
 }
 
 .downloadButton.downloadShow {
   -moz-image-region: rect(16px, 16px, 32px, 0px);
 }
-#downloadsPanel[keyfocus] > #downloadsListBox > richlistitem[type="download"][state="1"]:hover:not([selected]) > stack > .downloadButton.downloadShow {
+@keyfocus@ @itemFinished@:hover:not([selected]) .downloadButton.downloadShow {
   -moz-image-region: rect(16px, 32px, 32px, 16px);
 }
-#downloadsPanel[keyfocus] > #downloadsListBox > richlistitem[type="download"][state="1"]:hover:not([selected]) > stack > .downloadButton.downloadShow:hover {
+@keyfocus@ @itemFinished@:hover:not([selected]) .downloadButton.downloadShow:hover {
   -moz-image-region: rect(16px, 48px, 32px, 32px);
 }
-#downloadsPanel[keyfocus] > #downloadsListBox > richlistitem[type="download"][state="1"]:hover:not([selected]) > stack > .downloadButton.downloadShow:active {
+@keyfocus@ @itemFinished@:hover:not([selected]) .downloadButton.downloadShow:active {
   -moz-image-region: rect(16px, 64px, 32px, 48px);
 }
-#downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"][selected] > stack > .downloadButton.downloadShow {
+@keyfocus@ @itemFocused@ .downloadButton.downloadShow {
   -moz-image-region: rect(16px, 80px, 32px, 64px);
 }
-#downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow,
-#downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadShow {
+@notKeyfocus@ @itemFinished@:hover .downloadButton.downloadShow,
+@keyfocus@ @itemFocused@:hover .downloadButton.downloadShow {
   -moz-image-region: rect(16px, 96px, 32px, 80px);
 }
-#downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:hover,
-#downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadShow:hover {
+@notKeyfocus@ @itemFinished@:hover .downloadButton.downloadShow:hover,
+@keyfocus@ @itemFocused@:hover .downloadButton.downloadShow:hover {
   -moz-image-region: rect(16px, 112px, 32px, 96px);
 }
-#downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:active,
-#downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadShow:active {
+@notKeyfocus@ @itemFinished@:hover .downloadButton.downloadShow:active,
+@keyfocus@ @itemFocused@:hover .downloadButton.downloadShow:active {
   -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 {
+@item@:hover .downloadButton.downloadRetry {
   -moz-image-region: rect(32px, 32px, 48px, 16px);
 }
-richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:hover {
+@item@:hover .downloadButton.downloadRetry:hover {
   -moz-image-region: rect(32px, 48px, 48px, 32px);
 }
-richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:active {
+@item@:hover .downloadButton.downloadRetry:active {
   -moz-image-region: rect(32px, 64px, 48px, 48px);
 }
-#downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"][selected] > stack > .downloadButton.downloadRetry {
+@keyfocus@ @itemFocused@ .downloadButton.downloadRetry {
   -moz-image-region: rect(32px, 80px, 48px, 64px);
 }
-#downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadRetry {
+@keyfocus@ @itemFocused@:hover .downloadButton.downloadRetry {
   -moz-image-region: rect(32px, 96px, 48px, 80px);
 }
-#downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadRetry:hover {
+@keyfocus@ @itemFocused@:hover .downloadButton.downloadRetry:hover {
   -moz-image-region: rect(32px, 112px, 48px, 96px);
 }
-#downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadRetry:active {
+@keyfocus@ @itemFocused@:hover .downloadButton.downloadRetry:active {
   -moz-image-region: rect(32px, 128px, 48px, 112px);
 }
 
 @media (min-resolution: 2dppx) {
   .downloadButton {
     list-style-image: url("chrome://browser/skin/downloads/buttons@2x.png");
   }
   .downloadButton > .button-box > .button-icon {
     width: 16px;
     height: 16px;
   }
 
   .downloadButton.downloadConfirmBlock,
   .downloadButton.downloadCancel {
     -moz-image-region: rect(0px, 32px, 32px, 0px);
   }
-  richlistitem[type="download"]:hover > stack > .downloadButton.downloadConfirmBlock,
-  richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel {
+  @item@:hover .downloadButton.downloadConfirmBlock,
+  @item@:hover .downloadButton.downloadCancel {
     -moz-image-region: rect(0px, 64px, 32px, 32px);
   }
-  richlistitem[type="download"]:hover > stack > .downloadButton.downloadConfirmBlock:hover,
-  richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:hover {
+  @item@:hover .downloadButton.downloadConfirmBlock:hover,
+  @item@:hover .downloadButton.downloadCancel:hover {
     -moz-image-region: rect(0px, 96px, 32px, 64px);
   }
-  richlistitem[type="download"]:hover > stack > .downloadButton.downloadConfirmBlock:active,
-  richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:active {
+  @item@:hover .downloadButton.downloadConfirmBlock:active,
+  @item@:hover .downloadButton.downloadCancel:active {
     -moz-image-region: rect(0px, 128px, 32px, 96px);
   }
-  #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"][selected] > stack > .downloadButton.downloadConfirmBlock,
-  #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"][selected] > stack > .downloadButton.downloadCancel {
+  @keyfocus@ @itemFocused@ .downloadButton.downloadConfirmBlock,
+  @keyfocus@ @itemFocused@ .downloadButton.downloadCancel {
     -moz-image-region: rect(0px, 160px, 32px, 128px);
   }
-  #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadConfirmBlock,
-  #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadCancel {
+  @keyfocus@ @itemFocused@:hover .downloadButton.downloadConfirmBlock,
+  @keyfocus@ @itemFocused@:hover .downloadButton.downloadCancel {
     -moz-image-region: rect(0px, 192px, 32px, 160px);
   }
-  #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadConfirmBlock:hover,
-  #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadCancel:hover {
+  @keyfocus@ @itemFocused@:hover .downloadButton.downloadConfirmBlock:hover,
+  @keyfocus@ @itemFocused@:hover .downloadButton.downloadCancel:hover {
     -moz-image-region: rect(0px, 224px, 32px, 192px);
   }
-  #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadConfirmBlock:active,
-  #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadCancel:active {
+  @keyfocus@ @itemFocused@:hover .downloadButton.downloadConfirmBlock:active,
+  @keyfocus@ @itemFocused@:hover .downloadButton.downloadCancel:active {
     -moz-image-region: rect(0px, 256px, 32px, 224px);
   }
 
   .downloadButton.downloadShow {
     -moz-image-region: rect(32px, 32px, 64px, 0px);
   }
-  #downloadsPanel[keyfocus] > #downloadsListBox > richlistitem[type="download"][state="1"]:hover:not([selected]) > stack > .downloadButton.downloadShow {
+  @keyfocus@ @itemFinished@:hover:not([selected]) .downloadButton.downloadShow {
     -moz-image-region: rect(32px, 64px, 64px, 32px);
   }
-  #downloadsPanel[keyfocus] > #downloadsListBox > richlistitem[type="download"][state="1"]:hover:not([selected]) > stack > .downloadButton.downloadShow:hover {
+  @keyfocus@ @itemFinished@:hover:not([selected]) .downloadButton.downloadShow:hover {
     -moz-image-region: rect(32px, 96px, 64px, 64px);
   }
-  #downloadsPanel[keyfocus] > #downloadsListBox > richlistitem[type="download"][state="1"]:hover:not([selected]) > stack > .downloadButton.downloadShow:active {
+  @keyfocus@ @itemFinished@:hover:not([selected]) .downloadButton.downloadShow:active {
     -moz-image-region: rect(32px, 128px, 64px, 96px);
   }
-  #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"][selected] > stack > .downloadButton.downloadShow {
+  @keyfocus@ @itemFocused@ .downloadButton.downloadShow {
     -moz-image-region: rect(32px, 160px, 64px, 128px);
   }
-  #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow,
-  #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadShow {
+  @notKeyfocus@ @itemFinished@:hover .downloadButton.downloadShow,
+  @keyfocus@ @itemFocused@:hover .downloadButton.downloadShow {
     -moz-image-region: rect(32px, 192px, 64px, 160px);
   }
-  #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:hover,
-  #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadShow:hover {
+  @notKeyfocus@ @itemFinished@:hover .downloadButton.downloadShow:hover,
+  @keyfocus@ @itemFocused@:hover .downloadButton.downloadShow:hover {
     -moz-image-region: rect(32px, 224px, 64px, 192px);
   }
-  #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:active,
-  #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadShow:active {
+  @notKeyfocus@ @itemFinished@:hover .downloadButton.downloadShow:active,
+  @keyfocus@ @itemFocused@:hover .downloadButton.downloadShow:active {
     -moz-image-region: rect(32px, 256px, 64px, 224px);
   }
 
   .downloadButton.downloadRetry {
     -moz-image-region: rect(64px, 32px, 96px, 0px);
   }
-  richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry {
+  @item@:hover .downloadButton.downloadRetry {
     -moz-image-region: rect(64px, 64px, 96px, 32px);
   }
-  richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:hover {
+  @item@:hover .downloadButton.downloadRetry:hover {
     -moz-image-region: rect(64px, 96px, 96px, 64px);
   }
-  richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:active {
+  @item@:hover .downloadButton.downloadRetry:active {
     -moz-image-region: rect(64px, 128px, 96px, 96px);
   }
-  #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"][selected] > stack > .downloadButton.downloadRetry {
+  @keyfocus@ @itemFocused@ .downloadButton.downloadRetry {
     -moz-image-region: rect(64px, 160px, 96px, 128px);
   }
-  #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadRetry {
+  @keyfocus@ @itemFocused@:hover .downloadButton.downloadRetry {
     -moz-image-region: rect(64px, 192px, 96px, 160px);
   }
-  #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadRetry:hover {
+  @keyfocus@ @itemFocused@:hover .downloadButton.downloadRetry:hover {
     -moz-image-region: rect(64px, 224px, 96px, 192px);
   }
-  #downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"]:hover[selected] > stack > .downloadButton.downloadRetry:active {
+  @keyfocus@ @itemFocused@:hover .downloadButton.downloadRetry:active {
     -moz-image-region: rect(64px, 256px, 96px, 224px);
   }
 }
--- a/browser/themes/shared/downloads/downloads.inc.css
+++ b/browser/themes/shared/downloads/downloads.inc.css
@@ -1,15 +1,19 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 %filter substitution
 
 %define keyfocus #downloadsPanel[keyfocus]
+%define notKeyfocus #downloadsPanel:not([keyfocus])
+%define item richlistitem[type="download"]
+%define itemFinished @item@[state="1"]
+%define itemFocused #downloadsListBox:focus > @item@[selected]
 
 /*** Panel and outer controls ***/
 
 #downloadsPanel > .panel-arrowcontainer > .panel-arrowcontent {
   padding: 0;
 }
 
 #downloadsListBox {
--- a/browser/themes/windows/downloads/downloads.css
+++ b/browser/themes/windows/downloads/downloads.css
@@ -93,120 +93,120 @@
 }
 
 @keyfocus@ .downloadButton:focus > .button-box {
   border: 1px dotted ThreeDDarkShadow;
 }
 
 /*** Highlighted list items ***/
 
-#downloadsPanel[keyfocus] > #downloadsListBox:focus > richlistitem[type="download"][selected] {
+@keyfocus@ @itemFocused@ {
   outline: 1px -moz-dialogtext dotted;
   outline-offset: -1px;
 }
 
-#downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover {
+@notKeyfocus@ @itemFinished@[exists]:hover {
   background-color: hsla(210,4%,10%,.08);
   outline: 1px solid hsla(210,4%,10%,.1);
   outline-offset: -1px;
   cursor: pointer;
 }
 
-#downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover:active {
+@notKeyfocus@ @itemFinished@[exists]:hover:active {
   background-color: hsla(210,4%,10%,.15);
   outline: 1px solid hsla(210,4%,10%,.15);
   box-shadow: 0 1px 0 0 hsla(210,4%,10%,.05) inset;
 }
 
 @media (-moz-os-version: windows-xp),
        (-moz-os-version: windows-vista),
        (-moz-os-version: windows-win7) {
-  #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover {
+  @notKeyfocus@ @itemFinished@[exists]:hover {
     border-radius: 3px;
     outline: 0;
     border-top: 1px solid hsla(0,0%,100%,.2);
     border-bottom: 1px solid hsla(0,0%,0%,.2);
     background-color: Highlight;
     color: HighlightText;
   }
 
-  #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover:active {
+  @notKeyfocus@ @itemFinished@[exists]:hover:active {
     background-color: Highlight;
     outline: 0;
     box-shadow: none;
   }
 }
 
 @media (-moz-windows-default-theme) and (-moz-os-version: windows-vista),
        (-moz-windows-default-theme) and (-moz-os-version: windows-win7) {
-  #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"][exists]:hover {
+  @notKeyfocus@ @itemFinished@[exists]:hover {
     border: 1px solid hsl(213,45%,65%);
     box-shadow: 0 0 0 1px hsla(0,0%,100%,.5) inset,
                 0 1px 0 hsla(0,0%,100%,.3) inset;
     background-image: linear-gradient(hsl(212,86%,92%), hsl(212,91%,86%));
     color: black;
   }
 }
 
 /*** Button icons ***/
 
 .downloadButton.downloadConfirmBlock,
 .downloadButton.downloadCancel {
   -moz-image-region: rect(0px, 16px, 16px, 0px);
 }
-richlistitem[type="download"]:hover > stack > .downloadButton.downloadConfirmBlock,
-richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel {
+@item@:hover .downloadButton.downloadConfirmBlock,
+@item@:hover .downloadButton.downloadCancel {
   -moz-image-region: rect(0px, 32px, 16px, 16px);
 }
-richlistitem[type="download"]:hover > stack > .downloadButton.downloadConfirmBlock:hover,
-richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:hover {
+@item@:hover .downloadButton.downloadConfirmBlock:hover,
+@item@:hover .downloadButton.downloadCancel:hover {
   -moz-image-region: rect(0px, 48px, 16px, 32px);
 }
-richlistitem[type="download"]:hover > stack > .downloadButton.downloadConfirmBlock:active,
-richlistitem[type="download"]:hover > stack > .downloadButton.downloadCancel:active {
+@item@:hover .downloadButton.downloadConfirmBlock:active,
+@item@:hover .downloadButton.downloadCancel:active {
   -moz-image-region: rect(0px, 64px, 16px, 48px);
 }
 
 .downloadButton.downloadShow {
   -moz-image-region: rect(16px, 16px, 32px, 0px);
 }
-richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow {
+@item@:hover .downloadButton.downloadShow {
   -moz-image-region: rect(16px, 32px, 32px, 16px);
 }
-richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow:hover {
+@item@:hover .downloadButton.downloadShow:hover {
   -moz-image-region: rect(16px, 48px, 32px, 32px);
 }
-richlistitem[type="download"]:hover > stack > .downloadButton.downloadShow:active {
+@item@:hover .downloadButton.downloadShow:active {
   -moz-image-region: rect(16px, 64px, 32px, 48px);
 }
 @media (-moz-os-version: windows-xp) {
-  #downloadsPanel[keyfocus] > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow {
+  @keyfocus@ @itemFinished@:hover .downloadButton.downloadShow {
     -moz-image-region: rect(16px, 32px, 32px, 16px);
   }
-  #downloadsPanel[keyfocus] > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:hover {
+  @keyfocus@ @itemFinished@:hover .downloadButton.downloadShow:hover {
     -moz-image-region: rect(16px, 48px, 32px, 32px);
   }
-  #downloadsPanel[keyfocus] > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:active {
+  @keyfocus@ @itemFinished@:hover .downloadButton.downloadShow:active {
     -moz-image-region: rect(16px, 64px, 32px, 48px);
   }
-  #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow {
+  @notKeyfocus@ @itemFinished@:hover .downloadButton.downloadShow {
     -moz-image-region: rect(16px, 96px, 32px, 80px);
   }
-  #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:hover {
+  @notKeyfocus@ @itemFinished@:hover .downloadButton.downloadShow:hover {
     -moz-image-region: rect(16px, 112px, 32px, 96px);
   }
-  #downloadsPanel:not([keyfocus]) > #downloadsListBox > richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:active {
+  @notKeyfocus@ @itemFinished@:hover .downloadButton.downloadShow:active {
     -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 {
+@item@:hover .downloadButton.downloadRetry {
   -moz-image-region: rect(32px, 32px, 48px, 16px);
 }
-richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:hover {
+@item@:hover .downloadButton.downloadRetry:hover {
   -moz-image-region: rect(32px, 48px, 48px, 32px);
 }
-richlistitem[type="download"]:hover > stack > .downloadButton.downloadRetry:active {
+@item@:hover .downloadButton.downloadRetry:active {
   -moz-image-region: rect(32px, 64px, 48px, 48px);
 }