Bug 1849159 - Toolbar button should hide when opted out. r=shopping-reviewers,Gijs

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

browser/base/content/browser.js

@@ -10052,6 +10052,11 @@ var ShoppingSidebarManager = {
       document.querySelectorAll("shopping-sidebar").forEach(sidebar => {
         sidebar.remove();
       });
+
+      if (optedOut) {
+        let button = document.getElementById("shopping-sidebar-button");
+        button.hidden = true;
+      }
       return;
     }
 

browser/components/shopping/content/settings.mjs

@@ -21,6 +21,7 @@ class ShoppingSettings extends MozLitElement {
     return {
       recommendationsToggleEl: "#shopping-settings-recommendations-toggle",
       optOutButtonEl: "#shopping-settings-opt-out-button",
+      shoppingCardEl: "shopping-card",
     };
   }
 
@@ -34,6 +35,7 @@ class ShoppingSettings extends MozLitElement {
 
   onDisableShopping() {
     RPMSetPref("browser.shopping.experience2023.optedIn", 2);
+    RPMSetPref("browser.shopping.experience2023.active", false);
   }
 
   render() {

browser/components/shopping/tests/browser/browser_shopping_urlbar.js

@@ -242,3 +242,71 @@ add_task(async function test_button_right_click_doesnt_affect_sidebars() {
     is(sidebar, null, "Shopping sidebar should still be closed");
   });
 });
+
+add_task(async function test_button_hidden_when_opted_out() {
+  Services.prefs.setBoolPref("browser.shopping.experience2023.active", true);
+  await BrowserTestUtils.withNewTab(
+    {
+      url: PRODUCT_PAGE,
+      gBrowser,
+    },
+    async browser => {
+      let shoppingBrowser = gBrowser.ownerDocument.querySelector(
+        "browser.shopping-sidebar"
+      );
+
+      let shoppingButton = document.getElementById("shopping-sidebar-button");
+
+      ok(
+        BrowserTestUtils.is_visible(shoppingButton),
+        "Shopping Button should be visible on a product page"
+      );
+
+      await SpecialPowers.spawn(
+        shoppingBrowser,
+        [MOCK_POPULATED_DATA],
+        async mockData => {
+          let shoppingContainer =
+            content.document.querySelector(
+              "shopping-container"
+            ).wrappedJSObject;
+          shoppingContainer.data = Cu.cloneInto(mockData, content);
+          await shoppingContainer.updateComplete;
+          let shoppingSettings = shoppingContainer.settingsEl;
+          await shoppingSettings.updateComplete;
+
+          shoppingSettings.shoppingCardEl.detailsEl.open = true;
+          let optOutButton = shoppingSettings.optOutButtonEl;
+          optOutButton.click();
+        }
+      );
+
+      await BrowserTestUtils.waitForMutationCondition(
+        shoppingButton,
+        { attributes: true, attributeFilter: ["hidden"] },
+        () => shoppingButton.hidden
+      );
+
+      ok(
+        !Services.prefs.getBoolPref("browser.shopping.experience2023.active"),
+        "Shopping sidebar is no longer active"
+      );
+      is(
+        Services.prefs.getIntPref("browser.shopping.experience2023.optedIn"),
+        2,
+        "Opted out of shopping experience"
+      );
+
+      ok(
+        BrowserTestUtils.is_hidden(shoppingButton),
+        "Shopping Button should be hidden after opting out"
+      );
+
+      Services.prefs.setBoolPref(
+        "browser.shopping.experience2023.active",
+        true
+      );
+      Services.prefs.setIntPref("browser.shopping.experience2023.optedIn", 1);
+    }
+  );
+});