💄 Fix padding on tab buttons getting smaller on squished tabs

Author: kierandrewett

components/tabs/content/browser-tab-button.css

@@ -2,15 +2,16 @@
  * 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/. */
 
-button[is=browser-tab-button] {
+button.browser-tab-button {
     padding: 0px;
 
     min-height: 0px;
     min-width: 0px;
 
     --button-default-color: transparent;
 
-    padding: 2%;
+    --button-padding-percent: 12;
+    padding: calc(var(--tab-true-height) / 100 * var(--button-padding-percent));
 
     & .browser-button-icon {
         --size: 14px;

components/tabs/content/browser-tab-button.js

@@ -13,6 +13,8 @@ class BrowserTabButton extends BrowserCommandButton {
 
 	connectedCallback() {
 		super.connectedCallback();
+
+		this.classList.add("browser-tab-button");
 	}
 
 	disconnectedCallback() {

components/tabs/content/browser-tab-label.css

@@ -18,10 +18,10 @@ browser-tab-label:not([customizablearg-fit="true"]) {
     flex: 1;
 
     &:-moz-locale-dir(ltr) {
-        mask-image: linear-gradient(to right, black 90%, #fff0);
+        mask-image: linear-gradient(to left, transparent, black var(--tab-label-mask-size, 2em));
     }
 
     &:-moz-locale-dir(rtl) {
-        mask-image: linear-gradient(to left, black 90%, #fff0);
+        mask-image: linear-gradient(to right, transparent, black var(--tab-label-mask-size, 2em));
     }
 }

components/tabs/content/browser-tab.css

@@ -55,6 +55,7 @@ browser-tab .browser-tab-background {
 
 browser-tab:hover {
     --tab-background: rgba(128, 128, 128, 0.125);
+    --tab-label-mask-size: 1em;
 }
 
 browser-tab[selected] {
@@ -220,6 +221,6 @@ browser-tab::part(customizable) {
     margin-inline-end: var(--tab-padding-end);
 }
 
-browser-tabs[hidetabactions] browser-tab:not([selected]) {
-    --tab-action-visibility: none;
+:host(browser-tab) browser-debug-hologram {
+    position: fixed;
 }

components/tabs/content/browser-tab.js

@@ -6,11 +6,17 @@ var { CommandAudiences } = ChromeUtils.importESModule(
 	"resource://gre/modules/CommandAudiences.sys.mjs"
 );
 
-const kDebugVisiblePref = "dot.tabs.debug_information.visible";
-
 class BrowserRenderedTab extends BrowserCustomizableArea {
+	/**
+	 * The minimum width of a tab allowed
+	 * before we need to hide actions
+	 */
+	TAB_MIN_WIDTH_ACTIONS = 90;
+
 	constructor() {
 		super();
+
+		this.resizeObserver = new ResizeObserver(this._onTabResize.bind(this));
 	}
 
 	get interactiveTags() {
@@ -414,64 +420,40 @@ class BrowserRenderedTab extends BrowserCustomizableArea {
 		};
 	}
 
-	maybeRenderDebug() {
-		const isVisible = Services.prefs.getBoolPref(kDebugVisiblePref, false);
-
-		clearInterval(this.debugUpdateInt);
-		this.debugUpdateInt = null;
-
-		if (isVisible) {
-			if (!this.querySelector("#tab-debug")) {
-				this.appendChild(
-					html(
-						"div",
-						{
-							id: "tab-debug",
-							slot: "tab-internal",
-							style: {
-								display: "flex",
-								flexDirection: "column",
-								position: "fixed",
-								backgroundColor: "black",
-								color: "white",
-								fontWeight: 600,
-								fontSize: "10px",
-								fontFamily: "monospace",
-								whiteSpace: "nowrap"
-							}
-						},
-						""
-					)
-				);
-			}
+	_onTabResize() {
+		const { width, height } = this.getBoundingClientRect();
 
-			this.debugUpdateInt = setInterval(() => {
-				const width = this.getBoundingClientRect().width;
-
-				this.querySelector("#tab-debug").replaceChildren(
-					html(
-						"div",
-						{},
-						...[
-							`ID: ${this.id.split("tab-")[1]}`,
-							`W: ${width.toFixed(0)}`,
-							`MaxW: ${(
-								parseInt(getComputedStyle(this).maxWidth) ||
-								width
-							).toFixed(0)}`,
-							`MinW: ${(
-								parseInt(getComputedStyle(this).minWidth) ||
-								width
-							).toFixed(0)}`
-						].map((t) => html("span", {}, t))
-					)
-				);
-			}, 1);
-		} else {
-			if (this.querySelector("#tab-debug")) {
-				this.querySelector("#tab-debug").remove();
-			}
-		}
+		this.style.setProperty("--tab-true-width", width + "px");
+		this.style.setProperty("--tab-true-height", height + "px");
+
+		this.toggleAttribute(
+			"hidetabactions",
+			width <= this.TAB_MIN_WIDTH_ACTIONS
+		);
+	}
+
+	/**
+	 * @param {BrowserDebugHologram} hologram
+	 */
+	renderDebugHologram(hologram) {
+		const width = this.getBoundingClientRect().width;
+
+		hologram.replaceChildren(
+			html(
+				"div",
+				{},
+				...[
+					`ID: ${this.id.split("tab-")[1]}`,
+					`W: ${width.toFixed(0)}`,
+					`MaxW: ${(
+						parseInt(getComputedStyle(this).maxWidth) || width
+					).toFixed(0)}`,
+					`MinW: ${(
+						parseInt(getComputedStyle(this).minWidth) || width
+					).toFixed(0)}`
+				].map((t) => html("span", {}, t))
+			)
+		);
 	}
 
 	connectedCallback() {
@@ -494,11 +476,15 @@ class BrowserRenderedTab extends BrowserCustomizableArea {
 			)
 		);
 
-		Services.prefs.addObserver(
-			kDebugVisiblePref,
-			this.maybeRenderDebug.bind(this)
+		const debugHologram = BrowserDebugHologram.create(
+			{
+				id: "tab",
+				prefId: "dot.tabs.debug_information.visible"
+			},
+			this.renderDebugHologram.bind(this)
 		);
-		this.maybeRenderDebug();
+
+		this.shadowRoot.appendChild(debugHologram);
 
 		this.shadowRoot.addEventListener("mousedown", this);
 		this.addEventListener("mouseover", this);
@@ -507,6 +493,8 @@ class BrowserRenderedTab extends BrowserCustomizableArea {
 		this.addEventListener("transitionend", this);
 
 		window.addEventListener("mouseup", this);
+
+		this.resizeObserver.observe(this);
 	}
 
 	disconnectedCallback() {
@@ -519,6 +507,8 @@ class BrowserRenderedTab extends BrowserCustomizableArea {
 		this.removeEventListener("transitionend", this);
 
 		window.removeEventListener("mouseup", this);
+
+		this.resizeObserver.disconnect();
 	}
 
 	/**