forked from mirrors/gecko-dev
8d7229e6f4
Have onboarding.mjs wait for AboutWelcomeShoppingChild to indicate when to render with Update event handled directly. Differential Revision: https://phabricator.services.mozilla.com/D187004
71 lines
2.3 KiB
JavaScript
71 lines
2.3 KiB
JavaScript
/* 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 =
|
|
"resource://activity-stream/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://activity-stream/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;
|