Updates

sandbox/soft-nav-test-dom-edit-append-tree/index.html

@@ -6,6 +6,9 @@
 	<button id="clone_template">Clone Template</button>
 	<button id="detached_doc">Detached Doc</button>
 	<button id="dom_parser">Dom Parser</button>
+  <form id="form_submit">
+    <button type="submit">Submit Form</button>
+  </form>
 
 	<main id="main">Content</main>
 
@@ -14,7 +17,15 @@
 
 <script type="module">
 
+function queue_navigation_task(route) {
+  setTimeout(() => {
+		history.pushState(null, '', route);
+	}, 1000);
+}
+
 function update_dom_mod(target) {
+  queue_navigation_task(target.id);
+
 	const content = document.createElement('div');
 	target.replaceChildren(content);
 	content.textContent = 'Hi ';
@@ -28,6 +39,8 @@
 }
 
 function update_dom_mod_order(target) {
+  queue_navigation_task(target.id);
+
 	const content = document.createElement('div');
 	content.textContent = 'Hi ';
 	const table = document.createElement('table');
@@ -43,17 +56,23 @@
 
 
 function update_inner_html(target) {
+  queue_navigation_task(target.id);
+
 	target.innerHTML = '<div>Hi <table><tr><td>INNER HTML</td></tr></table></div>';
 }
 
 function update_clone_template(target) {
+  queue_navigation_task(target.id);
+
 	const template = document.createElement('template');
 	template.innerHTML = '<div>Hi <table><tr><td>CLONE TEMPLATE</td></tr></table></div>';
 	const content = template.content.cloneNode(true);
 	target.replaceChildren(content);
 }
 
 function update_detached_doc(target) {
+  queue_navigation_task(target.id);
+
 	const doc = document.implementation.createHTMLDocument('');
 	doc.open();
 	doc.write('<div>Hi <table><tr><td>DETACHED DOC</td></tr></table></div>');
@@ -62,6 +81,8 @@
 }
 
 function update_dom_parser(target) {
+  queue_navigation_task(target.id);
+
 	const parser = new DOMParser();
 	const doc = parser.parseFromString('<div>Hi <table><tr><td>DOM PARSER</td></tr></table></div>', 'text/html');
 	const content = doc.body.firstChild;
@@ -76,11 +97,12 @@
 detached_doc.addEventListener('click', event => update_detached_doc(main));
 dom_parser.addEventListener('click', event => update_dom_parser(main));
 
-document.addEventListener('click', event => {
-	setTimeout(() => {
-		history.pushState(null, '', event.target.id);
-	}, 1000);
-})
+form_submit.addEventListener("submit", (event) => {
+  event.preventDefault();
+  // const formData = new FormData(form); // Get form data
+  // const data = Object.fromEntries(formData); // Convert to object
+  update_dom_mod();
+});
 
 </script>
 

sandbox/unload-event-timing/snippet.js

@@ -0,0 +1,76 @@
+/*
+ * Add this snippet to any page.
+ */
+
+// Because unload freezes console.log, rely on a net-log tunnel
+async function log(...messages) {
+	// Also log the messages to the console
+	console.log(...messages);
+
+	try {
+		const response = await fetch('http://localhost:8080/log', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify({ messages })
+		});
+	} catch (error) {
+		console.error('log fetch() error:', error);
+	}
+}
+
+function block(ms) {
+	const target = performance.now() + ms;
+	while (performance.now() < target);
+}
+function openNewTab() {
+	let newWindow = window.open('https://en.wikipedia.org', '_blank');
+}
+function syncNavigate() {
+	window.location.href = 'https://en.wikipedia.org';
+}
+function measureNextPaint() {
+	// The first rAF represents rendering start (BMF).
+	// BMF in Chrome will be prioritized after input, and so may get scheduled before visibilitychange event
+	// But, the visibilitychange event might get "flushed" before rAF.  Let's see...
+	requestAnimationFrame(() => {
+		log('rAF1');
+		// The second rAF represents a time which might correspond to the next vsync, which
+		// might be aligned with presentation time.  It's not innacurate.
+		requestAnimationFrame(() => {
+			log('rAF2');
+		});
+	});
+	// Alternatively, leverage element timing...
+}
+document.documentElement.addEventListener('pointerup', () => {
+	log('pointerup start');
+	block(1000);
+	log('pointerup end');
+
+	// Run these after pointerup is done blocking, so you have time to add more input
+	measureNextPaint();
+	for (let i = 0; i < 10; i++) {
+		setTimeout(() => {
+			log('timeout first?');
+			block(50);
+		}, 0);
+		scheduler.postTask(() => {
+			log('user-blocking first?');
+			block(50);
+		}, { priority: 'user-blocking' });
+	}
+
+	// openNewTab();
+	syncNavigate();
+});
+document.documentElement.addEventListener('click', () => {
+	log('click start');
+	block(1000);
+	log('click end');
+});
+window.addEventListener('visibilitychange', event => {
+	log('visibilitychange', performance.now() - event.timeStamp, 'ago')
+	block(1000);
+});