Bug 1849685 - Shopping button should only show if current browser is a product page. r=shopping-reviewers,Gijs

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

browser/base/content/browser.js

@@ -10074,7 +10074,6 @@ var ShoppingSidebarManager = {
         sidebar.querySelector("browser").browsingContext.currentWindowGlobal;
       actor = global.getExistingActor("ShoppingSidebar");
     }
-    let button = document.getElementById("shopping-sidebar-button");
     let isProduct = isProductURL(aLocationURI);
     if (isProduct && this.isActive) {
       if (!sidebar) {
@@ -10091,12 +10090,8 @@ var ShoppingSidebarManager = {
       sidebar.hidden = true;
     }
 
-    button.hidden = !isProduct;
+    this.setShoppingButtonState(aBrowser);
-    button.setAttribute("shoppingsidebaropen", !!this.isActive);
+
-    document.l10n.setAttributes(
-      button,
-      `shopping-sidebar-${this.isActive ? "close" : "open"}-button`
-    );
     if (isProduct) {
       // This is the auto-enable behavior that toggles the `active` pref. It
       // must be at the end of this function, or 2 sidebars could be created.
@@ -10104,6 +10099,24 @@ var ShoppingSidebarManager = {
     }
   },
 
+  setShoppingButtonState(aBrowser) {
+    if (aBrowser !== gBrowser.selectedBrowser) {
+      return;
+    }
+
+    let button = document.getElementById("shopping-sidebar-button");
+
+    let isCurrentBrowserProduct = isProductURL(
+      gBrowser.selectedBrowser.currentURI
+    );
+    button.hidden = !isCurrentBrowserProduct;
+    button.setAttribute("shoppingsidebaropen", !!this.isActive);
+    let l10nId = this.isActive
+      ? "shopping-sidebar-close-button"
+      : "shopping-sidebar-open-button";
+    document.l10n.setAttributes(button, l10nId);
+  },
+
   handleEvent(event) {
     switch (event.type) {
       case "TabSelect": {

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

@@ -242,3 +242,73 @@ 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_right_click_doesnt_affect_sidebars() {
+  Services.prefs.setBoolPref("browser.shopping.experience2023.active", true);
+
+  await BrowserTestUtils.withNewTab(CONTENT_PAGE, async function (browser) {
+    let shoppingButton = document.getElementById("shopping-sidebar-button");
+
+    ok(
+      BrowserTestUtils.is_hidden(shoppingButton),
+      "The shopping button is hidden on a non product page"
+    );
+
+    let newProductTab = BrowserTestUtils.addTab(gBrowser, PRODUCT_PAGE);
+    let newProductBrowser = newProductTab.linkedBrowser;
+    await BrowserTestUtils.browserLoaded(
+      newProductBrowser,
+      false,
+      PRODUCT_PAGE
+    );
+
+    ok(
+      BrowserTestUtils.is_hidden(shoppingButton),
+      "The shopping button is still hidden after opening a background product tab"
+    );
+
+    let shoppingButtonVisiblePromise =
+      BrowserTestUtils.waitForMutationCondition(
+        shoppingButton,
+        { attributes: true, attributeFilter: ["hidden"] },
+        () => !shoppingButton.hidden
+      );
+    await BrowserTestUtils.switchTab(gBrowser, newProductTab);
+    await shoppingButtonVisiblePromise;
+
+    ok(
+      BrowserTestUtils.is_visible(shoppingButton),
+      "The shopping button is now visible"
+    );
+
+    let newProductTab2 = BrowserTestUtils.addTab(gBrowser, PRODUCT_PAGE);
+    let newProductBrowser2 = newProductTab2.linkedBrowser;
+    await BrowserTestUtils.browserLoaded(
+      newProductBrowser2,
+      false,
+      PRODUCT_PAGE
+    );
+
+    ok(
+      BrowserTestUtils.is_visible(shoppingButton),
+      "The shopping button is still visible after opening background product tab"
+    );
+
+    shoppingButtonVisiblePromise = BrowserTestUtils.waitForMutationCondition(
+      shoppingButton,
+      { attributes: true, attributeFilter: ["hidden"] },
+      () => !shoppingButton.hidden
+    );
+    await BrowserTestUtils.switchTab(gBrowser, newProductTab2);
+    await shoppingButtonVisiblePromise;
+
+    ok(
+      BrowserTestUtils.is_visible(shoppingButton),
+      "The shopping button is still visible"
+    );
+
+    BrowserTestUtils.removeTab(newProductTab2);
+
+    BrowserTestUtils.removeTab(newProductTab);
+  });
+});