Bug 1737873 - Add More From Mozilla in about:preferences r=preference…

…s-reviewers,Gijs,fluent-reviewers

Differential Revision: https://phabricator.services.mozilla.com/D128289

browser/app/profile/firefox.js

@@ -947,6 +947,7 @@ pref("browser.preferences.experimental", true);
 #else
 pref("browser.preferences.experimental", false);
 #endif
+pref("browser.preferences.moreFromMozilla", false);
 pref("browser.preferences.experimental.hidden", false);
 pref("browser.preferences.defaultPerformanceSettings.enabled", true);
 

browser/components/preferences/content/moreFromMozilla.ftl

@@ -0,0 +1,32 @@
+# 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/.
+
+### These strings are related to moreFromMozilla section added
+### in about:preferences for en-US only Fx95 experiment
+
+## These strings are used in the about:preferences moreFromMozilla page
+
+pane-more-from-mozilla-title = More From { -vendor-short-name }
+category-more-from-mozilla =
+  .tooltiptext =  More From { -vendor-short-name }
+
+pane-more-from-mozilla-subtitle = Check out other Mozilla products that work to support a healthy internet.
+
+firefox-mobile-title = { -brand-product-name } Mobile
+firefox-mobile-description = Get the mobile browser that puts your privacy first.
+
+mozilla-vpn-title = { -mozilla-vpn-brand-name }
+mozilla-vpn-description = Discover an added layer of anonymous browsing and protection.
+
+mozilla-rally-title = { -vendor-short-name } Rally
+mozilla-rally-description = Put your data to work for a better Internet for everyone.
+
+button-firefox-mobile =
+  .label = Get { -brand-product-name } Mobile
+
+button-mozilla-vpn =
+  .label = Get VPN
+
+button-mozilla-rally =
+  .label = Join Rally

browser/components/preferences/jar.mn

@@ -14,6 +14,7 @@ browser.jar:
    content/browser/preferences/containers.js
    content/browser/preferences/sync.js
    content/browser/preferences/experimental.js
+   content/browser/preferences/moreFromMozilla.js
    content/browser/preferences/fxaPairDevice.xhtml
    content/browser/preferences/fxaPairDevice.js
    content/browser/preferences/findInPage.js

browser/components/preferences/moreFromMozilla.inc.xhtml

@@ -0,0 +1,44 @@
+# 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/.
+
+<!-- More From Mozilla panel -->
+
+<script src="chrome://browser/content/preferences/moreFromMozilla.js"/>
+<html:template id="template-paneMoreFromMozilla">
+  <vbox id="moreFromMozillaCategory"
+    class="subcategory"
+    data-hidden-from-search="true"
+    data-category="paneMoreFromMozilla">
+    <html:h1 class="title" data-l10n-id="pane-more-from-mozilla-title" />
+    <html:p class="subtitle" data-l10n-id="pane-more-from-mozilla-subtitle" />
+    <!-- Mozilla Products -->
+    <vbox class="list-item">
+      <label>
+        <html:h2 id="firefox-mobile" class="product-title" data-l10n-id="firefox-mobile-title" />
+      </label>
+      <html:p class="description" data-l10n-id="firefox-mobile-description" />
+      <hbox>
+        <button id="fxMobile" class="primary small-button" data-l10n-id="button-firefox-mobile" />
+      </hbox>
+    </vbox>
+    <vbox class="list-item">
+      <label>
+        <html:h2 id="mozilla-vpn" class="product-title" data-l10n-id="mozilla-vpn-title" />
+      </label>
+      <html:p class="description" data-l10n-id="mozilla-vpn-description" />
+      <hbox>
+        <button id="mozillaVPN" class="primary small-button" data-l10n-id="button-mozilla-vpn" />
+      </hbox>
+    </vbox>
+    <vbox class="list-item">
+      <label>
+        <html:h2 id="mozilla-rally" class="product-title" data-l10n-id="mozilla-rally-title" />
+      </label>
+      <html:p class="description" data-l10n-id="mozilla-rally-description" />
+      <hbox>
+        <button id="mozillaRally" class="primary small-button" data-l10n-id="button-mozilla-rally" />
+      </hbox>
+    </vbox>
+  </vbox>
+</html:template>

