Bug 1876200 - Add keep closed shopping message bar. r=shopping-reviewers,fluent-reviewers,desktop-theme-reviewers,flod,kpatenio,jules

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

Author: Niklas Baumgardner

browser/app/profile/firefox.js

@@ -790,6 +790,12 @@ pref("browser.shopping.experience2023.autoOpen.enabled", false);
 // Opens the shopping sidebar automatically when viewing a PDP.
 pref("browser.shopping.experience2023.autoOpen.userEnabled", true);
 
+// Number of times the sidebar has been closed in a session
+pref("browser.shopping.experience2023.sidebarClosedCount", 0);
+
+// When conditions are met, shows a prompt on the shopping sidebar asking users if they want to disable auto-open behavior
+pref("browser.shopping.experience2023.showKeepSidebarClosedMessage", true);
+
 // Enables the display of the Mozilla VPN banner in private browsing windows
 pref("browser.privatebrowsing.vpnpromourl", "https://vpn.mozilla.org/?utm_source=firefox-browser&utm_medium=firefox-%CHANNEL%-browser&utm_campaign=private-browsing-vpn-link");
 

browser/components/BrowserGlue.sys.mjs

@@ -761,6 +761,7 @@ let JSWINDOWACTORS = {
         ReportProductAvailable: { wantUntrusted: true },
         AdClicked: { wantUntrusted: true },
         AdImpression: { wantUntrusted: true },
+        ShowCallout4: { wantUntrusted: true },
       },
     },
     matches: ["about:shoppingsidebar"],

browser/components/shopping/ShoppingSidebarChild.sys.mjs

@@ -91,19 +91,29 @@ export class ShoppingSidebarChild extends RemotePageChild {
         let uri = url ? Services.io.newURI(url) : null;
         // If we're going from null to null, bail out:
         if (!this.#productURI && !uri) {
-          return;
+          return null;
         }
 
         // If we haven't reloaded, check if the URIs represent the same product
         // as sites might change the URI after they have loaded (Bug 1852099).
         if (!isReload && this.isSameProduct(uri, this.#productURI)) {
-          return;
+          return null;
         }
 
         this.#productURI = uri;
         this.updateContent({ haveUpdatedURI: true });
         break;
+      case "ShoppingSidebar:ShowKeepClosedMessage":
+        this.sendToContent("ShowKeepClosedMessage");
+        break;
+      case "ShoppingSidebar:HideKeepClosedMessage":
+        this.sendToContent("HideKeepClosedMessage");
+        break;
+      case "ShoppingSidebar:IsKeepClosedMessageShowing":
+        return !!this.document.querySelector("shopping-container")
+          ?.wrappedJSObject.showingKeepClosedMessage;
     }
+    return null;
   }
 
   isSameProduct(newURI, currentURI) {
@@ -155,6 +165,11 @@ export class ShoppingSidebarChild extends RemotePageChild {
         ShoppingProduct.sendAttributionEvent("impression", aid);
         Glean.shopping.surfaceAdsImpression.record();
         break;
+      case "ShowCallout4":
+        this.sendAsyncMessage("Shopping:SendTrigger", {
+          id: "shoppingAutoOpenUserDisabled", // TODO: update this in bug 1874949
+        });
+        break;
     }
   }
 

browser/components/shopping/ShoppingSidebarParent.sys.mjs

