Bug 1515078 - Add opt out UX in about:preferences for Pocket Newtab (#4642)

lib/AboutPreferences.jsm

@@ -13,6 +13,7 @@ XPCOMUtils.defineLazyGlobalGetters(this, ["fetch"]);
 const HTML_NS = "http://www.w3.org/1999/xhtml";
 
 const PREFERENCES_LOADED_EVENT = "home-pane-loaded";
+const DISCOVERY_STREAM_CONFIG_PREF_NAME = "browser.newtabpage.activity-stream.discoverystream.config";
 
 // These "section" objects are formatted in a way to be similar to the ones from
 // SectionsManager to construct the preferences view.
@@ -66,6 +67,9 @@ const CUSTOM_CSS = `
   margin-top: 0;
   margin-bottom: 0;
 }
+#discoveryContentsGroup .contentDiscoveryButton {
+  margin-inline-start: 0;
+}
 `;
 
 this.AboutPreferences = class AboutPreferences {
@@ -97,7 +101,7 @@ this.AboutPreferences = class AboutPreferences {
 
   async observe(window) {
     this.renderPreferences(window, await this.strings, [...PREFS_BEFORE_SECTIONS,
-      ...this.store.getState().Sections, ...PREFS_AFTER_SECTIONS]);
+      ...this.store.getState().Sections, ...PREFS_AFTER_SECTIONS], this.store.getState().DiscoveryStream.config.enabled);
   }
 
   /**
@@ -125,7 +129,7 @@ this.AboutPreferences = class AboutPreferences {
    * Render preferences to an about:preferences content window with the provided
    * strings and preferences structure.
    */
-  renderPreferences({document, Preferences, gHomePane}, strings, prefStructure) {
+  renderPreferences({document, Preferences, gHomePane}, strings, prefStructure, discoveryStreamEnabled) {
     // Helper to create a new element and append it
     const createAppend = (tag, parent) => parent.appendChild(
       document.createXULElement(tag));
@@ -257,6 +261,31 @@ this.AboutPreferences = class AboutPreferences {
       });
     });
 
+    if (discoveryStreamEnabled) {
+      // If Discovery Stream is enabled hide Home Content options
+      contentsGroup.style.visibility = "hidden";
+
+      const discoveryGroup = homeGroup.insertAdjacentElement("afterend", homeGroup.cloneNode());
+      discoveryGroup.id = "discoveryContentsGroup";
+      discoveryGroup.setAttribute("data-subcategory", "discovery");
+      createAppend("label", discoveryGroup)
+        .appendChild(document.createElementNS(HTML_NS, "h2"))
+        .textContent = formatString("prefs_content_discovery_header");
+      createAppend("description", discoveryGroup)
+        .textContent = formatString("prefs_content_discovery_description");
+
+      const contentDiscoveryButton = document.createElementNS(HTML_NS, "button");
+      contentDiscoveryButton.classList.add("contentDiscoveryButton");
+      contentDiscoveryButton.textContent = formatString("prefs_content_discovery_button");
+      createAppend("hbox", discoveryGroup)
+        .appendChild(contentDiscoveryButton)
+        .addEventListener("click", () => {
+          discoveryGroup.style.display = "none";
+          contentsGroup.style.visibility = "visible";
+          Services.prefs.clearUserPref(DISCOVERY_STREAM_CONFIG_PREF_NAME);
+        }, {once: true});
+    }
+
     // Update the visibility of the Restore Defaults btn based on checked prefs
     gHomePane.toggleRestoreDefaultsBtn();
   }

locales-src/en-US/strings.properties

@@ -91,6 +91,11 @@ section_disclaimer_topstories_buttontext=Okay, got it
 # what is shown for the homepage, new windows, and new tabs.
 prefs_home_header=Firefox Home Content
 prefs_home_description=Choose what content you want on your Firefox Home screen.
+
+prefs_content_discovery_header=Firefox Home
+prefs_content_discovery_description=Content Discovery in Firefox Home allows you to discover high-quality, relevant articles from across the web.
+prefs_content_discovery_button=Turn Off Content Discovery
+
 # LOCALIZATION NOTE (prefs_section_rows_option): This is a semi-colon list of
 # plural forms used in a drop down of multiple row options (1 row, 2 rows).
 # See: http://developer.mozilla.org/en/docs/Localization_and_Plurals

test/unit/lib/AboutPreferences.test.js

@@ -7,14 +7,16 @@ describe("AboutPreferences Feed", () => {
   let globals;
   let sandbox;
   let Sections;
+  let DiscoveryStream;
   let instance;
 
   beforeEach(() => {
     globals = new GlobalOverrider();
     sandbox = globals.sandbox;
     Sections = [];
+    DiscoveryStream = {config: {enabled: false}};
     instance = new AboutPreferences();
-    instance.store = {getState: () => ({Sections})};
+    instance.store = {getState: () => ({Sections, DiscoveryStream})};
   });
   afterEach(() => {
     globals.restore();
@@ -134,20 +136,22 @@ describe("AboutPreferences Feed", () => {
       document: {
         createXULElement: sandbox.stub().returns(node),
         createProcessingInstruction: sandbox.stub(),
-        createElementNS: sandbox.stub().callsFake((NS, el) => document.createElement(el)),
+        createElementNS: sandbox.stub().callsFake((NS, el) => node),
         getElementById: sandbox.stub().returns(node),
         insertBefore: sandbox.stub().returnsArg(0),
       },
       Preferences,
       gHomePane,
-    }, strings, prefStructure);
+    }, strings, prefStructure, DiscoveryStream.config.enabled);
     beforeEach(() => {
       node = {
         appendChild: sandbox.stub().returnsArg(0),
+        addEventListener: sandbox.stub(),
         classList: {add: sandbox.stub()},
         cloneNode: sandbox.stub().returnsThis(),
         insertAdjacentElement: sandbox.stub().returnsArg(1),
         setAttribute: sandbox.stub(),
+        style: {},
       };
       strings = {};
       prefStructure = [];
@@ -288,5 +292,39 @@ describe("AboutPreferences Feed", () => {
         assert.calledOnce(gHomePane.toggleRestoreDefaultsBtn);
       });
     });
+    describe("#DiscoveryStream", () => {
+      it("should not render the Discovery Stream section", () => {
+        testRender();
+
+        assert.isFalse(node.textContent.includes("prefs_content_discovery"));
+      });
+      it("should render the Discovery Stream section", () => {
+        DiscoveryStream = {config: {enabled: true}};
+        const spy = sandbox.spy(instance, "renderPreferences");
+
+        testRender();
+
+        const documentStub = spy.firstCall.args[0].document;
+
+        assert.equal(node.textContent, "prefs_content_discovery_button");
+        assert.calledWith(documentStub.createElementNS, "http://www.w3.org/1999/xhtml", "button");
+        // node points to contentsGroup, style is set to hidden if Discovery
+        // Stream is enabled
+        assert.propertyVal(node.style, "visibility", "hidden");
+      });
+      it("should toggle the Discovery Stream pref on button click", () => {
+        DiscoveryStream = {config: {enabled: true}};
+        const stub = sandbox.stub(Services.prefs, "clearUserPref");
+
+        testRender();
+
+        assert.calledOnce(node.addEventListener);
+
+        node.addEventListener.firstCall.args[1]();
+
+        assert.calledOnce(stub);
+        assert.calledWithExactly(stub, "browser.newtabpage.activity-stream.discoverystream.config");
+      });
+    });
   });
 });