Bug 1355020 - part 2: disentangle add-on notifications from 'PanelUI' and their specific spot, r?kmag
MozReview-Commit-ID: h2azhwU60S
--- a/browser/base/content/browser-addons.js
+++ b/browser/base/content/browser-addons.js
@@ -495,75 +495,68 @@ const gExtensionsNotifications = {
// uninit() can race ahead of init() in some cases, if that happens,
// we have no handler to remove.
if (!this.initialized) {
return;
}
ExtensionsUI.off("change", this.boundUpdate);
},
+ _createAddonButton(text, icon, callback) {
+ let button = document.createElement("toolbarbutton");
+ button.setAttribute("label", text);
+ const DEFAULT_EXTENSION_ICON =
+ "chrome://mozapps/skin/extensions/extensionGeneric.svg";
+ button.setAttribute("image", icon || DEFAULT_EXTENSION_ICON);
+ button.className = "addon-banner-item";
+
+ button.addEventListener("click", callback);
+ PanelUI.addonNotificationContainer.appendChild(button);
+ },
+
updateAlerts() {
let sideloaded = ExtensionsUI.sideloaded;
let updates = ExtensionsUI.updates;
if (sideloaded.size + updates.size == 0) {
PanelUI.removeNotification("addon-alert");
} else {
PanelUI.showBadgeOnlyNotification("addon-alert");
}
- let container = document.getElementById("PanelUI-footer-addons");
+ let container = PanelUI.addonNotificationContainer;
while (container.firstChild) {
container.firstChild.remove();
}
- const DEFAULT_EXTENSION_ICON =
- "chrome://mozapps/skin/extensions/extensionGeneric.svg";
let items = 0;
for (let update of updates) {
if (++items > 4) {
break;
}
-
- let button = document.createElement("toolbarbutton");
let text = gNavigatorBundle.getFormattedString("webextPerms.updateMenuItem", [update.addon.name]);
- button.setAttribute("label", text);
-
- let icon = update.addon.iconURL || DEFAULT_EXTENSION_ICON;
- button.setAttribute("image", icon);
-
- button.addEventListener("click", evt => {
+ this._createAddonButton(text, update.addon.iconURL, evt => {
ExtensionsUI.showUpdate(gBrowser, update);
});
-
- container.appendChild(button);
}
let appName;
for (let addon of sideloaded) {
if (++items > 4) {
break;
}
if (!appName) {
let brandBundle = document.getElementById("bundle_brand");
appName = brandBundle.getString("brandShortName");
}
- let button = document.createElement("toolbarbutton");
let text = gNavigatorBundle.getFormattedString("webextPerms.sideloadMenuItem", [addon.name, appName]);
- button.setAttribute("label", text);
-
- let icon = addon.iconURL || DEFAULT_EXTENSION_ICON;
- button.setAttribute("image", icon);
-
- button.addEventListener("click", evt => {
+ this._createAddonButton(text, addon.iconURL, evt => {
ExtensionsUI.showSideloaded(gBrowser, addon);
});
-
- container.appendChild(button);
}
},
};
var LightWeightThemeWebInstaller = {
init() {
let mm = window.messageManager;
mm.addMessageListener("LightWeightThemeWebInstaller:Install", this);
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -1182,16 +1182,17 @@ toolbarpaletteitem[place="palette"][hidd
#customization-palette .toolbarpaletteitem-box {
-moz-box-pack: center;
-moz-box-flex: 1;
width: 10em;
max-width: 10em;
}
+#main-window[customizing=true] .addon-banner-item,
#main-window[customizing=true] .panel-banner-item {
display: none;
}
/* UI Tour */
@keyframes uitour-wobble {
from {
--- a/browser/base/content/test/webextensions/browser_extension_sideloading.js
+++ b/browser/base/content/test/webextensions/browser_extension_sideloading.js
@@ -180,17 +180,17 @@ add_task(function* () {
// Check for the addons badge on the hamburger menu
let menuButton = document.getElementById("PanelUI-menu-button");
is(menuButton.getAttribute("badge-status"), "addon-alert", "Should have addon alert badge");
// Find the menu entries for sideloaded extensions
yield PanelUI.show();
- let addons = document.getElementById("PanelUI-footer-addons");
+ let addons = PanelUI.addonNotificationContainer;
is(addons.children.length, 4, "Have 4 menu entries for sideloaded extensions");
// Click the first sideloaded extension
let popupPromise = promisePopupNotificationShown("addon-webext-permissions");
addons.children[0].click();
// When we get the permissions prompt, we should be at the extensions
// list in about:addons
@@ -221,17 +221,17 @@ add_task(function* () {
is(addon3.userDisabled, true, "Addon 3 should still be disabled");
is(addon4.userDisabled, true, "Addon 4 should still be disabled");
yield BrowserTestUtils.removeTab(gBrowser.selectedTab);
// Should still have 3 entries in the hamburger menu
yield PanelUI.show();
- addons = document.getElementById("PanelUI-footer-addons");
+ addons = PanelUI.addonNotificationContainer;
is(addons.children.length, 3, "Have 3 menu entries for sideloaded extensions");
// Click the second sideloaded extension and wait for the notification
popupPromise = promisePopupNotificationShown("addon-webext-permissions");
addons.children[0].click();
panel = yield popupPromise;
// Again we should be at the extentions list in about:addons
@@ -255,17 +255,17 @@ add_task(function* () {
is(addon1.userDisabled, true, "Addon 1 should still be disabled");
is(addon2.userDisabled, false, "Addon 2 should now be enabled");
is(addon3.userDisabled, true, "Addon 3 should still be disabled");
is(addon4.userDisabled, true, "Addon 4 should still be disabled");
// Should still have 2 entries in the hamburger menu
yield PanelUI.show();
- addons = document.getElementById("PanelUI-footer-addons");
+ addons = PanelUI.addonNotificationContainer;
is(addons.children.length, 2, "Have 2 menu entries for sideloaded extensions");
// Close the hamburger menu and go directly to the addons manager
yield PanelUI.hide();
win = yield BrowserOpenAddonsMgr(VIEW);
let list = win.document.getElementById("addon-list");
@@ -294,17 +294,17 @@ add_task(function* () {
is(value, false, "userDisabled should be set on addon 3");
addon3 = yield AddonManager.getAddonByID(ID3);
is(addon3.userDisabled, false, "Addon 3 should be enabled");
// Should still have 1 entry in the hamburger menu
yield PanelUI.show();
- addons = document.getElementById("PanelUI-footer-addons");
+ addons = PanelUI.addonNotificationContainer;
is(addons.children.length, 1, "Have 1 menu entry for sideloaded extensions");
// Close the hamburger menu and go to the detail page for this addon
yield PanelUI.hide();
win = yield BrowserOpenAddonsMgr(`addons://detail/${encodeURIComponent(ID4)}`);
let button = win.document.getElementById("detail-enable-btn");
--- a/browser/base/content/test/webextensions/browser_extension_update_background.js
+++ b/browser/base/content/test/webextensions/browser_extension_update_background.js
@@ -76,17 +76,17 @@ function* backgroundUpdateTest(url, id,
AddonManagerPrivate.backgroundUpdateCheck();
yield updatePromise;
is(getBadgeStatus(), "addon-alert", "Should have addon alert badge");
// Find the menu entry for the update
yield PanelUI.show();
- let addons = document.getElementById("PanelUI-footer-addons");
+ let addons = PanelUI.addonNotificationContainer;
is(addons.children.length, 1, "Have a menu entry for the update");
// Click the menu item
let tabPromise = BrowserTestUtils.waitForNewTab(gBrowser, "about:addons");
let popupPromise = promisePopupNotificationShown("addon-webext-permissions");
addons.children[0].click();
// about:addons should load and go to the list of extensions
@@ -116,31 +116,31 @@ function* backgroundUpdateTest(url, id,
is(addon.version, "1.0", "Should still be running the old version");
yield BrowserTestUtils.removeTab(tab);
// Alert badge and hamburger menu items should be gone
is(getBadgeStatus(), "", "Addon alert badge should be gone");
yield PanelUI.show();
- addons = document.getElementById("PanelUI-footer-addons");
+ addons = PanelUI.addonNotificationContainer;
is(addons.children.length, 0, "Update menu entries should be gone");
yield PanelUI.hide();
// Re-check for an update
updatePromise = promiseInstallEvent(addon, "onDownloadEnded");
yield AddonManagerPrivate.backgroundUpdateCheck();
yield updatePromise;
is(getBadgeStatus(), "addon-alert", "Should have addon alert badge");
// Find the menu entry for the update
yield PanelUI.show();
- addons = document.getElementById("PanelUI-footer-addons");
+ addons = PanelUI.addonNotificationContainer;
is(addons.children.length, 1, "Have a menu entry for the update");
// Click the menu item
tabPromise = BrowserTestUtils.waitForNewTab(gBrowser, "about:addons");
popupPromise = promisePopupNotificationShown("addon-webext-permissions");
addons.children[0].click();
// Wait for about:addons to load
--- a/browser/base/content/test/webextensions/browser_extension_update_background_noprompt.js
+++ b/browser/base/content/test/webextensions/browser_extension_update_background_noprompt.js
@@ -54,17 +54,17 @@ async function testNoPrompt(origUrl, id)
let updatePromise = waitForUpdate(addon);
AddonManagerPrivate.backgroundUpdateCheck();
await updatePromise;
// There should be no notifications about the update
is(getBadgeStatus(), "", "Should not have addon alert badge");
await PanelUI.show();
- let addons = document.getElementById("PanelUI-footer-addons");
+ let addons = PanelUI.addonNotificationContainer;
is(addons.children.length, 0, "Have 0 updates in the PanelUI menu");
await PanelUI.hide();
ok(!sawPopup, "Should not have seen permissions notification");
addon = await AddonManager.getAddonByID(id);
is(addon.version, "2.0", "Update should have applied");
--- a/browser/components/customizableui/content/panelUI.js
+++ b/browser/components/customizableui/content/panelUI.js
@@ -32,16 +32,17 @@ const PanelUI = {
contents: "PanelUI-contents",
mainView: gPhotonStructure ? "appMenu-mainView" : "PanelUI-mainView",
multiView: gPhotonStructure ? "appMenu-multiView" : "PanelUI-multiView",
helpView: "PanelUI-helpView",
menuButton: "PanelUI-menu-button",
panel: gPhotonStructure ? "appMenu-popup" : "PanelUI-popup",
notificationPanel: "appMenu-notification-popup",
scroller: "PanelUI-contents-scroller",
+ addonNotificationContainer: "PanelUI-footer-addons",
overflowFixedList: gPhotonStructure ? "widget-overflow-fixed-list" : "",
};
},
_initialized: false,
init() {
for (let [k, v] of Object.entries(this.kElements)) {
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -578,50 +578,50 @@ toolbarpaletteitem[place="palette"] > to
width: 47px;
padding-top: 1px;
display: block;
text-align: center;
position: relative;
top: 25%;
}
-#PanelUI-footer-addons > toolbarbutton::after,
+.addon-banner-item::after,
.panel-banner-item::after {
content: "";
width: 16px;
height: 16px;
margin-inline-end: 16.5px;
display: -moz-box;
}
-#PanelUI-footer-addons > toolbarbutton {
+.addon-banner-item {
background-color: #FFEFBF;
- /* Force border to override `#PanelUI-footer-addons > toolbarbutton` selector below */
+ /* Force border to override `.addon-banner-item` selector below */
border-top: 1px solid hsl(45, 100%, 77%) !important;
display: flex;
flex: 1 1 0%;
width: calc(@menuPanelWidth@ + 30px);
padding-inline-start: 15px;
border-inline-start-style: none;
}
-#PanelUI-footer-addons > toolbarbutton:hover {
+.addon-banner-item:hover {
background-color: #FFE8A2;
}
-#PanelUI-footer-addons > toolbarbutton:active {
+.addon-banner-item:active {
background-color: #FFE38F;
}
-#PanelUI-footer-addons > toolbarbutton > .toolbarbutton-icon {
+.addon-banner-item > .toolbarbutton-icon {
width: 14px;
height: 14px;
}
-#PanelUI-footer-addons > toolbarbutton::after {
+.addon-banner-item::after {
background: #FFBF00 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center;
}
#PanelUI-fxa-status {
display: flex;
flex: 1 1 0%;
width: 1px;
}
@@ -645,21 +645,21 @@ toolbarpaletteitem[place="palette"] > to
-moz-appearance: none;
}
#PanelUI-footer-inner:hover > toolbarseparator,
#PanelUI-footer-fxa:hover > toolbarseparator {
margin: 0;
}
+.addon-banner-item,
.panel-banner-item,
#PanelUI-help,
#PanelUI-fxa-label,
#PanelUI-fxa-icon,
-#PanelUI-footer-addons > toolbarbutton,
#PanelUI-customize,
#PanelUI-quit {
margin: 0;
padding: 11px 0;
box-sizing: border-box;
min-height: 40px;
-moz-appearance: none;
box-shadow: none;
@@ -679,19 +679,19 @@ toolbarpaletteitem[place="palette"] > to
width: 0; /* Fancy cropping solution for flexbox. */
}
#PanelUI-help,
#PanelUI-quit {
min-width: 46px;
}
+.addon-banner-item > .toolbarbutton-text,
.panel-banner-item > .toolbarbutton-text,
#PanelUI-fxa-label > .toolbarbutton-text,
-#PanelUI-footer-addons > toolbarbutton > .toolbarbutton-text,
#PanelUI-customize > .toolbarbutton-text {
margin: 0;
padding: 0 6px;
text-align: start;
}
#PanelUI-help > .toolbarbutton-text,
#PanelUI-quit > .toolbarbutton-text,
@@ -709,17 +709,17 @@ toolbarpaletteitem[place="palette"] > to
}
#PanelUI-fxa-icon {
padding-inline-start: 15px;
padding-inline-end: 15px;
}
#PanelUI-fxa-label,
-#PanelUI-footer-addons > toolbarbutton,
+.addon-banner-item,
#PanelUI-customize {
flex: 1;
padding-inline-start: 15px;
border-inline-start-style: none;
}
#PanelUI-footer-fxa[fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
#PanelUI-footer-fxa[fxaprofileimage="enabled"]:not([fxastatus="error"]) > #PanelUI-fxa-status > #PanelUI-fxa-label {
@@ -870,17 +870,17 @@ toolbarpaletteitem[place="palette"] > to
#PanelUI-quit {
border-inline-end-style: none;
list-style-image: url(chrome://browser/skin/menuPanel-exit.png);
}
#PanelUI-fxa-label,
#PanelUI-fxa-icon,
-#PanelUI-footer-addons > toolbarbutton,
+.addon-banner-item,
#PanelUI-customize,
#PanelUI-help,
#PanelUI-quit {
-moz-image-region: rect(0, 16px, 16px, 0);
}
#PanelUI-footer-fxa[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon,
#PanelUI-footer-fxa[fxastatus="error"][fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon {