Bug 1844665 - use about: page for shopping to ensure process mechanics make sense, r=jhirsch,nika

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

Author: gijsk

browser/components/BrowserGlue.sys.mjs

@@ -745,10 +745,12 @@ let JSWINDOWACTORS = {
       esModuleURI: "resource:///actors/ShoppingSidebarChild.sys.mjs",
       events: {
         ContentReady: { wantUntrusted: true },
-        DisableShopping: { wantUntrusted: true },
+        // This is added so the actor instantiates immediately and makes
+        // methods available to the page js on load.
+        DOMDocElementInserted: {},
       },
     },
-    matches: ["chrome://browser/content/shopping/shopping.html"],
+    matches: ["about:shoppingsidebar"],
     remoteTypes: ["privilegedabout"],
   },
 

browser/components/about/AboutRedirector.cpp

@@ -95,6 +95,14 @@ static const RedirEntry kRedirMap[] = {
     {"sessionrestore", "chrome://browser/content/aboutSessionRestore.xhtml",
      nsIAboutModule::ALLOW_SCRIPT | nsIAboutModule::HIDE_FROM_ABOUTABOUT |
          nsIAboutModule::IS_SECURE_CHROME_UI},
+#ifdef NIGHTLY_BUILD
+    {"shoppingsidebar", "chrome://browser/content/shopping/shopping.html",
+     nsIAboutModule::URI_MUST_LOAD_IN_CHILD |
+         nsIAboutModule::URI_CAN_LOAD_IN_PRIVILEGEDABOUT_PROCESS |
+         nsIAboutModule::URI_SAFE_FOR_UNTRUSTED_CONTENT |
+         nsIAboutModule::ALLOW_SCRIPT | nsIAboutModule::HIDE_FROM_ABOUTABOUT |
+         nsIAboutModule::IS_SECURE_CHROME_UI},
+#endif
     {"tabcrashed", "chrome://browser/content/aboutTabCrashed.xhtml",
      nsIAboutModule::URI_SAFE_FOR_UNTRUSTED_CONTENT |
          nsIAboutModule::ALLOW_SCRIPT | nsIAboutModule::HIDE_FROM_ABOUTABOUT},

browser/components/about/components.conf

@@ -37,6 +37,9 @@ pages = [
     'welcomeback',
 ]
 
+if buildconfig.substs.get('NIGHTLY_BUILD'):
+    pages += ['shoppingsidebar']
+
 Classes = [
     {
         'cid': '{7e4bb6ad-2fc4-4dc6-89ef-23e8e5ccf980}',

browser/components/shopping/ShoppingSidebarChild.sys.mjs

@@ -3,23 +3,54 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { XPCOMUtils } from "resource://gre/modules/XPCOMUtils.sys.mjs";
+import { RemotePageChild } from "resource://gre/actors/RemotePageChild.sys.mjs";
 
-export class ShoppingSidebarChild extends JSWindowActorChild {
+import { ShoppingProduct } from "chrome://global/content/shopping/ShoppingProduct.mjs";
+
+let lazy = {};
+
+let gAllActors = new Set();
+
+XPCOMUtils.defineLazyPreferenceGetter(
+  lazy,
+  "optedIn",
+  "browser.shopping.experience2023.optedIn",
+  null,
+  function optedInStateChanged() {
+    for (let actor of gAllActors) {
+      actor.optedInStateChanged();
+    }
+  }
+);
+
+export class ShoppingSidebarChild extends RemotePageChild {
   constructor() {
     super();
+  }
 
-    XPCOMUtils.defineLazyPreferenceGetter(
-      this,
-      "optedIn",
-      "browser.shopping.experience2023.optedIn",
-      null,
-      () => this.updateContent()
-    );
+  actorCreated() {
+    super.actorCreated();
+    gAllActors.add(this);
   }
 
+  actorDestroyed() {
+    super.actorDestroyed();
+    gAllActors.delete(this);
+    this.#product?.uninit();
+  }
+
+  #productURI = null;
+  #product = null;
+
   receiveMessage(message) {
     switch (message.name) {
       case "ShoppingSidebar:UpdateProductURL":
+        let { url } = message.data;
+        let uri = Services.io.newURI(url);
+        if (this.#productURI?.equalsExceptRef(uri)) {
+          return;
+        }
+        this.#productURI = uri;
         this.updateContent();
         break;
     }
@@ -30,18 +61,56 @@ export class ShoppingSidebarChild extends JSWindowActorChild {
       case "ContentReady":
         this.updateContent();
         break;
-      case "DisableShopping":
-        this.sendAsyncMessage("DisableShopping");
-        break;
     }
   }
 
+  get canFetchAndShowData() {
+    return lazy.optedIn === 1;
+  }
+
+  optedInStateChanged() {
+    // Force re-fetching things if needed by clearing the last product URI:
+    this.#productURI = null;
+    // Then let content know.
+    this.updateContent();
+  }
+
   async updateContent() {
-    let url = await this.sendQuery("GetProductURL");
+    this.#product?.uninit();
+    // We are called either because the URL has changed or because the opt-in
+    // state has changed. In both cases, we want to clear out content
+    // immediately, without waiting for potentially async operations like
+    // obtaining product information.
     this.sendToContent("Update", {
-      optedIn: this.optedIn,
-      url,
+      showOnboarding: !this.canFetchAndShowData,
+      data: null,
     });
+    if (this.canFetchAndShowData) {
+      if (!this.#productURI) {
+        let url = await this.sendQuery("GetProductURL");
+
+        // Bail out if we opted out in the meantime, or don't have a URI.
+        if (lazy.optedIn !== 1 || !url) {
+          return;
+        }
+
+        this.#productURI = Services.io.newURI(url);
+      }
+
+      let uri = this.#productURI;
+      this.#product = new ShoppingProduct(uri);
+      let data = await this.#product.requestAnalysis().catch(err => {
+        console.error("Failed to fetch product analysis data", err);
+      });
+      // Check if the product URI or opt in changed while we waited.
+      if (uri != this.#productURI || !this.canFetchAndShowData) {
+        return;
+      }
+      this.sendToContent("Update", {
+        showOnboarding: false,
+        data,
+      });
+    }
   }
 
   sendToContent(eventName, detail) {

browser/components/shopping/ShoppingSidebarParent.sys.mjs

@@ -3,19 +3,21 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 export class ShoppingSidebarParent extends JSWindowActorParent {
-  updateProductURL() {
-    this.sendAsyncMessage("ShoppingSidebar:UpdateProductURL");
+  updateProductURL(uri) {
+    this.sendAsyncMessage("ShoppingSidebar:UpdateProductURL", {
+      url: uri?.spec ?? null,
+    });
   }
 
   async receiveMessage(message) {
-    let win = this.browsingContext.top.embedderElement.ownerGlobal;
     switch (message.name) {
-      case "DisableShopping":
-        Services.prefs.setIntPref("browser.shopping.experience2023.optedIn", 2);
-        break;
       case "GetProductURL":
-        let url = win.gBrowser.selectedBrowser.currentURI.spec;
-        return url;
+        let sidebarBrowser = this.browsingContext.top.embedderElement;
+        let panel = sidebarBrowser.closest(".browserSidebarContainer");
+        let associatedTabbedBrowser = panel.querySelector(
+          "browser[messagemanagergroup=browsers]"
+        );
+        return associatedTabbedBrowser.currentURI?.spec ?? null;
     }
     return null;
   }

browser/components/shopping/content/settings.mjs

@@ -3,6 +3,8 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+/* eslint-env mozilla/remote-page */
+
 import { html } from "chrome://global/content/vendor/lit.all.mjs";
 
 import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
@@ -26,11 +28,7 @@ class ShoppingSettings extends MozLitElement {
   }
 
   onDisableShopping() {
-    let event = new CustomEvent("DisableShopping", {
-      bubbles: true,
-      composed: true,
-    });
-    this.dispatchEvent(event);
+    RPMSetPref("browser.shopping.experience2023.optedIn", 2);
   }
 
   render() {

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

@@ -6,8 +6,6 @@
 import { html, ifDefined } from "chrome://global/content/vendor/lit.all.mjs";
 import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
 
-window.MozXULElement.insertFTLIfNeeded("preview/shopping.ftl");
-
 /**
  * A card container to be used in the shopping sidebar. There are three card types.
  * The default type where no type attribute is required and the card will have no extra functionality.

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

@@ -2,7 +2,8 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-import { ShoppingProduct } from "chrome://global/content/shopping/ShoppingProduct.mjs";
+/* eslint-env mozilla/remote-page */
+
 import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
 import { html } from "chrome://global/content/vendor/lit.all.mjs";
 
@@ -20,9 +21,6 @@ import "chrome://browser/content/shopping/analysis-explainer.mjs";
 import "chrome://browser/content/shopping/shopping-message-bar.mjs";
 
 export class ShoppingContainer extends MozLitElement {
-  #optedIn;
-  #product;
-
   static properties = {
     data: { type: Object },
     showOnboarding: { type: Boolean },
@@ -54,33 +52,12 @@ export class ShoppingContainer extends MozLitElement {
     );
   }
 
-  async _update({ url, optedIn }) {
-    this.#product?.uninit();
-    this.#optedIn = optedIn;
-
-    if (this.#optedIn !== 1) {
-      this.showOnboarding = true;
-      // In case the user just opted out, clear out any product data too.
-      this.data = null;
-      return;
-    }
-    this.showOnboarding = false;
-
-    // `url` is null for non-product pages; clear out any sidebar content while
-    // the chrome code closes the sidebar.
-    if (!url) {
-      this.data = null;
-      return;
-    }
-
-    let product = (this.#product = new ShoppingProduct(new URL(url)));
-    let data = await product.requestAnalysis();
-    // Double-check that we haven't opted out or re-entered this function
-    // while we were `await`-ing.
-    if (this.#optedIn !== 1 || product !== this.#product) {
-      return;
-    }
+  async _update({ data, showOnboarding }) {
+    // If we're not opted in or there's no shopping URL in the main browser,
+    // the actor will pass `null`, which means this will clear out any existing
+    // content in the sidebar.
     this.data = data;
+    this.showOnboarding = showOnboarding;
   }
 
   handleEvent(event) {

browser/components/shopping/content/shopping-sidebar.js

@@ -21,9 +21,9 @@
           flex="1"
           message="true"
           remoteType="privilegedabout"
+          maychangeremoteness="true"
           remote="true"
-          selectmenulist="contentselectdropdown"
-          src="chrome://browser/content/shopping/shopping.html"
+          src="about:shoppingsidebar"
           type="content"
           />
       `;

browser/components/shopping/content/shopping.html

@@ -7,7 +7,7 @@
     <meta charset="utf-8" />
     <meta
       http-equiv="Content-Security-Policy"
-      content="default-src resource: chrome: https://staging.trustwerty.com https://staging-affiliates.fakespot.io/v1/fx/sp_search; object-src 'none'; img-src chrome:;"
+      content="default-src resource: chrome:; object-src 'none'; img-src chrome:;"
     />
     <meta name="color-scheme" content="light dark" />
     <link rel="localization" href="branding/brand.ftl" />
@@ -19,7 +19,7 @@
 
     <link rel="stylesheet" href="chrome://global/skin/in-content/common.css" />
 
-    <script src="chrome://global/content/customElements.js"></script>
+    <script src="chrome://global/content/elements/message-bar.js"></script>
     <script
       type="module"
       src="chrome://browser/content/shopping/shopping-container.mjs"

toolkit/modules/AsyncPrefs.sys.mjs

@@ -15,6 +15,8 @@ const kAllowedPrefs = new Set([
   "browser.contentblocking.report.hide_vpn_banner",
   "browser.contentblocking.report.show_mobile_app",
 
+  "browser.shopping.experience2023.optedIn",
+
   "narrate.rate",
   "narrate.voice",
 

toolkit/modules/RemotePageAccessManager.sys.mjs

@@ -236,6 +236,10 @@ export let RemotePageAccessManager = {
       ],
       RPMRecordTelemetryEvent: ["*"],
     },
+    "about:shoppingsidebar": {
+      RPMSetPref: ["browser.shopping.experience2023.optedIn"],
+      RPMGetFormatURLPref: ["app.support.baseURL"],
+    },
     "about:tabcrashed": {
       RPMSendAsyncMessage: ["Load", "closeTab", "restoreTab", "restoreAll"],
       RPMAddMessageListener: ["*"],