💄 Add ability to hide statuspanel from customizable UI on web contents

components/tabs/content/browser-web-contents.js

@@ -20,32 +20,60 @@ class BrowserWebContents extends MozHTMLElement {
 		};
 	}
 
-	getComputedAABBCollisions() {}
-
-	connectedCallback() {
-		if (this.delayConnectedCallback()) return;
-
-		this.setAttribute("borders", "top bottom");
-
-		this.appendChild(
-			html(
-				"div",
-				{ class: "wc-container" },
+	get bordersElement() {
+		return /** @type {HTMLDivElement} */ (
+			this.querySelector(".wc-borders") ||
 				html(
 					"div",
 					{ class: "wc-borders" },
 					this.elements.topLine,
 					this.elements.leftLine,
 					this.elements.rightLine,
 					this.elements.bottomLine
-				),
+				)
+		);
+	}
+
+	get slotContainerElement() {
+		return /** @type {HTMLDivElement} */ (
+			this.querySelector(".wc-slot") ||
 				html(
 					"div",
 					{ class: "wc-slot" },
 					html("slot", { name: "web-contents" })
 				)
+		);
+	}
+
+	/**
+	 * The tabpanel connected to this web contents element
+	 */
+	get tabpanel() {
+		return this.slotContainerElement
+			.querySelector("slot")
+			.assignedElements()[0];
+	}
+
+	getComputedAABBCollisions() {}
+
+	connectedCallback() {
+		if (this.delayConnectedCallback()) return;
+
+		this.setAttribute("borders", "top bottom");
+
+		this.appendChild(
+			html(
+				"div",
+				{ class: "wc-container" },
+				this.bordersElement,
+				this.slotContainerElement
 			)
 		);
+
+		this.tabpanel.toggleAttribute(
+			"showstatuspanel",
+			this.hasAttribute("statuspanel")
+		);
 	}
 }
 

themes/shared/browser-shared.css

@@ -154,6 +154,10 @@ hr.fdn-separator {
     -moz-window-dragging: no-drag;
 }
 
+#tabspanel:not([showstatuspanel]) browser-status {
+    display: none;
+}
+
 :disabled {
     opacity: 0.5;
     pointer-events: none;