💄 Only show the browser after first customizable paint event

base/content/browser.js

@@ -69,9 +69,25 @@ class BrowserApplication extends BrowserCustomizableArea {
 		this.toolbarMutationObserver = new MutationObserver(
 			this.maybePromoteToolbars.bind(this)
 		);
+
+		this.ready = false;
+	}
+
+	_done = null;
+
+	/**
+	 * Determines if the browser is ready to be visible
+	 */
+	get ready() {
+		return this._done;
 	}
 
-	_done = false;
+	set ready(newReady) {
+		window.docShell.treeOwner.QueryInterface(Ci.nsIBaseWindow).visibility =
+			newReady;
+
+		this._done = newReady;
+	}
 
 	/** @type {typeof BrowserCustomizable.prototype} */
 	customizable = null;
@@ -195,6 +211,8 @@ class BrowserApplication extends BrowserCustomizableArea {
 	 */
 	didMount() {
 		this.maybePromoteToolbars();
+
+		this.ready = true;
 	}
 
 	/**
@@ -231,12 +249,11 @@ class BrowserApplication extends BrowserCustomizableArea {
 	 * Initialises the browser and its components
 	 */
 	init() {
-		if (this._done) {
+		if (this.ready) {
 			throw new Error("Browser cannot be initialized twice!");
 		}
 
 		this.storage = new BrowserStorage(window);
-		this.customizable = new BrowserCustomizable(this);
 		this.tabs = new BrowserTabs(window);
 		this.search = new BrowserSearch(window);
 		this.shortcuts = new BrowserShortcuts();
@@ -258,7 +275,7 @@ class BrowserApplication extends BrowserCustomizableArea {
 				);
 			});
 
-		this._done = true;
+		this.customizable = new BrowserCustomizable(this);
 	}
 }
 

components/customizableui/BrowserCustomizable.sys.mjs

@@ -155,9 +155,17 @@ BrowserCustomizable.prototype = {
 					"\n" +
 					e.stack || ""
 			);
+		} finally {
+			this.internal.dispatchEvent(
+				this.renderRoot,
+				Shared.customizablePaintEvent
+			);
 		}
 
-		this.internal.dispatchMountEvent(this.renderRoot);
+		this.internal.dispatchEvent(
+			this.renderRoot,
+			Shared.customizableDidMountEvent
+		);
 	},
 
 	/**
@@ -206,6 +214,7 @@ BrowserCustomizable.prototype = {
 			throw new Error(
 				"BrowserCustomizable cannot be initialised more than once!"
 			);
+
 		this.renderRoot = renderRoot;
 		this.win = this.renderRoot.ownerGlobal;
 

components/customizableui/BrowserCustomizableInternal.sys.mjs

@@ -341,7 +341,10 @@ BrowserCustomizableInternal.prototype = {
 
 					renderContainer.appendChild(childComponent);
 
-					this.dispatchMountEvent(childComponent);
+					this.dispatchEvent(
+						childComponent,
+						Shared.customizableDidMountEvent
+					);
 				} else {
 					throw new Error(
 						internalPart == "customizable"
@@ -495,11 +498,12 @@ BrowserCustomizableInternal.prototype = {
 	},
 
 	/**
-	 * Dispatches the customizable UI mount event to the element
+	 * Dispatches a customizable UI event to an element
 	 * @param {Element} component
+	 * @param {string} event
 	 */
-	dispatchMountEvent(component) {
-		const evt = new CustomEvent("CustomizableUI::DidMount");
+	dispatchEvent(component, event) {
+		const evt = new CustomEvent(`CustomizableUI::${event}`);
 
 		component.dispatchEvent(evt);
 	},

components/customizableui/BrowserCustomizableShared.sys.mjs

@@ -39,6 +39,16 @@ export const BrowserCustomizableShared = {
 	 */
 	customizableComponentTagRegex: /^[a-zA-Z0-9]+([_-]?[a-zA-Z0-9])*$/,
 
+	/**
+	 * The customizable UI did mount event type
+	 */
+	customizableDidMountEvent: "DidMount",
+
+	/**
+	 * The customizable UI paint event type
+	 */
+	customizablePaintEvent: "Paint",
+
 	/**
 	 * The global customizable logger object
 	 * @type {Console}