First pass on moving from ResizeObserver to Container Queries, closes #…

…1018 (#1020)

CONTRIBUTING.md

@@ -173,7 +173,6 @@ This file has utility functions used throughout the codebase. All functions are
     * Used in collections and Mavo expressions.
 * `revocably` is an object with helpers that add/remove DOM elements and still remember the place in the DOM, even if other elements have been added in the meantime.
 * `inView` is an object that lets you execute code when something is in view in the viewport using an **intersectionObserver**.
-    * **resizeObserver** is used for the Mavo bar.
 
 ## node.js
 * `uid` is a unique ID for all nodes in a Mavo object. It's used for debugging.

src-css/_bar.scss

@@ -11,6 +11,8 @@
 	line-height: 1.5;
 	position: sticky;
 
+	container: mv-bar / inline-size;
+
 	@supports (position: sticky) {
 		z-index: 2;
 		top: 5px;
@@ -175,20 +177,25 @@
 	}
 
 	// Displaying mv-bar in small spaces
-	&.mv-compact {
-		.mv-status > span {
-			display: none;
+	@container mv-bar (width <= 40em) {
+		.mv-status {
+			// Don't wrap the username on multiple lines
+			white-space: nowrap;
+
+			& > span {
+				display: none;
+			}
 		}
 	}
 
-	&.mv-tiny {
+	@container mv-bar (width <= 25em) {
 		& > button,
 		& > .mv-button {
 			// Hide text
 			width: 1em;
 			position: relative;
 			overflow: hidden;
-			text-indent: -999em;
+			text-indent: calc(-infinity * 1em);
 
 			&::before {
 				position: absolute;

src/ui.bar.js

@@ -33,17 +33,8 @@ let _ = Mavo.UI.Bar = class Bar {
 			});
 		}
 
-		if (this.element.classList.contains("mv-compact")) {
-			this.noResize = true;
-		}
-
 		this.controls = _.getControls(this.template);
 
-		if (this.controls.length) {
-			// Measure height of 1 row
-			this.targetHeight = this.element.offsetHeight;
-		}
-
 		if (!this.custom) {
 			this.element.innerHTML = "";
 		}
@@ -63,6 +54,7 @@ let _ = Mavo.UI.Bar = class Bar {
 				this[id] = $.create("button", {
 					type: "button",
 					className: `mv-${id}`,
+					title: this.mavo._(id),
 					textContent: this.mavo._(id)
 				});
 			}
@@ -100,57 +92,9 @@ let _ = Mavo.UI.Bar = class Bar {
 			}
 		}
 
-		if (this.controls.length && !this.noResize) {
-			this.resize();
-
-			if (self.ResizeObserver) {
-				this.resizeObserver = Mavo.observeResize(this.element, entries => {
-					this.resize();
-				});
-			}
-		}
-
 		Mavo.observers.resume();
 	}
 
-	resize () {
-		if (!this.targetHeight) {
-			// We don't have a correct measurement for target height, abort
-			this.targetHeight = this.element.offsetHeight;
-			return;
-		}
-
-		this.resizeObserver?.disconnect();
-
-		this.element.classList.remove("mv-compact", "mv-tiny");
-
-		// Remove pointless tooltips
-		$$("button, .mv-button", this.element).forEach(button => {
-			if (button.title === button.textContent) {
-				button.title = "";
-			}
-		});
-
-		// Exceeded single row?
-		if (this.element.offsetHeight > this.targetHeight * 1.6) {
-			this.element.classList.add("mv-compact");
-
-			if (this.element.offsetHeight > this.targetHeight * 1.2) {
-				// Still too tall
-				this.element.classList.add("mv-tiny");
-
-				// Add tooltips, since only icons will be visible
-				$$("button, .mv-button", this.element).forEach(button => {
-					if (!button.title) {
-						button.title = button.textContent;
-					}
-				});
-			}
-		}
-
-		this.resizeObserver?.observe(this.element);
-	}
-
 	add (id) {
 		let o = _.controls[id];
 
@@ -159,10 +103,6 @@ let _ = Mavo.UI.Bar = class Bar {
 		}
 
 		Mavo.revocably.add(this[id], this.element);
-
-		if (!this.resizeObserver && !this.noResize) {
-			requestAnimationFrame(() => this.resize());
-		}
 	}
 
 	remove (id) {
@@ -173,10 +113,6 @@ let _ = Mavo.UI.Bar = class Bar {
 		if (o.cleanup) {
 			o.cleanup.call(this.mavo);
 		}
-
-		if (!this.resizeObserver && !this.noResize) {
-			requestAnimationFrame(() => this.resize());
-		}
 	}
 
 	toggle (id, add) {

src/util.js

@@ -615,31 +615,6 @@ var _ = $.extend(Mavo, {
 
 	escapeRegExp: s => s.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&"),
 
-	observeResize: function(element, callbackOrObserver) {
-		if (!self.ResizeObserver) {
-			return;
-		}
-
-		var previousRect = null;
-		var ro = callbackOrObserver instanceof ResizeObserver? callbackOrObserver : new ResizeObserver(entries => {
-			var contentRect = entries[entries.length - 1].contentRect;
-
-			if (previousRect
-				&& previousRect.width == contentRect.width
-				&& previousRect.height == contentRect.height) {
-				return;
-			}
-
-			callbackOrObserver(entries);
-
-			previousRect = contentRect;
-		});
-
-		ro.observe(element);
-
-		return ro;
-	},
-
 	Observer: class Observer {
 		constructor (element, attribute, callback, o = {}) {
 			if (callback instanceof MutationObserver) {