Bug 1964294 - Offer one-click Sponsored Settings for New Tab r=home-newtab-reviewers,fluent-reviewers,bolsson,reemhamz

Reorganised sponsored settings on `about:settings#home` to be nested under "Support Firefox" checkbox for an experiment instead of under their respective preferences for top sites and recommended stories.

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

browser/app/profile/firefox.js

@@ -1812,6 +1812,10 @@ pref("browser.newtabpage.activity-stream.newtabLayouts.variant-b", true);
 
 pref("browser.newtabpage.activity-stream.newtabShortcuts.refresh", true);
 
+// Sponsored checkboxes placement experiment
+pref("browser.newtabpage.activity-stream.showSponsoredCheckboxes", false);
+pref("browser.newtabpage.activity-stream.sponsoredCheckboxes.group", false);
+
 // Activity Stream prefs that control to which page to redirect
 #ifndef RELEASE_OR_BETA
   pref("browser.newtabpage.activity-stream.debug", false);

browser/components/preferences/home.inc.xhtml

@@ -100,6 +100,7 @@
   <vbox id="weather" />
   <vbox id="topsites" />
   <vbox id="topstories" />
+  <vbox id="support-firefox" />
 
   <html:moz-box-item class="mission-message">
     <div class="slotted">

browser/extensions/newtab/lib/AboutPreferences.sys.mjs

@@ -50,22 +50,46 @@ const PREFS_BEFORE_SECTIONS = () => [
       feed: "feeds.topsites",
       titleString: "home-prefs-shortcuts-header",
       descString: "home-prefs-shortcuts-description",
-      get nestedPrefs() {
+      nestedPrefs: [
-        return Services.prefs.getBoolPref("browser.topsites.useRemoteSetting")
+        {
-          ? [
+          name: "showSponsoredTopSites",
-              {
+          titleString: "home-prefs-shortcuts-by-option-sponsored",
-                name: "showSponsoredTopSites",
+          eventSource: "SPONSORED_TOP_SITES",
-                titleString: "home-prefs-shortcuts-by-option-sponsored",
+          // Hide this nested pref if "Support Firefox" checkbox is enabled
-                eventSource: "SPONSORED_TOP_SITES",
+          shouldHidePref: Services.prefs.getBoolPref(
-              },
+            "browser.newtabpage.activity-stream.sponsoredCheckboxes.group",
-            ]
+            false
-          : [];
+          ),
-      },
+        },
+      ],
     },
     maxRows: 4,
     rowsPref: "topSitesRows",
     eventSource: "TOP_SITES",
   },
+  {
+    id: "support-firefox",
+    pref: {
+      feed: "showSponsoredCheckboxes",
+      titleString: "home-prefs-support-firefox-header",
+      nestedPrefs: [
+        {
+          name: "showSponsoredTopSites",
+          titleString: "home-prefs-shortcuts-by-option-sponsored",
+          eventSource: "SPONSORED_TOP_SITES",
+        },
+        {
+          name: "showSponsored",
+          titleString: "home-prefs-recommended-by-option-sponsored-stories",
+          eventSource: "POCKET_SPOCS",
+        },
+      ],
+    },
+    shouldHidePref: !Services.prefs.getBoolPref(
+      "browser.newtabpage.activity-stream.sponsoredCheckboxes.group",
+      false
+    ),
+  },
 ];
 
 export class AboutPreferences {
@@ -265,22 +289,33 @@ export class AboutPreferences {
 
     // Add a checkbox pref for any nested preferences
     nestedPrefs.forEach(nested => {
-      const subcheck = this.createAppend(document, "checkbox", detailVbox);
+      if (nested.shouldHidePref !== true) {
-      // Set up a user event if we have an event source for this pref.
+        const subcheck = this.createAppend(document, "checkbox", detailVbox);
-      if (nested.eventSource) {
+        // Set up a user event if we have an event source for this pref.
-        this.setupUserEvent(subcheck, nested.eventSource);
+        if (nested.eventSource) {
+          this.setupUserEvent(subcheck, nested.eventSource);
+        }
+        subcheck.classList.add("indent");
+        document.l10n.setAttributes(subcheck, nested.titleString);
+
+        linkPref(subcheck, nested.name, "bool");
+
+        subChecks.push(subcheck);
+        subcheck.disabled = !pref._value;
+        subcheck.hidden = nested.hidden;
       }
-      subcheck.classList.add("indent");
-      document.l10n.setAttributes(subcheck, nested.titleString);
-      linkPref(subcheck, nested.name, "bool");
-      subChecks.push(subcheck);
-      subcheck.disabled = !pref._value;
-      subcheck.hidden = nested.hidden;
     });
 
-    // Disable any nested checkboxes if the parent pref is not enabled.
     pref.on("change", () => {
       subChecks.forEach(subcheck => {
+        // Update child preferences for the "Support Firefox" checkbox group
+        // so that they're turned on and off at the same time.
+        if (id === "support-firefox") {
+          const subPref = Preferences.get(subcheck.getAttribute("preference"));
+          subPref.value = pref.value;
+        }
+
+        // Disable any nested checkboxes if the parent pref is not enabled.
         subcheck.disabled = !pref._value;
       });
     });

browser/extensions/newtab/lib/SectionsManager.sys.mjs

@@ -44,6 +44,10 @@ const BUILT_IN_SECTIONS = ({ pocketNewtab }) => ({
         ...(Services.prefs.getBoolPref(
           "browser.newtabpage.activity-stream.system.showSponsored",
           true
+        ) && // Hide this nested pref if "Support Firefox" checkbox is enabled
+        !Services.prefs.getBoolPref(
+          "browser.newtabpage.activity-stream.sponsoredCheckboxes.group",
+          false
         )
           ? [
               {

browser/extensions/newtab/test/unit/lib/AboutPreferences.test.js

@@ -131,7 +131,7 @@ describe("AboutPreferences Feed", () => {
       await instance.observe(window, PREFERENCES_LOADED_EVENT);
 
       // Render all the prefs
-      assert.callCount(renderPreferenceSection, 5);
+      assert.callCount(renderPreferenceSection, 6);
 
       // Show or hide the "Restore defaults" button depending on prefs
       assert.calledOnce(toggleRestoreDefaults);

browser/locales/en-US/browser/preferences/preferences.ftl

@@ -743,6 +743,10 @@ home-prefs-weather-header =
 home-prefs-weather-description = Today’s forecast at a glance
 home-prefs-weather-learn-more-link = Learn more
 
+# "Support" here means to help sustain or contribute to something, especially through funding or sponsorship.
+home-prefs-support-firefox-header =
+    .label = Support { -brand-product-name }
+
 home-prefs-mission-message = Our sponsors support our mission to build a better web
 home-prefs-mission-message-learn-more-link = Find out how
 

toolkit/components/nimbus/FeatureManifest.yaml

@@ -1800,6 +1800,14 @@ pocketNewtab:
         pref: browser.newtabpage.activity-stream.discoverystream.thumbsUpDown.searchTopsitesCompact
       description: >-
         Change the layout of the sections to be more compact to account for the added card height with the thumbs up/down enabled.
+    prefsSponsoredCheckboxes:
+      type: boolean
+      setPref:
+        branch: user
+        pref: browser.newtabpage.activity-stream.sponsoredCheckboxes.group
+      description: >-
+        When true, checkboxes for sponsored results in top sites and recommended stories are grouped separately
+        on about:preferences#home
 
 saveToPocket:
   description: The save to Pocket feature