browser/components/preferences/moreFromMozilla.js

@@ -0,0 +1,53 @@
+/* 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,
+
+  openURL(url) {
+    const URL_PARAMS = {
+      utm_source: "about-preferences",
+      utm_campaign: "morefrommozilla-na",
+      utm_medium: "firefox-release-browser",
+      entrypoint_experiment: "morefrommozilla",
+      entrypoint_variation: "a",
+    };
+
+    let pageUrl = new URL(url);
+    for (let [key, val] of Object.entries(URL_PARAMS)) {
+      pageUrl.searchParams.append(key, val);
+    }
+
+    let mainWindow = window.windowRoot.ownerGlobal;
+    mainWindow.openTrustedLinkIn(pageUrl.toString(), "tab");
+  },
+
+  async init() {
+    if (this.initialized) {
+      return;
+    }
+    this.initialized = true;
+    document
+      .getElementById("moreFromMozillaCategory")
+      .removeAttribute("data-hidden-from-search");
+
+    document.getElementById("mozillaVPN").addEventListener("click", function() {
+      gMoreFromMozillaPane.openURL("https://www.mozilla.org/products/vpn/");
+    });
+
+    document.getElementById("fxMobile").addEventListener("click", function() {
+      gMoreFromMozillaPane.openURL(
+        "https://www.mozilla.org/en-US/firefox/browsers/mobile/"
+      );
+    });
+
+    document
+      .getElementById("mozillaRally")
+      .addEventListener("click", function() {
+        gMoreFromMozillaPane.openURL("https://rally.mozilla.org/");
+      });
+  },
+};

browser/components/preferences/preferences.js

@@ -10,6 +10,7 @@
 /* import-globals-from privacy.js */
 /* import-globals-from sync.js */
 /* import-globals-from experimental.js */
+/* import-globals-from moreFromMozilla.js */
 /* import-globals-from findInPage.js */
 /* import-globals-from ../../base/content/utilityOverlay.js */
 /* import-globals-from ../../../toolkit/content/preferencesBindings.js */
@@ -29,6 +30,10 @@ ChromeUtils.defineModuleGetter(
   "resource://formautofill/FormAutofillParent.jsm"
 );
 
