From b81ac90a1bbb86c4e78994b6f09b5af599b2cad0 Mon Sep 17 00:00:00 2001
From: EnderDev <kieran@dothq.org>
Date: Sun, 17 Mar 2024 19:11:21 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Only=20show=20the=20browser=20af?=
 =?UTF-8?q?ter=20first=20customizable=20paint=20event?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 base/content/browser.js                       | 25 ++++++++++++++++---
 .../BrowserCustomizable.sys.mjs               | 11 +++++++-
 .../BrowserCustomizableInternal.sys.mjs       | 12 ++++++---
 .../BrowserCustomizableShared.sys.mjs         | 10 ++++++++
 4 files changed, 49 insertions(+), 9 deletions(-)

diff --git a/base/content/browser.js b/base/content/browser.js
index f8f158487e..aeb444e878 100644
--- a/base/content/browser.js
+++ b/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);
 	}
 }
 
diff --git a/components/customizableui/BrowserCustomizable.sys.mjs b/components/customizableui/BrowserCustomizable.sys.mjs
index 3d3425673c..c33b749996 100644
--- a/components/customizableui/BrowserCustomizable.sys.mjs
+++ b/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;
 
diff --git a/components/customizableui/BrowserCustomizableInternal.sys.mjs b/components/customizableui/BrowserCustomizableInternal.sys.mjs
index 53e46e7031..b80fec8b51 100644
--- a/components/customizableui/BrowserCustomizableInternal.sys.mjs
+++ b/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);
 	},
diff --git a/components/customizableui/BrowserCustomizableShared.sys.mjs b/components/customizableui/BrowserCustomizableShared.sys.mjs
index 19ca5a4130..9cdb8d9ffd 100644
--- a/components/customizableui/BrowserCustomizableShared.sys.mjs
+++ b/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}