Adding more demos

sandbox/example-extension-marks-measures/index.html

@@ -0,0 +1 @@
+<script type="module" src="./index.js"></script>

sandbox/example-extension-marks-measures/index.js

@@ -0,0 +1,70 @@
+const then = performance.now();
+
+// These colors are a guess based on a few examples and AI generated
+const COLOR = [
+	"primary",
+	"primary-light",
+	"secondary",
+	"secondary-light",
+	"tertiary",
+	"tertiary-light",
+	"success",
+	"error",
+	"info",
+	"warning",
+];
+
+function addCustomMeasure(name) {
+	performance.measure(name, {
+		start: then,
+		end: performance.now(),
+		detail: {
+			devtools: {
+				metadata: {
+					extensionName: "Michal's Extension",
+					dataType: "custom-measure",
+				},
+				color: "tertiary-light",
+				track: "An Extension Track",
+				hintText: "This is a rendering task",
+				detailsPairs: [
+					["Description", "This is a child task"],
+					["Tip", "Do something about it"],
+				],
+			},
+		},
+	});
+}
+
+function addCustomMark(name) {
+	performance.mark("Custom mark", {
+		startTime: performance.now(),
+		detail: {
+			devtools: {
+				metadata: {
+					extensionName: "Michal's Extension",
+					dataType: "custom-mark",
+				},
+				color: "primary",
+				detailsPairs: [
+					[
+						"Description",
+						"This marks the start of a task",
+					],
+				],
+				hintText: "A mark",
+			},
+		},
+	});
+}
+
+
+setTimeout(() => {
+	addCustomMark("myMark");
+}, 200);
+
+setTimeout(() => {
+	addCustomMeasure("myMeasure");
+}, 100);
+
+console.log("loaded");

sandbox/force-mutation-observers/index.html

@@ -0,0 +1 @@
+<script type="module" src="./index.js"></script>

sandbox/force-mutation-observers/index.js

@@ -0,0 +1,77 @@
+const BLOCK = 50;
+
+function block(ms) {
+	const target = performance.now() + ms;
+	while (target > performance.now());
+}
+
+async function triggerSyncFetch(cb) {
+	const dataURI = "data:application/json,{}";
+	const response = await fetch(dataURI);
+	const result = await response.json();
+	cb(result);
+}
+
+async function prefetch() {
+	const response = await fetch('https://pokeapi.co/api/v2/pokemon/ditto');
+	const data = await response.json();
+	return data;
+}
+
+
+function triggerMutationObserver(cb) {
+	const targetNode = document.createElement('div');
+	const observer = new MutationObserver(cb);
+	// for (const mutation of mutationList) {
+	//     console.log('Mutation detected:', mutation.type);
+	// }
+	observer.observe(targetNode, { childList: true });
+
+	const dummyNode = document.createElement('span');
+	targetNode.appendChild(dummyNode);
+	// targetNode.removeChild(dummyNode);
+}
+
+function a() {
+	block(BLOCK);
+	b();
+}
+function b() {
+	block(BLOCK);
+	c();
+}
+function c() {
+	block(BLOCK);
+	triggerMutationObserver(function afterMutation() { block(BLOCK); });
+}
+
+async function dontAwaitFirstDoAwaitBetween() { a(); await 0; block(BLOCK); a(); }
+async function doAwaitFirstDoAwaitBetween() { a(); await 0; block(BLOCK); a(); }
+async function dontAwaitFirstDontAwaitBetween() { a(); block(BLOCK); a(); }
+async function doAwaitFirstDontAwaitBetween() { await 0; a(); block(BLOCK); a(); }
+
+scheduler.postTask(dontAwaitFirstDoAwaitBetween);
+scheduler.postTask(doAwaitFirstDoAwaitBetween);
+scheduler.postTask(dontAwaitFirstDontAwaitBetween);
+scheduler.postTask(doAwaitFirstDontAwaitBetween);
+
+async function testFetch() {
+	block(BLOCK);
+	triggerSyncFetch(function afterFetch() { block(BLOCK); });
+}
+
+scheduler.postTask(testFetch);
+
+
+async function testPrefetch() {
+	await prefetch();
+	block(BLOCK);
+
+	scheduler.postTask(async function afterPrefetch() {
+		block(BLOCK);
+		await prefetch();
+		block(BLOCK);
+	});
+}
+
+scheduler.postTask(testPrefetch);

sandbox/presentation-delay-marks-examples/index.html

@@ -0,0 +1,34 @@
+<script type="module">
+function block(ms) {
+	const target = performance.now() + ms;
+	while(performance.now() < target);
+}
+async function raf() {
+	return new Promise(resolve => requestAnimationFrame(resolve));
+}
+async function rafPoll() {
+	for(;;) {
+		await raf();
+	}
+}
+rafPoll();
+
+
+function updateUI() {
+	console.log('Button clicked');
+}
+
+function updateExpensiveAnalytics() {
+	console.log('Update expensive analytics');
+	block(1000);
+}
+
+document.getElementById('myButton').addEventListener('click', async () => {
+	updateUI();
+	await scheduler.yield();
+	updateExpensiveAnalytics()
+});
+
+</script>
+
+<button id="myButton">Click me</button>

sandbox/web-mightals.js/apps/test/debugOperators.js

@@ -0,0 +1,6 @@
+function debugOperators(operatorFunction, name) {
+	return function (source) {
+		console.log(`Applying operator: ${name}`);
+		return operatorFunction(source);
+	};
+}