@@ -14,9 +14,26 @@ ChromeUtils.defineESModuleGetters(lazy, {
 
 import { XPCOMUtils } from "resource://gre/modules/XPCOMUtils.sys.mjs";
 
+XPCOMUtils.defineLazyPreferenceGetter(
+  lazy,
+  "AUTO_OPEN_SIDEBAR_ENABLED",
+  "browser.shopping.experience2023.autoOpen.enabled",
+  true
+);
+XPCOMUtils.defineLazyPreferenceGetter(
+  lazy,
+  "AUTO_OPEN_SIDEBAR_USER_ENABLED",
+  "browser.shopping.experience2023.autoOpen.userEnabled",
+  true
+);
+
 export class ShoppingSidebarParent extends JSWindowActorParent {
   static SHOPPING_ACTIVE_PREF = "browser.shopping.experience2023.active";
   static SHOPPING_OPTED_IN_PREF = "browser.shopping.experience2023.optedIn";
+  static SIDEBAR_CLOSED_COUNT_PREF =
+    "browser.shopping.experience2023.sidebarClosedCount";
+  static SHOW_KEEP_SIDEBAR_CLOSED_MESSAGE_PREF =
+    "browser.shopping.experience2023.showKeepSidebarClosedMessage";
 
   updateProductURL(uri, flags) {
     this.sendAsyncMessage("ShoppingSidebar:UpdateProductURL", {
@@ -34,17 +51,74 @@ export class ShoppingSidebarParent extends JSWindowActorParent {
           "browser[messagemanagergroup=browsers]"
         );
         return associatedTabbedBrowser.currentURI?.spec ?? null;
+      case "Shopping:SendTrigger":
+        let trigger = message.data;
+        if (!trigger.browser) {
+          trigger.browser =
+            this.browsingContext.topChromeWindow.gBrowser.selectedBrowser;
+        }
+        lazy.ShoppingUtils.sendTrigger(message.data);
     }
     return null;
   }
 
   /**
    * Called when the user clicks the URL bar button.
    */
-  static urlbarButtonClick(event) {
+  static async urlbarButtonClick(event) {
     if (event.button > 0) {
       return;
     }
+
+    if (
+      lazy.AUTO_OPEN_SIDEBAR_ENABLED &&
+      lazy.AUTO_OPEN_SIDEBAR_USER_ENABLED &&
+      event.target.getAttribute("shoppingsidebaropen") === "true"
+    ) {
+      let gBrowser = event.target.ownerGlobal.gBrowser;
+      let shoppingBrowser = gBrowser
+        .getPanel(gBrowser.selectedBrowser)
+        .querySelector(".shopping-sidebar");
+      let actor =
+        shoppingBrowser.browsingContext.currentWindowGlobal.getActor(
+          "ShoppingSidebar"
+        );
+
+      let isKeepClosedMessageShowing = await actor.sendQuery(
+        "ShoppingSidebar:IsKeepClosedMessageShowing"
+      );
+
+      let sidebarClosedCount = Services.prefs.getIntPref(
+        ShoppingSidebarParent.SIDEBAR_CLOSED_COUNT_PREF,
+        0
+      );
+      if (
+        !isKeepClosedMessageShowing &&
+        sidebarClosedCount >= 4 &&
+        Services.prefs.getBoolPref(
+          ShoppingSidebarParent.SHOW_KEEP_SIDEBAR_CLOSED_MESSAGE_PREF,
+          true
+        )
+      ) {
+        actor.sendAsyncMessage("ShoppingSidebar:ShowKeepClosedMessage");
+        return;
+      }
+
+      actor.sendAsyncMessage("ShoppingSidebar:HideKeepClosedMessage");
+
+      if (sidebarClosedCount >= 6) {
+        Services.prefs.setBoolPref(
+          ShoppingSidebarParent.SHOW_KEEP_SIDEBAR_CLOSED_MESSAGE_PREF,
+          false
+        );
+      }
+
+      Services.prefs.setIntPref(
+        ShoppingSidebarParent.SIDEBAR_CLOSED_COUNT_PREF,
+        sidebarClosedCount + 1
+      );
+    }
+
     this.toggleAllSidebars("urlBar");
   }
 

browser/components/shopping/ShoppingUtils.sys.mjs

@@ -27,6 +27,8 @@ const AUTO_OPEN_ENABLED_PREF =
   "browser.shopping.experience2023.autoOpen.enabled";
 const AUTO_OPEN_USER_ENABLED_PREF =
   "browser.shopping.experience2023.autoOpen.userEnabled";
+const SIDEBAR_CLOSED_COUNT_PREF =
+  "browser.shopping.experience2023.sidebarClosedCount";
 
 const CFR_FEATURES_PREF =
   "browser.newtabpage.activity-stream.asrouter.userprefs.cfr.features";
@@ -90,6 +92,8 @@ export const ShoppingUtils = {
     }
     Services.prefs.addObserver(ACTIVE_PREF, this.onActiveUpdate);
 
+    Services.prefs.setIntPref(SIDEBAR_CLOSED_COUNT_PREF, 0);
+
     this.initialized = true;
   },
 

browser/components/shopping/content/shopping-container.mjs

@@ -28,6 +28,12 @@ import "chrome://browser/content/shopping/recommended-ad.mjs";
 // top of the sidebar to show the header box shadow.
 const HEADER_SCROLL_PIXEL_OFFSET = 8;
 
+const SIDEBAR_CLOSED_COUNT_PREF =
+  "browser.shopping.experience2023.sidebarClosedCount";
+const SHOW_KEEP_SIDEBAR_CLOSED_MESSAGE_PREF =
+  "browser.shopping.experience2023.showKeepSidebarClosedMessage";
+const SHOPPING_SIDEBAR_ACTIVE_PREF = "browser.shopping.experience2023.active";
+
 export class ShoppingContainer extends MozLitElement {
   static properties = {
     data: { type: Object },
@@ -44,6 +50,7 @@ export class ShoppingContainer extends MozLitElement {
     isOverflow: { type: Boolean },
     autoOpenEnabled: { type: Boolean },
     autoOpenEnabledByUser: { type: Boolean },
+    showingKeepClosedMessage: { type: Boolean },
   };
 
   static get queries() {
@@ -58,6 +65,7 @@ export class ShoppingContainer extends MozLitElement {
       recommendedAdEl: "recommended-ad",
       loadingEl: "#loading-wrapper",
       closeButtonEl: "#close-button",
+      keepClosedMessageBarEl: "#keep-closed-message-bar",
     };
   }
 
@@ -77,6 +85,8 @@ export class ShoppingContainer extends MozLitElement {
     window.document.addEventListener("UpdateRecommendations", this);
     window.document.addEventListener("UpdateAnalysisProgress", this);
     window.document.addEventListener("autoOpenEnabledByUserChanged", this);
+    window.document.addEventListener("ShowKeepClosedMessage", this);
+    window.document.addEventListener("HideKeepClosedMessage", this);
 
     window.dispatchEvent(
       new CustomEvent("ContentReady", {
@@ -175,6 +185,12 @@ export class ShoppingContainer extends MozLitElement {
       case "autoOpenEnabledByUserChanged":
         this.autoOpenEnabledByUser = event.detail?.autoOpenEnabledByUser;
         break;
+      case "ShowKeepClosedMessage":
+        this.showingKeepClosedMessage = true;
+        break;
+      case "HideKeepClosedMessage":
+        this.showingKeepClosedMessage = false;
+        break;
     }
   }
 
@@ -358,12 +374,13 @@ export class ShoppingContainer extends MozLitElement {
             id="close-button"
             class="ghost-button shopping-button"
             data-l10n-id="shopping-close-button"
-            @click=${this.handleClick}
+            @click=${this.handleCloseButtonClick}
           ></button>
         </div>
         <div id="content" aria-live="polite" aria-busy=${!this.data}>
           <slot name="multi-stage-message-slot"></slot>
-          ${sidebarContent} ${!hideFooter ? this.getFooterTemplate() : null}
+          ${this.keepClosedMessageTemplate()}${sidebarContent}
+          ${!hideFooter ? this.getFooterTemplate() : null}
         </div>
       </div>`;
   }
@@ -385,6 +402,21 @@ export class ShoppingContainer extends MozLitElement {
     `;
   }
 
+  keepClosedMessageTemplate() {
+    if (
+      this.autoOpenEnabled &&
+      this.autoOpenEnabledByUser &&
+      this.showingKeepClosedMessage &&
+      RPMGetBoolPref(SHOW_KEEP_SIDEBAR_CLOSED_MESSAGE_PREF, true)
+    ) {
+      return html`<shopping-message-bar
+        id="keep-closed-message-bar"
+        type="keep-closed"
+      ></shopping-message-bar>`;
+    }
+    return null;
+  }
+
   render() {
     let content;
     let hideFooter;
@@ -410,8 +442,28 @@ export class ShoppingContainer extends MozLitElement {
     return this.renderContainer(content, hideFooter);
   }
 
-  handleClick() {
-    RPMSetPref("browser.shopping.experience2023.active", false);
+  handleCloseButtonClick() {
+    if (this.autoOpenEnabled && this.autoOpenEnabledByUser) {
+      let sidebarClosedCount = RPMGetIntPref(SIDEBAR_CLOSED_COUNT_PREF, 0);
+      if (
+        !this.showingKeepClosedMessage &&
+        sidebarClosedCount >= 4 &&
+        RPMGetBoolPref(SHOW_KEEP_SIDEBAR_CLOSED_MESSAGE_PREF, true)
+      ) {
+        this.showingKeepClosedMessage = true;
+        return;
+      }
+
+      this.showingKeepClosedMessage = false;
+
+      if (sidebarClosedCount >= 6) {
+        RPMSetPref(SHOW_KEEP_SIDEBAR_CLOSED_MESSAGE_PREF, false);
+      }
+
+      RPMSetPref(SIDEBAR_CLOSED_COUNT_PREF, sidebarClosedCount + 1);
+    }
+
+    RPMSetPref(SHOPPING_SIDEBAR_ACTIVE_PREF, false);
     Glean.shopping.surfaceClosed.record({ source: "closeButton" });
   }
 }