Display a modal dialog if threads are unavailable in the web editor

Threads are required for the web editor to function. If the web server
is not correctly configured, threads won't be available.

This makes troubleshooting easier for people looking to self-host
the web editor.

1 files changed, 48 insertions, 5 deletions

diff --git a/misc/dist/html/editor.html b/misc/dist/html/editor.html
index a681a2a1c3..3e84d30113 100644
--- a/misc/dist/html/editor.html
+++ b/misc/dist/html/editor.html
@@ -68,6 +68,11 @@
 			height: 100%;
 			overflow: auto;
 			background-color: hsla(0, 0%, 0%, 0.5);
+			text-align: left;
+		}
+
+		.welcome-modal-title {
+			text-align: center;
 		}
 
 		.welcome-modal-content {
@@ -238,7 +243,7 @@
 		onclick="if (event.target === this) closeWelcomeModal(false)"
 	>
 		<div class="welcome-modal-content">
-			<h2 id="welcome-modal-title">Important - Please read before continuing</h2>
+			<h2 id="welcome-modal-title" class="welcome-modal-title">Important - Please read before continuing</h2>
 			<div id="welcome-modal-description">
 				<p>
 					The Godot Web Editor has some limitations compared to the native version.
@@ -254,9 +259,38 @@
 					>Web editor documentation</a> for usage instructions and limitations.
 				</p>
 			</div>
-			<button id="welcome-modal-dismiss" class="btn" type="button" onclick="closeWelcomeModal(true)" style="margin-top: 1rem">
-				OK, don't show again
-			</button>
+			<div id="welcome-modal-description-no-cross-origin-isolation" style="display: none">
+				<p>
+					The web server does not support cross-origin isolation,
+					which is required for the Godot Web Editor to function.
+				</p>
+				<p>
+					<strong>Reasons for cross-origin isolation being disabled:</strong>
+					<ul>
+						<li id="welcome-modal-reason-not-secure">
+							This page is not served from a secure context (HTTPS <i>or</i> localhost).
+						</li>
+						<li>
+							This page may not be served with cross-origin isolation headers
+							(check with the developer tools' Network tab).
+						</li>
+					</ul>
+				</p>
+				<p>
+					If you are self-hosting the web editor,
+					refer to
+					<a
+						href="https://docs.godotengine.org/en/latest/tutorials/export/exporting_for_web.html#threads"
+						target="_blank"
+						rel="noopener"
+					>Exporting for the Web - Threads</a> for more information.
+				</p>
+			</div>
+			<div style="text-align: center">
+				<button id="welcome-modal-dismiss" class="btn" type="button" onclick="closeWelcomeModal(true)" style="margin-top: 1rem">
+					OK, don't show again
+				</button>
+			</div>
 		</div>
 	</div>
 	<div id="tabs-buttons">
@@ -330,7 +364,16 @@
 				navigator.serviceWorker.register("service.worker.js");
 			}
 
-			if (localStorage.getItem("welcomeModalDismissed") !== 'true') {
+			if (!crossOriginIsolated) {
+				// Display error dialog as threading support is required for the editor.
+				setButtonEnabled('startButton', false);
+				document.getElementById("welcome-modal-description").style.display = "none";
+				document.getElementById("welcome-modal-description-no-cross-origin-isolation").style.display = "block";
+				document.getElementById("welcome-modal-dismiss").style.display = "none";
+				document.getElementById("welcome-modal-reason-not-secure").style.display = window.isSecureContext ? "none" : "list-item";
+			}
+
+			if (!crossOriginIsolated || localStorage.getItem("welcomeModalDismissed") !== 'true') {
 				document.getElementById("welcome-modal").style.display = "block";
 				document.getElementById("welcome-modal-dismiss").focus();
 			}