Bug 1319841 - Set the background-image of the downloads-indicator-icon in addition to the list-style-image since the indicator-icon uses a xul:vbox and thus the background-image property instead of the list-style-image property that is used for all other buttons (xul:image). Both need to be used because prior to clicking on the button the list-style-image version is referenced and afterwards, the background-image version is referenced. r?mikedeboer draft
authorJared Wein <jwein@mozilla.com>
Mon, 28 Nov 2016 19:40:40 -0500
changeset 444893 b54052de29a0f022a9d8fb4ab93026ff2301a574
parent 444892 cfd73f7bffcbedfe998e96e4c2a420981a57510e
child 538415 2b8f06e6f525682e6c11009194a1704971bc113f
push id37392
push userbmo:jaws@mozilla.com
push dateTue, 29 Nov 2016 00:40:59 +0000
reviewersmikedeboer
bugs1319841
milestone53.0a1
Bug 1319841 - Set the background-image of the downloads-indicator-icon in addition to the list-style-image since the indicator-icon uses a xul:vbox and thus the background-image property instead of the list-style-image property that is used for all other buttons (xul:image). Both need to be used because prior to clicking on the button the list-style-image version is referenced and afterwards, the background-image version is referenced. r?mikedeboer MozReview-Commit-ID: CT1Z0PWNgVs
browser/components/extensions/ext-theme.js
browser/components/extensions/test/browser/browser_ext_theme_icons.js
--- a/browser/components/extensions/ext-theme.js
+++ b/browser/components/extensions/ext-theme.js
@@ -203,16 +203,17 @@ const kBrowserOverrideIconsVarMap = new 
   ["bookmark_star", [
     ["#bookmarks-menu-button", {"list-style-image": "--bookmark_star-icon", "-moz-image-region": "rect(0, 18px, 18px, 0)"}],
   ]],
   ["bookmark_menu", [
     ["#bookmarks-menu-button[cui-areatype='toolbar'] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon", {"list-style-image": "--bookmark_menu-icon", "-moz-image-region": "rect(0, 18px, 18px, 0)"}],
   ]],
   ["downloads", [
     ["#downloads-button", {"list-style-image": "--downloads-icon", "-moz-image-region": "rect(0, 18px, 18px, 0)", "background-image": "none"}],
+    ["#downloads-indicator-icon", {"background": "var(--downloads-icon) center no-repeat"}],
   ]],
   ["home", [
     ["#home-button", {"list-style-image": "--home-icon", "-moz-image-region": "rect(0, 18px, 18px, 0)"}],
   ]],
   ["app_menu", [
     ["#PanelUI-menu-button", {"list-style-image": "--app_menu-icon", "-moz-image-region": "rect(0, 18px, 18px, 0)"}],
   ]],
   ["cut", [
--- a/browser/components/extensions/test/browser/browser_ext_theme_icons.js
+++ b/browser/components/extensions/test/browser/browser_ext_theme_icons.js
@@ -130,16 +130,25 @@ add_task(function* testCustomizedIcons()
 
     yield extension.startup();
 
     for (let button of buttons) {
       verifyButtonWithCustomStyling(button[1], button[0],
         `The ${button[1]} should have it's icon customized in the toolbar`);
     }
 
+    EventUtils.synthesizeMouseAtCenter(document.getElementById("downloads-button"), {});
+    yield BrowserTestUtils.waitForCondition(() => document.getElementById("downloads-indicator-icon"),
+      "downloads-indicator-icon is added to the DOM");
+    let downloadsIndicatorIcon = document.getElementById("downloads-indicator-icon");
+    let backgroundImage = getComputedStyle(downloadsIndicatorIcon).backgroundImage;
+    info(`backgroundImage for #downloads-indicator-icon is ${backgroundImage}`);
+    ok(backgroundImage.includes(iconForButton("downloads")),
+      "The #downloads-indicator-icon should have it's icon customized in the toolbar");
+
     for (let button of buttons) {
       if (button[2]) {
         CustomizableUI.addWidgetToArea(button[2], CustomizableUI.AREA_PANEL);
       }
     }
 
     yield PanelUI.show();