1 files changed, 69 insertions, 0 deletions
diff --git a/browser/components/shopping/content/onboarding.mjs b/browser/components/shopping/content/onboarding.mjs
new file mode 100644
index 0000000000..68124c0253
--- /dev/null
+++ b/browser/components/shopping/content/onboarding.mjs
@@ -0,0 +1,69 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * 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/. */
+
+const BUNDLE_SRC =
+  "chrome://browser/content/aboutwelcome/aboutwelcome.bundle.js";
+
+class Onboarding {
+  constructor({ win } = {}) {
+    this.doc = win.document;
+    win.addEventListener("RenderWelcome", () => this._addScriptsAndRender(), {
+      once: true,
+    });
+  }
+
+  async _addScriptsAndRender() {
+    const addStylesheet = href => {
+      if (this.doc.head.querySelector(`link[href="${href}"]`)) {
+        return;
+      }
+      const link = this.doc.head.appendChild(this.doc.createElement("link"));
+      link.rel = "stylesheet";
+      link.href = href;
+    };
+    addStylesheet("chrome://browser/content/aboutwelcome/aboutwelcome.css");
+    const reactSrc = "resource://activity-stream/vendor/react.js";
+    const domSrc = "resource://activity-stream/vendor/react-dom.js";
+    // Add React script
+    const getReactReady = async () => {
+      return new Promise(resolve => {
+        let reactScript = this.doc.createElement("script");
+        reactScript.src = reactSrc;
+        this.doc.head.appendChild(reactScript);
+        reactScript.addEventListener("load", resolve);
+      });
+    };
+    // Add ReactDom script
+    const getDomReady = async () => {
+      return new Promise(resolve => {
+        let domScript = this.doc.createElement("script");
+        domScript.src = domSrc;
+        this.doc.head.appendChild(domScript);
+        domScript.addEventListener("load", resolve);
+      });
+    };
+    // Load React, then React Dom
+    if (!this.doc.querySelector(`[src="${reactSrc}"]`)) {
+      await getReactReady();
+    }
+    if (!this.doc.querySelector(`[src="${domSrc}"]`)) {
+      await getDomReady();
+    }
+    // Load the bundle to render the content as configured.
+    this.doc.querySelector(`[src="${BUNDLE_SRC}"]`)?.remove();
+    let bundleScript = this.doc.createElement("script");
+    bundleScript.src = BUNDLE_SRC;
+    this.doc.head.appendChild(bundleScript);
+  }
+
+  static getOnboarding() {
+    if (!this.onboarding) {
+      this.onboarding = new Onboarding({ win: window });
+    }
+    return this.onboarding;
+  }
+}
+
+const OnboardingContainer = Onboarding.getOnboarding();
+export default OnboardingContainer;