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
--- 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();