Bug 817584 - Replace descendent selectors in Downloads Panel CSS with child selectors. r=mak.

browser/components/downloads/content/downloads.css

@@ -96,7 +96,7 @@ richlistitem[type="download"]:not([selected]) button {
   visibility: hidden;
 }
 
-#downloadsSummary:not([inprogress="true"]) #downloadsSummaryProgress,
-#downloadsSummary:not([inprogress="true"]) #downloadsSummaryDetails {
+#downloadsSummary:not([inprogress="true"]) > vbox > #downloadsSummaryProgress,
+#downloadsSummary:not([inprogress="true"]) > vbox > #downloadsSummaryDetails {
   display: none;
 }

browser/themes/gnomestripe/downloads/downloads.css

@@ -24,7 +24,7 @@
   cursor: pointer;
 }
 
-#downloadsPanel[hasdownloads] #downloadsFooter {
+#downloadsPanel[hasdownloads] > #downloadsFooter {
   border-top: 1px solid ThreeDShadow;
   background-image: -moz-linear-gradient(hsla(0,0%,0%,.15), hsla(0,0%,0%,.08) 6px);
 }
@@ -173,13 +173,13 @@ richlistitem[type="download"][state="1"]:hover {
   -moz-image-region: rect(32px, 48px, 48px, 32px);
 }
 
-richlistitem[type="download"][state="1"]:hover .downloadButton.downloadShow {
+richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow {
   -moz-image-region: rect(48px, 16px, 64px, 0px);
 }
-richlistitem[type="download"][state="1"]:hover .downloadButton.downloadShow:hover {
+richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:hover {
   -moz-image-region: rect(48px, 32px, 64px, 16px);
 }
-richlistitem[type="download"][state="1"]:hover .downloadButton.downloadShow:active {
+richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:active {
   -moz-image-region: rect(48px, 48px, 64px, 32px);
 }
 
@@ -192,33 +192,33 @@ richlistitem[type="download"][state="1"]:hover .downloadButton.downloadShow:acti
   position: relative;
 }
 
-toolbar[iconsize="small"] #downloads-indicator-anchor {
+toolbar[iconsize="small"] > #downloads-indicator > #downloads-indicator-anchor {
   min-width: 16px;
   min-height: 16px;
 }
 
-toolbar[iconsize="large"] #downloads-indicator-anchor {
+toolbar[iconsize="large"] > #downloads-indicator > #downloads-indicator-anchor {
   min-width: 24px;
   min-height: 24px;
 }
 
 /*** Main indicator icon ***/
 
-toolbar[iconsize="small"] #downloads-indicator-icon {
+toolbar[iconsize="small"] > #downloads-indicator > #downloads-indicator-anchor > #downloads-indicator-icon {
   background: -moz-image-rect(url("chrome://browser/skin/Toolbar-small.png"),
                               0, 16, 16, 0) center no-repeat;
 }
 
-toolbar[iconsize="large"] #downloads-indicator-icon {
+toolbar[iconsize="large"] > #downloads-indicator > #downloads-indicator-anchor > #downloads-indicator-icon {
   background: -moz-image-rect(url("chrome://browser/skin/Toolbar.png"),
                               0, 24, 24, 0) center no-repeat;
 }
 
-toolbar[iconsize="small"] #downloads-indicator[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
+toolbar[iconsize="small"] > #downloads-indicator[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
   background-image: url("chrome://browser/skin/downloads/download-glow-small.png");
 }
 
-toolbar[iconsize="large"] #downloads-indicator[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
+toolbar[iconsize="large"] > #downloads-indicator[attention] > #downloads-indicator-anchor > #downloads-indicator-icon {
   background-image: url("chrome://browser/skin/downloads/download-glow.png");
 }
 

browser/themes/pinstripe/downloads/downloads.css

@@ -26,12 +26,12 @@
   cursor: pointer;
 }
 
