summaryrefslogtreecommitdiffstats
path: root/toolkit/mozapps/extensions/content/aboutaddons.js
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
commit26a029d407be480d791972afb5975cf62c9360a6 (patch)
treef435a8308119effd964b339f76abb83a57c29483 /toolkit/mozapps/extensions/content/aboutaddons.js
parentInitial commit. (diff)
downloadfirefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'toolkit/mozapps/extensions/content/aboutaddons.js')
-rw-r--r--toolkit/mozapps/extensions/content/aboutaddons.js4231
1 files changed, 4231 insertions, 0 deletions
diff --git a/toolkit/mozapps/extensions/content/aboutaddons.js b/toolkit/mozapps/extensions/content/aboutaddons.js
new file mode 100644
index 0000000000..37687a8be7
--- /dev/null
+++ b/toolkit/mozapps/extensions/content/aboutaddons.js
@@ -0,0 +1,4231 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+/* eslint max-len: ["error", 80] */
+/* import-globals-from aboutaddonsCommon.js */
+/* import-globals-from abuse-reports.js */
+/* import-globals-from view-controller.js */
+/* global windowRoot */
+
+"use strict";
+
+ChromeUtils.defineESModuleGetters(this, {
+ AMBrowserExtensionsImport: "resource://gre/modules/AddonManager.sys.mjs",
+ AddonManager: "resource://gre/modules/AddonManager.sys.mjs",
+ AddonRepository: "resource://gre/modules/addons/AddonRepository.sys.mjs",
+ BuiltInThemes: "resource:///modules/BuiltInThemes.sys.mjs",
+ ClientID: "resource://gre/modules/ClientID.sys.mjs",
+ DeferredTask: "resource://gre/modules/DeferredTask.sys.mjs",
+ E10SUtils: "resource://gre/modules/E10SUtils.sys.mjs",
+ ExtensionCommon: "resource://gre/modules/ExtensionCommon.sys.mjs",
+ ExtensionParent: "resource://gre/modules/ExtensionParent.sys.mjs",
+ ExtensionPermissions: "resource://gre/modules/ExtensionPermissions.sys.mjs",
+ PrivateBrowsingUtils: "resource://gre/modules/PrivateBrowsingUtils.sys.mjs",
+});
+
+XPCOMUtils.defineLazyPreferenceGetter(
+ this,
+ "manifestV3enabled",
+ "extensions.manifestV3.enabled"
+);
+
+XPCOMUtils.defineLazyPreferenceGetter(
+ this,
+ "SUPPORT_URL",
+ "app.support.baseURL",
+ "",
+ null,
+ val => Services.urlFormatter.formatURL(val)
+);
+
+XPCOMUtils.defineLazyPreferenceGetter(
+ this,
+ "XPINSTALL_ENABLED",
+ "xpinstall.enabled",
+ true
+);
+
+const UPDATES_RECENT_TIMESPAN = 2 * 24 * 3600000; // 2 days (in milliseconds)
+
+XPCOMUtils.defineLazyPreferenceGetter(
+ this,
+ "ABUSE_REPORT_ENABLED",
+ "extensions.abuseReport.enabled",
+ false
+);
+XPCOMUtils.defineLazyPreferenceGetter(
+ this,
+ "LIST_RECOMMENDATIONS_ENABLED",
+ "extensions.htmlaboutaddons.recommendations.enabled",
+ false
+);
+
+const PLUGIN_ICON_URL = "chrome://global/skin/icons/plugin.svg";
+const EXTENSION_ICON_URL =
+ "chrome://mozapps/skin/extensions/extensionGeneric.svg";
+
+const PERMISSION_MASKS = {
+ enable: AddonManager.PERM_CAN_ENABLE,
+ "always-activate": AddonManager.PERM_CAN_ENABLE,
+ disable: AddonManager.PERM_CAN_DISABLE,
+ "never-activate": AddonManager.PERM_CAN_DISABLE,
+ uninstall: AddonManager.PERM_CAN_UNINSTALL,
+ upgrade: AddonManager.PERM_CAN_UPGRADE,
+ "change-privatebrowsing": AddonManager.PERM_CAN_CHANGE_PRIVATEBROWSING_ACCESS,
+};
+
+const PREF_DISCOVERY_API_URL = "extensions.getAddons.discovery.api_url";
+const PREF_THEME_RECOMMENDATION_URL =
+ "extensions.recommendations.themeRecommendationUrl";
+const PREF_RECOMMENDATION_HIDE_NOTICE = "extensions.recommendations.hideNotice";
+const PREF_PRIVACY_POLICY_URL = "extensions.recommendations.privacyPolicyUrl";
+const PREF_RECOMMENDATION_ENABLED = "browser.discovery.enabled";
+const PREF_TELEMETRY_ENABLED = "datareporting.healthreport.uploadEnabled";
+const PRIVATE_BROWSING_PERM_NAME = "internal:privateBrowsingAllowed";
+const PRIVATE_BROWSING_PERMS = {
+ permissions: [PRIVATE_BROWSING_PERM_NAME],
+ origins: [],
+};
+
+const L10N_ID_MAPPING = {
+ "theme-disabled-heading": "theme-disabled-heading2",
+};
+
+function getL10nIdMapping(id) {
+ return L10N_ID_MAPPING[id] || id;
+}
+
+function shouldSkipAnimations() {
+ return (
+ document.body.hasAttribute("skip-animations") ||
+ window.matchMedia("(prefers-reduced-motion: reduce)").matches
+ );
+}
+
+function callListeners(name, args, listeners) {
+ for (let listener of listeners) {
+ try {
+ if (name in listener) {
+ listener[name](...args);
+ }
+ } catch (e) {
+ Cu.reportError(e);
+ }
+ }
+}
+
+function getUpdateInstall(addon) {
+ return (
+ // Install object for a pending update.
+ addon.updateInstall ||
+ // Install object for a postponed upgrade (only for extensions,
+ // because is the only addon type that can postpone their own
+ // updates).
+ (addon.type === "extension" &&
+ addon.pendingUpgrade &&
+ addon.pendingUpgrade.install)
+ );
+}
+
+function isManualUpdate(install) {
+ let isManual =
+ install.existingAddon &&
+ !AddonManager.shouldAutoUpdate(install.existingAddon);
+ let isExtension =
+ install.existingAddon && install.existingAddon.type == "extension";
+ return (
+ (isManual && isInState(install, "available")) ||
+ (isExtension && isInState(install, "postponed"))
+ );
+}
+
+const AddonManagerListenerHandler = {
+ listeners: new Set(),
+
+ addListener(listener) {
+ this.listeners.add(listener);
+ },
+
+ removeListener(listener) {
+ this.listeners.delete(listener);
+ },
+
+ delegateEvent(name, args) {
+ callListeners(name, args, this.listeners);
+ },
+
+ startup() {
+ this._listener = new Proxy(
+ {},
+ {
+ has: () => true,
+ get:
+ (_, name) =>
+ (...args) =>
+ this.delegateEvent(name, args),
+ }
+ );
+ AddonManager.addAddonListener(this._listener);
+ AddonManager.addInstallListener(this._listener);
+ AddonManager.addManagerListener(this._listener);
+ this._permissionHandler = (type, data) => {
+ if (type == "change-permissions") {
+ this.delegateEvent("onChangePermissions", [data]);
+ }
+ };
+ ExtensionPermissions.addListener(this._permissionHandler);
+ },
+
+ shutdown() {
+ AddonManager.removeAddonListener(this._listener);
+ AddonManager.removeInstallListener(this._listener);
+ AddonManager.removeManagerListener(this._listener);
+ ExtensionPermissions.removeListener(this._permissionHandler);
+ },
+};
+
+/**
+ * This object wires the AddonManager event listeners into addon-card and
+ * addon-details elements rather than needing to add/remove listeners all the
+ * time as the view changes.
+ */
+const AddonCardListenerHandler = new Proxy(
+ {},
+ {
+ has: () => true,
+ get(_, name) {
+ return (...args) => {
+ let elements = [];
+ let addonId;
+
+ // We expect args[0] to be of type:
+ // - AddonInstall, on AddonManager install events
+ // - AddonWrapper, on AddonManager addon events
+ // - undefined, on AddonManager manage events
+ if (args[0]) {
+ addonId =
+ args[0].addon?.id ||
+ args[0].existingAddon?.id ||
+ args[0].extensionId ||
+ args[0].id;
+ }
+
+ if (addonId) {
+ let cardSelector = `addon-card[addon-id="${addonId}"]`;
+ elements = document.querySelectorAll(
+ `${cardSelector}, ${cardSelector} addon-details`
+ );
+ } else if (name == "onUpdateModeChanged") {
+ elements = document.querySelectorAll("addon-card");
+ }
+
+ callListeners(name, args, elements);
+ };
+ },
+ }
+);
+AddonManagerListenerHandler.addListener(AddonCardListenerHandler);
+
+function isAbuseReportSupported(addon) {
+ return (
+ ABUSE_REPORT_ENABLED &&
+ AbuseReporter.isSupportedAddonType(addon.type) &&
+ !(addon.isBuiltin || addon.isSystem)
+ );
+}
+
+async function isAllowedInPrivateBrowsing(addon) {
+ // Use the Promise directly so this function stays sync for the other case.
+ let perms = await ExtensionPermissions.get(addon.id);
+ return perms.permissions.includes(PRIVATE_BROWSING_PERM_NAME);
+}
+
+function hasPermission(addon, permission) {
+ return !!(addon.permissions & PERMISSION_MASKS[permission]);
+}
+
+function isInState(install, state) {
+ return install.state == AddonManager["STATE_" + state.toUpperCase()];
+}
+
+async function getAddonMessageInfo(addon) {
+ const { name } = addon;
+ const { STATE_BLOCKED, STATE_SOFTBLOCKED } = Ci.nsIBlocklistService;
+
+ if (addon.blocklistState === STATE_BLOCKED) {
+ return {
+ linkUrl: await addon.getBlocklistURL(),
+ linkId: "details-notification-blocked-link",
+ messageId: "details-notification-blocked2",
+ messageArgs: { name },
+ type: "error",
+ };
+ } else if (isDisabledUnsigned(addon)) {
+ return {
+ linkUrl: SUPPORT_URL + "unsigned-addons",
+ linkId: "details-notification-unsigned-and-disabled-link",
+ messageId: "details-notification-unsigned-and-disabled2",
+ messageArgs: { name },
+ type: "error",
+ };
+ } else if (
+ !addon.isCompatible &&
+ (AddonManager.checkCompatibility ||
+ addon.blocklistState !== STATE_SOFTBLOCKED)
+ ) {
+ return {
+ messageId: "details-notification-incompatible2",
+ messageArgs: { name, version: Services.appinfo.version },
+ type: "error",
+ };
+ } else if (!isCorrectlySigned(addon)) {
+ return {
+ linkUrl: SUPPORT_URL + "unsigned-addons",
+ linkId: "details-notification-unsigned-link",
+ messageId: "details-notification-unsigned2",
+ messageArgs: { name },
+ type: "warning",
+ };
+ } else if (addon.blocklistState === STATE_SOFTBLOCKED) {
+ return {
+ linkUrl: await addon.getBlocklistURL(),
+ linkId: "details-notification-softblocked-link",
+ messageId: "details-notification-softblocked2",
+ messageArgs: { name },
+ type: "warning",
+ };
+ } else if (addon.isGMPlugin && !addon.isInstalled && addon.isActive) {
+ return {
+ messageId: "details-notification-gmp-pending2",
+ messageArgs: { name },
+ type: "warning",
+ };
+ }
+ return {};
+}
+
+function checkForUpdate(addon) {
+ return new Promise(resolve => {
+ let listener = {
+ onUpdateAvailable(addon, install) {
+ if (AddonManager.shouldAutoUpdate(addon)) {
+ // Make sure that an update handler is attached to all the install
+ // objects when updated xpis are going to be installed automatically.
+ attachUpdateHandler(install);
+
+ let failed = () => {
+ detachUpdateHandler(install);
+ install.removeListener(updateListener);
+ resolve({ installed: false, pending: false, found: true });
+ };
+ let updateListener = {
+ onDownloadFailed: failed,
+ onInstallCancelled: failed,
+ onInstallFailed: failed,
+ onInstallEnded: (...args) => {
+ detachUpdateHandler(install);
+ install.removeListener(updateListener);
+ resolve({ installed: true, pending: false, found: true });
+ },
+ onInstallPostponed: (...args) => {
+ detachUpdateHandler(install);
+ install.removeListener(updateListener);
+ resolve({ installed: false, pending: true, found: true });
+ },
+ };
+ install.addListener(updateListener);
+ install.install();
+ } else {
+ resolve({ installed: false, pending: true, found: true });
+ }
+ },
+ onNoUpdateAvailable() {
+ resolve({ found: false });
+ },
+ };
+ addon.findUpdates(listener, AddonManager.UPDATE_WHEN_USER_REQUESTED);
+ });
+}
+
+async function checkForUpdates() {
+ let addons = await AddonManager.getAddonsByTypes(null);
+ addons = addons.filter(addon => hasPermission(addon, "upgrade"));
+ let updates = await Promise.all(addons.map(addon => checkForUpdate(addon)));
+ gViewController.notifyEMUpdateCheckFinished();
+ return updates.reduce(
+ (counts, update) => ({
+ installed: counts.installed + (update.installed ? 1 : 0),
+ pending: counts.pending + (update.pending ? 1 : 0),
+ found: counts.found + (update.found ? 1 : 0),
+ }),
+ { installed: 0, pending: 0, found: 0 }
+ );
+}
+
+// Don't change how we handle this while the page is open.
+const INLINE_OPTIONS_ENABLED = Services.prefs.getBoolPref(
+ "extensions.htmlaboutaddons.inline-options.enabled"
+);
+const OPTIONS_TYPE_MAP = {
+ [AddonManager.OPTIONS_TYPE_TAB]: "tab",
+ [AddonManager.OPTIONS_TYPE_INLINE_BROWSER]: INLINE_OPTIONS_ENABLED
+ ? "inline"
+ : "tab",
+};
+
+// Check if an add-on has the provided options type, accounting for the pref
+// to disable inline options.
+function getOptionsType(addon, type) {
+ return OPTIONS_TYPE_MAP[addon.optionsType];
+}
+
+// Check whether the options page can be loaded in the current browser window.
+async function isAddonOptionsUIAllowed(addon) {
+ if (addon.type !== "extension" || !getOptionsType(addon)) {
+ // Themes never have options pages.
+ // Some plugins have preference pages, and they can always be shown.
+ // Extensions do not need to be checked if they do not have options pages.
+ return true;
+ }
+ if (!PrivateBrowsingUtils.isContentWindowPrivate(window)) {
+ return true;
+ }
+ if (addon.incognito === "not_allowed") {
+ return false;
+ }
+ // The current page is in a private browsing window, and the add-on does not
+ // have the permission to access private browsing windows. Block access.
+ return (
+ // Note: This function is async because isAllowedInPrivateBrowsing is async.
+ isAllowedInPrivateBrowsing(addon)
+ );
+}
+
+let _templates = {};
+
+/**
+ * Import a template from the main document.
+ */
+function importTemplate(name) {
+ if (!_templates.hasOwnProperty(name)) {
+ _templates[name] = document.querySelector(`template[name="${name}"]`);
+ }
+ let template = _templates[name];
+ if (template) {
+ return document.importNode(template.content, true);
+ }
+ throw new Error(`Unknown template: ${name}`);
+}
+
+function nl2br(text) {
+ let frag = document.createDocumentFragment();
+ let hasAppended = false;
+ for (let part of text.split("\n")) {
+ if (hasAppended) {
+ frag.appendChild(document.createElement("br"));
+ }
+ frag.appendChild(new Text(part));
+ hasAppended = true;
+ }
+ return frag;
+}
+
+/**
+ * Select the screeenshot to display above an add-on card.
+ *
+ * @param {AddonWrapper|DiscoAddonWrapper} addon
+ * @returns {string|null}
+ * The URL of the best fitting screenshot, if any.
+ */
+function getScreenshotUrlForAddon(addon) {
+ if (addon.id == "default-theme@mozilla.org") {
+ return "chrome://mozapps/content/extensions/default-theme/preview.svg";
+ }
+ const builtInThemePreview = BuiltInThemes.previewForBuiltInThemeId(addon.id);
+ if (builtInThemePreview) {
+ return builtInThemePreview;
+ }
+
+ let { screenshots } = addon;
+ if (!screenshots || !screenshots.length) {
+ return null;
+ }
+
+ // The image size is defined at .card-heading-image in aboutaddons.css, and
+ // is based on the aspect ratio for a 680x92 image. Use the image if possible,
+ // and otherwise fall back to the first image and hope for the best.
+ let screenshot = screenshots.find(s => s.width === 680 && s.height === 92);
+ if (!screenshot) {
+ console.warn(`Did not find screenshot with desired size for ${addon.id}.`);
+ screenshot = screenshots[0];
+ }
+ return screenshot.url;
+}
+
+/**
+ * Adds UTM parameters to a given URL, if it is an AMO URL.
+ *
+ * @param {string} contentAttribute
+ * Identifies the part of the UI with which the link is associated.
+ * @param {string} url
+ * @returns {string}
+ * The url with UTM parameters if it is an AMO URL.
+ * Otherwise the url in unmodified form.
+ */
+function formatUTMParams(contentAttribute, url) {
+ let parsedUrl = new URL(url);
+ let domain = `.${parsedUrl.hostname}`;
+ if (
+ !domain.endsWith(".mozilla.org") &&
+ // For testing: addons-dev.allizom.org and addons.allizom.org
+ !domain.endsWith(".allizom.org")
+ ) {
+ return url;
+ }
+
+ parsedUrl.searchParams.set("utm_source", "firefox-browser");
+ parsedUrl.searchParams.set("utm_medium", "firefox-browser");
+ parsedUrl.searchParams.set("utm_content", contentAttribute);
+ return parsedUrl.href;
+}
+
+// A wrapper around an item from the "results" array from AMO's discovery API.
+// See https://addons-server.readthedocs.io/en/latest/topics/api/discovery.html
+class DiscoAddonWrapper {
+ /**
+ * @param {object} details
+ * An item in the "results" array from AMO's discovery API.
+ */
+ constructor(details) {
+ // Reuse AddonRepository._parseAddon to have the AMO response parsing logic
+ // in one place.
+ let repositoryAddon = AddonRepository._parseAddon(details.addon);
+
+ // Note: Any property used by RecommendedAddonCard should appear here.
+ // The property names and values should have the same semantics as
+ // AddonWrapper, to ease the reuse of helper functions in this file.
+ this.id = repositoryAddon.id;
+ this.type = repositoryAddon.type;
+ this.name = repositoryAddon.name;
+ this.screenshots = repositoryAddon.screenshots;
+ this.sourceURI = repositoryAddon.sourceURI;
+ this.creator = repositoryAddon.creator;
+ this.averageRating = repositoryAddon.averageRating;
+
+ this.dailyUsers = details.addon.average_daily_users;
+
+ this.editorialDescription = details.description_text;
+ this.iconURL = details.addon.icon_url;
+ this.amoListingUrl = details.addon.url;
+
+ this.taarRecommended = details.is_recommendation;
+ }
+}
+
+/**
+ * A helper to retrieve the list of recommended add-ons via AMO's discovery API.
+ */
+var DiscoveryAPI = {
+ // Map<boolean, Promise> Promises from fetching the API results with or
+ // without a client ID. The `false` (no client ID) case could actually
+ // have been fetched with a client ID. See getResults() for more info.
+ _resultPromises: new Map(),
+
+ /**
+ * Fetch the list of recommended add-ons. The results are cached.
+ *
+ * Pending requests are coalesced, so there is only one request at any given
+ * time. If a request fails, the pending promises are rejected, but a new
+ * call will result in a new request. A succesful response is cached for the
+ * lifetime of the document.
+ *
+ * @param {boolean} preferClientId
+ * A boolean indicating a preference for using a client ID.
+ * This will not overwrite the user preference but will
+ * avoid sending a client ID if no request has been made yet.
+ * @returns {Promise<DiscoAddonWrapper[]>}
+ */
+ async getResults(preferClientId = true) {
+ // Allow a caller to set preferClientId to false, but not true if discovery
+ // is disabled.
+ preferClientId = preferClientId && this.clientIdDiscoveryEnabled;
+
+ // Reuse a request for this preference first.
+ let resultPromise =
+ this._resultPromises.get(preferClientId) ||
+ // If the client ID isn't preferred, we can still reuse a request with the
+ // client ID.
+ (!preferClientId && this._resultPromises.get(true));
+
+ if (resultPromise) {
+ return resultPromise;
+ }
+
+ // Nothing is prepared for this preference, make a new request.
+ resultPromise = this._fetchRecommendedAddons(preferClientId).catch(e => {
+ // Delete the pending promise, so _fetchRecommendedAddons can be
+ // called again at the next property access.
+ this._resultPromises.delete(preferClientId);
+ Cu.reportError(e);
+ throw e;
+ });
+
+ // Store the new result for the preference.
+ this._resultPromises.set(preferClientId, resultPromise);
+
+ return resultPromise;
+ },
+
+ get clientIdDiscoveryEnabled() {
+ // These prefs match Discovery.sys.mjs for enabling clientId cookies.
+ return (
+ Services.prefs.getBoolPref(PREF_RECOMMENDATION_ENABLED, false) &&
+ Services.prefs.getBoolPref(PREF_TELEMETRY_ENABLED, false) &&
+ !PrivateBrowsingUtils.isContentWindowPrivate(window)
+ );
+ },
+
+ async _fetchRecommendedAddons(useClientId) {
+ let discoveryApiUrl = new URL(
+ Services.urlFormatter.formatURLPref(PREF_DISCOVERY_API_URL)
+ );
+
+ if (useClientId) {
+ let clientId = await ClientID.getClientIdHash();
+ discoveryApiUrl.searchParams.set("telemetry-client-id", clientId);
+ }
+ let res = await fetch(discoveryApiUrl.href, {
+ credentials: "omit",
+ });
+ if (!res.ok) {
+ throw new Error(`Failed to fetch recommended add-ons, ${res.status}`);
+ }
+ let { results } = await res.json();
+ return results.map(details => new DiscoAddonWrapper(details));
+ },
+};
+
+class SearchAddons extends HTMLElement {
+ connectedCallback() {
+ if (this.childElementCount === 0) {
+ this.input = document.createXULElement("search-textbox");
+ this.input.setAttribute("searchbutton", true);
+ this.input.setAttribute("maxlength", 100);
+ this.input.setAttribute("data-l10n-attrs", "placeholder");
+ document.l10n.setAttributes(this.input, "addons-heading-search-input");
+ this.append(this.input);
+ }
+ this.input.addEventListener("command", this);
+ }
+
+ disconnectedCallback() {
+ this.input.removeEventListener("command", this);
+ }
+
+ handleEvent(e) {
+ if (e.type === "command") {
+ this.searchAddons(this.value);
+ }
+ }
+
+ get value() {
+ return this.input.value;
+ }
+
+ searchAddons(query) {
+ if (query.length === 0) {
+ return;
+ }
+
+ let url = formatUTMParams(
+ "addons-manager-search",
+ AddonRepository.getSearchURL(query)
+ );
+
+ let browser = getBrowserElement();
+ let chromewin = browser.ownerGlobal;
+ chromewin.openWebLinkIn(url, "tab");
+ }
+}
+customElements.define("search-addons", SearchAddons);
+
+class MessageBarStackElement extends HTMLElement {
+ constructor() {
+ super();
+ this._observer = null;
+ const shadowRoot = this.attachShadow({ mode: "open" });
+ shadowRoot.append(this.constructor.template.content.cloneNode(true));
+ }
+
+ connectedCallback() {
+ // Close any message bar that should be allowed based on the
+ // maximum number of message bars.
+ this.closeMessageBars();
+
+ // Observe mutations to close older bars when new ones have been
+ // added.
+ this._observer = new MutationObserver(() => {
+ this._observer.disconnect();
+ this.closeMessageBars();
+ this._observer.observe(this, { childList: true });
+ });
+ this._observer.observe(this, { childList: true });
+ }
+
+ disconnectedCallback() {
+ this._observer.disconnect();
+ this._observer = null;
+ }
+
+ closeMessageBars() {
+ const { maxMessageBarCount } = this;
+ if (maxMessageBarCount > 1) {
+ // Remove the older message bars if the stack reached the
+ // maximum number of message bars allowed.
+ while (this.childElementCount > maxMessageBarCount) {
+ this.firstElementChild.remove();
+ }
+ }
+ }
+
+ get maxMessageBarCount() {
+ return parseInt(this.getAttribute("max-message-bar-count"), 10);
+ }
+
+ static get template() {
+ const template = document.createElement("template");
+
+ const style = document.createElement("style");
+ // Render the stack in the reverse order if the stack has the
+ // reverse attribute set.
+ style.textContent = `
+ :host {
+ display: block;
+ }
+ :host([reverse]) > slot {
+ display: flex;
+ flex-direction: column-reverse;
+ }
+ `;
+ template.content.append(style);
+ template.content.append(document.createElement("slot"));
+
+ Object.defineProperty(this, "template", {
+ value: template,
+ });
+
+ return template;
+ }
+}
+
+customElements.define("message-bar-stack", MessageBarStackElement);
+
+class GlobalWarnings extends MessageBarStackElement {
+ constructor() {
+ super();
+ // This won't change at runtime, but we'll want to fake it in tests.
+ this.inSafeMode = Services.appinfo.inSafeMode;
+ this.globalWarning = null;
+ }
+
+ connectedCallback() {
+ this.refresh();
+ this.addEventListener("click", this);
+ AddonManagerListenerHandler.addListener(this);
+ }
+
+ disconnectedCallback() {
+ this.removeEventListener("click", this);
+ AddonManagerListenerHandler.removeListener(this);
+ }
+
+ refresh() {
+ if (this.inSafeMode) {
+ this.setWarning("safe-mode");
+ } else if (
+ AddonManager.checkUpdateSecurityDefault &&
+ !AddonManager.checkUpdateSecurity
+ ) {
+ this.setWarning("update-security", { action: true });
+ } else if (!AddonManager.checkCompatibility) {
+ this.setWarning("check-compatibility", { action: true });
+ } else if (AMBrowserExtensionsImport.canCompleteOrCancelInstalls) {
+ this.setWarning("imported-addons", { action: true });
+ } else {
+ this.removeWarning();
+ }
+ }
+
+ setWarning(type, opts) {
+ if (
+ this.globalWarning &&
+ this.globalWarning.getAttribute("warning-type") !== type
+ ) {
+ this.removeWarning();
+ }
+ if (!this.globalWarning) {
+ this.globalWarning = document.createElement("moz-message-bar");
+ this.globalWarning.setAttribute("warning-type", type);
+ let { messageId, buttonId } = this.getGlobalWarningL10nIds(type);
+ document.l10n.setAttributes(this.globalWarning, messageId);
+ this.globalWarning.setAttribute("data-l10n-attrs", "message");
+ if (opts && opts.action) {
+ let button = document.createElement("button");
+ document.l10n.setAttributes(button, buttonId);
+ button.setAttribute("action", type);
+ button.setAttribute("slot", "actions");
+ this.globalWarning.appendChild(button);
+ }
+ this.appendChild(this.globalWarning);
+ }
+ }
+
+ getGlobalWarningL10nIds(type) {
+ const WARNING_TYPE_TO_L10NID_MAPPING = {
+ "safe-mode": {
+ messageId: "extensions-warning-safe-mode2",
+ },
+ "update-security": {
+ messageId: "extensions-warning-update-security2",
+ buttonId: "extensions-warning-update-security-button",
+ },
+ "check-compatibility": {
+ messageId: "extensions-warning-check-compatibility2",
+ buttonId: "extensions-warning-check-compatibility-button",
+ },
+ "imported-addons": {
+ messageId: "extensions-warning-imported-addons2",
+ buttonId: "extensions-warning-imported-addons-button",
+ },
+ };
+
+ return WARNING_TYPE_TO_L10NID_MAPPING[type];
+ }
+
+ removeWarning() {
+ if (this.globalWarning) {
+ this.globalWarning.remove();
+ this.globalWarning = null;
+ }
+ }
+
+ handleEvent(e) {
+ if (e.type === "click") {
+ switch (e.target.getAttribute("action")) {
+ case "update-security":
+ AddonManager.checkUpdateSecurity = true;
+ break;
+ case "check-compatibility":
+ AddonManager.checkCompatibility = true;
+ break;
+ case "imported-addons":
+ AMBrowserExtensionsImport.completeInstalls();
+ break;
+ }
+ }
+ }
+
+ /**
+ * AddonManager listener events.
+ */
+
+ onCompatibilityModeChanged() {
+ this.refresh();
+ }
+
+ onCheckUpdateSecurityChanged() {
+ this.refresh();
+ }
+
+ onBrowserExtensionsImportChanged() {
+ this.refresh();
+ }
+}
+customElements.define("global-warnings", GlobalWarnings);
+
+class AddonPageHeader extends HTMLElement {
+ connectedCallback() {
+ if (this.childElementCount === 0) {
+ this.appendChild(importTemplate("addon-page-header"));
+ this.heading = this.querySelector(".header-name");
+ this.backButton = this.querySelector(".back-button");
+ this.pageOptionsMenuButton = this.querySelector(
+ '[action="page-options"]'
+ );
+ // The addon-page-options element is outside of this element since this is
+ // position: sticky and that would break the positioning of the menu.
+ this.pageOptionsMenu = document.getElementById(
+ this.getAttribute("page-options-id")
+ );
+ }
+ document.addEventListener("view-selected", this);
+ this.addEventListener("click", this);
+ this.addEventListener("mousedown", this);
+ // Use capture since the event is actually triggered on the internal
+ // panel-list and it doesn't bubble.
+ this.pageOptionsMenu.addEventListener("shown", this, true);
+ this.pageOptionsMenu.addEventListener("hidden", this, true);
+ }
+
+ disconnectedCallback() {
+ document.removeEventListener("view-selected", this);
+ this.removeEventListener("click", this);
+ this.removeEventListener("mousedown", this);
+ this.pageOptionsMenu.removeEventListener("shown", this, true);
+ this.pageOptionsMenu.removeEventListener("hidden", this, true);
+ }
+
+ setViewInfo({ type, param }) {
+ this.setAttribute("current-view", type);
+ this.setAttribute("current-param", param);
+ let viewType = type === "list" ? param : type;
+ this.setAttribute("type", viewType);
+
+ this.heading.hidden = viewType === "detail";
+ this.backButton.hidden = viewType !== "detail" && viewType !== "shortcuts";
+
+ this.backButton.disabled = !history.state?.previousView;
+
+ if (viewType !== "detail") {
+ document.l10n.setAttributes(this.heading, `${viewType}-heading`);
+ }
+ }
+
+ handleEvent(e) {
+ let { backButton, pageOptionsMenu, pageOptionsMenuButton } = this;
+ if (e.type === "click") {
+ switch (e.target) {
+ case backButton:
+ window.history.back();
+ break;
+ case pageOptionsMenuButton:
+ if (e.inputSource == MouseEvent.MOZ_SOURCE_KEYBOARD) {
+ this.pageOptionsMenu.toggle(e);
+ }
+ break;
+ }
+ } else if (
+ e.type == "mousedown" &&
+ e.target == pageOptionsMenuButton &&
+ e.button == 0
+ ) {
+ this.pageOptionsMenu.toggle(e);
+ } else if (
+ e.target == pageOptionsMenu.panel &&
+ (e.type == "shown" || e.type == "hidden")
+ ) {
+ this.pageOptionsMenuButton.setAttribute(
+ "aria-expanded",
+ this.pageOptionsMenu.open
+ );
+ } else if (e.target == document && e.type == "view-selected") {
+ const { type, param } = e.detail;
+ this.setViewInfo({ type, param });
+ }
+ }
+}
+customElements.define("addon-page-header", AddonPageHeader);
+
+class AddonUpdatesMessage extends HTMLElement {
+ static get observedAttributes() {
+ return ["state"];
+ }
+
+ constructor() {
+ super();
+ this.attachShadow({ mode: "open" });
+ let style = document.createElement("style");
+ style.textContent = `
+ @import "chrome://global/skin/in-content/common.css";
+ button {
+ margin: 0;
+ }
+ `;
+ this.message = document.createElement("span");
+ this.message.hidden = true;
+ this.button = document.createElement("button");
+ this.button.addEventListener("click", e => {
+ if (e.button === 0) {
+ gViewController.loadView("updates/available");
+ }
+ });
+ this.button.hidden = true;
+ this.shadowRoot.append(style, this.message, this.button);
+ }
+
+ connectedCallback() {
+ document.l10n.connectRoot(this.shadowRoot);
+ document.l10n.translateFragment(this.shadowRoot);
+ }
+
+ disconnectedCallback() {
+ document.l10n.disconnectRoot(this.shadowRoot);
+ }
+
+ attributeChangedCallback(name, oldVal, newVal) {
+ if (name === "state" && oldVal !== newVal) {
+ let l10nId = `addon-updates-${newVal}`;
+ switch (newVal) {
+ case "updating":
+ case "installed":
+ case "none-found":
+ this.button.hidden = true;
+ this.message.hidden = false;
+ document.l10n.setAttributes(this.message, l10nId);
+ break;
+ case "manual-updates-found":
+ this.message.hidden = true;
+ this.button.hidden = false;
+ document.l10n.setAttributes(this.button, l10nId);
+ break;
+ }
+ }
+ }
+
+ set state(val) {
+ this.setAttribute("state", val);
+ }
+}
+customElements.define("addon-updates-message", AddonUpdatesMessage);
+
+class AddonPageOptions extends HTMLElement {
+ connectedCallback() {
+ if (this.childElementCount === 0) {
+ this.render();
+ }
+ this.addEventListener("click", this);
+ this.panel.addEventListener("showing", this);
+ AddonManagerListenerHandler.addListener(this);
+ }
+
+ disconnectedCallback() {
+ this.removeEventListener("click", this);
+ this.panel.removeEventListener("showing", this);
+ AddonManagerListenerHandler.removeListener(this);
+ }
+
+ toggle(...args) {
+ return this.panel.toggle(...args);
+ }
+
+ get open() {
+ return this.panel.open;
+ }
+
+ render() {
+ this.appendChild(importTemplate("addon-page-options"));
+ this.panel = this.querySelector("panel-list");
+ this.installFromFile = this.querySelector('[action="install-from-file"]');
+ this.toggleUpdatesEl = this.querySelector(
+ '[action="set-update-automatically"]'
+ );
+ this.resetUpdatesEl = this.querySelector('[action="reset-update-states"]');
+ this.onUpdateModeChanged();
+ }
+
+ async handleEvent(e) {
+ if (e.type === "click") {
+ e.target.disabled = true;
+ try {
+ await this.onClick(e);
+ } finally {
+ e.target.disabled = false;
+ }
+ } else if (e.type === "showing") {
+ this.installFromFile.hidden = !XPINSTALL_ENABLED;
+ }
+ }
+
+ async onClick(e) {
+ switch (e.target.getAttribute("action")) {
+ case "check-for-updates":
+ await this.checkForUpdates();
+ break;
+ case "view-recent-updates":
+ gViewController.loadView("updates/recent");
+ break;
+ case "install-from-file":
+ if (XPINSTALL_ENABLED) {
+ installAddonsFromFilePicker();
+ }
+ break;
+ case "debug-addons":
+ this.openAboutDebugging();
+ break;
+ case "set-update-automatically":
+ await this.toggleAutomaticUpdates();
+ break;
+ case "reset-update-states":
+ await this.resetAutomaticUpdates();
+ break;
+ case "manage-shortcuts":
+ gViewController.loadView("shortcuts/shortcuts");
+ break;
+ }
+ }
+
+ async checkForUpdates(e) {
+ let message = document.getElementById("updates-message");
+ message.state = "updating";
+ message.hidden = false;
+ let { installed, pending } = await checkForUpdates();
+ if (pending > 0) {
+ message.state = "manual-updates-found";
+ } else if (installed > 0) {
+ message.state = "installed";
+ } else {
+ message.state = "none-found";
+ }
+ }
+
+ openAboutDebugging() {
+ let mainWindow = window.windowRoot.ownerGlobal;
+ if ("switchToTabHavingURI" in mainWindow) {
+ let principal = Services.scriptSecurityManager.getSystemPrincipal();
+ mainWindow.switchToTabHavingURI(
+ `about:debugging#/runtime/this-firefox`,
+ true,
+ {
+ ignoreFragment: "whenComparing",
+ triggeringPrincipal: principal,
+ }
+ );
+ }
+ }
+
+ automaticUpdatesEnabled() {
+ return AddonManager.updateEnabled && AddonManager.autoUpdateDefault;
+ }
+
+ toggleAutomaticUpdates() {
+ if (!this.automaticUpdatesEnabled()) {
+ // One or both of the prefs is false, i.e. the checkbox is not
+ // checked. Now toggle both to true. If the user wants us to
+ // auto-update add-ons, we also need to auto-check for updates.
+ AddonManager.updateEnabled = true;
+ AddonManager.autoUpdateDefault = true;
+ } else {
+ // Both prefs are true, i.e. the checkbox is checked.
+ // Toggle the auto pref to false, but don't touch the enabled check.
+ AddonManager.autoUpdateDefault = false;
+ }
+ }
+
+ async resetAutomaticUpdates() {
+ let addons = await AddonManager.getAllAddons();
+ for (let addon of addons) {
+ if ("applyBackgroundUpdates" in addon) {
+ addon.applyBackgroundUpdates = AddonManager.AUTOUPDATE_DEFAULT;
+ }
+ }
+ }
+
+ /**
+ * AddonManager listener events.
+ */
+
+ onUpdateModeChanged() {
+ let updatesEnabled = this.automaticUpdatesEnabled();
+ this.toggleUpdatesEl.checked = updatesEnabled;
+ let resetType = updatesEnabled ? "automatic" : "manual";
+ let resetStringId = `addon-updates-reset-updates-to-${resetType}`;
+ document.l10n.setAttributes(this.resetUpdatesEl, resetStringId);
+ }
+}
+customElements.define("addon-page-options", AddonPageOptions);
+
+class CategoryButton extends HTMLButtonElement {
+ connectedCallback() {
+ if (this.childElementCount != 0) {
+ return;
+ }
+
+ // Make sure the aria-selected attribute is set correctly.
+ this.selected = this.hasAttribute("selected");
+
+ document.l10n.setAttributes(this, `addon-category-${this.name}-title`);
+
+ let text = document.createElement("span");
+ text.classList.add("category-name");
+ document.l10n.setAttributes(text, `addon-category-${this.name}`);
+
+ this.append(text);
+ }
+
+ load() {
+ gViewController.loadView(this.viewId);
+ }
+
+ get isVisible() {
+ // Make a category button visible only if the related addon type is
+ // supported by the AddonManager Providers actually registered to
+ // the AddonManager.
+ return AddonManager.hasAddonType(this.name);
+ }
+
+ get badgeCount() {
+ return parseInt(this.getAttribute("badge-count"), 10) || 0;
+ }
+
+ set badgeCount(val) {
+ let count = parseInt(val, 10);
+ if (count) {
+ this.setAttribute("badge-count", count);
+ } else {
+ this.removeAttribute("badge-count");
+ }
+ }
+
+ get selected() {
+ return this.hasAttribute("selected");
+ }
+
+ set selected(val) {
+ this.toggleAttribute("selected", !!val);
+ this.setAttribute("aria-selected", !!val);
+ }
+
+ get name() {
+ return this.getAttribute("name");
+ }
+
+ get viewId() {
+ return this.getAttribute("viewid");
+ }
+
+ // Just setting the hidden attribute isn't enough in case the category gets
+ // hidden while about:addons is closed since it could be the last active view
+ // which will unhide the button when it gets selected.
+ get defaultHidden() {
+ return this.hasAttribute("default-hidden");
+ }
+}
+customElements.define("category-button", CategoryButton, { extends: "button" });
+
+class DiscoverButton extends CategoryButton {
+ get isVisible() {
+ return isDiscoverEnabled();
+ }
+}
+customElements.define("discover-button", DiscoverButton, { extends: "button" });
+
+// Create the button-group element so it gets loaded.
+document.createElement("button-group");
+class CategoriesBox extends customElements.get("button-group") {
+ constructor() {
+ super();
+ // This will resolve when the initial category states have been set from
+ // our cached prefs. This is intended for use in testing to verify that we
+ // are caching the previous state.
+ this.promiseRendered = new Promise(resolve => {
+ this._resolveRendered = resolve;
+ });
+ }
+
+ handleEvent(e) {
+ if (e.target == document && e.type == "view-selected") {
+ const { type, param } = e.detail;
+ this.select(`addons://${type}/${param}`);
+ return;
+ }
+
+ if (e.target == this && e.type == "button-group:key-selected") {
+ this.activeChild.load();
+ return;
+ }
+
+ if (e.type == "click") {
+ const button = e.target.closest("[viewid]");
+ if (button) {
+ button.load();
+ return;
+ }
+ }
+
+ // Forward the unhandled events to the button-group custom element.
+ super.handleEvent(e);
+ }
+
+ disconnectedCallback() {
+ document.removeEventListener("view-selected", this);
+ this.removeEventListener("button-group:key-selected", this);
+ this.removeEventListener("click", this);
+ AddonManagerListenerHandler.removeListener(this);
+ super.disconnectedCallback();
+ }
+
+ async initialize() {
+ let hiddenTypes = new Set([]);
+
+ for (let button of this.children) {
+ let { defaultHidden, name } = button;
+ button.hidden =
+ !button.isVisible || (defaultHidden && this.shouldHideCategory(name));
+
+ if (defaultHidden && AddonManager.hasAddonType(name)) {
+ hiddenTypes.add(name);
+ }
+ }
+
+ let hiddenUpdated;
+ if (hiddenTypes.size) {
+ hiddenUpdated = this.updateHiddenCategories(Array.from(hiddenTypes));
+ }
+
+ this.updateAvailableCount();
+
+ document.addEventListener("view-selected", this);
+ this.addEventListener("button-group:key-selected", this);
+ this.addEventListener("click", this);
+ AddonManagerListenerHandler.addListener(this);
+
+ this._resolveRendered();
+ await hiddenUpdated;
+ }
+
+ shouldHideCategory(name) {
+ return Services.prefs.getBoolPref(`extensions.ui.${name}.hidden`, true);
+ }
+
+ setShouldHideCategory(name, hide) {
+ Services.prefs.setBoolPref(`extensions.ui.${name}.hidden`, hide);
+ }
+
+ getButtonByName(name) {
+ return this.querySelector(`[name="${name}"]`);
+ }
+
+ get selectedChild() {
+ return this._selectedChild;
+ }
+
+ set selectedChild(node) {
+ if (node && this.contains(node)) {
+ if (this._selectedChild) {
+ this._selectedChild.selected = false;
+ }
+ this._selectedChild = node;
+ this._selectedChild.selected = true;
+ }
+ }
+
+ select(viewId) {
+ let button = this.querySelector(`[viewid="${viewId}"]`);
+ if (button) {
+ this.activeChild = button;
+ this.selectedChild = button;
+ button.hidden = false;
+ Services.prefs.setStringPref(PREF_UI_LASTCATEGORY, viewId);
+ }
+ }
+
+ selectType(type) {
+ this.select(`addons://list/${type}`);
+ }
+
+ onInstalled(addon) {
+ let button = this.getButtonByName(addon.type);
+ if (button) {
+ button.hidden = false;
+ this.setShouldHideCategory(addon.type, false);
+ }
+ this.updateAvailableCount();
+ }
+
+ onInstallStarted(install) {
+ this.onInstalled(install);
+ }
+
+ onNewInstall() {
+ this.updateAvailableCount();
+ }
+
+ onInstallPostponed() {
+ this.updateAvailableCount();
+ }
+
+ onInstallCancelled() {
+ this.updateAvailableCount();
+ }
+
+ async updateAvailableCount() {
+ let installs = await AddonManager.getAllInstalls();
+ var count = installs.filter(install => {
+ return isManualUpdate(install) && !install.installed;
+ }).length;
+ let availableButton = this.getButtonByName("available-updates");
+ availableButton.hidden = !availableButton.selected && count == 0;
+ availableButton.badgeCount = count;
+ }
+
+ async updateHiddenCategories(types) {
+ let hiddenTypes = new Set(types);
+ let getAddons = AddonManager.getAddonsByTypes(types);
+ let getInstalls = AddonManager.getInstallsByTypes(types);
+
+ for (let addon of await getAddons) {
+ if (addon.hidden) {
+ continue;
+ }
+
+ this.onInstalled(addon);
+ hiddenTypes.delete(addon.type);
+
+ if (!hiddenTypes.size) {
+ return;
+ }
+ }
+
+ for (let install of await getInstalls) {
+ if (
+ install.existingAddon ||
+ install.state == AddonManager.STATE_AVAILABLE
+ ) {
+ continue;
+ }
+
+ this.onInstalled(install);
+ hiddenTypes.delete(install.type);
+
+ if (!hiddenTypes.size) {
+ return;
+ }
+ }
+
+ for (let type of hiddenTypes) {
+ let button = this.getButtonByName(type);
+ if (button.selected) {
+ // Cancel the load if this view should be hidden.
+ gViewController.resetState();
+ }
+ this.setShouldHideCategory(type, true);
+ button.hidden = true;
+ }
+ }
+}
+customElements.define("categories-box", CategoriesBox);
+
+class SidebarFooter extends HTMLElement {
+ connectedCallback() {
+ let list = document.createElement("ul");
+ list.classList.add("sidebar-footer-list");
+
+ let systemPrincipal = Services.scriptSecurityManager.getSystemPrincipal();
+ let prefsItem = this.createItem({
+ icon: "chrome://global/skin/icons/settings.svg",
+ createLinkElement: () => {
+ let link = document.createElement("a");
+ link.href = "about:preferences";
+ link.id = "preferencesButton";
+ return link;
+ },
+ titleL10nId: "sidebar-settings-button-title",
+ labelL10nId: "addons-settings-button",
+ onClick: e => {
+ e.preventDefault();
+ windowRoot.ownerGlobal.switchToTabHavingURI("about:preferences", true, {
+ ignoreFragment: "whenComparing",
+ triggeringPrincipal: systemPrincipal,
+ });
+ },
+ });
+
+ let supportItem = this.createItem({
+ icon: "chrome://global/skin/icons/help.svg",
+ createLinkElement: () => {
+ let link = document.createElement("a", { is: "moz-support-link" });
+ link.setAttribute("support-page", "addons-help");
+ link.id = "help-button";
+ return link;
+ },
+ titleL10nId: "sidebar-help-button-title",
+ labelL10nId: "help-button",
+ });
+
+ list.append(prefsItem, supportItem);
+ this.append(list);
+ }
+
+ createItem({ onClick, titleL10nId, labelL10nId, icon, createLinkElement }) {
+ let listItem = document.createElement("li");
+
+ let link = createLinkElement();
+ link.classList.add("sidebar-footer-link");
+ link.addEventListener("click", onClick);
+ document.l10n.setAttributes(link, titleL10nId);
+
+ let img = document.createElement("img");
+ img.src = icon;
+ img.className = "sidebar-footer-icon";
+
+ let label = document.createElement("span");
+ label.className = "sidebar-footer-label";
+ document.l10n.setAttributes(label, labelL10nId);
+
+ link.append(img, label);
+ listItem.append(link);
+ return listItem;
+ }
+}
+customElements.define("sidebar-footer", SidebarFooter, { extends: "footer" });
+
+class AddonOptions extends HTMLElement {
+ connectedCallback() {
+ if (!this.children.length) {
+ this.render();
+ }
+ }
+
+ get panel() {
+ return this.querySelector("panel-list");
+ }
+
+ updateSeparatorsVisibility() {
+ let lastSeparator;
+ let elWasVisible = false;
+
+ // Collect the panel-list children that are not already hidden.
+ const children = Array.from(this.panel.children).filter(el => !el.hidden);
+
+ for (let child of children) {
+ if (child.localName == "hr") {
+ child.hidden = !elWasVisible;
+ if (!child.hidden) {
+ lastSeparator = child;
+ }
+ elWasVisible = false;
+ } else {
+ elWasVisible = true;
+ }
+ }
+ if (!elWasVisible && lastSeparator) {
+ lastSeparator.hidden = true;
+ }
+ }
+
+ get template() {
+ return "addon-options";
+ }
+
+ render() {
+ this.appendChild(importTemplate(this.template));
+ }
+
+ setElementState(el, card, addon, updateInstall) {
+ switch (el.getAttribute("action")) {
+ case "remove":
+ if (hasPermission(addon, "uninstall")) {
+ // Regular add-on that can be uninstalled.
+ el.disabled = false;
+ el.hidden = false;
+ document.l10n.setAttributes(el, "remove-addon-button");
+ } else if (addon.isBuiltin) {
+ // Likely the built-in themes, can't be removed, that's fine.
+ el.hidden = true;
+ } else {
+ // Likely sideloaded, mention that it can't be removed with a link.
+ el.hidden = false;
+ el.disabled = true;
+ if (!el.querySelector('[slot="support-link"]')) {
+ let link = document.createElement("a", { is: "moz-support-link" });
+ link.setAttribute("data-l10n-name", "link");
+ link.setAttribute("support-page", "cant-remove-addon");
+ link.setAttribute("slot", "support-link");
+ el.appendChild(link);
+ document.l10n.setAttributes(el, "remove-addon-disabled-button");
+ }
+ }
+ break;
+ case "report":
+ el.hidden = !isAbuseReportSupported(addon);
+ break;
+ case "install-update":
+ el.hidden = !updateInstall;
+ break;
+ case "expand":
+ el.hidden = card.expanded;
+ break;
+ case "preferences":
+ el.hidden =
+ getOptionsType(addon) !== "tab" &&
+ (getOptionsType(addon) !== "inline" || card.expanded);
+ if (!el.hidden) {
+ isAddonOptionsUIAllowed(addon).then(allowed => {
+ el.hidden = !allowed;
+ });
+ }
+ break;
+ }
+ }
+
+ update(card, addon, updateInstall) {
+ for (let el of this.items) {
+ this.setElementState(el, card, addon, updateInstall);
+ }
+
+ // Update the separators visibility based on the updated visibility
+ // of the actions in the panel-list.
+ this.updateSeparatorsVisibility();
+ }
+
+ get items() {
+ return this.querySelectorAll("panel-item");
+ }
+
+ get visibleItems() {
+ return Array.from(this.items).filter(item => !item.hidden);
+ }
+}
+customElements.define("addon-options", AddonOptions);
+
+class PluginOptions extends AddonOptions {
+ get template() {
+ return "plugin-options";
+ }
+
+ setElementState(el, card, addon) {
+ const userDisabledStates = {
+ "always-activate": false,
+ "never-activate": true,
+ };
+ const action = el.getAttribute("action");
+ if (action in userDisabledStates) {
+ let userDisabled = userDisabledStates[action];
+ el.checked = addon.userDisabled === userDisabled;
+ el.disabled = !(el.checked || hasPermission(addon, action));
+ } else {
+ super.setElementState(el, card, addon);
+ }
+ }
+}
+customElements.define("plugin-options", PluginOptions);
+
+class ProxyContextMenu extends HTMLElement {
+ openPopupAtScreen(...args) {
+ // prettier-ignore
+ const parentContextMenuPopup =
+ windowRoot.ownerGlobal.document.getElementById("contentAreaContextMenu");
+ return parentContextMenuPopup.openPopupAtScreen(...args);
+ }
+}
+customElements.define("proxy-context-menu", ProxyContextMenu);
+
+class InlineOptionsBrowser extends HTMLElement {
+ constructor() {
+ super();
+ // Force the options_ui remote browser to recompute window.mozInnerScreenX
+ // and window.mozInnerScreenY when the "addon details" page has been
+ // scrolled (See Bug 1390445 for rationale).
+ // Also force a repaint to fix an issue where the click location was
+ // getting out of sync (see bug 1548687).
+ this.updatePositionTask = new DeferredTask(() => {
+ if (this.browser && this.browser.isRemoteBrowser) {
+ // Select boxes can appear in the wrong spot after scrolling, this will
+ // clear that up. Bug 1390445.
+ this.browser.frameLoader.requestUpdatePosition();
+ }
+ }, 100);
+
+ this._embedderElement = null;
+ this._promiseDisconnected = new Promise(
+ resolve => (this._resolveDisconnected = resolve)
+ );
+ }
+
+ connectedCallback() {
+ window.addEventListener("scroll", this, true);
+ const { embedderElement } = top.browsingContext;
+ this._embedderElement = embedderElement;
+ embedderElement.addEventListener("FullZoomChange", this);
+ embedderElement.addEventListener("TextZoomChange", this);
+ }
+
+ disconnectedCallback() {
+ this._resolveDisconnected();
+ window.removeEventListener("scroll", this, true);
+ this._embedderElement?.removeEventListener("FullZoomChange", this);
+ this._embedderElement?.removeEventListener("TextZoomChange", this);
+ this._embedderElement = null;
+ }
+
+ handleEvent(e) {
+ switch (e.type) {
+ case "scroll":
+ return this.updatePositionTask.arm();
+ case "FullZoomChange":
+ case "TextZoomChange":
+ return this.maybeUpdateZoom();
+ }
+ return undefined;
+ }
+
+ maybeUpdateZoom() {
+ let bc = this.browser?.browsingContext;
+ let topBc = top.browsingContext;
+ if (!bc || !topBc) {
+ return;
+ }
+ // Use the same full-zoom as our top window.
+ bc.fullZoom = topBc.fullZoom;
+ bc.textZoom = topBc.textZoom;
+ }
+
+ setAddon(addon) {
+ this.addon = addon;
+ }
+
+ destroyBrowser() {
+ this.textContent = "";
+ }
+
+ ensureBrowserCreated() {
+ if (this.childElementCount === 0) {
+ this.render();
+ }
+ }
+
+ async render() {
+ let { addon } = this;
+ if (!addon) {
+ throw new Error("addon required to create inline options");
+ }
+
+ let browser = document.createXULElement("browser");
+ browser.setAttribute("type", "content");
+ browser.setAttribute("disableglobalhistory", "true");
+ browser.setAttribute("messagemanagergroup", "webext-browsers");
+ browser.setAttribute("id", "addon-inline-options");
+ browser.setAttribute("transparent", "true");
+ browser.setAttribute("forcemessagemanager", "true");
+ browser.setAttribute("autocompletepopup", "PopupAutoComplete");
+
+ let { optionsURL, optionsBrowserStyle } = addon;
+ if (addon.isWebExtension) {
+ let policy = ExtensionParent.WebExtensionPolicy.getByID(addon.id);
+ browser.setAttribute(
+ "initialBrowsingContextGroupId",
+ policy.browsingContextGroupId
+ );
+ }
+
+ let readyPromise;
+ let remoteSubframes = window.docShell.QueryInterface(
+ Ci.nsILoadContext
+ ).useRemoteSubframes;
+ // For now originAttributes have no effect, which will change if the
+ // optionsURL becomes anything but moz-extension* or we start considering
+ // OA for extensions.
+ var oa = E10SUtils.predictOriginAttributes({ browser });
+ let loadRemote = E10SUtils.canLoadURIInRemoteType(
+ optionsURL,
+ remoteSubframes,
+ E10SUtils.EXTENSION_REMOTE_TYPE,
+ oa
+ );
+ if (loadRemote) {
+ browser.setAttribute("remote", "true");
+ browser.setAttribute("remoteType", E10SUtils.EXTENSION_REMOTE_TYPE);
+
+ readyPromise = promiseEvent("XULFrameLoaderCreated", browser);
+ } else {
+ readyPromise = promiseEvent("load", browser, true);
+ }
+
+ let stack = document.createXULElement("stack");
+ stack.classList.add("inline-options-stack");
+ stack.appendChild(browser);
+ this.appendChild(stack);
+ this.browser = browser;
+
+ // Force bindings to apply synchronously.
+ browser.clientTop;
+
+ await readyPromise;
+
+ this.maybeUpdateZoom();
+
+ if (!browser.messageManager) {
+ // If the browser.messageManager is undefined, the browser element has
+ // been removed from the document in the meantime (e.g. due to a rapid
+ // sequence of addon reload), return null.
+ return;
+ }
+
+ ExtensionParent.apiManager.emit("extension-browser-inserted", browser);
+
+ await new Promise(resolve => {
+ let messageListener = {
+ receiveMessage({ name, data }) {
+ if (name === "Extension:BrowserResized") {
+ browser.style.height = `${data.height}px`;
+ } else if (name === "Extension:BrowserContentLoaded") {
+ resolve();
+ }
+ },
+ };
+
+ let mm = browser.messageManager;
+
+ if (!mm) {
+ // If the browser.messageManager is undefined, the browser element has
+ // been removed from the document in the meantime (e.g. due to a rapid
+ // sequence of addon reload), return null.
+ resolve();
+ return;
+ }
+
+ mm.loadFrameScript(
+ "chrome://extensions/content/ext-browser-content.js",
+ false,
+ true
+ );
+ mm.addMessageListener("Extension:BrowserContentLoaded", messageListener);
+ mm.addMessageListener("Extension:BrowserResized", messageListener);
+
+ let browserOptions = {
+ fixedWidth: true,
+ isInline: true,
+ };
+
+ if (optionsBrowserStyle) {
+ // aboutaddons.js is not used on Android. extension.css is included in
+ // Firefox desktop and Thunderbird.
+ // eslint-disable-next-line mozilla/no-browser-refs-in-toolkit
+ browserOptions.stylesheets = ["chrome://browser/content/extension.css"];
+ }
+
+ mm.sendAsyncMessage("Extension:InitBrowser", browserOptions);
+
+ if (browser.isConnectedAndReady) {
+ this.fixupAndLoadURIString(optionsURL);
+ } else {
+ // browser custom element does opt-in the delayConnectedCallback
+ // behavior (see connectedCallback in the custom element definition
+ // from browser-custom-element.js) and so calling browser.loadURI
+ // would fail if the about:addons document is not yet fully loaded.
+ Promise.race([
+ promiseEvent("DOMContentLoaded", document),
+ this._promiseDisconnected,
+ ]).then(() => {
+ this.fixupAndLoadURIString(optionsURL);
+ });
+ }
+ });
+ }
+
+ fixupAndLoadURIString(uriString) {
+ if (!this.browser || !this.browser.isConnectedAndReady) {
+ throw new Error("Fail to loadURI");
+ }
+
+ this.browser.fixupAndLoadURIString(uriString, {
+ triggeringPrincipal: Services.scriptSecurityManager.getSystemPrincipal(),
+ });
+ }
+}
+customElements.define("inline-options-browser", InlineOptionsBrowser);
+
+class UpdateReleaseNotes extends HTMLElement {
+ connectedCallback() {
+ this.addEventListener("click", this);
+ }
+
+ disconnectedCallback() {
+ this.removeEventListener("click", this);
+ }
+
+ handleEvent(e) {
+ // We used to strip links, but ParserUtils.parseFragment() leaves them in,
+ // so just make sure we open them using the null principal in a new tab.
+ if (e.type == "click" && e.target.localName == "a" && e.target.href) {
+ e.preventDefault();
+ e.stopPropagation();
+ windowRoot.ownerGlobal.openWebLinkIn(e.target.href, "tab");
+ }
+ }
+
+ async loadForUri(uri) {
+ // Can't load the release notes without a URL to load.
+ if (!uri || !uri.spec) {
+ this.setErrorMessage();
+ this.dispatchEvent(new CustomEvent("release-notes-error"));
+ return;
+ }
+
+ // Don't try to load for the same update a second time.
+ if (this.url == uri.spec) {
+ this.dispatchEvent(new CustomEvent("release-notes-cached"));
+ return;
+ }
+
+ // Store the URL to skip the network if loaded again.
+ this.url = uri.spec;
+
+ // Set the loading message before hitting the network.
+ this.setLoadingMessage();
+ this.dispatchEvent(new CustomEvent("release-notes-loading"));
+
+ try {
+ // loadReleaseNotes will fetch and sanitize the release notes.
+ let fragment = await loadReleaseNotes(uri);
+ this.textContent = "";
+ this.appendChild(fragment);
+ this.dispatchEvent(new CustomEvent("release-notes-loaded"));
+ } catch (e) {
+ this.setErrorMessage();
+ this.dispatchEvent(new CustomEvent("release-notes-error"));
+ }
+ }
+
+ setMessage(id) {
+ this.textContent = "";
+ let message = document.createElement("p");
+ document.l10n.setAttributes(message, id);
+ this.appendChild(message);
+ }
+
+ setLoadingMessage() {
+ this.setMessage("release-notes-loading");
+ }
+
+ setErrorMessage() {
+ this.setMessage("release-notes-error");
+ }
+}
+customElements.define("update-release-notes", UpdateReleaseNotes);
+
+class AddonPermissionsList extends HTMLElement {
+ setAddon(addon) {
+ this.addon = addon;
+ this.render();
+ }
+
+ async render() {
+ let empty = { origins: [], permissions: [] };
+ let requiredPerms = { ...(this.addon.userPermissions ?? empty) };
+ let optionalPerms = { ...(this.addon.optionalPermissions ?? empty) };
+ let grantedPerms = await ExtensionPermissions.get(this.addon.id);
+
+ if (manifestV3enabled) {
+ // If optional permissions include <all_urls>, extension can request and
+ // be granted permission for individual sites not listed in the manifest.
+ // Include them as well in the optional origins list.
+ optionalPerms.origins = [
+ ...optionalPerms.origins,
+ ...grantedPerms.origins.filter(o => !requiredPerms.origins.includes(o)),
+ ];
+ }
+
+ let permissions = Extension.formatPermissionStrings(
+ {
+ permissions: requiredPerms,
+ optionalPermissions: optionalPerms,
+ },
+ { buildOptionalOrigins: manifestV3enabled }
+ );
+ let optionalEntries = [
+ ...Object.entries(permissions.optionalPermissions),
+ ...Object.entries(permissions.optionalOrigins),
+ ];
+
+ this.textContent = "";
+ let frag = importTemplate("addon-permissions-list");
+
+ if (permissions.msgs.length) {
+ let section = frag.querySelector(".addon-permissions-required");
+ section.hidden = false;
+ let list = section.querySelector(".addon-permissions-list");
+
+ for (let msg of permissions.msgs) {
+ let item = document.createElement("li");
+ item.classList.add("permission-info", "permission-checked");
+ item.appendChild(document.createTextNode(msg));
+ list.appendChild(item);
+ }
+ }
+
+ if (optionalEntries.length) {
+ let section = frag.querySelector(".addon-permissions-optional");
+ section.hidden = false;
+ let list = section.querySelector(".addon-permissions-list");
+
+ for (let id = 0; id < optionalEntries.length; id++) {
+ let [perm, msg] = optionalEntries[id];
+
+ let type = "permission";
+ if (permissions.optionalOrigins[perm]) {
+ type = "origin";
+ }
+ let item = document.createElement("li");
+ item.classList.add("permission-info");
+
+ let toggle = document.createElement("moz-toggle");
+ toggle.setAttribute("label", msg);
+ toggle.id = `permission-${id}`;
+ toggle.setAttribute("permission-type", type);
+
+ let checked =
+ grantedPerms.permissions.includes(perm) ||
+ grantedPerms.origins.includes(perm);
+
+ // If this is one of the "all sites" permissions
+ if (Extension.isAllSitesPermission(perm)) {
+ // mark it as checked if ANY of the "all sites" permission is granted.
+ checked = await AddonCard.optionalAllSitesGranted(this.addon.id);
+ toggle.toggleAttribute("permission-all-sites", true);
+ }
+
+ toggle.pressed = checked;
+ item.classList.toggle("permission-checked", checked);
+
+ toggle.setAttribute("permission-key", perm);
+ toggle.setAttribute("action", "toggle-permission");
+ item.appendChild(toggle);
+ list.appendChild(item);
+ }
+ }
+ if (!permissions.msgs.length && !optionalEntries.length) {
+ let row = frag.querySelector(".addon-permissions-empty");
+ row.hidden = false;
+ }
+
+ this.appendChild(frag);
+ }
+}
+customElements.define("addon-permissions-list", AddonPermissionsList);
+
+class AddonSitePermissionsList extends HTMLElement {
+ setAddon(addon) {
+ this.addon = addon;
+ this.render();
+ }
+
+ async render() {
+ let permissions = Extension.formatPermissionStrings({
+ sitePermissions: this.addon.sitePermissions,
+ siteOrigin: this.addon.siteOrigin,
+ });
+
+ this.textContent = "";
+ let frag = importTemplate("addon-sitepermissions-list");
+
+ if (permissions.msgs.length) {
+ let section = frag.querySelector(".addon-permissions-required");
+ section.hidden = false;
+ let list = section.querySelector(".addon-permissions-list");
+ let header = section.querySelector(".permission-header");
+ document.l10n.setAttributes(header, "addon-sitepermissions-required", {
+ hostname: new URL(this.addon.siteOrigin).hostname,
+ });
+
+ for (let msg of permissions.msgs) {
+ let item = document.createElement("li");
+ item.classList.add("permission-info", "permission-checked");
+ item.appendChild(document.createTextNode(msg));
+ list.appendChild(item);
+ }
+ }
+
+ this.appendChild(frag);
+ }
+}
+customElements.define("addon-sitepermissions-list", AddonSitePermissionsList);
+
+class AddonDetails extends HTMLElement {
+ connectedCallback() {
+ if (!this.children.length) {
+ this.render();
+ }
+ this.deck.addEventListener("view-changed", this);
+ this.descriptionShowMoreButton.addEventListener("click", this);
+ }
+
+ disconnectedCallback() {
+ this.inlineOptions.destroyBrowser();
+ this.deck.removeEventListener("view-changed", this);
+ this.descriptionShowMoreButton.removeEventListener("click", this);
+ }
+
+ handleEvent(e) {
+ if (e.type == "view-changed" && e.target == this.deck) {
+ switch (this.deck.selectedViewName) {
+ case "release-notes":
+ let releaseNotes = this.querySelector("update-release-notes");
+ let uri = this.releaseNotesUri;
+ if (uri) {
+ releaseNotes.loadForUri(uri);
+ }
+ break;
+ case "preferences":
+ if (getOptionsType(this.addon) == "inline") {
+ this.inlineOptions.ensureBrowserCreated();
+ }
+ break;
+ }
+
+ // When a details view is rendered again, the default details view is
+ // unconditionally shown. So if any other tab is selected, do not save
+ // the current scroll offset, but start at the top of the page instead.
+ ScrollOffsets.canRestore = this.deck.selectedViewName === "details";
+ } else if (
+ e.type == "click" &&
+ e.target == this.descriptionShowMoreButton
+ ) {
+ this.toggleDescription();
+ }
+ }
+
+ onInstalled() {
+ let policy = WebExtensionPolicy.getByID(this.addon.id);
+ let extension = policy && policy.extension;
+ if (extension && extension.startupReason === "ADDON_UPGRADE") {
+ // Ensure the options browser is recreated when a new version starts.
+ this.extensionShutdown();
+ this.extensionStartup();
+ }
+ }
+
+ onDisabled(addon) {
+ this.extensionShutdown();
+ }
+
+ onEnabled(addon) {
+ this.extensionStartup();
+ }
+
+ extensionShutdown() {
+ this.inlineOptions.destroyBrowser();
+ }
+
+ extensionStartup() {
+ if (this.deck.selectedViewName === "preferences") {
+ this.inlineOptions.ensureBrowserCreated();
+ }
+ }
+
+ toggleDescription() {
+ this.descriptionCollapsed = !this.descriptionCollapsed;
+
+ this.descriptionWrapper.classList.toggle(
+ "addon-detail-description-collapse",
+ this.descriptionCollapsed
+ );
+
+ this.descriptionShowMoreButton.hidden = false;
+ document.l10n.setAttributes(
+ this.descriptionShowMoreButton,
+ this.descriptionCollapsed
+ ? "addon-detail-description-expand"
+ : "addon-detail-description-collapse"
+ );
+ }
+
+ get releaseNotesUri() {
+ let { releaseNotesURI } = getUpdateInstall(this.addon) || this.addon;
+ return releaseNotesURI;
+ }
+
+ setAddon(addon) {
+ this.addon = addon;
+ }
+
+ update() {
+ let { addon } = this;
+
+ // Hide tab buttons that won't have any content.
+ let getButtonByName = name =>
+ this.tabGroup.querySelector(`[name="${name}"]`);
+ let permsBtn = getButtonByName("permissions");
+ permsBtn.hidden = addon.type != "extension";
+ let notesBtn = getButtonByName("release-notes");
+ notesBtn.hidden = !this.releaseNotesUri;
+ let prefsBtn = getButtonByName("preferences");
+ prefsBtn.hidden = getOptionsType(addon) !== "inline";
+ if (prefsBtn.hidden) {
+ if (this.deck.selectedViewName === "preferences") {
+ this.deck.selectedViewName = "details";
+ }
+ } else {
+ isAddonOptionsUIAllowed(addon).then(allowed => {
+ prefsBtn.hidden = !allowed;
+ });
+ }
+
+ // Hide the tab group if "details" is the only visible button.
+ let tabGroupButtons = this.tabGroup.querySelectorAll(".tab-button");
+ this.tabGroup.hidden = Array.from(tabGroupButtons).every(button => {
+ return button.name == "details" || button.hidden;
+ });
+
+ // Show the update check button if necessary. The button might not exist if
+ // the add-on doesn't support updates.
+ let updateButton = this.querySelector('[action="update-check"]');
+ if (updateButton) {
+ updateButton.hidden =
+ this.addon.updateInstall || AddonManager.shouldAutoUpdate(this.addon);
+ }
+
+ // Set the value for auto updates.
+ let inputs = this.querySelectorAll(".addon-detail-row-updates input");
+ for (let input of inputs) {
+ input.checked = input.value == addon.applyBackgroundUpdates;
+ }
+ }
+
+ renderDescription(addon) {
+ this.descriptionWrapper = this.querySelector(
+ ".addon-detail-description-wrapper"
+ );
+ this.descriptionContents = this.querySelector(".addon-detail-description");
+ this.descriptionShowMoreButton = this.querySelector(
+ ".addon-detail-description-toggle"
+ );
+
+ if (addon.getFullDescription) {
+ this.descriptionContents.appendChild(addon.getFullDescription(document));
+ } else if (addon.fullDescription) {
+ this.descriptionContents.appendChild(nl2br(addon.fullDescription));
+ }
+
+ this.descriptionCollapsed = false;
+
+ requestAnimationFrame(() => {
+ const remSize = parseFloat(
+ getComputedStyle(document.documentElement).fontSize
+ );
+ const { height } = this.descriptionContents.getBoundingClientRect();
+
+ // collapse description if there are too many lines,i.e. height > (20 rem)
+ if (height > 20 * remSize) {
+ this.toggleDescription();
+ }
+ });
+ }
+
+ updateQuarantinedDomainsUserAllowed() {
+ const { addon } = this;
+ let quarantinedDomainsUserAllowedRow = this.querySelector(
+ ".addon-detail-row-quarantined-domains"
+ );
+ if (addon.canChangeQuarantineIgnored) {
+ quarantinedDomainsUserAllowedRow.hidden = false;
+ quarantinedDomainsUserAllowedRow.nextElementSibling.hidden = false;
+ quarantinedDomainsUserAllowedRow.querySelector(
+ `[value="${addon.quarantineIgnoredByUser ? 1 : 0}"]`
+ ).checked = true;
+ } else {
+ quarantinedDomainsUserAllowedRow.hidden = true;
+ quarantinedDomainsUserAllowedRow.nextElementSibling.hidden = true;
+ }
+ }
+
+ async render() {
+ let { addon } = this;
+ if (!addon) {
+ throw new Error("addon-details must be initialized by setAddon");
+ }
+
+ this.textContent = "";
+ this.appendChild(importTemplate("addon-details"));
+
+ this.deck = this.querySelector("named-deck");
+ this.tabGroup = this.querySelector(".tab-group");
+
+ // Set the add-on for the permissions section.
+ this.permissionsList = this.querySelector("addon-permissions-list");
+ this.permissionsList.setAddon(addon);
+
+ // Set the add-on for the sitepermissions section.
+ this.sitePermissionsList = this.querySelector("addon-sitepermissions-list");
+ if (addon.type == "sitepermission") {
+ this.sitePermissionsList.setAddon(addon);
+ }
+ this.querySelector(".addon-detail-sitepermissions").hidden =
+ addon.type !== "sitepermission";
+
+ // Set the add-on for the preferences section.
+ this.inlineOptions = this.querySelector("inline-options-browser");
+ this.inlineOptions.setAddon(addon);
+
+ // Full description.
+ this.renderDescription(addon);
+ this.querySelector(".addon-detail-contribute").hidden =
+ !addon.contributionURL;
+ this.querySelector(".addon-detail-row-updates").hidden = !hasPermission(
+ addon,
+ "upgrade"
+ );
+
+ if (addon.type != "extension") {
+ // Don't show any private browsing related section for non-extension
+ // addon types, because not relevant or they are either always allowed
+ // (e.g. static themes).
+ //
+ // TODO(Bug 1799090): introduce ad-hoc UI for "sitepermission" addon type.
+ } else if (addon.incognito == "not_allowed") {
+ let pbRowNotAllowed = this.querySelector(
+ ".addon-detail-row-private-browsing-disallowed"
+ );
+ pbRowNotAllowed.hidden = false;
+ pbRowNotAllowed.nextElementSibling.hidden = false;
+ } else if (!hasPermission(addon, "change-privatebrowsing")) {
+ let pbRowRequired = this.querySelector(
+ ".addon-detail-row-private-browsing-required"
+ );
+ pbRowRequired.hidden = false;
+ pbRowRequired.nextElementSibling.hidden = false;
+ } else {
+ let pbRow = this.querySelector(".addon-detail-row-private-browsing");
+ pbRow.hidden = false;
+ pbRow.nextElementSibling.hidden = false;
+ let isAllowed = await isAllowedInPrivateBrowsing(addon);
+ pbRow.querySelector(`[value="${isAllowed ? 1 : 0}"]`).checked = true;
+ }
+
+ this.updateQuarantinedDomainsUserAllowed();
+
+ // Author.
+ let creatorRow = this.querySelector(".addon-detail-row-author");
+ if (addon.creator) {
+ let link = creatorRow.querySelector("a");
+ link.hidden = !addon.creator.url;
+ if (link.hidden) {
+ creatorRow.appendChild(new Text(addon.creator.name));
+ } else {
+ link.href = formatUTMParams(
+ "addons-manager-user-profile-link",
+ addon.creator.url
+ );
+ link.target = "_blank";
+ link.textContent = addon.creator.name;
+ }
+ } else {
+ creatorRow.hidden = true;
+ }
+
+ // Version. Don't show a version for LWTs.
+ let version = this.querySelector(".addon-detail-row-version");
+ if (addon.version && !/@personas\.mozilla\.org/.test(addon.id)) {
+ version.appendChild(new Text(addon.version));
+ } else {
+ version.hidden = true;
+ }
+
+ // Last updated.
+ let updateDate = this.querySelector(".addon-detail-row-lastUpdated");
+ if (addon.updateDate) {
+ let lastUpdated = addon.updateDate.toLocaleDateString(undefined, {
+ year: "numeric",
+ month: "long",
+ day: "numeric",
+ });
+ updateDate.appendChild(new Text(lastUpdated));
+ } else {
+ updateDate.hidden = true;
+ }
+
+ // Homepage.
+ let homepageRow = this.querySelector(".addon-detail-row-homepage");
+ if (addon.homepageURL) {
+ let homepageURL = homepageRow.querySelector("a");
+ homepageURL.href = addon.homepageURL;
+ homepageURL.textContent = addon.homepageURL;
+ } else {
+ homepageRow.hidden = true;
+ }
+
+ // Rating.
+ let ratingRow = this.querySelector(".addon-detail-row-rating");
+ if (addon.reviewURL) {
+ ratingRow.querySelector("moz-five-star").rating = addon.averageRating;
+ let reviews = ratingRow.querySelector("a");
+ reviews.href = formatUTMParams(
+ "addons-manager-reviews-link",
+ addon.reviewURL
+ );
+ document.l10n.setAttributes(reviews, "addon-detail-reviews-link", {
+ numberOfReviews: addon.reviewCount,
+ });
+ } else {
+ ratingRow.hidden = true;
+ }
+
+ this.update();
+ }
+
+ showPrefs() {
+ if (getOptionsType(this.addon) == "inline") {
+ this.deck.selectedViewName = "preferences";
+ this.inlineOptions.ensureBrowserCreated();
+ }
+ }
+}
+customElements.define("addon-details", AddonDetails);
+
+/**
+ * A card component for managing an add-on. It should be initialized by setting
+ * the add-on with `setAddon()` before being connected to the document.
+ *
+ * let card = document.createElement("addon-card");
+ * card.setAddon(addon);
+ * document.body.appendChild(card);
+ */
+class AddonCard extends HTMLElement {
+ connectedCallback() {
+ // If we've already rendered we can just update, otherwise render.
+ if (this.children.length) {
+ this.update();
+ } else {
+ this.render();
+ }
+ this.registerListeners();
+ }
+
+ disconnectedCallback() {
+ this.removeListeners();
+ }
+
+ get expanded() {
+ return this.hasAttribute("expanded");
+ }
+
+ set expanded(val) {
+ if (val) {
+ this.setAttribute("expanded", "true");
+ } else {
+ this.removeAttribute("expanded");
+ }
+ }
+
+ get updateInstall() {
+ return this._updateInstall;
+ }
+
+ set updateInstall(install) {
+ this._updateInstall = install;
+ if (this.children.length) {
+ this.update();
+ }
+ }
+
+ get reloading() {
+ return this.hasAttribute("reloading");
+ }
+
+ set reloading(val) {
+ this.toggleAttribute("reloading", val);
+ }
+
+ /**
+ * Set the add-on for this card. The card will be populated based on the
+ * add-on when it is connected to the DOM.
+ *
+ * @param {AddonWrapper} addon The add-on to use.
+ */
+ setAddon(addon) {
+ this.addon = addon;
+ let install = getUpdateInstall(addon);
+ if (
+ install &&
+ (isInState(install, "available") || isInState(install, "postponed"))
+ ) {
+ this.updateInstall = install;
+ } else {
+ this.updateInstall = null;
+ }
+ if (this.children.length) {
+ this.render();
+ }
+ }
+
+ async setAddonPermission(permission, type, action) {
+ let { addon } = this;
+ let origins = [],
+ permissions = [];
+ if (!["add", "remove"].includes(action)) {
+ throw new Error("invalid action for permission change");
+ }
+ if (type == "permission") {
+ if (
+ action == "add" &&
+ !addon.optionalPermissions.permissions.includes(permission)
+ ) {
+ throw new Error("permission missing from manifest");
+ }
+ permissions = [permission];
+ } else if (type == "origin") {
+ if (action === "add") {
+ let { origins } = addon.optionalPermissions;
+ let patternSet = new MatchPatternSet(origins, { ignorePath: true });
+ if (!patternSet.subsumes(new MatchPattern(permission))) {
+ throw new Error("origin missing from manifest");
+ }
+ }
+ origins = [permission];
+
+ // If this is one of the "all sites" permissions
+ if (Extension.isAllSitesPermission(permission)) {
+ // Grant/revoke ALL "all sites" optional permissions from the manifest.
+ origins = addon.optionalPermissions.origins.filter(perm =>
+ Extension.isAllSitesPermission(perm)
+ );
+ }
+ } else {
+ throw new Error("unknown permission type changed");
+ }
+ let policy = WebExtensionPolicy.getByID(addon.id);
+ ExtensionPermissions[action](
+ addon.id,
+ { origins, permissions },
+ policy?.extension
+ );
+ }
+
+ async handleEvent(e) {
+ let { addon } = this;
+ let action = e.target.getAttribute("action");
+
+ if (e.type == "click") {
+ switch (action) {
+ case "toggle-disabled":
+ // Keep the checked state the same until the add-on's state changes.
+ e.target.checked = !addon.userDisabled;
+ if (addon.userDisabled) {
+ if (shouldShowPermissionsPrompt(addon)) {
+ await showPermissionsPrompt(addon);
+ } else {
+ await addon.enable();
+ }
+ } else {
+ await addon.disable();
+ }
+ break;
+ case "always-activate":
+ addon.userDisabled = false;
+ break;
+ case "never-activate":
+ addon.userDisabled = true;
+ break;
+ case "update-check": {
+ let { found } = await checkForUpdate(addon);
+ if (!found) {
+ this.sendEvent("no-update");
+ }
+ break;
+ }
+ case "install-postponed": {
+ const { updateInstall } = this;
+ if (updateInstall && isInState(updateInstall, "postponed")) {
+ updateInstall.continuePostponedInstall();
+ }
+ break;
+ }
+ case "install-update":
+ // Make sure that an update handler is attached to the install object
+ // before starting the update installation (otherwise the user would
+ // not be prompted for the new permissions requested if necessary),
+ // and also make sure that a prompt handler attached from a closed
+ // about:addons tab is replaced by the one attached by the currently
+ // active about:addons tab.
+ attachUpdateHandler(this.updateInstall);
+ this.updateInstall.install().then(
+ () => {
+ detachUpdateHandler(this.updateInstall);
+ // The card will update with the new add-on when it gets
+ // installed.
+ this.sendEvent("update-installed");
+ },
+ () => {
+ detachUpdateHandler(this.updateInstall);
+ // Update our state if the install is cancelled.
+ this.update();
+ this.sendEvent("update-cancelled");
+ }
+ );
+ // Clear the install since it will be removed from the global list of
+ // available updates (whether it succeeds or fails).
+ this.updateInstall = null;
+ break;
+ case "contribute":
+ windowRoot.ownerGlobal.openWebLinkIn(addon.contributionURL, "tab");
+ break;
+ case "preferences":
+ if (getOptionsType(addon) == "tab") {
+ openOptionsInTab(addon.optionsURL);
+ } else if (getOptionsType(addon) == "inline") {
+ gViewController.loadView(`detail/${this.addon.id}/preferences`);
+ }
+ break;
+ case "remove":
+ {
+ this.panel.hide();
+ if (!hasPermission(addon, "uninstall")) {
+ this.sendEvent("remove-disabled");
+ return;
+ }
+ let { BrowserAddonUI } = windowRoot.ownerGlobal;
+ let { remove, report } = await BrowserAddonUI.promptRemoveExtension(
+ addon
+ );
+ if (remove) {
+ await addon.uninstall(true);
+ this.sendEvent("remove");
+ if (report) {
+ openAbuseReport({
+ addonId: addon.id,
+ reportEntryPoint: "uninstall",
+ });
+ }
+ } else {
+ this.sendEvent("remove-cancelled");
+ }
+ }
+ break;
+ case "expand":
+ gViewController.loadView(`detail/${this.addon.id}`);
+ break;
+ case "more-options":
+ // Open panel on click from the keyboard.
+ if (e.inputSource == MouseEvent.MOZ_SOURCE_KEYBOARD) {
+ this.panel.toggle(e);
+ }
+ break;
+ case "report":
+ this.panel.hide();
+ openAbuseReport({ addonId: addon.id, reportEntryPoint: "menu" });
+ break;
+ case "link":
+ if (e.target.getAttribute("url")) {
+ windowRoot.ownerGlobal.openWebLinkIn(
+ e.target.getAttribute("url"),
+ "tab"
+ );
+ }
+ break;
+ default:
+ // Handle a click on the card itself.
+ if (
+ !this.expanded &&
+ (e.target === this.addonNameEl || !e.target.closest("a"))
+ ) {
+ e.preventDefault();
+ gViewController.loadView(`detail/${this.addon.id}`);
+ }
+ break;
+ }
+ } else if (e.type == "toggle" && action == "toggle-permission") {
+ let permission = e.target.getAttribute("permission-key");
+ let type = e.target.getAttribute("permission-type");
+ let fname = e.target.pressed ? "add" : "remove";
+ this.setAddonPermission(permission, type, fname);
+ } else if (e.type == "change") {
+ let { name } = e.target;
+ switch (name) {
+ case "autoupdate": {
+ addon.applyBackgroundUpdates = e.target.value;
+ break;
+ }
+ case "private-browsing": {
+ let policy = WebExtensionPolicy.getByID(addon.id);
+ let extension = policy && policy.extension;
+
+ if (e.target.value == "1") {
+ await ExtensionPermissions.add(
+ addon.id,
+ PRIVATE_BROWSING_PERMS,
+ extension
+ );
+ } else {
+ await ExtensionPermissions.remove(
+ addon.id,
+ PRIVATE_BROWSING_PERMS,
+ extension
+ );
+ }
+ // Reload the extension if it is already enabled. This ensures any
+ // change on the private browsing permission is properly handled.
+ if (addon.isActive) {
+ this.reloading = true;
+ // Reloading will trigger an enable and update the card.
+ addon.reload();
+ } else {
+ // Update the card if the add-on isn't active.
+ this.update();
+ }
+ break;
+ }
+ case "quarantined-domains-user-allowed": {
+ addon.quarantineIgnoredByUser = e.target.value == "1";
+ break;
+ }
+ }
+ } else if (e.type == "mousedown") {
+ // Open panel on mousedown when the mouse is used.
+ if (action == "more-options" && e.button == 0) {
+ this.panel.toggle(e);
+ }
+ } else if (e.type === "shown" || e.type === "hidden") {
+ let panelOpen = e.type === "shown";
+ // The card will be dimmed if it's disabled, but when the panel is open
+ // that should be reverted so the menu items can be easily read.
+ this.toggleAttribute("panelopen", panelOpen);
+ this.optionsButton.setAttribute("aria-expanded", panelOpen);
+ }
+ }
+
+ get panel() {
+ return this.card.querySelector("panel-list");
+ }
+
+ get postponedMessageBar() {
+ return this.card.querySelector(".update-postponed-bar");
+ }
+
+ registerListeners() {
+ this.addEventListener("change", this);
+ this.addEventListener("click", this);
+ this.addEventListener("mousedown", this);
+ this.addEventListener("toggle", this);
+ this.panel.addEventListener("shown", this);
+ this.panel.addEventListener("hidden", this);
+ }
+
+ removeListeners() {
+ this.removeEventListener("change", this);
+ this.removeEventListener("click", this);
+ this.removeEventListener("mousedown", this);
+ this.removeEventListener("toggle", this);
+ this.panel.removeEventListener("shown", this);
+ this.panel.removeEventListener("hidden", this);
+ }
+
+ /**
+ * Update the card's contents based on the previously set add-on. This should
+ * be called if there has been a change to the add-on.
+ */
+ update() {
+ let { addon, card } = this;
+
+ card.setAttribute("active", addon.isActive);
+
+ // Set the icon or theme preview.
+ let iconEl = card.querySelector(".addon-icon");
+ let preview = card.querySelector(".card-heading-image");
+ if (addon.type == "theme") {
+ iconEl.hidden = true;
+ let screenshotUrl = getScreenshotUrlForAddon(addon);
+ if (screenshotUrl) {
+ preview.src = screenshotUrl;
+ }
+ preview.hidden = !screenshotUrl;
+ } else {
+ preview.hidden = true;
+ iconEl.hidden = false;
+ if (addon.type == "plugin") {
+ iconEl.src = PLUGIN_ICON_URL;
+ } else {
+ iconEl.src =
+ AddonManager.getPreferredIconURL(addon, 32, window) ||
+ EXTENSION_ICON_URL;
+ }
+ }
+
+ // Update the name.
+ let name = this.addonNameEl;
+ let setDisabledStyle = !(addon.isActive || addon.type === "theme");
+ if (!setDisabledStyle) {
+ name.textContent = addon.name;
+ name.removeAttribute("data-l10n-id");
+ } else {
+ document.l10n.setAttributes(name, "addon-name-disabled", {
+ name: addon.name,
+ });
+ }
+ name.title = `${addon.name} ${addon.version}`;
+
+ let toggleDisabledButton = card.querySelector('[action="toggle-disabled"]');
+ if (toggleDisabledButton) {
+ let toggleDisabledAction = addon.userDisabled ? "enable" : "disable";
+ toggleDisabledButton.hidden = !hasPermission(addon, toggleDisabledAction);
+ if (addon.type === "theme") {
+ document.l10n.setAttributes(
+ toggleDisabledButton,
+ `${toggleDisabledAction}-addon-button`
+ );
+ } else if (
+ addon.type === "extension" ||
+ addon.type === "sitepermission"
+ ) {
+ toggleDisabledButton.pressed = !addon.userDisabled;
+ }
+ }
+
+ // Set the items in the more options menu.
+ this.options.update(this, addon, this.updateInstall);
+
+ // Badge the more options button if there's an update.
+ let moreOptionsButton = card.querySelector(".more-options-button");
+ moreOptionsButton.classList.toggle(
+ "more-options-button-badged",
+ !!(this.updateInstall && isInState(this.updateInstall, "available"))
+ );
+
+ // Postponed update addon card message bar.
+ const hasPostponedInstall =
+ this.updateInstall && isInState(this.updateInstall, "postponed");
+ this.postponedMessageBar.hidden = !hasPostponedInstall;
+
+ // Hide the more options button if it's empty.
+ moreOptionsButton.hidden = this.options.visibleItems.length === 0;
+
+ // Ensure all badges are initially hidden.
+ for (let node of card.querySelectorAll(".addon-badge")) {
+ node.hidden = true;
+ }
+
+ // Set the private browsing badge visibility.
+ // TODO: We don't show the badge for SitePermsAddon for now, but this should
+ // be handled in Bug 1799090.
+ if (addon.incognito != "not_allowed" && addon.type == "extension") {
+ // Keep update synchronous, the badge can appear later.
+ isAllowedInPrivateBrowsing(addon).then(isAllowed => {
+ card.querySelector(".addon-badge-private-browsing-allowed").hidden =
+ !isAllowed;
+ });
+ }
+
+ // Show the recommended badges if needed.
+ // Plugins don't have recommendationStates, so ensure a default.
+ let states = addon.recommendationStates || [];
+ for (let badgeName of states) {
+ let badge = card.querySelector(`.addon-badge-${badgeName}`);
+ if (badge) {
+ badge.hidden = false;
+ }
+ }
+
+ // Update description.
+ card.querySelector(".addon-description").textContent = addon.description;
+
+ this.updateMessage();
+
+ // Update the details if they're shown.
+ if (this.details) {
+ this.details.update();
+ }
+
+ this.sendEvent("update");
+ }
+
+ async updateMessage() {
+ const messageBar = this.card.querySelector(".addon-card-message");
+
+ const {
+ linkUrl,
+ linkId,
+ messageId,
+ messageArgs,
+ type = "",
+ } = await getAddonMessageInfo(this.addon);
+
+ if (messageId) {
+ document.l10n.pauseObserving();
+ document.l10n.setAttributes(messageBar, messageId, messageArgs);
+ messageBar.setAttribute("data-l10n-attrs", "message");
+
+ const link = messageBar.querySelector("button");
+ if (linkUrl) {
+ document.l10n.setAttributes(link, linkId);
+ link.setAttribute("url", linkUrl);
+ link.setAttribute("slot", "actions");
+ link.hidden = false;
+ } else {
+ link.removeAttribute("slot");
+ link.hidden = true;
+ }
+
+ document.l10n.resumeObserving();
+ await document.l10n.translateFragment(messageBar);
+ messageBar.setAttribute("type", type);
+ messageBar.hidden = false;
+ } else {
+ messageBar.hidden = true;
+ }
+ }
+
+ showPrefs() {
+ this.details.showPrefs();
+ }
+
+ expand() {
+ if (!this.children.length) {
+ this.expanded = true;
+ } else {
+ throw new Error("expand() is only supported before render()");
+ }
+ }
+
+ render() {
+ this.textContent = "";
+
+ let { addon } = this;
+ if (!addon) {
+ throw new Error("addon-card must be initialized with setAddon()");
+ }
+
+ this.setAttribute("addon-id", addon.id);
+
+ this.card = importTemplate("card").firstElementChild;
+ let headingId = ExtensionCommon.makeWidgetId(`${addon.id}-heading`);
+ this.card.setAttribute("aria-labelledby", headingId);
+
+ // Remove the toggle-disabled button(s) based on type.
+ if (addon.type != "theme") {
+ this.card.querySelector(".theme-enable-button").remove();
+ }
+ if (addon.type != "extension" && addon.type != "sitepermission") {
+ this.card.querySelector(".extension-enable-button").remove();
+ }
+
+ let nameContainer = this.card.querySelector(".addon-name-container");
+ let headingLevel = this.expanded ? "h1" : "h3";
+ let nameHeading = document.createElement(headingLevel);
+ nameHeading.classList.add("addon-name");
+ nameHeading.id = headingId;
+ if (!this.expanded) {
+ let name = document.createElement("a");
+ name.classList.add("addon-name-link");
+ name.href = `addons://detail/${addon.id}`;
+ nameHeading.appendChild(name);
+ this.addonNameEl = name;
+ } else {
+ this.addonNameEl = nameHeading;
+ }
+ nameContainer.prepend(nameHeading);
+
+ let panelType = addon.type == "plugin" ? "plugin-options" : "addon-options";
+ this.options = document.createElement(panelType);
+ this.options.render();
+ this.card.appendChild(this.options);
+ this.optionsButton = this.card.querySelector(".more-options-button");
+
+ // Set the contents.
+ this.update();
+
+ let doneRenderPromise = Promise.resolve();
+ if (this.expanded) {
+ if (!this.details) {
+ this.details = document.createElement("addon-details");
+ }
+ this.details.setAddon(this.addon);
+ doneRenderPromise = this.details.render();
+
+ // If we're re-rendering we still need to append the details since the
+ // entire card was emptied at the beginning of the render.
+ this.card.appendChild(this.details);
+ }
+
+ this.appendChild(this.card);
+
+ if (this.expanded) {
+ requestAnimationFrame(() => this.optionsButton.focus());
+ }
+
+ // Return the promise of details rendering to wait on in DetailView.
+ return doneRenderPromise;
+ }
+
+ sendEvent(name, detail) {
+ this.dispatchEvent(new CustomEvent(name, { detail }));
+ }
+
+ /**
+ * AddonManager listener events.
+ */
+
+ onNewInstall(install) {
+ this.updateInstall = install;
+ this.sendEvent("update-found");
+ }
+
+ onInstallEnded(install) {
+ this.setAddon(install.addon);
+ }
+
+ onInstallPostponed(install) {
+ this.updateInstall = install;
+ this.sendEvent("update-postponed");
+ }
+
+ onDisabled(addon) {
+ if (!this.reloading) {
+ this.update();
+ }
+ }
+
+ onEnabled(addon) {
+ this.reloading = false;
+ this.update();
+ }
+
+ onInstalled(addon) {
+ // When a temporary addon is reloaded, onInstalled is triggered instead of
+ // onEnabled.
+ this.reloading = false;
+ this.update();
+ }
+
+ onUninstalling() {
+ // Dispatch a remove event, the DetailView is listening for this to get us
+ // back to the list view when the current add-on is removed.
+ this.sendEvent("remove");
+ }
+
+ onUpdateModeChanged() {
+ this.update();
+ }
+
+ onPropertyChanged(addon, changed) {
+ if (this.details && changed.includes("applyBackgroundUpdates")) {
+ this.details.update();
+ } else if (addon.type == "plugin" && changed.includes("userDisabled")) {
+ this.update();
+ }
+
+ if (this.details && changed.includes("quarantineIgnoredByUser")) {
+ this.details.updateQuarantinedDomainsUserAllowed();
+ }
+ }
+
+ /* Extension Permission change listener */
+ async onChangePermissions(data) {
+ let perms = data.added || data.removed;
+ let hasAllSites = false;
+ for (let permission of perms.permissions.concat(perms.origins)) {
+ if (Extension.isAllSitesPermission(permission)) {
+ hasAllSites = true;
+ continue;
+ }
+ let target = document.querySelector(`[permission-key="${permission}"]`);
+ let checked = !data.removed;
+ if (target) {
+ target.closest("li").classList.toggle("permission-checked", checked);
+ target.pressed = checked;
+ }
+ }
+ if (hasAllSites) {
+ // special-case for finding the all-sites target by attribute.
+ let target = document.querySelector("[permission-all-sites]");
+ let checked = await AddonCard.optionalAllSitesGranted(this.addon.id);
+ target.closest("li").classList.toggle("permission-checked", checked);
+ target.pressed = checked;
+ }
+ }
+
+ // Only covers optional_permissions in MV2 and all host permissions in MV3.
+ static async optionalAllSitesGranted(addonId) {
+ let granted = await ExtensionPermissions.get(addonId);
+ return granted.origins.some(perm => Extension.isAllSitesPermission(perm));
+ }
+}
+customElements.define("addon-card", AddonCard);
+
+/**
+ * A child element of `<recommended-addon-list>`. It should be initialized
+ * by calling `setDiscoAddon()` first. Call `setAddon(addon)` if it has been
+ * installed, and call `setAddon(null)` upon uninstall.
+ *
+ * let discoAddon = new DiscoAddonWrapper({ ... });
+ * let card = document.createElement("recommended-addon-card");
+ * card.setDiscoAddon(discoAddon);
+ * document.body.appendChild(card);
+ *
+ * AddonManager.getAddonsByID(discoAddon.id)
+ * .then(addon => card.setAddon(addon));
+ */
+class RecommendedAddonCard extends HTMLElement {
+ /**
+ * @param {DiscoAddonWrapper} addon
+ * The details of the add-on that should be rendered in the card.
+ */
+ setDiscoAddon(addon) {
+ this.addonId = addon.id;
+
+ // Save the information so we can install.
+ this.discoAddon = addon;
+
+ let card = importTemplate("card").firstElementChild;
+ let heading = card.querySelector(".addon-name-container");
+ heading.textContent = "";
+ heading.append(importTemplate("addon-name-container-in-disco-card"));
+
+ this.setCardContent(card, addon);
+ if (addon.type != "theme") {
+ card
+ .querySelector(".addon-description")
+ .append(importTemplate("addon-description-in-disco-card"));
+ this.setCardDescription(card, addon);
+ }
+ this.registerButtons(card, addon);
+
+ this.textContent = "";
+ this.append(card);
+
+ // We initially assume that the add-on is not installed.
+ this.setAddon(null);
+ }
+
+ /**
+ * Fills in all static parts of the card.
+ *
+ * @param {HTMLElement} card
+ * The primary content of this card.
+ * @param {DiscoAddonWrapper} addon
+ */
+ setCardContent(card, addon) {
+ // Set the icon.
+ if (addon.type == "theme") {
+ card.querySelector(".addon-icon").hidden = true;
+ } else {
+ card.querySelector(".addon-icon").src = AddonManager.getPreferredIconURL(
+ addon,
+ 32,
+ window
+ );
+ }
+
+ // Set the theme preview.
+ let preview = card.querySelector(".card-heading-image");
+ if (addon.type == "theme") {
+ let screenshotUrl = getScreenshotUrlForAddon(addon);
+ if (screenshotUrl) {
+ preview.src = screenshotUrl;
+ preview.hidden = false;
+ }
+ } else {
+ preview.hidden = true;
+ }
+
+ // Set the name.
+ card.querySelector(".disco-addon-name").textContent = addon.name;
+
+ // Set the author name and link to AMO.
+ if (addon.creator) {
+ let authorInfo = card.querySelector(".disco-addon-author");
+ document.l10n.setAttributes(authorInfo, "created-by-author", {
+ author: addon.creator.name,
+ });
+ // This is intentionally a link to the add-on listing instead of the
+ // author page, because the add-on listing provides more relevant info.
+ authorInfo.querySelector("a").href = formatUTMParams(
+ "discopane-entry-link",
+ addon.amoListingUrl
+ );
+ authorInfo.hidden = false;
+ }
+ }
+
+ setCardDescription(card, addon) {
+ // Set the description. Note that this is the editorial description, not
+ // the add-on's original description that would normally appear on a card.
+ card.querySelector(".disco-description-main").textContent =
+ addon.editorialDescription;
+
+ let hasStats = false;
+ if (addon.averageRating) {
+ hasStats = true;
+ card.querySelector("moz-five-star").rating = addon.averageRating;
+ } else {
+ card.querySelector("moz-five-star").hidden = true;
+ }
+
+ if (addon.dailyUsers) {
+ hasStats = true;
+ let userCountElem = card.querySelector(".disco-user-count");
+ document.l10n.setAttributes(userCountElem, "user-count", {
+ dailyUsers: addon.dailyUsers,
+ });
+ }
+
+ card.querySelector(".disco-description-statistics").hidden = !hasStats;
+ }
+
+ registerButtons(card, addon) {
+ let installButton = card.querySelector("[action='install-addon']");
+ if (addon.type == "theme") {
+ document.l10n.setAttributes(installButton, "install-theme-button");
+ } else {
+ document.l10n.setAttributes(installButton, "install-extension-button");
+ }
+
+ this.addEventListener("click", this);
+ }
+
+ handleEvent(event) {
+ let action = event.target.getAttribute("action");
+ switch (action) {
+ case "install-addon":
+ this.installDiscoAddon();
+ break;
+ case "manage-addon":
+ gViewController.loadView(`detail/${this.addonId}`);
+ break;
+ }
+ }
+
+ async installDiscoAddon() {
+ let addon = this.discoAddon;
+ let url = addon.sourceURI.spec;
+ let install = await AddonManager.getInstallForURL(url, {
+ name: addon.name,
+ telemetryInfo: {
+ source: "disco",
+ taarRecommended: addon.taarRecommended,
+ },
+ });
+ // We are hosted in a <browser> in about:addons, but we can just use the
+ // main tab's browser since all of it is using the system principal.
+ let browser = window.docShell.chromeEventHandler;
+ AddonManager.installAddonFromWebpage(
+ "application/x-xpinstall",
+ browser,
+ Services.scriptSecurityManager.getSystemPrincipal(),
+ install
+ );
+ }
+
+ /**
+ * @param {AddonWrapper|null} addon
+ * The add-on that has been installed; null if it has been removed.
+ */
+ setAddon(addon) {
+ let card = this.firstElementChild;
+ card.querySelector("[action='install-addon']").hidden = !!addon;
+ card.querySelector("[action='manage-addon']").hidden = !addon;
+
+ this.dispatchEvent(new CustomEvent("disco-card-updated")); // For testing.
+ }
+}
+customElements.define("recommended-addon-card", RecommendedAddonCard);
+
+/**
+ * A list view for add-ons of a certain type. It should be initialized with the
+ * type of add-on to render and have section data set before being connected to
+ * the document.
+ *
+ * let list = document.createElement("addon-list");
+ * list.type = "plugin";
+ * list.setSections([{
+ * headingId: "plugin-section-heading",
+ * filterFn: addon => !addon.isSystem,
+ * }]);
+ * document.body.appendChild(list);
+ */
+class AddonList extends HTMLElement {
+ constructor() {
+ super();
+ this.sections = [];
+ this.pendingUninstallAddons = new Set();
+ this._addonsToUpdate = new Set();
+ this._userFocusListenersAdded = false;
+ }
+
+ async connectedCallback() {
+ // Register the listener and get the add-ons, these operations should
+ // happpen as close to each other as possible.
+ this.registerListener();
+ // Don't render again if we were rendered prior to being inserted.
+ if (!this.children.length) {
+ // Render the initial view.
+ this.render();
+ }
+ }
+
+ disconnectedCallback() {
+ // Remove content and stop listening until this is connected again.
+ this.textContent = "";
+ this.removeListener();
+
+ // Process any pending uninstall related to this list.
+ for (const addon of this.pendingUninstallAddons) {
+ if (isPending(addon, "uninstall")) {
+ addon.uninstall();
+ }
+ }
+ this.pendingUninstallAddons.clear();
+ }
+
+ /**
+ * Configure the sections in the list.
+ *
+ * @param {object[]} sections
+ * The options for the section. Each entry in the array should have:
+ * headingId: The fluent id for the section's heading.
+ * filterFn: A function that determines if an add-on belongs in
+ * the section.
+ */
+ setSections(sections) {
+ this.sections = sections.map(section => Object.assign({}, section));
+ }
+
+ /**
+ * Set the add-on type for this list. This will be used to filter the add-ons
+ * that are displayed.
+ *
+ * @param {string} val The type to filter on.
+ */
+ set type(val) {
+ this.setAttribute("type", val);
+ }
+
+ get type() {
+ return this.getAttribute("type");
+ }
+
+ getSection(index) {
+ return this.sections[index].node;
+ }
+
+ getCards(section) {
+ return section.querySelectorAll("addon-card");
+ }
+
+ getCard(addon) {
+ return this.querySelector(`addon-card[addon-id="${addon.id}"]`);
+ }
+
+ getPendingUninstallBar(addon) {
+ return this.querySelector(`moz-message-bar[addon-id="${addon.id}"]`);
+ }
+
+ sortByFn(aAddon, bAddon) {
+ return aAddon.name.localeCompare(bAddon.name);
+ }
+
+ async getAddons() {
+ if (!this.type) {
+ throw new Error(`type must be set to find add-ons`);
+ }
+
+ // Find everything matching our type, null will find all types.
+ let type = this.type == "all" ? null : [this.type];
+ let addons = await AddonManager.getAddonsByTypes(type);
+
+ if (type == "theme") {
+ await BuiltInThemes.ensureBuiltInThemes();
+ }
+
+ // Put the add-ons into the sections, an add-on goes in the first section
+ // that it matches the filterFn for. It might not go in any section.
+ let sectionedAddons = this.sections.map(() => []);
+ for (let addon of addons) {
+ let index = this.sections.findIndex(({ filterFn }) => filterFn(addon));
+ if (index != -1) {
+ sectionedAddons[index].push(addon);
+ } else if (isPending(addon, "uninstall")) {
+ // A second tab may be opened on "about:addons" (or Firefox may
+ // have crashed) while there are still "pending uninstall" add-ons.
+ // Ensure to list them in the pendingUninstall message-bar-stack
+ // when the AddonList is initially rendered.
+ this.pendingUninstallAddons.add(addon);
+ }
+ }
+
+ // Sort the add-ons in each section.
+ for (let [index, section] of sectionedAddons.entries()) {
+ let sortByFn = this.sections[index].sortByFn || this.sortByFn;
+ section.sort(sortByFn);
+ }
+
+ return sectionedAddons;
+ }
+
+ createPendingUninstallStack() {
+ const stack = document.createElement("message-bar-stack");
+ stack.setAttribute("class", "pending-uninstall");
+ stack.setAttribute("reverse", "");
+ return stack;
+ }
+
+ addPendingUninstallBar(addon) {
+ const stack = this.pendingUninstallStack;
+ const mb = document.createElement("moz-message-bar");
+ mb.setAttribute("addon-id", addon.id);
+ mb.setAttribute("type", "info");
+
+ const undo = document.createElement("button");
+ undo.setAttribute("action", "undo");
+ undo.addEventListener("click", () => {
+ addon.cancelUninstall();
+ });
+ undo.setAttribute("slot", "actions");
+
+ document.l10n.setAttributes(mb, "pending-uninstall-description2", {
+ addon: addon.name,
+ });
+ mb.setAttribute("data-l10n-attrs", "message");
+ document.l10n.setAttributes(undo, "pending-uninstall-undo-button");
+
+ mb.appendChild(undo);
+ stack.append(mb);
+ }
+
+ removePendingUninstallBar(addon) {
+ const messagebar = this.getPendingUninstallBar(addon);
+ if (messagebar) {
+ messagebar.remove();
+ }
+ }
+
+ createSectionHeading(headingIndex) {
+ let { headingId, subheadingId } = this.sections[headingIndex];
+ let frag = document.createDocumentFragment();
+ let heading = document.createElement("h2");
+ heading.classList.add("list-section-heading");
+ document.l10n.setAttributes(heading, headingId);
+ frag.append(heading);
+
+ if (subheadingId) {
+ heading.className = "header-name";
+ let subheading = document.createElement("h3");
+ subheading.classList.add("list-section-subheading");
+ document.l10n.setAttributes(subheading, subheadingId);
+ frag.append(subheading);
+ }
+
+ return frag;
+ }
+
+ createEmptyListMessage() {
+ let emptyMessage = "list-empty-get-extensions-message";
+ let linkPref = "extensions.getAddons.link.url";
+
+ if (this.sections && this.sections.length) {
+ if (this.sections[0].headingId == "locale-enabled-heading") {
+ emptyMessage = "list-empty-get-language-packs-message";
+ linkPref = "browser.dictionaries.download.url";
+ } else if (this.sections[0].headingId == "dictionary-enabled-heading") {
+ emptyMessage = "list-empty-get-dictionaries-message";
+ linkPref = "browser.dictionaries.download.url";
+ }
+ }
+
+ let messageContainer = document.createElement("p");
+ messageContainer.id = "empty-addons-message";
+ let a = document.createElement("a");
+ a.href = Services.urlFormatter.formatURLPref(linkPref);
+ a.setAttribute("target", "_blank");
+ a.setAttribute("data-l10n-name", "get-extensions");
+ document.l10n.setAttributes(messageContainer, emptyMessage, {
+ domain: a.hostname,
+ });
+ messageContainer.appendChild(a);
+ return messageContainer;
+ }
+
+ updateSectionIfEmpty(section) {
+ // The header is added before any add-on cards, so if there's only one
+ // child then it's the header. In that case we should empty out the section.
+ if (section.children.length == 1) {
+ section.textContent = "";
+ }
+ }
+
+ insertCardInto(card, sectionIndex) {
+ let section = this.getSection(sectionIndex);
+ let sectionCards = this.getCards(section);
+
+ // If this is the first card in the section, create the heading.
+ if (!sectionCards.length) {
+ section.appendChild(this.createSectionHeading(sectionIndex));
+ }
+
+ // Find where to insert the card.
+ let insertBefore = Array.from(sectionCards).find(
+ otherCard => this.sortByFn(card.addon, otherCard.addon) < 0
+ );
+ // This will append if insertBefore is null.
+ section.insertBefore(card, insertBefore || null);
+ }
+
+ addAddon(addon) {
+ // Only insert add-ons of the right type.
+ if (addon.type != this.type && this.type != "all") {
+ this.sendEvent("skip-add", "type-mismatch");
+ return;
+ }
+
+ let insertSection = this._addonSectionIndex(addon);
+
+ // Don't add the add-on if it doesn't go in a section.
+ if (insertSection == -1) {
+ return;
+ }
+
+ // Create and insert the card.
+ let card = document.createElement("addon-card");
+ card.setAddon(addon);
+ this.insertCardInto(card, insertSection);
+ this.sendEvent("add", { id: addon.id });
+ }
+
+ sendEvent(name, detail) {
+ this.dispatchEvent(new CustomEvent(name, { detail }));
+ }
+
+ removeAddon(addon) {
+ let card = this.getCard(addon);
+ if (card) {
+ let section = card.parentNode;
+ card.remove();
+ this.updateSectionIfEmpty(section);
+ this.sendEvent("remove", { id: addon.id });
+ }
+ }
+
+ updateAddon(addon) {
+ if (!this.getCard(addon)) {
+ // Try to add the add-on right away.
+ this.addAddon(addon);
+ } else if (this._addonSectionIndex(addon) == -1) {
+ // Try to remove the add-on right away.
+ this._updateAddon(addon);
+ } else if (this.isUserFocused) {
+ // Queue up a change for when the focus is cleared.
+ this.updateLater(addon);
+ } else {
+ // Not currently focused, make the change now.
+ this.withCardAnimation(() => this._updateAddon(addon));
+ }
+ }
+
+ updateLater(addon) {
+ this._addonsToUpdate.add(addon);
+ this._addUserFocusListeners();
+ }
+
+ _addUserFocusListeners() {
+ if (this._userFocusListenersAdded) {
+ return;
+ }
+
+ this._userFocusListenersAdded = true;
+ this.addEventListener("mouseleave", this);
+ this.addEventListener("hidden", this, true);
+ this.addEventListener("focusout", this);
+ }
+
+ _removeUserFocusListeners() {
+ if (!this._userFocusListenersAdded) {
+ return;
+ }
+
+ this.removeEventListener("mouseleave", this);
+ this.removeEventListener("hidden", this, true);
+ this.removeEventListener("focusout", this);
+ this._userFocusListenersAdded = false;
+ }
+
+ get hasMenuOpen() {
+ return !!this.querySelector("panel-list[open]");
+ }
+
+ get isUserFocused() {
+ return this.matches(":hover, :focus-within") || this.hasMenuOpen;
+ }
+
+ update() {
+ if (this._addonsToUpdate.size) {
+ this.withCardAnimation(() => {
+ for (let addon of this._addonsToUpdate) {
+ this._updateAddon(addon);
+ }
+ this._addonsToUpdate = new Set();
+ });
+ }
+ }
+
+ _getChildCoords() {
+ let results = new Map();
+ for (let child of this.querySelectorAll("addon-card")) {
+ results.set(child, child.getBoundingClientRect());
+ }
+ return results;
+ }
+
+ withCardAnimation(changeFn) {
+ if (shouldSkipAnimations()) {
+ changeFn();
+ return;
+ }
+
+ let origChildCoords = this._getChildCoords();
+
+ changeFn();
+
+ let newChildCoords = this._getChildCoords();
+ let cards = this.querySelectorAll("addon-card");
+ let transitionCards = [];
+ for (let card of cards) {
+ let orig = origChildCoords.get(card);
+ let moved = newChildCoords.get(card);
+ let changeY = moved.y - (orig || moved).y;
+ let cardEl = card.firstElementChild;
+
+ if (changeY != 0) {
+ cardEl.style.transform = `translateY(${changeY * -1}px)`;
+ transitionCards.push(card);
+ }
+ }
+ requestAnimationFrame(() => {
+ for (let card of transitionCards) {
+ card.firstElementChild.style.transition = "transform 125ms";
+ }
+
+ requestAnimationFrame(() => {
+ for (let card of transitionCards) {
+ let cardEl = card.firstElementChild;
+ cardEl.style.transform = "";
+ cardEl.addEventListener("transitionend", function handler(e) {
+ if (e.target == cardEl && e.propertyName == "transform") {
+ cardEl.style.transition = "";
+ cardEl.removeEventListener("transitionend", handler);
+ }
+ });
+ }
+ });
+ });
+ }
+
+ _addonSectionIndex(addon) {
+ return this.sections.findIndex(s => s.filterFn(addon));
+ }
+
+ _updateAddon(addon) {
+ let card = this.getCard(addon);
+ if (card) {
+ let sectionIndex = this._addonSectionIndex(addon);
+ if (sectionIndex != -1) {
+ // Move the card, if needed. This will allow an animation between
+ // page sections and provides clearer events for testing.
+ if (card.parentNode.getAttribute("section") != sectionIndex) {
+ let { activeElement } = document;
+ let refocus = card.contains(activeElement);
+ let oldSection = card.parentNode;
+ this.insertCardInto(card, sectionIndex);
+ this.updateSectionIfEmpty(oldSection);
+ if (refocus) {
+ activeElement.focus();
+ }
+ this.sendEvent("move", { id: addon.id });
+ }
+ } else {
+ this.removeAddon(addon);
+ }
+ }
+ }
+
+ renderSection(addons, index) {
+ const { sectionClass } = this.sections[index];
+
+ let section = document.createElement("section");
+ section.setAttribute("section", index);
+ if (sectionClass) {
+ section.setAttribute("class", sectionClass);
+ }
+
+ // Render the heading and add-ons if there are any.
+ if (addons.length) {
+ section.appendChild(this.createSectionHeading(index));
+ }
+
+ for (let addon of addons) {
+ let card = document.createElement("addon-card");
+ card.setAddon(addon);
+ card.render();
+ section.appendChild(card);
+ }
+
+ return section;
+ }
+
+ async render() {
+ this.textContent = "";
+
+ let sectionedAddons = await this.getAddons();
+
+ let frag = document.createDocumentFragment();
+
+ // Render the pending uninstall message-bar-stack.
+ this.pendingUninstallStack = this.createPendingUninstallStack();
+ for (let addon of this.pendingUninstallAddons) {
+ this.addPendingUninstallBar(addon);
+ }
+ frag.appendChild(this.pendingUninstallStack);
+
+ // Render the sections.
+ for (let i = 0; i < sectionedAddons.length; i++) {
+ this.sections[i].node = this.renderSection(sectionedAddons[i], i);
+ frag.appendChild(this.sections[i].node);
+ }
+
+ // Render the placeholder that is shown when all sections are empty.
+ // This call is after rendering the sections, because its visibility
+ // is controlled through the general sibling combinator relative to
+ // the sections (section ~).
+ let message = this.createEmptyListMessage();
+ frag.appendChild(message);
+
+ // Make sure fluent has set all the strings before we render. This will
+ // avoid the height changing as strings go from 0 height to having text.
+ await document.l10n.translateFragment(frag);
+ this.appendChild(frag);
+ }
+
+ registerListener() {
+ AddonManagerListenerHandler.addListener(this);
+ }
+
+ removeListener() {
+ AddonManagerListenerHandler.removeListener(this);
+ }
+
+ handleEvent(e) {
+ if (!this.isUserFocused || (e.type == "mouseleave" && !this.hasMenuOpen)) {
+ this._removeUserFocusListeners();
+ this.update();
+ }
+ }
+
+ /**
+ * AddonManager listener events.
+ */
+
+ onOperationCancelled(addon) {
+ if (
+ this.pendingUninstallAddons.has(addon) &&
+ !isPending(addon, "uninstall")
+ ) {
+ this.pendingUninstallAddons.delete(addon);
+ this.removePendingUninstallBar(addon);
+ }
+ this.updateAddon(addon);
+ }
+
+ onEnabled(addon) {
+ this.updateAddon(addon);
+ }
+
+ onDisabled(addon) {
+ this.updateAddon(addon);
+ }
+
+ onUninstalling(addon) {
+ if (
+ isPending(addon, "uninstall") &&
+ (this.type === "all" || addon.type === this.type)
+ ) {
+ this.pendingUninstallAddons.add(addon);
+ this.addPendingUninstallBar(addon);
+ this.updateAddon(addon);
+ }
+ }
+
+ onInstalled(addon) {
+ if (this.querySelector(`addon-card[addon-id="${addon.id}"]`)) {
+ return;
+ }
+ this.addAddon(addon);
+ }
+
+ onUninstalled(addon) {
+ this.pendingUninstallAddons.delete(addon);
+ this.removePendingUninstallBar(addon);
+ this.removeAddon(addon);
+ }
+}
+customElements.define("addon-list", AddonList);
+
+class RecommendedAddonList extends HTMLElement {
+ connectedCallback() {
+ if (this.isConnected) {
+ this.loadCardsIfNeeded();
+ this.updateCardsWithAddonManager();
+ }
+ AddonManagerListenerHandler.addListener(this);
+ }
+
+ disconnectedCallback() {
+ AddonManagerListenerHandler.removeListener(this);
+ }
+
+ get type() {
+ return this.getAttribute("type");
+ }
+
+ /**
+ * Set the add-on type for this list. This will be used to filter the add-ons
+ * that are displayed.
+ *
+ * Must be set prior to the first render.
+ *
+ * @param {string} val The type to filter on.
+ */
+ set type(val) {
+ this.setAttribute("type", val);
+ }
+
+ get hideInstalled() {
+ return this.hasAttribute("hide-installed");
+ }
+
+ /**
+ * Set whether installed add-ons should be hidden from the list. If false,
+ * installed add-ons will be shown with a "Manage" button, otherwise they
+ * will be hidden.
+ *
+ * Must be set prior to the first render.
+ *
+ * @param {boolean} val Whether to show installed add-ons.
+ */
+ set hideInstalled(val) {
+ this.toggleAttribute("hide-installed", val);
+ }
+
+ getCardById(addonId) {
+ for (let card of this.children) {
+ if (card.addonId === addonId) {
+ return card;
+ }
+ }
+ return null;
+ }
+
+ setAddonForCard(card, addon) {
+ card.setAddon(addon);
+
+ let wasHidden = card.hidden;
+ card.hidden = this.hideInstalled && addon;
+
+ if (wasHidden != card.hidden) {
+ let eventName = card.hidden ? "card-hidden" : "card-shown";
+ this.dispatchEvent(new CustomEvent(eventName, { detail: { card } }));
+ }
+ }
+
+ /**
+ * Whether the client ID should be preferred. This is disabled for themes
+ * since they don't use the telemetry data and don't show the TAAR notice.
+ */
+ get preferClientId() {
+ return !this.type || this.type == "extension";
+ }
+
+ async updateCardsWithAddonManager() {
+ let cards = Array.from(this.children);
+ let addonIds = cards.map(card => card.addonId);
+ let addons = await AddonManager.getAddonsByIDs(addonIds);
+ for (let [i, card] of cards.entries()) {
+ let addon = addons[i];
+ this.setAddonForCard(card, addon);
+ if (addon) {
+ // Already installed, move card to end.
+ this.append(card);
+ }
+ }
+ }
+
+ async loadCardsIfNeeded() {
+ // Use promise as guard. Also used by tests to detect when load completes.
+ if (!this.cardsReady) {
+ this.cardsReady = this._loadCards();
+ }
+ return this.cardsReady;
+ }
+
+ async _loadCards() {
+ let recommendedAddons;
+ try {
+ recommendedAddons = await DiscoveryAPI.getResults(this.preferClientId);
+ } catch (e) {
+ return;
+ }
+
+ let frag = document.createDocumentFragment();
+ for (let addon of recommendedAddons) {
+ if (this.type && addon.type != this.type) {
+ continue;
+ }
+ let card = document.createElement("recommended-addon-card");
+ card.setDiscoAddon(addon);
+ frag.append(card);
+ }
+ this.append(frag);
+ await this.updateCardsWithAddonManager();
+ }
+
+ /**
+ * AddonManager listener events.
+ */
+
+ onInstalled(addon) {
+ let card = this.getCardById(addon.id);
+ if (card) {
+ this.setAddonForCard(card, addon);
+ }
+ }
+
+ onUninstalled(addon) {
+ let card = this.getCardById(addon.id);
+ if (card) {
+ this.setAddonForCard(card, null);
+ }
+ }
+}
+customElements.define("recommended-addon-list", RecommendedAddonList);
+
+class TaarMessageBar extends HTMLElement {
+ connectedCallback() {
+ this.hidden =
+ Services.prefs.getBoolPref(PREF_RECOMMENDATION_HIDE_NOTICE, false) ||
+ !DiscoveryAPI.clientIdDiscoveryEnabled;
+ if (this.childElementCount == 0 && !this.hidden) {
+ this.appendChild(importTemplate("taar-notice"));
+ this.addEventListener("click", this);
+ this.messageBar = this.querySelector("moz-message-bar");
+ this.messageBar.addEventListener("message-bar:user-dismissed", this);
+ }
+ }
+
+ handleEvent(e) {
+ if (e.type == "message-bar:user-dismissed") {
+ Services.prefs.setBoolPref(PREF_RECOMMENDATION_HIDE_NOTICE, true);
+ }
+ }
+}
+customElements.define("taar-notice", TaarMessageBar);
+
+class RecommendedFooter extends HTMLElement {
+ connectedCallback() {
+ if (this.childElementCount == 0) {
+ this.appendChild(importTemplate("recommended-footer"));
+ this.querySelector(".privacy-policy-link").href =
+ Services.prefs.getStringPref(PREF_PRIVACY_POLICY_URL);
+ this.addEventListener("click", this);
+ }
+ }
+
+ handleEvent(event) {
+ let action = event.target.getAttribute("action");
+ switch (action) {
+ case "open-amo":
+ openAmoInTab(this);
+ break;
+ }
+ }
+}
+customElements.define("recommended-footer", RecommendedFooter, {
+ extends: "footer",
+});
+
+class RecommendedThemesFooter extends HTMLElement {
+ connectedCallback() {
+ if (this.childElementCount == 0) {
+ this.appendChild(importTemplate("recommended-themes-footer"));
+ let themeRecommendationRow = this.querySelector(".theme-recommendation");
+ let themeRecommendationUrl = Services.prefs.getStringPref(
+ PREF_THEME_RECOMMENDATION_URL
+ );
+ if (themeRecommendationUrl) {
+ themeRecommendationRow.querySelector("a").href = themeRecommendationUrl;
+ }
+ themeRecommendationRow.hidden = !themeRecommendationUrl;
+ this.addEventListener("click", this);
+ }
+ }
+
+ handleEvent(event) {
+ let action = event.target.getAttribute("action");
+ switch (action) {
+ case "open-amo":
+ openAmoInTab(this, "themes");
+ break;
+ }
+ }
+}
+customElements.define("recommended-themes-footer", RecommendedThemesFooter, {
+ extends: "footer",
+});
+
+/**
+ * This element will handle showing recommendations with a
+ * <recommended-addon-list> and a <footer>. The footer will be hidden until
+ * the <recommended-addon-list> is done making its request so the footer
+ * doesn't move around.
+ *
+ * Subclass this element to use it and define a `template` property to pull
+ * the template from. Expected template:
+ *
+ * <h1>My extra content can go here.</h1>
+ * <p>It can be anything but a footer or recommended-addon-list.</p>
+ * <recommended-addon-list></recommended-addon-list>
+ * <footer>My custom footer</footer>
+ */
+class RecommendedSection extends HTMLElement {
+ connectedCallback() {
+ if (this.childElementCount == 0) {
+ this.render();
+ }
+ }
+
+ get list() {
+ return this.querySelector("recommended-addon-list");
+ }
+
+ get footer() {
+ return this.querySelector("footer");
+ }
+
+ render() {
+ this.appendChild(importTemplate(this.template));
+
+ // Hide footer until the cards are loaded, to prevent the content from
+ // suddenly shifting when the user attempts to interact with it.
+ let { footer } = this;
+ footer.hidden = true;
+ this.list.loadCardsIfNeeded().finally(() => {
+ footer.hidden = false;
+ });
+ }
+}
+
+class RecommendedExtensionsSection extends RecommendedSection {
+ get template() {
+ return "recommended-extensions-section";
+ }
+}
+customElements.define(
+ "recommended-extensions-section",
+ RecommendedExtensionsSection
+);
+
+class RecommendedThemesSection extends RecommendedSection {
+ get template() {
+ return "recommended-themes-section";
+ }
+}
+customElements.define("recommended-themes-section", RecommendedThemesSection);
+
+class DiscoveryPane extends RecommendedSection {
+ get template() {
+ return "discopane";
+ }
+}
+customElements.define("discovery-pane", DiscoveryPane);
+
+// Define views
+gViewController.defineView("list", async type => {
+ if (!AddonManager.hasAddonType(type)) {
+ return null;
+ }
+
+ let frag = document.createDocumentFragment();
+ let list = document.createElement("addon-list");
+ list.type = type;
+
+ let sections = [
+ {
+ headingId: type + "-enabled-heading",
+ sectionClass: `${type}-enabled-section`,
+ filterFn: addon =>
+ !addon.hidden && addon.isActive && !isPending(addon, "uninstall"),
+ },
+ ];
+
+ const disabledAddonsFilterFn = addon =>
+ !addon.hidden && !addon.isActive && !isPending(addon, "uninstall");
+
+ sections.push({
+ headingId: getL10nIdMapping(`${type}-disabled-heading`),
+ sectionClass: `${type}-disabled-section`,
+ filterFn: disabledAddonsFilterFn,
+ });
+
+ list.setSections(sections);
+ frag.appendChild(list);
+
+ // Show recommendations for themes and extensions.
+ if (
+ LIST_RECOMMENDATIONS_ENABLED &&
+ (type == "extension" || type == "theme")
+ ) {
+ let elementName =
+ type == "extension"
+ ? "recommended-extensions-section"
+ : "recommended-themes-section";
+ let recommendations = document.createElement(elementName);
+ // Start loading the recommendations. This can finish after the view load
+ // event is sent.
+ recommendations.render();
+ frag.appendChild(recommendations);
+ }
+
+ await list.render();
+
+ return frag;
+});
+
+gViewController.defineView("detail", async param => {
+ let [id, selectedTab] = param.split("/");
+ let addon = await AddonManager.getAddonByID(id);
+
+ if (!addon) {
+ return null;
+ }
+
+ let card = document.createElement("addon-card");
+
+ // Ensure the category for this add-on type is selected.
+ document.querySelector("categories-box").selectType(addon.type);
+
+ // Go back to the list view when the add-on is removed.
+ card.addEventListener("remove", () =>
+ gViewController.loadView(`list/${addon.type}`)
+ );
+
+ card.setAddon(addon);
+ card.expand();
+ await card.render();
+ if (selectedTab === "preferences" && (await isAddonOptionsUIAllowed(addon))) {
+ card.showPrefs();
+ }
+
+ return card;
+});
+
+gViewController.defineView("updates", async param => {
+ let list = document.createElement("addon-list");
+ list.type = "all";
+ if (param == "available") {
+ list.setSections([
+ {
+ headingId: "available-updates-heading",
+ filterFn: addon => {
+ // Filter the addons visible in the updates view using the same
+ // criteria that is being used to compute the counter on the
+ // available updates category button badge.
+ const install = getUpdateInstall(addon);
+ return install && isManualUpdate(install) && !install.installed;
+ },
+ },
+ ]);
+ } else if (param == "recent") {
+ list.sortByFn = (a, b) => {
+ if (a.updateDate > b.updateDate) {
+ return -1;
+ }
+ if (a.updateDate < b.updateDate) {
+ return 1;
+ }
+ return 0;
+ };
+ let updateLimit = new Date() - UPDATES_RECENT_TIMESPAN;
+ list.setSections([
+ {
+ headingId: "recent-updates-heading",
+ filterFn: addon =>
+ !addon.hidden && addon.updateDate && addon.updateDate > updateLimit,
+ },
+ ]);
+ } else {
+ throw new Error(`Unknown updates view ${param}`);
+ }
+
+ await list.render();
+ return list;
+});
+
+gViewController.defineView("discover", async () => {
+ let discopane = document.createElement("discovery-pane");
+ discopane.render();
+ await document.l10n.translateFragment(discopane);
+ return discopane;
+});
+
+gViewController.defineView("shortcuts", async () => {
+ // Force the extension category to be selected, in the case of a reload,
+ // restart, or if the view was opened from another category's page.
+ document.querySelector("categories-box").selectType("extension");
+
+ let view = document.createElement("addon-shortcuts");
+ await view.render();
+ await document.l10n.translateFragment(view);
+ return view;
+});
+
+/**
+ * @param {Element} el The button element.
+ */
+function openAmoInTab(el, path) {
+ let amoUrl = Services.urlFormatter.formatURLPref(
+ "extensions.getAddons.link.url"
+ );
+
+ if (path) {
+ amoUrl += path;
+ }
+
+ amoUrl = formatUTMParams("find-more-link-bottom", amoUrl);
+ windowRoot.ownerGlobal.openTrustedLinkIn(amoUrl, "tab");
+}
+
+/**
+ * Called when about:addons is loaded.
+ */
+async function initialize() {
+ window.addEventListener(
+ "unload",
+ () => {
+ // Clear out the document so the disconnectedCallback will trigger
+ // properly and all of the custom elements can cleanup.
+ document.body.textContent = "";
+ AddonManagerListenerHandler.shutdown();
+ },
+ { once: true }
+ );
+
+ // Init UI and view management
+ gViewController.initialize(document.getElementById("main"));
+
+ document.querySelector("categories-box").initialize();
+ AddonManagerListenerHandler.startup();
+
+ // browser.js may call loadView here if it expects an EM-loaded notification
+ gViewController.notifyEMLoaded();
+
+ // Select an initial view if no listener has set one so far
+ if (!gViewController.currentViewId) {
+ if (history.state) {
+ // If there is a history state to restore then use that
+ await gViewController.renderState(history.state);
+ } else {
+ // Fallback to the last category or first valid category view otherwise.
+ await gViewController.loadView(
+ Services.prefs.getStringPref(
+ PREF_UI_LASTCATEGORY,
+ gViewController.defaultViewId
+ )
+ );
+ }
+ }
+}
+
+window.promiseInitialized = new Promise(resolve => {
+ window.addEventListener(
+ "load",
+ () => {
+ initialize().then(resolve);
+ },
+ { once: true }
+ );
+});