♻️ Refactor shared customizable logic and improve child capabilities on areas

Author: kierandrewett

components/customizableui/BrowserCustomizable.sys.mjs

@@ -61,8 +61,8 @@ BrowserCustomizable.prototype = {
 		this.state = data;
 
 		if (permanent) {
-			Services.prefs.setStringPref(
-				Shared.customizableStatePref,
+			Shared.customizablePrefs.setStringPref(
+				"state",
 				JSON.stringify(data)
 			);
 		}
@@ -74,8 +74,8 @@ BrowserCustomizable.prototype = {
 	 * Refetches and validates the customizable state
 	 */
 	async _updateState() {
-		const serialized = Services.prefs.getStringPref(
-			Shared.customizableStatePref,
+		const serialized = Shared.customizablePrefs.getStringPref(
+			"state",
 			"{}"
 		);
 
@@ -99,23 +99,7 @@ BrowserCustomizable.prototype = {
 	 */
 	async _paint() {
 		// Re-init the components singleton
-		this.internal.initComponents();
-
-		const components = this.state.components || {};
-
-		Shared.logger.log(
-			`Registering ${Object.keys(components).length} components...`
-		);
-		try {
-			this.internal.registerCustomComponents(this.renderRoot, components);
-		} catch (e) {
-			throw new Error(
-				"Failure registering custom components:\n" +
-					e.toString().replace(/^Error: /, "") +
-					"\n" +
-					e.stack || ""
-			);
-		}
+		await this.internal.initComponents();
 
 		Shared.logger.log("Registering root component...");
 		let rootElement = null;
@@ -202,8 +186,13 @@ BrowserCustomizable.prototype = {
 	 * Initialises any observers needed for BrowserCustomizable
 	 */
 	_initObservers() {
-		Services.prefs.addObserver(
-			Shared.customizableStatePref,
+		Shared.customizablePrefs.addObserver(
+			"state",
+			(() => this._update()).bind(this)
+		);
+
+		Shared.customizablePrefs.addObserver(
+			"components.",
 			(() => this._update()).bind(this)
 		);
 	},
@@ -221,7 +210,6 @@ BrowserCustomizable.prototype = {
 		this.win = this.renderRoot.ownerGlobal;
 
 		this.internal = new BrowserCustomizableInternal(this.win);
-		this.internal.ensureCustomizableComponents();
 
 		this._initObservers();
 

components/customizableui/BrowserCustomizableComponent.sys.mjs

@@ -3,8 +3,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 export class BrowserCustomizableComponent {
-	static TYPE_WIDGET = 0;
-	static TYPE_AREA = 1;
+	static TYPE_WIDGET = Symbol("TYPE_WIDGET");
+	static TYPE_AREA = Symbol("TYPE_AREA");
 
 	/**
 	 * The ID or type of this customizable component
@@ -15,7 +15,7 @@ export class BrowserCustomizableComponent {
 
 	/**
 	 * The type of this component
-	 * @type {number}
+	 * @type {symbol}
 	 */
 	type = null;
 
@@ -39,7 +39,7 @@ export class BrowserCustomizableComponent {
 	}
 
 	/**
-	 * @param {number} type
+	 * @param {symbol} type
 	 * @param {string} id
 	 * @param {({
 	 *      doc,

components/customizableui/BrowserCustomizableComponents.sys.mjs

@@ -11,14 +11,14 @@ const { BrowserCustomizableComponent: Component } = ChromeUtils.importESModule(
 );
 
 export class BrowserCustomizableComponents {
-	/** @type {Map<number, Map<string, typeof Component["prototype"]>>} */
+	/** @type {Map<symbol, Map<string, typeof Component["prototype"]>>} */
 	components = new Map();
 
 	/**
 	 * A list of all elements that can have children
 	 */
 	get childCapableElements() {
-		return ["browser-customizable-area"];
+		return ["browser-customizable-area", "menupopup"];
 	}
 
 	/**
@@ -34,7 +34,9 @@ export class BrowserCustomizableComponents {
 		);
 
 		if (component) {
-			return component.render(doc, attributes);
+			const element = component.render(doc, attributes);
+
+			return element;
 		} else {
 			return null;
 		}
@@ -65,7 +67,7 @@ export class BrowserCustomizableComponents {
 
 	/**
 	 * Registers a new component to the registry
-	 * @param {number} componentType
+	 * @param {symbol} componentType
 	 * @param {string} componentId
 	 * @param {({
 	 *      doc,
@@ -108,10 +110,16 @@ export class BrowserCustomizableComponents {
 
 	/**
 	 * Obtains a component instance by its type and ID
-	 * @param {number} componentType
+	 * @param {symbol} componentType
 	 * @param {string} componentId
 	 */
 	getComponentInstance(componentType, componentId) {
+		if (!Shared.customizableComponentTagRegex.test(componentId)) {
+			throw new Error(
+				`Disallowed characters in component ID '${componentId}'.`
+			);
+		}
+
 		if (this.components.get(componentType).has(componentId)) {
 			const component = this.components
 				.get(componentType)
@@ -154,6 +162,12 @@ export class BrowserCustomizableComponents {
 		return null;
 	}
 
+	/**
+	 * Registers a custom component
+	 * @param {object} componentDeclaration
+	 */
+	registerCustomComponent(componentDeclaration) {}
+
 	/**
 	 * Registers all built-in browser areas
 	 */
@@ -169,6 +183,10 @@ export class BrowserCustomizableComponents {
 		this.registerComponent(Component.TYPE_AREA, "urlbar", ({ html }) =>
 			html("browser-urlbar")
 		);
+
+		this.registerComponent(Component.TYPE_AREA, "menu", ({ doc }) =>
+			doc.createXULElement("menupopup")
+		);
 	}
 
 	/**