Merge pull request #57006 from Calinou/web-editor-no-threads-modal

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">
@@ -360,7 +394,16 @@
 				});
 			}
 
-			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();
 			}