Svelte: fix pre-init error check and Properties panel

frontend-svelte/public/index.html

@@ -52,22 +52,26 @@
 
 	// Display an error if the browser is incompatible with a required API
 	// This is run outside the JS code bundle in case unsupported features cause a syntax error when parsing the bundle, preventing the any bundle code from running
-	// TODO: Svelte: reenable this
-	let error;
+	let incompatibility;
 	if (!("BigUint64Array" in window)) {
-		error = `
-<style>
-	body::after { content: none; }
-	h2, p, a { text-align: center; color: white; }
-</style>
-<h2>This browser is too old to run Graphite</h2>
-<p>Please upgrade to a modern web browser such as the latest Firefox, Chrome, Edge, or Safari version 15 or newer.</p>
-<p>(The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt64Array#browser_compatibility" target="_blank"><code>BigInt64Array</code></a>
-JavaScript API must be supported by the browser for Graphite to function.)</p>
-		`.trim();
+		incompatibility = `
+			<style>
+				body::after { content: none; }
+				h2, p, a { text-align: center; color: #eee; font-family: "Source Sans Pro", Arial, sans-serif; }
+			</style>
+			<h2>This browser is too old to run Graphite</h2>
+			<p>Please upgrade to a modern web browser such as the latest Firefox, Chrome, Edge, or Safari version 15 or newer.</p>
+			<p>(The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt64Array#browser_compatibility" target="_blank"><code>BigInt64Array</code></a>
+			JavaScript API must be supported by the browser for Graphite to function.)</p>
+			`.trim();
+	}
+
+	// Load the editor application or display the incompatibility message
+	if (!incompatibility) {
+		import("/build/bundle.js");
+	} else {
+		document.body.innerHTML += incompatibility;
 	}
-	if (error) document.body.innerHTML = error;
 	</script>
-	<script src="/build/bundle.js"></script>
 </body>
 </html>

frontend-svelte/src/components/panels/LayerTree.svelte

@@ -66,6 +66,7 @@
 
 		editor.subscriptions.subscribeJsMessage(UpdateLayerTreeOptionsLayout, (updateLayerTreeOptionsLayout) => {
 			patchWidgetLayout(layerTreeOptionsLayout, updateLayerTreeOptionsLayout);
+			layerTreeOptionsLayout = layerTreeOptionsLayout;
 		});
 
 		editor.subscriptions.subscribeJsMessage(UpdateDocumentLayerDetails, (updateDocumentLayerDetails) => {

frontend-svelte/src/components/panels/Properties.svelte

@@ -16,10 +16,12 @@
 	onMount(() => {
 		editor.subscriptions.subscribeJsMessage(UpdatePropertyPanelOptionsLayout, (updatePropertyPanelOptionsLayout) => {
 			patchWidgetLayout(propertiesOptionsLayout, updatePropertyPanelOptionsLayout);
+			propertiesOptionsLayout = propertiesOptionsLayout;
 		});
 
 		editor.subscriptions.subscribeJsMessage(UpdatePropertyPanelSectionsLayout, (updatePropertyPanelSectionsLayout) => {
 			patchWidgetLayout(propertiesSectionsLayout, updatePropertyPanelSectionsLayout);
+			propertiesSectionsLayout = propertiesSectionsLayout;
 		});
 	});
 </script>

frontend-svelte/src/components/widgets/inputs/OptionalInput.svelte

@@ -18,7 +18,7 @@
 	.optional-input {
 		flex-grow: 0;
 
-		label {
+		.checkbox-input label {
 			align-items: center;
 			justify-content: center;
 			white-space: nowrap;
@@ -29,7 +29,7 @@
 			box-sizing: border-box;
 		}
 
-		&.disabled label {
+		&.disabled .checkbox-input label {
 			border: 1px solid var(--color-4-dimgray);
 		}
 	}