+XPCOMUtils.defineLazyModuleGetters(this, {
+  NimbusFeatures: "resource://nimbus/ExperimentAPI.jsm",
+});
+
 XPCOMUtils.defineLazyGetter(this, "gSubDialog", function() {
   const { SubDialogManager } = ChromeUtils.import(
     "resource://gre/modules/SubDialog.jsm"
@@ -141,6 +146,12 @@ function init_all() {
     );
     register_module("paneExperimental", gExperimentalPane);
   }
+
+  NimbusFeatures.moreFromMozilla.recordExposureEvent({ once: true });
+  if (NimbusFeatures.moreFromMozilla.getVariable("enabled")) {
+    document.getElementById("category-more-from-mozilla").hidden = false;
+    register_module("paneMoreFromMozilla", gMoreFromMozillaPane);
+  }
   // The Sync category needs to be the last of the "real" categories
   // registered and inititalized since many tests wait for the
   // "sync-pane-loaded" observer notification before starting the test.

browser/components/preferences/preferences.xhtml

@@ -34,6 +34,7 @@
   <link rel="localization" href="browser/branding/sync-brand.ftl"/>
   <link rel="localization" href="browser/browser.ftl"/>
   <link rel="localization" href="browser/preferences/preferences.ftl"/>
+  <link rel="localization" href="preview/moreFromMozilla.ftl"/>
   <!-- Used by fontbuilder.js -->
   <link rel="localization" href="browser/preferences/fonts.ftl"/>
   <link rel="localization" href="toolkit/featuregates/features.ftl"/>
@@ -152,6 +153,16 @@
           <image class="category-icon"/>
           <label class="category-name" flex="1" data-l10n-id="pane-experimental-title"></label>
         </richlistitem>
+        <richlistitem id="category-more-from-mozilla"
+                      class="category"
+                      hidden="true"
+                      data-l10n-id="category-more-from-mozilla"
+                      data-l10n-attrs="tooltiptext"
+                      value="paneMoreFromMozilla"
+                      align="center">
+          <image class="category-icon"/>
+          <label class="category-name" flex="1" data-l10n-id="pane-more-from-mozilla-title"></label>
+        </richlistitem>
       </richlistbox>
 
       <spacer flex="1"/>
@@ -204,6 +215,7 @@
 #include containers.inc.xhtml
 #include sync.inc.xhtml
 #include experimental.inc.xhtml
+#include moreFromMozilla.inc.xhtml
         </vbox>
       </vbox>
     </vbox>

browser/components/preferences/tests/browser.ini

@@ -22,6 +22,7 @@ skip-if = !updater
 [browser_experimental_features_hidden_when_not_public.js]
 [browser_experimental_features_resetall.js]
 [browser_filetype_dialog.js]
+[browser_moreFromMozilla.js]
 [browser_search_no_results_change_category.js]
 [browser_search_within_preferences_1.js]
 skip-if = (os == 'win' && (processor == "x86_64" || processor == "aarch64")) # Bug 1480314, aarch64 due to 1536560

browser/components/preferences/tests/browser_moreFromMozilla.js

@@ -0,0 +1,45 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Test that we don't show moreFromMozilla pane when it's disabled.
+ */
+add_task(async function testwhenPrefDisabled() {
+  await SpecialPowers.pushPrefEnv({
+    set: [["browser.preferences.moreFromMozilla", false]],
+  });
+
+  await openPreferencesViaOpenPreferencesAPI("paneGeneral", {
+    leaveOpen: true,
+  });
+  let doc = gBrowser.contentDocument;
+
+  let moreFromMozillaCategory = doc.getElementById(
+    "category-more-from-mozilla"
+  );
+  ok(moreFromMozillaCategory, "The category exists");
+  ok(moreFromMozillaCategory.hidden, "The category is hidden");
+
+  BrowserTestUtils.removeTab(gBrowser.selectedTab);
+});
+
+add_task(async function testwhenPrefEnabled() {
+  await SpecialPowers.pushPrefEnv({
+    set: [["browser.preferences.moreFromMozilla", true]],
+  });
+
+  await openPreferencesViaOpenPreferencesAPI("paneGeneral", {
+    leaveOpen: true,
+  });
+  let doc = gBrowser.contentDocument;
+
+  let moreFromMozillaCategory = doc.getElementById(
+    "category-more-from-mozilla"
+  );
+  ok(moreFromMozillaCategory, "The category exists");
+  ok(!moreFromMozillaCategory.hidden, "The category is not hidden");
+
+  BrowserTestUtils.removeTab(gBrowser.selectedTab);
+});

browser/locales/jar.mn

@@ -12,6 +12,7 @@
   preview/protections.ftl                          (../components/protections/content/protections.ftl)
   preview/interventions.ftl                        (../components/urlbar/content/interventions.ftl)
   preview/firefoxSuggest.ftl                       (../components/urlbar/content/firefoxSuggest.ftl)
+  preview/moreFromMozilla.ftl                      (../components/preferences/content/moreFromMozilla.ftl)
   browser                                          (%browser/**/*.ftl)
 
 @[email protected]:

browser/themes/shared/jar.inc.mn

@@ -85,10 +85,13 @@
   skin/classic/browser/preferences/face-smile.svg              (../shared/preferences/face-smile.svg)
   skin/classic/browser/preferences/fxaPairDevice.css           (../shared/preferences/fxaPairDevice.css)
   skin/classic/browser/preferences/ios-menu.svg                (../shared/preferences/ios-menu.svg)
+  skin/classic/browser/preferences/mozilla-logo.svg            (../shared/preferences/mozilla-logo.svg)
   skin/classic/browser/preferences/no-search-bar.svg           (../shared/preferences/no-search-bar.svg)
   skin/classic/browser/preferences/privacy.css                 (../shared/preferences/privacy.css)
+  skin/classic/browser/preferences/rally-logo.svg              (../shared/preferences/rally-logo.svg)
   skin/classic/browser/preferences/search-arrow-indicator.svg  (../shared/preferences/search-arrow-indicator.svg)
   skin/classic/browser/preferences/search-bar.svg              (../shared/preferences/search-bar.svg)
+  skin/classic/browser/preferences/vpn-logo.svg                (../shared/preferences/vpn-logo.svg)
   skin/classic/browser/preferences/search.css                  (../shared/preferences/search.css)
   skin/classic/browser/preferences/siteDataSettings.css        (../shared/preferences/siteDataSettings.css)
 * skin/classic/browser/preferences/containers.css              (../shared/preferences/containers.css)

browser/themes/shared/preferences/preferences.inc.css

@@ -212,6 +212,13 @@ checkbox {
   list-style-image: url("chrome://global/skin/icons/experiments.svg");
 }
 
+#category-more-from-mozilla > .category-icon {
+  list-style-image: url("chrome://browser/skin/preferences/mozilla-logo.svg");
+  -moz-context-properties: fill, stroke, fill-opacity, stroke-opacity;
+  fill: currentColor;
+  stroke: var(--in-content-page-background);
+}
+
 /* All panes */
 
 .info-icon,
@@ -1165,3 +1172,48 @@ richlistitem .text-link:hover {
 .checkbox-row a {
   margin-inline-start: 6px;
 }
+
+#moreFromMozillaCategory .subtitle {
+  color: var(--in-content-deemphasized-text);
+  margin: 4px 0 10px;
+}
+
+#moreFromMozillaCategory .list-item {
+  margin-top: 30px;
+}
+
+#moreFromMozillaCategory .product-title {
+  background-repeat: no-repeat;
+  background-size: contain;
+  padding-inline-start: 30px;
+  margin: 4px 0;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+#moreFromMozillaCategory .product-title:-moz-locale-dir(rtl) {
+  background-position-x: right;
+}
+
+#moreFromMozillaCategory .description {
+  color: var(--in-content-deemphasized-text);
+  padding-inline-start: 30px;
+  margin: 4px 0;
+}
+
+#moreFromMozillaCategory button {
+  margin-block: 16px;
+  margin-inline: 30px 0;
+}
+
+#firefox-mobile {
+  background-image: url("chrome://branding/content/about-logo.svg");
+}
+
+#mozilla-vpn {
+  background-image: url("chrome://browser/skin/preferences/vpn-logo.svg");
+}
+
+#mozilla-rally {
+  background-image: url("chrome://browser/skin/preferences/rally-logo.svg");
+}

toolkit/components/nimbus/FeatureManifest.js

@@ -112,6 +112,20 @@ const FeatureManifest = {
       },
     },
   },
+  moreFromMozilla: {
+    description:
+      "New page on about:preferences to suggest more Mozilla products",
+    hasExposure: true,
+    exposureDescription:
+      "Exposure is sent once per browsing session when the about:preferences URL is first accessed.",
+    variables: {
+      enabled: {
+        type: "boolean",
+        fallbackPref: "browser.preferences.moreFromMozilla",
+        description: "Should users see the new more from Mozilla section.",
+      },
+    },
+  },
   abouthomecache: {
     description: "The startup about:home cache.",
     hasExposure: false,