♻️ Refactor responsive buttons to work in other types of area

Author: kierandrewett

components/panels/content/browser-panel-button.css

@@ -19,6 +19,8 @@ button[is=browser-panel-button] {
         gap: 10px;
         align-items: center;
 
+        padding: 0;
+
         flex: 1;
     }
 }

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

@@ -10,8 +10,7 @@ button.browser-tab-button {
 
     --button-default-color: transparent;
 
-    --button-padding-percent: 12;
-    padding: calc(var(--tab-true-height) / 100 * var(--button-padding-percent));
+    --button-inner-padding-scale: 0.5;
 
     & .browser-button-icon {
         --size: 14px;

components/toolbar/content/browser-toolbar-button.css

@@ -6,25 +6,18 @@ button.browser-toolbar-button {
     display: flex;
 
     align-self: stretch;
-
-    background-color: transparent !important;
+    justify-content: center;
 
     min-height: auto;
     min-width: auto;
 
-    --button-area-height: max(var(--area-min-height, var(--area-height)), var(--area-height));
-
-    --x-padding: var(--area-x-padding, calc((var(--button-area-height) - var(--y-padding) - 16px) / 2));
-    --y-padding: var(--area-y-padding, calc(var(--button-area-height) * 0.1 * 2 * calc(2 - var(--button-scale-factor, 1))));
-    --content-size: min(var(--button-area-height) / 1.5, 1rem);
-
-    padding: calc(var(--y-padding) / 2) 0;
+    padding: 0;
 
     -moz-window-dragging: no-drag;
 
-    outline: none !important;
-    transition: none !important;
-    z-index: initial !important;
+    margin-block: calc(var(--toolbar-height) * 0.1);
+
+    --button-default-color: transparent;
 }
 
 button.browser-toolbar-button .browser-button-container {
@@ -34,26 +27,11 @@ button.browser-toolbar-button .browser-button-container {
     justify-content: center;
     align-self: stretch;
 
-    background-color: var(--button-background);
-    outline: var(--button-outline);
-    outline-offset: var(--button-outline-offset);
-
-    gap: max(var(--x-padding), 4px);
-
     max-width: max-content;
     max-height: max-content;
-
-    border-radius: calc(var(--content-size) / 2);
-
-    padding: 0 var(--x-padding);
-
-    transition: var(--button-transition);
-
-    z-index: var(--button-z-index);
 }
 
 button.browser-toolbar-button .browser-button-label {
-    font-size: var(--content-size);
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;

components/toolbar/content/browser-toolbar.css

@@ -5,14 +5,19 @@
 @import url("chrome://dot/content/widgets/browser-toolbar-button.css");
 @import url("chrome://dot/content/widgets/browser-toolbar-overflow.css");
 
+:host(browser-toolbar) {
+    --toolbar-width: var(--area-width, inherit);
+    --toolbar-height: var(--area-height, inherit);
+}
+
 :host(browser-toolbar) {
     display: flex;
     align-items: stretch;
 
-    width: var(--area-width, inherit);
-    height: var(--area-height, inherit);
+    width: var(--toolbar-width);
+    height: var(--toolbar-height);
 
-    min-height: var(--area-min-height);
+    min-height: var(--toolbar-min-height);
 
     background-color: transparent;
     color: var(--lwt-text-color);
@@ -21,7 +26,7 @@
 
     -moz-window-dragging: drag;
 
-    --area-min-height: 28px;
+    --toolbar-min-height: 28px;
 
     --csd-visibility: none;
 }

components/widgets/content/browser-button.css

@@ -16,9 +16,16 @@
     pointer-events: auto;
 }
 
+.browser-button .browser-button-container {
+    padding: 0 calc(var(--button-physical-height) * var(--button-inner-padding-scale, 0.25));
+    gap: calc(var(--button-physical-height) * var(--button-inner-gap-scale, 0.2));
+}
+
 .browser-button[mode=icons],
 :host([mode=icons]) .browser-button:not([mode]),
 [mode=icons]>.browser-button:not([mode]) {
+    aspect-ratio: 1;
+
     & .browser-button-container {
         justify-content: center;
 

components/widgets/content/browser-button.js

@@ -5,6 +5,10 @@
 class BrowserButton extends BrowserContextualMixin(HTMLButtonElement) {
 	constructor() {
 		super();
+
+		this.resizeObserver = new ResizeObserver(
+			this._onBrowserButtonResize.bind(this)
+		);
 	}
 
 	/**
@@ -51,6 +55,14 @@ class BrowserButton extends BrowserContextualMixin(HTMLButtonElement) {
 		};
 	}
 
+	/**
+	 * The button container element
+	 * @type {HTMLDivElement}
+	 */
+	get container() {
+		return this.querySelector(".browser-button-container");
+	}
+
 	/**
 	 * The icon of the browser button
 	 */
@@ -172,6 +184,22 @@ class BrowserButton extends BrowserContextualMixin(HTMLButtonElement) {
 		}
 	}
 
+	/**
+	 * Fired when the button's physical size is changed
+	 */
+	_onBrowserButtonResize() {
+		const { width, height } = this.container.getBoundingClientRect();
+
+		this.container.style.setProperty(
+			"--button-physical-width",
+			+width.toFixed(2) + "px"
+		);
+		this.container.style.setProperty(
+			"--button-physical-height",
+			+height.toFixed(2) + "px"
+		);
+	}
+
 	connectedCallback() {
 		this.classList.add("browser-button");
 		this.classList.toggle(
@@ -196,6 +224,8 @@ class BrowserButton extends BrowserContextualMixin(HTMLButtonElement) {
 			"focusout",
 			this._handleBrowserButtonEvent.bind(this)
 		);
+
+		this.resizeObserver.observe(this);
 	}
 
 	disconnectedCallback() {
@@ -207,6 +237,8 @@ class BrowserButton extends BrowserContextualMixin(HTMLButtonElement) {
 			"focusout",
 			this._handleBrowserButtonEvent.bind(this)
 		);
+
+		this.resizeObserver.disconnect();
 	}
 }
 

themes/shared/xul/input.css

@@ -178,10 +178,10 @@ html|button[primary],
 
 @media (prefers-contrast) {
 
-    button:not(:disabled),
+    button:not(:disabled, [inert]),
     select:not(:disabled),
-    xul|button:not(:disabled),
-    html|button:not(:disabled),
+    xul|button:not(:disabled, [inert]),
+    html|button:not(:disabled, [inert]),
     html|select:not(:disabled),
     ::slotted(menuitem:not([disabled])),
     ::slotted(menu:not([disabled])) {