Bug 1554437 Fix selectors on download-indicators-anchor r=sfoster,dao

These selectors were using the direct child combinator which broke
when toolbarbutton switched away from XBL.

Differential Revision: https://phabricator.services.mozilla.com/D32919

--HG--
extra : moz-landing-system : lando

browser/base/content/browser.css

@@ -1046,7 +1046,7 @@ browser[tabmodalPromptShowing] {
    and just show the icon. This is a hack to side-step very weird layout bugs that
    seem to be caused by the indicator stack interacting with the menu panel. */
 #downloads-button[indicator]:not([cui-areatype="menu-panel"]) > .toolbarbutton-badge-stack > image.toolbarbutton-icon,
-#downloads-button[indicator][cui-areatype="menu-panel"] > #downloads-indicator-anchor {
+#downloads-button[indicator][cui-areatype="menu-panel"] > .toolbarbutton-badge-stack > #downloads-indicator-anchor {
   display: none;
 }
 
@@ -1054,7 +1054,7 @@ toolbarpaletteitem[place="palette"] > #downloads-button[indicator] > .toolbarbut
   display: -moz-box;
 }
 
-toolbarpaletteitem[place="palette"] > #downloads-button[indicator] > #downloads-indicator-anchor {
+toolbarpaletteitem[place="palette"] > #downloads-button[indicator] > .toolbarbutton-badge-stack > #downloads-indicator-anchor {
   display: none;
 }
 

browser/themes/shared/downloads/indicator.inc.css

@@ -16,13 +16,13 @@
   background: url("chrome://browser/skin/downloads/download-icons.svg#default-bar") center no-repeat;
 }
 
-#downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-icon,
-#downloads-button[attention="success"] > #downloads-indicator-anchor > #downloads-indicator-progress-outer {
+#downloads-button[attention="success"] > .toolbarbutton-badge-stack > #downloads-indicator-anchor > #downloads-indicator-icon,
+#downloads-button[attention="success"] > .toolbarbutton-badge-stack > #downloads-indicator-anchor > #downloads-indicator-progress-outer {
   -moz-context-properties: fill, fill-opacity;
   fill: var(--toolbarbutton-icon-fill-attention);
   fill-opacity: 1;
 }
-#downloads-button[progress] > #downloads-indicator-anchor > #downloads-indicator-progress-outer {
+#downloads-button[progress] > .toolbarbutton-badge-stack > #downloads-indicator-anchor > #downloads-indicator-progress-outer {
   background: url("chrome://browser/skin/downloads/download-icons.svg#progress-bar-bg") center no-repeat;
 }
 
@@ -109,7 +109,7 @@
 
 /*** Download notifications ***/
 
-#downloads-button[notification="start"] > #downloads-indicator-anchor > #downloads-indicator-icon {
+#downloads-button[notification="start"] > .toolbarbutton-badge-stack > #downloads-indicator-anchor > #downloads-indicator-icon {
   animation-name: downloadsIndicatorStartDip;
   /* Upon changing the duration_delay below, please keep the delay time of
      setTimeout() identical in indicator.js for this animation.
@@ -145,7 +145,7 @@
   to    { transform: scale(1); animation-timing-function: ease-in; }
 }
 
-#downloads-button[notification="finish"] > #downloads-indicator-anchor > #downloads-indicator-icon {
+#downloads-button[notification="finish"] > .toolbarbutton-badge-stack > #downloads-indicator-anchor > #downloads-indicator-icon {
   animation-name: downloadsIndicatorFinishPulse;
   animation-delay: 250ms;
   animation-duration: 300ms;