-#downloadsPanel:not([hasdownloads]) #downloadsHistory {
+#downloadsPanel:not([hasdownloads]) > #downloadsFooter > #downloadsHistory {
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
 }
 
-#downloadsPanel[hasdownloads] #downloadsFooter {
+#downloadsPanel[hasdownloads] > #downloadsFooter {
   background: #e5e5e5;
   border-top: 1px solid hsla(0,0%,0%,.1);
   box-shadow: 0 -1px hsla(0,0%,100%,.5) inset, 0 1px 1px hsla(0,0%,0%,.03) inset;
@@ -48,7 +48,7 @@
   border-top-right-radius: 6px;
 }
 
-#downloadsPanel:not([hasdownloads]) #downloadsHistory:-moz-focusring > .button-box {
+#downloadsPanel:not([hasdownloads]) > #downloadsFooter > #downloadsHistory:-moz-focusring > .button-box {
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
 }
@@ -164,13 +164,13 @@ richlistitem[type="download"][state="1"]:hover {
 .downloadButton.downloadShow {
   -moz-image-region: rect(16px, 16px, 32px, 0px);
 }
-richlistitem[type="download"][state="1"]:hover .downloadButton.downloadShow {
+richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow {
   -moz-image-region: rect(16px, 32px, 32px, 16px);
 }
-richlistitem[type="download"][state="1"]:hover .downloadButton.downloadShow:hover {
+richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:hover {
   -moz-image-region: rect(16px, 48px, 32px, 32px);
 }
-richlistitem[type="download"][state="1"]:hover .downloadButton.downloadShow:active {
+richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:active {
   -moz-image-region: rect(16px, 64px, 32px, 48px);
 }
 
@@ -219,17 +219,18 @@ richlistitem[type="download"][state="1"]:hover .downloadButton.downloadShow:acti
     background-size: 20px;
   }
 
-  #downloads-indicator:not([counter]) #downloads-indicator-counter {
+  #downloads-indicator:not([counter]) > #downloads-indicator-anchor >
+  #downloads-indicator-progress-area > #downloads-indicator-counter {
     background-image: -moz-image-rect(url("chrome://browser/skin/Toolbar@2x.png"), 0, 280, 40, 240);
   }
 
-  #downloads-indicator[attention]
+  #downloads-indicator[attention] > #downloads-indicator-anchor >
   #downloads-indicator-icon {
     background-image: url("chrome://browser/skin/downloads/download-glow@2x.png");
   }
 
-  #downloads-indicator:not([counter])[attention]
-  #downloads-indicator-counter {
+  #downloads-indicator:not([counter])[attention] > #downloads-indicator-anchor >
+  #downloads-indicator-progress-area > #downloads-indicator-counter {
     background-image: url("chrome://browser/skin/downloads/download-glow@2x.png");
   }
 }

browser/themes/winstripe/downloads/downloads.css

@@ -29,7 +29,7 @@
 }
 
 @media (-moz-windows-default-theme) {
-  #downloadsPanel[hasdownloads] #downloadsFooter {
+  #downloadsPanel[hasdownloads] > #downloadsFooter {
     background-color: hsla(216,45%,88%,.98);
     box-shadow: 0px 1px 2px rgb(204,214,234) inset;
   }
@@ -172,13 +172,13 @@ richlistitem[type="download"][state="1"]:hover {
 @media not all and (-moz-windows-default-theme) {
 %endif
 
-richlistitem[type="download"][state="1"]:hover .downloadButton.downloadShow {
+richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow {
   -moz-image-region: rect(48px, 16px, 64px, 0px);
 }
-richlistitem[type="download"][state="1"]:hover .downloadButton.downloadShow:hover {
+richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:hover {
   -moz-image-region: rect(48px, 32px, 64px, 16px);
 }
-richlistitem[type="download"][state="1"]:hover .downloadButton.downloadShow:active {
+richlistitem[type="download"][state="1"]:hover > stack > .downloadButton.downloadShow:active {
   -moz-image-region: rect(48px, 48px, 64px, 32px);
 }