summaryrefslogtreecommitdiffstats
path: root/browser/components/preferences/moreFromMozilla.js
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-07 09:22:09 +0000
commit43a97878ce14b72f0981164f87f2e35e14151312 (patch)
tree620249daf56c0258faa40cbdcf9cfba06de2a846 /browser/components/preferences/moreFromMozilla.js
parentInitial commit. (diff)
downloadfirefox-upstream.tar.xz
firefox-upstream.zip
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'browser/components/preferences/moreFromMozilla.js')
-rw-r--r--browser/components/preferences/moreFromMozilla.js271
1 files changed, 271 insertions, 0 deletions
diff --git a/browser/components/preferences/moreFromMozilla.js b/browser/components/preferences/moreFromMozilla.js
new file mode 100644
index 0000000000..afd3cc3df8
--- /dev/null
+++ b/browser/components/preferences/moreFromMozilla.js
@@ -0,0 +1,271 @@
+/* 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/. */
+
+/* import-globals-from preferences.js */
+
+var gMoreFromMozillaPane = {
+ initialized: false,
+
+ /**
+ * "default" is whatever template is the default, as defined by the code
+ * in this file (currently in `getTemplateName`). Setting option to an
+ * invalid value will leave it unchanged.
+ */
+ _option: "default",
+ set option(value) {
+ if (!value) {
+ this._option = "default";
+ return;
+ }
+
+ if (value === "default" || value === "simple") {
+ this._option = value;
+ }
+ },
+
+ get option() {
+ return this._option;
+ },
+
+ getTemplateName() {
+ if (!this._option || this._option == "default") {
+ return "simple";
+ }
+ return this._option;
+ },
+
+ getURL(url, region, option, hasEmail) {
+ const URL_PARAMS = {
+ utm_source: "about-prefs",
+ utm_campaign: "morefrommozilla",
+ utm_medium: "firefox-desktop",
+ };
+ // UTM content param used in analytics to record
+ // UI template used to open URL
+ const utm_content = {
+ default: "default",
+ simple: "fxvt-113-a",
+ };
+
+ const experiment_params = {
+ entrypoint_experiment: "morefrommozilla-experiment-1846",
+ };
+
+ let pageUrl = new URL(url);
+ for (let [key, val] of Object.entries(URL_PARAMS)) {
+ pageUrl.searchParams.append(key, val);
+ }
+
+ // Append region by product to utm_content and also
+ // append '-email' when URL is opened
+ // from send email link in QRCode box
+ if (option) {
+ pageUrl.searchParams.set(
+ "utm_content",
+ `${utm_content[option]}-${region}${hasEmail ? "-email" : ""}`
+ );
+ }
+
+ // Add experiments params when user is shown an experimental UI
+ // with template value as 'simple' set via Nimbus
+ if (option !== "default") {
+ pageUrl.searchParams.set(
+ "entrypoint_experiment",
+ experiment_params.entrypoint_experiment
+ );
+ pageUrl.searchParams.set("entrypoint_variation", `treatment-${option}`);
+ }
+ return pageUrl.toString();
+ },
+
+ renderProducts() {
+ let products = [
+ {
+ id: "firefox-mobile",
+ title_string_id: "more-from-moz-firefox-mobile-title",
+ description_string_id: "more-from-moz-firefox-mobile-description",
+ region: "global",
+ button: {
+ id: "fxMobile",
+ type: "link",
+ label_string_id: "more-from-moz-learn-more-link",
+ actionURL: AppConstants.isChinaRepack()
+ ? "https://www.firefox.com.cn/browsers/mobile/"
+ : "https://www.mozilla.org/firefox/browsers/mobile/",
+ },
+ qrcode: {
+ title: {
+ string_id: "more-from-moz-qr-code-box-firefox-mobile-title",
+ },
+ image_src_prefix:
+ "chrome://browser/content/preferences/more-from-mozilla-qr-code",
+ button: {
+ id: "qr-code-send-email",
+ label: {
+ string_id: "more-from-moz-qr-code-box-firefox-mobile-button",
+ },
+ actionURL: AppConstants.isChinaRepack()
+ ? "https://www.firefox.com.cn/mobile/get-app/"
+ : "https://www.mozilla.org/firefox/mobile/get-app/?v=mfm",
+ },
+ },
+ },
+ ];
+
+ if (BrowserUtils.shouldShowVPNPromo()) {
+ const vpn = {
+ id: "mozilla-vpn",
+ title_string_id: "more-from-moz-mozilla-vpn-title",
+ description_string_id: "more-from-moz-mozilla-vpn-description",
+ region: "global",
+ button: {
+ id: "mozillaVPN",
+ label_string_id: "more-from-moz-button-mozilla-vpn-2",
+ actionURL: "https://www.mozilla.org/products/vpn/",
+ },
+ };
+ products.push(vpn);
+ }
+
+ if (BrowserUtils.shouldShowPromo(BrowserUtils.PromoType.RELAY)) {
+ const relay = {
+ id: "firefox-relay",
+ title_string_id: "more-from-moz-firefox-relay-title",
+ description_string_id: "more-from-moz-firefox-relay-description",
+ region: "global",
+ button: {
+ id: "firefoxRelay",
+ label_string_id: "more-from-moz-firefox-relay-button",
+ actionURL: "https://relay.firefox.com/",
+ },
+ };
+ products.push(relay);
+ }
+
+ this._productsContainer = document.getElementById(
+ "moreFromMozillaCategory"
+ );
+ let frag = document.createDocumentFragment();
+ this._template = document.getElementById(this.getTemplateName());
+
+ // Exit when internal data is incomplete
+ if (!this._template) {
+ return;
+ }
+
+ for (let product of products) {
+ let template = this._template.content.cloneNode(true);
+ let title = template.querySelector(".product-title");
+ let desc = template.querySelector(".description");
+
+ title.setAttribute("data-l10n-id", product.title_string_id);
+ title.id = product.id;
+
+ desc.setAttribute("data-l10n-id", product.description_string_id);
+
+ let isLink = product.button.type === "link";
+ let actionElement = template.querySelector(
+ isLink ? ".text-link" : ".small-button"
+ );
+
+ if (actionElement) {
+ actionElement.hidden = false;
+ actionElement.id = `${this.option}-${product.button.id}`;
+ document.l10n.setAttributes(
+ actionElement,
+ product.button.label_string_id
+ );
+
+ if (isLink) {
+ actionElement.setAttribute(
+ "href",
+ this.getURL(product.button.actionURL, product.region, this.option)
+ );
+ } else {
+ actionElement.addEventListener("click", function() {
+ let mainWindow = window.windowRoot.ownerGlobal;
+ mainWindow.openTrustedLinkIn(
+ gMoreFromMozillaPane.getURL(
+ product.button.actionURL,
+ product.region,
+ gMoreFromMozillaPane.option
+ ),
+ "tab"
+ );
+ });
+ }
+ }
+
+ if (product.qrcode) {
+ let qrcode = template.querySelector(".qr-code-box");
+ qrcode.setAttribute("hidden", "false");
+
+ let qrcode_title = template.querySelector(".qr-code-box-title");
+ qrcode_title.setAttribute(
+ "data-l10n-id",
+ product.qrcode.title.string_id
+ );
+
+ let img = template.querySelector(".qr-code-box-image");
+ // Append QRCode image source by template. For CN region
+ // simple template, we want a CN specific QRCode
+ img.src =
+ product.qrcode.image_src_prefix +
+ "-" +
+ this.getTemplateName() +
+ `${
+ AppConstants.isChinaRepack() &&
+ this.getTemplateName().includes("simple")
+ ? "-cn"
+ : ""
+ }` +
+ ".svg";
+ // Add image a11y attributes
+ img.setAttribute(
+ "data-l10n-id",
+ "more-from-moz-qr-code-firefox-mobile-img"
+ );
+
+ let qrc_link = template.querySelector(".qr-code-link");
+
+ // So the telemetry includes info about which option is being used
+ qrc_link.id = `${this.option}-${product.qrcode.button.id}`;
+
+ // For supported locales, this link allows users to send themselves a
+ // download link by email. It should be hidden for unsupported locales.
+ if (BrowserUtils.sendToDeviceEmailsSupported()) {
+ qrc_link.setAttribute(
+ "data-l10n-id",
+ product.qrcode.button.label.string_id
+ );
+ qrc_link.href = this.getURL(
+ product.qrcode.button.actionURL,
+ product.region,
+ this.option,
+ true
+ );
+ qrc_link.hidden = false;
+ }
+ }
+
+ frag.appendChild(template);
+ }
+ this._productsContainer.appendChild(frag);
+ },
+
+ async init() {
+ if (this.initialized) {
+ return;
+ }
+ this.initialized = true;
+ document
+ .getElementById("moreFromMozillaCategory")
+ .removeAttribute("data-hidden-from-search");
+ document
+ .getElementById("moreFromMozillaCategory-header")
+ .removeAttribute("data-hidden-from-search");
+
+ this.renderProducts();
+ },
+};