From b3ad8718ebbea6952cd7c6200581ef6ca4570a05 Mon Sep 17 00:00:00 2001
From: Marek Zeman <marekzeman91@gmail.com>
Date: Thu, 17 Oct 2024 21:59:44 +0200
Subject: [PATCH 1/2] Optimize the Web-Editor build and styles

---
 misc/dist/html/editor.html                  | 388 +++++---------------
 misc/dist/html/manifest.json                |   2 +-
 misc/dist/html/service-worker.js            |  29 +-
 misc/dist/html/styles.css                   | 242 ++++++++++++
 platform/web/emscripten_helpers.py          |  31 +-
 platform/web/js/libs/library_godot_input.js |  72 ++--
 6 files changed, 389 insertions(+), 375 deletions(-)
 create mode 100644 misc/dist/html/styles.css

diff --git a/misc/dist/html/editor.html b/misc/dist/html/editor.html
index 3fc24e6b76b..eed0c8553e4 100644
--- a/misc/dist/html/editor.html
+++ b/misc/dist/html/editor.html
@@ -9,8 +9,8 @@
 		<meta name="apple-mobile-web-app-capable" content="yes">
 		<meta name="application-name" content="Redot">
 		<meta name="apple-mobile-web-app-title" content="Redot">
-		<meta name="theme-color" content="#202531">
-		<meta name="msapplication-navbutton-color" content="#202531">
+		<meta name="theme-color" content="#241f1f">
+		<meta name="msapplication-navbutton-color" content="#241f1f">
 		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
 		<meta name="msapplication-starturl" content="/latest">
 		<meta property="og:site_name" content="Redot Engine">
@@ -24,211 +24,7 @@
 		<link rel="apple-touch-icon" type="image/png" href="favicon.png">
 		<link rel="manifest" href="manifest.json">
 		<title>Redot Engine Web Editor (___GODOT_VERSION___)</title>
-		<style>
-*:focus {
-	/* More visible outline for better keyboard navigation. */
-	outline: 0.125rem solid hsl(220, 100%, 62.5%);
-	/* Make the outline always appear above other elements. */
-	/* Otherwise, one of its sides can be hidden by tabs in the Download and More layouts. */
-	position: relative;
-}
-
-body {
-	touch-action: none;
-	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-	margin: 0;
-	border: 0 none;
-	padding: 0;
-	text-align: center;
-	background-color: #333b4f;
-	overflow: hidden;
-}
-
-a {
-	color: hsl(205, 100%, 75%);
-	text-decoration-color: hsla(205, 100%, 75%, 0.3);
-	text-decoration-thickness: 0.125rem;
-}
-
-a:hover {
-	filter: brightness(117.5%);
-}
-
-a:active {
-	filter: brightness(82.5%);
-}
-
-.welcome-modal {
-	display: none;
-	position: fixed;
-	z-index: 1;
-	left: 0;
-	top: 0;
-	width: 100%;
-	height: 100%;
-	overflow: auto;
-	background-color: hsla(0, 0%, 0%, 0.5);
-	text-align: left;
-}
-
-.welcome-modal-title {
-	text-align: center;
-}
-
-.welcome-modal-content {
-	background-color: #333b4f;
-	box-shadow: 0 0.25rem 0.25rem hsla(0, 0%, 0%, 0.5);
-	line-height: 1.5;
-	max-width: 38rem;
-	margin: 4rem auto 0 auto;
-	color: white;
-	border-radius: 0.5rem;
-	padding: 1rem 1rem 2rem 1rem;
-}
-
-#tabs-buttons {
-	/* Match the default background color of the editor window for a seamless appearance. */
-	background-color: #202531;
-}
-
-#tab-game {
-	/* Use a pure black background to better distinguish the running project */
-	/* from the editor window, and to use a more neutral background color (no tint). */
-	background-color: black;
-	/* Make the background span the entire page height. */
-	min-height: 100vh;
-}
-
-#canvas, #gameCanvas {
-	display: block;
-	margin: 0;
-	color: white;
-}
-
-/* Don't show distracting focus outlines for the main tabs' contents. */
-#tab-editor canvas:focus,
-#tab-game canvas:focus,
-#canvas:focus,
-#gameCanvas:focus {
-	outline: none;
-}
-
-.godot {
-	color: #e0e0e0;
-	background-color: #3b3943;
-	background-image: linear-gradient(to bottom, #403e48, #35333c);
-	border: 1px solid #45434e;
-	box-shadow: 0 0 1px 1px #2f2d35;
-}
-
-.btn {
-	appearance: none;
-	color: #e0e0e0;
-	background-color: #262c3b;
-	border: 1px solid #202531;
-	padding: 0.5rem 1rem;
-	margin: 0 0.5rem;
-}
-
-.btn:not(:disabled):hover {
-	color: #e0e1e5;
-	border-color: #666c7b;
-}
-
-.btn:active {
-	border-color: #699ce8;
-	color: #699ce8;
-}
-
-.btn:disabled {
-	color: #aaa;
-	border-color: #242937;
-}
-
-.btn.tab-btn {
-	padding: 0.3rem 1rem;
-}
-
-.btn.close-btn {
-	padding: 0.3rem 1rem;
-	margin-left: -0.75rem;
-	font-weight: 700;
-}
-
-/* Status display */
-
-#status {
-	position: absolute;
-	left: 0;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	/* don't consume click events - make children visible explicitly */
-	visibility: hidden;
-}
-
-#status-progress {
-	width: 366px;
-	height: 7px;
-	background-color: #38363A;
-	border: 1px solid #444246;
-	padding: 1px;
-	box-shadow: 0 0 2px 1px #1B1C22;
-	border-radius: 2px;
-	visibility: visible;
-}
-
-@media only screen and (orientation:portrait) {
-	#status-progress {
-		width: 61.8%;
-	}
-}
-
-#status-progress-inner {
-	height: 100%;
-	width: 0;
-	box-sizing: border-box;
-	transition: width 0.5s linear;
-	background-color: #202020;
-	border: 1px solid #222223;
-	box-shadow: 0 0 1px 1px #27282E;
-	border-radius: 3px;
-}
-
-#status-indeterminate {
-	visibility: visible;
-	position: relative;
-}
-
-#status-indeterminate > div {
-	width: 4.5px;
-	height: 0;
-	border-style: solid;
-	border-width: 9px 3px 0 3px;
-	border-color: #2b2b2b transparent transparent transparent;
-	transform-origin: center 21px;
-	position: absolute;
-}
-
-#status-indeterminate > div:nth-child(1) { transform: rotate( 22.5deg); }
-#status-indeterminate > div:nth-child(2) { transform: rotate( 67.5deg); }
-#status-indeterminate > div:nth-child(3) { transform: rotate(112.5deg); }
-#status-indeterminate > div:nth-child(4) { transform: rotate(157.5deg); }
-#status-indeterminate > div:nth-child(5) { transform: rotate(202.5deg); }
-#status-indeterminate > div:nth-child(6) { transform: rotate(247.5deg); }
-#status-indeterminate > div:nth-child(7) { transform: rotate(292.5deg); }
-#status-indeterminate > div:nth-child(8) { transform: rotate(337.5deg); }
-
-#status-notice {
-	margin: 0 100px;
-	line-height: 1.3;
-	visibility: visible;
-	padding: 4px 6px;
-}
-		</style>
+		<link rel="stylesheet" href="styles.css">
 	</head>
 	<body>
 		<div
@@ -280,11 +76,17 @@ <h2 id="welcome-modal-title" class="welcome-modal-title">Important - Please read
 			</div>
 		</div>
 		<div id="tabs-buttons">
-			<button id="btn-tab-loader" class="btn tab-btn" onclick="showTab('loader')">Loader</button>
-			<button id="btn-tab-editor" class="btn tab-btn" disabled="disabled" onclick="showTab('editor')">Editor</button>
-			<button id="btn-close-editor" class="btn close-btn" disabled="disabled" onclick="closeEditor()">×</button>
-			<button id="btn-tab-game" class="btn tab-btn" disabled="disabled" onclick="showTab('game')">Game</button>
-			<button id="btn-close-game" class="btn close-btn" disabled="disabled" onclick="closeGame()">×</button>
+			<div class="btn-tab active">
+				<button id="btn-tab-loader" class="btn tab-btn" onclick="showTab('loader')">Loader</button>
+			</div>
+			<div class="btn-tab">
+				<button id="btn-tab-editor" class="btn tab-btn" disabled="disabled" onclick="showTab('editor')">Editor</button>
+				<button id="btn-close-editor" class="btn close-btn" disabled="disabled" onclick="closeEditor()">×</button>
+			</div>
+			<div class="btn-tab">
+				<button id="btn-tab-game" class="btn tab-btn" disabled="disabled" onclick="showTab('game')">Game</button>
+				<button id="btn-close-game" class="btn close-btn" disabled="disabled" onclick="closeGame()">×</button>
+			</div>
 			<button id="btn-tab-update" class="btn tab-btn" style="display: none;">Update</button>
 		</div>
 		<div id="tabs">
@@ -345,14 +147,15 @@ <h2 id="welcome-modal-title" class="welcome-modal-title">Important - Please read
 					<div></div>
 					<div></div>
 				</div>
-				<div id="status-notice" class="godot" style="display: none;"></div>
+				<div id="status-notice" class="redot" style="display: none;"></div>
 			</div>
 		</div>
 		<script>
+const byId = sel => document.getElementById(sel);
 window.addEventListener('load', () => {
 	function notifyUpdate(sw) {
-		const btn = document.getElementById('btn-tab-update');
-		btn.onclick = function () {
+		const btn = byId('btn-tab-update');
+		btn.onclick = () => {
 			if (!window.confirm('Are you sure you want to update?\nClicking "OK" will reload all active instances!')) {
 				return;
 			}
@@ -363,14 +166,14 @@ <h2 id="welcome-modal-title" class="welcome-modal-title">Important - Please read
 		btn.style.display = '';
 	}
 	if ('serviceWorker' in navigator) {
-		try {
-			navigator.serviceWorker.register('service.worker.js').then(function (reg) {
+		navigator.serviceWorker.register('service.worker.js').then(
+			reg => {
 				if (reg.waiting) {
 					notifyUpdate(reg.waiting);
 				}
-				reg.addEventListener('updatefound', function () {
+				reg.addEventListener('updatefound', () => {
 					const update = reg.installing;
-					update.addEventListener('statechange', function () {
+					update.addEventListener('statechange', () => {
 						if (update.state === 'installed') {
 							// It's a new install, claim and perform aggressive caching.
 							if (!reg.active) {
@@ -381,10 +184,11 @@ <h2 id="welcome-modal-title" class="welcome-modal-title">Important - Please read
 						}
 					});
 				});
-			});
-		} catch (e) {
-			console.error('Error while registering service worker:', e);
-		}
+			},
+			err => {
+				console.error('Error while registering service worker:', err);
+			}
+		);
 	}
 
 	const missing = Engine.getMissingFeatures({
@@ -392,11 +196,11 @@ <h2 id="welcome-modal-title" class="welcome-modal-title">Important - Please read
 	});
 	if (missing.length) {
 		// Display error dialog as threading support is required for the editor.
-		document.getElementById('startButton').disabled = 'disabled';
-		document.getElementById('welcome-modal-description').style.display = 'none';
-		document.getElementById('welcome-modal-missing-description').style.display = 'block';
-		document.getElementById('welcome-modal-dismiss').style.display = 'none';
-		const list = document.getElementById('welcome-modal-missing-list');
+		byId('startButton').disabled = 'disabled';
+		byId('welcome-modal-description').style.display = 'none';
+		byId('welcome-modal-missing-description').style.display = 'block';
+		byId('welcome-modal-dismiss').style.display = 'none';
+		const list = byId('welcome-modal-missing-list');
 		for (let i = 0; i < missing.length; i++) {
 			const node = document.createElement('li');
 			node.innerText = missing[i];
@@ -405,19 +209,19 @@ <h2 id="welcome-modal-title" class="welcome-modal-title">Important - Please read
 	}
 
 	if (missing.length || localStorage.getItem('welcomeModalDismissed') !== 'true') {
-		document.getElementById('welcome-modal').style.display = 'block';
-		document.getElementById('welcome-modal-dismiss').focus();
+		byId('welcome-modal').style.display = 'block';
+		byId('welcome-modal-dismiss').focus();
 	}
 });
 
 function closeWelcomeModal(dontShowAgain) { // eslint-disable-line no-unused-vars
-	document.getElementById('welcome-modal').style.display = 'none';
+	byId('welcome-modal').style.display = 'none';
 	if (dontShowAgain) {
 		localStorage.setItem('welcomeModalDismissed', 'true');
 	}
 }
 		</script>
-		<script src="godot.editor.js"></script>
+		<script src="redot.editor.js"></script>
 		<script>
 let editor = null;
 let game = null;
@@ -427,17 +231,11 @@ <h2 id="welcome-modal-title" class="welcome-modal-title">Important - Please read
 
 function clearPersistence() { // eslint-disable-line no-unused-vars
 	function deleteDB(path) {
-		return new Promise(function (resolve, reject) {
+		return new Promise((resolve, reject) => {
 			const req = indexedDB.deleteDatabase(path);
-			req.onsuccess = function () {
-				resolve();
-			};
-			req.onerror = function (err) {
-				reject(err);
-			};
-			req.onblocked = function (err) {
-				reject(err);
-			};
+			req.onsuccess = () => resolve();
+			req.onerror = err => reject(err);
+			req.onblocked = err => reject(err);
 		});
 	}
 	if (!window.confirm('Are you sure you want to delete all the locally stored files?\nClicking "OK" will permanently remove your projects and editor settings!')) {
@@ -445,29 +243,35 @@ <h2 id="welcome-modal-title" class="welcome-modal-title">Important - Please read
 	}
 	Promise.all([
 		deleteDB('/home/web_user'),
-	]).then(function (results) {
+	]).then(() => {
 		alert('Done.');
-	}).catch(function (err) {
+	}).catch(() => {
 		alert('Error deleting local files. Please retry after reloading the page.');
 	});
 }
 
 function selectVideoMode() {
-	const select = document.getElementById('videoMode');
+	const select = byId('videoMode');
 	video_driver = select.selectedOptions[0].value;
 }
 
-const tabs = [
-	document.getElementById('tab-loader'),
-	document.getElementById('tab-editor'),
-	document.getElementById('tab-game'),
+const tabsLink = Array.from(document.querySelectorAll('#tabs-buttons .tab-btn'));
+const tabsContent = [
+	byId('tab-loader'),
+	byId('tab-editor'),
+	byId('tab-game'),
 ];
 function showTab(name) {
-	tabs.forEach(function (elem) {
+	tabsLink.forEach(elem => {
+		elem.parentElement.classList.toggle('active', elem.id === `btn-tab-${name}`);
+	});
+
+	tabsContent.forEach(elem => {
 		if (elem.id === `tab-${name}`) {
-			elem.style.display = 'block';
+			elem.style.display = '';
+
 			if (name === 'editor' || name === 'game') {
-				const canvas = document.getElementById(`${name}-canvas`);
+				const canvas = byId(`${name}-canvas`);
 				canvas.focus();
 			}
 		} else {
@@ -477,11 +281,7 @@ <h2 id="welcome-modal-title" class="welcome-modal-title">Important - Please read
 }
 
 function setButtonEnabled(id, enabled) {
-	if (enabled) {
-		document.getElementById(id).disabled = '';
-	} else {
-		document.getElementById(id).disabled = 'disabled';
-	}
+	byId(id).disabled = enabled ? '' : 'disabled';
 }
 
 function setLoaderEnabled(enabled) {
@@ -512,13 +312,13 @@ <h2 id="welcome-modal-title" class="welcome-modal-title">Important - Please read
 	const INDETERMINATE_STATUS_STEP_MS = 100;
 	const persistentPaths = ['/home/web_user'];
 
-	let editorCanvas = document.getElementById('editor-canvas');
-	let gameCanvas = document.getElementById('game-canvas');
-	const statusProgress = document.getElementById('status-progress');
-	const statusProgressInner = document.getElementById('status-progress-inner');
-	const statusIndeterminate = document.getElementById('status-indeterminate');
-	const statusNotice = document.getElementById('status-notice');
-	const headerDiv = document.getElementById('tabs-buttons');
+	let editorCanvas = byId('editor-canvas');
+	let gameCanvas = byId('game-canvas');
+	const statusProgress = byId('status-progress');
+	const statusProgressInner = byId('status-progress-inner');
+	const statusIndeterminate = byId('status-indeterminate');
+	const statusNotice = byId('status-notice');
+	const headerDiv = byId('tabs-buttons');
 
 	let initializing = true;
 	let statusMode = 'hidden';
@@ -572,16 +372,14 @@ <h2 id="welcome-modal-title" class="welcome-modal-title">Important - Please read
 		}
 	}
 
-	setStatusMode = function (mode) {
+	setStatusMode = mode => {
 		if (statusMode === mode || !initializing) {
 			return;
 		}
 		[statusProgress, statusIndeterminate, statusNotice].forEach((elem) => {
 			elem.style.display = 'none';
 		});
-		animationCallbacks = animationCallbacks.filter(function (value) {
-			return (value !== animateStatusIndeterminate);
-		});
+		animationCallbacks = animationCallbacks.filter(value => (value !== animateStatusIndeterminate));
 		switch (mode) {
 		case 'progress':
 			statusProgress.style.display = 'block';
@@ -601,7 +399,7 @@ <h2 id="welcome-modal-title" class="welcome-modal-title">Important - Please read
 		statusMode = mode;
 	};
 
-	setStatusNotice = function (text) {
+	setStatusNotice = (text = '') => {
 		while (statusNotice.lastChild) {
 			statusNotice.removeChild(statusNotice.lastChild);
 		}
@@ -617,7 +415,7 @@ <h2 id="welcome-modal-title" class="welcome-modal-title">Important - Please read
 		'unloadAfterInit': false,
 		'canvas': gameCanvas,
 		'canvasResizePolicy': 1,
-		'onExit': function () {
+		'onExit': () => {
 			gameCanvas = replaceCanvas(gameCanvas);
 			setGameTabEnabled(false);
 			showTab('editor');
@@ -625,17 +423,13 @@ <h2 id="welcome-modal-title" class="welcome-modal-title">Important - Please read
 		},
 	};
 
-	let OnEditorExit = function () {
+	let OnEditorExit = () => {
 		showTab('loader');
 		setLoaderEnabled(true);
 	};
 	function Execute(args) {
-		const is_editor = args.filter(function (v) {
-			return v === '--editor' || v === '-e';
-		}).length !== 0;
-		const is_project_manager = args.filter(function (v) {
-			return v === '--project-manager';
-		}).length !== 0;
+		const is_editor = args.filter(v => v === '--editor' || v === '-e').length !== 0;
+		const is_project_manager = args.filter(v => v === '--project-manager').length !== 0;
 		const is_game = !is_editor && !is_project_manager;
 		if (video_driver) {
 			args.push('--rendering-driver', video_driver);
@@ -649,20 +443,20 @@ <h2 id="welcome-modal-title" class="welcome-modal-title">Important - Please read
 			setGameTabEnabled(true);
 			game = new Engine(gameConfig);
 			showTab('game');
-			game.init().then(function () {
-				requestAnimationFrame(function () {
-					game.start({ 'args': args, 'canvas': gameCanvas }).then(function () {
+			game.init().then(() => {
+				requestAnimationFrame(() => {
+					game.start({ 'args': args, 'canvas': gameCanvas }).then(() => {
 						gameCanvas.focus();
 					});
 				});
 			});
 		} else { // New editor instances will be run in the same canvas. We want to wait for it to exit.
-			OnEditorExit = function (code) {
+			OnEditorExit = () => {
 				setLoaderEnabled(true);
-				setTimeout(function () {
-					editor.init().then(function () {
+				setTimeout(() => {
+					editor.init().then(() => {
 						setLoaderEnabled(false);
-						OnEditorExit = function () {
+						OnEditorExit = () => {
 							showTab('loader');
 							setLoaderEnabled(true);
 						};
@@ -676,7 +470,7 @@ <h2 id="welcome-modal-title" class="welcome-modal-title">Important - Please read
 
 	const editorConfig = {
 		'unloadAfterInit': false,
-		'onProgress': function progressFunction(current, total) {
+		'onProgress': (current, total) => {
 			if (total > 0) {
 				statusProgressInner.style.width = `${(current / total) * 100}%`;
 				setStatusMode('progress');
@@ -692,7 +486,7 @@ <h2 id="welcome-modal-title" class="welcome-modal-title">Important - Please read
 		},
 		'canvas': editorCanvas,
 		'canvasResizePolicy': 0,
-		'onExit': function () {
+		'onExit': () => {
 			editorCanvas = replaceCanvas(editorCanvas);
 			if (OnEditorExit) {
 				OnEditorExit();
@@ -720,7 +514,7 @@ <h2 id="welcome-modal-title" class="welcome-modal-title">Important - Please read
 		displayFailureNotice('WebGL not available');
 	} else {
 		setStatusMode('indeterminate');
-		editor.init('godot.editor').then(function () {
+		editor.init('redot.editor').then(() => {
 			if (zip) {
 				editor.copyToFS('/tmp/preload.zip', zip);
 			}
@@ -737,7 +531,7 @@ <h2 id="welcome-modal-title" class="welcome-modal-title">Important - Please read
 			if (video_driver) {
 				args.push('--rendering-driver', video_driver);
 			}
-			editor.start({ 'args': args, 'persistentDrops': true }).then(function () {
+			editor.start({ 'args': args, 'persistentDrops': true }).then(() => {
 				setStatusMode('hidden');
 				initializing = false;
 			});
@@ -745,20 +539,14 @@ <h2 id="welcome-modal-title" class="welcome-modal-title">Important - Please read
 	}
 }
 
-function preloadZip(target) {
-	return new Promise(function (resolve, reject) {
-		if (target.files.length > 0) {
-			target.files[0].arrayBuffer().then(function (data) {
-				resolve(data);
-			});
-		} else {
-			resolve();
-		}
-	});
+async function preloadZip(target) {
+	if (target.files.length > 0) {
+		return target.files[0].arrayBuffer();
+	}
 }
 
-document.getElementById('startButton').onclick = function () {
-	preloadZip(document.getElementById('zip-file')).then(function (zip) {
+byId('startButton').onclick = () => {
+	preloadZip(byId('zip-file')).then(zip => {
 		startEditor(zip);
 	});
 };
diff --git a/misc/dist/html/manifest.json b/misc/dist/html/manifest.json
index b799ea00031..6b651cbaa76 100644
--- a/misc/dist/html/manifest.json
+++ b/misc/dist/html/manifest.json
@@ -3,7 +3,7 @@
   "short_name": "Redot",
   "description": "Multi-platform 2D and 3D game engine with a feature-rich editor (Web edition)",
   "lang": "en",
-  "start_url": "./godot.editor.html",
+  "start_url": "./redot.editor.html",
   "display": "standalone",
   "theme_color": "#202531",
   "icons": [
diff --git a/misc/dist/html/service-worker.js b/misc/dist/html/service-worker.js
index 4f82d8be349..64fda4ebd2b 100644
--- a/misc/dist/html/service-worker.js
+++ b/misc/dist/html/service-worker.js
@@ -11,13 +11,13 @@ const CACHE_NAME = CACHE_PREFIX + CACHE_VERSION;
 /** @type {string} */
 const OFFLINE_URL = '___GODOT_OFFLINE_PAGE___';
 /** @type {boolean} */
-const ENSURE_CROSSORIGIN_ISOLATION_HEADERS = ___GODOT_ENSURE_CROSSORIGIN_ISOLATION_HEADERS___;
+const ENSURE_CROSSORIGIN_ISOLATION_HEADERS = typeof ___GODOT_ENSURE_CROSSORIGIN_ISOLATION_HEADERS___ === 'undefined' ? false : ___GODOT_ENSURE_CROSSORIGIN_ISOLATION_HEADERS___;
 // Files that will be cached on load.
 /** @type {string[]} */
-const CACHED_FILES = ___GODOT_CACHE___;
+const CACHED_FILES = typeof ___GODOT_CACHE___ === 'undefined' ? [] : ___GODOT_CACHE___;
 // Files that we might not want the user to preload, and will only be cached on first load.
 /** @type {string[]} */
-const CACHABLE_FILES = ___GODOT_OPT_CACHE___;
+const CACHABLE_FILES = typeof ___GODOT_OPT_CACHE___ === 'undefined' ? [] : ___GODOT_OPT_CACHE___;
 const FULL_CACHE = CACHED_FILES.concat(CACHABLE_FILES);
 
 self.addEventListener('install', (event) => {
@@ -50,13 +50,12 @@ function ensureCrossOriginIsolationHeaders(response) {
 	const crossOriginIsolatedHeaders = new Headers(response.headers);
 	crossOriginIsolatedHeaders.set('Cross-Origin-Embedder-Policy', 'require-corp');
 	crossOriginIsolatedHeaders.set('Cross-Origin-Opener-Policy', 'same-origin');
-	const newResponse = new Response(response.body, {
+
+	return new Response(response.body, {
 		status: response.status,
 		statusText: response.statusText,
 		headers: crossOriginIsolatedHeaders,
 	});
-
-	return newResponse;
 }
 
 /**
@@ -81,7 +80,7 @@ async function fetchAndCache(event, cache, isCacheable) {
 
 	if (isCacheable) {
 		// And update the cache
-		cache.put(event.request, response.clone());
+		await cache.put(event.request, response.clone());
 	}
 
 	return response;
@@ -99,8 +98,8 @@ self.addEventListener(
 		const referrer = event.request.referrer || '';
 		const base = referrer.slice(0, referrer.lastIndexOf('/') + 1);
 		const local = url.startsWith(base) ? url.replace(base, '') : '';
-		const isCachable = FULL_CACHE.some((v) => v === local) || (base === referrer && base.endsWith(CACHED_FILES[0]));
-		if (isNavigate || isCachable) {
+		const isCacheable = FULL_CACHE.some((v) => v === local) || (base === referrer && base.endsWith(CACHED_FILES[0]));
+		if (isNavigate || isCacheable) {
 			event.respondWith((async () => {
 				// Try to use cache first
 				const cache = await caches.open(CACHE_NAME);
@@ -112,8 +111,7 @@ self.addEventListener(
 					if (missing) {
 						try {
 							// Try network if some cached file is missing (so we can display offline page in case).
-							const response = await fetchAndCache(event, cache, isCachable);
-							return response;
+							return await fetchAndCache(event, cache, isCacheable);
 						} catch (e) {
 							// And return the hopefully always cached offline page in case of network failure.
 							console.error('Network error: ', e); // eslint-disable-line no-console
@@ -128,9 +126,8 @@ self.addEventListener(
 					}
 					return cached;
 				}
-				// Try network if don't have it in cache.
-				const response = await fetchAndCache(event, cache, isCachable);
-				return response;
+				// Try network when not in cache.
+				return fetchAndCache(event, cache, isCacheable);
 			})());
 		} else if (ENSURE_CROSSORIGIN_ISOLATION_HEADERS) {
 			event.respondWith((async () => {
@@ -143,7 +140,7 @@ self.addEventListener(
 );
 
 self.addEventListener('message', (event) => {
-	// No cross origin
+	// No cross-origin
 	if (event.origin !== self.origin) {
 		return;
 	}
@@ -157,7 +154,7 @@ self.addEventListener('message', (event) => {
 		if (msg === 'claim') {
 			self.skipWaiting().then(() => self.clients.claim());
 		} else if (msg === 'clear') {
-			caches.delete(CACHE_NAME);
+			void caches.delete(CACHE_NAME);
 		} else if (msg === 'update') {
 			self.skipWaiting().then(() => self.clients.claim()).then(() => self.clients.matchAll()).then((all) => all.forEach((c) => c.navigate(c.url)));
 		}
diff --git a/misc/dist/html/styles.css b/misc/dist/html/styles.css
new file mode 100644
index 00000000000..d23e78f2e34
--- /dev/null
+++ b/misc/dist/html/styles.css
@@ -0,0 +1,242 @@
+*:focus {
+	/* More visible outline for better keyboard navigation. */
+	outline: 0.125rem solid hsl(220, 100%, 62.5%);
+	/* Make the outline always appear above other elements. */
+	/* Otherwise, one of its sides can be hidden by tabs in the Download and More layouts. */
+	position: relative;
+}
+
+body {
+	touch-action: none;
+	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+	margin: 0;
+	border: 0 none;
+	padding: 0;
+	text-align: center;
+	background-color: #141111;
+	overflow: hidden;
+}
+
+a {
+	color: hsl(205, 100%, 75%);
+	text-decoration-color: hsla(205, 100%, 75%, 0.3);
+	text-decoration-thickness: 0.125rem;
+}
+
+a:hover {
+	filter: brightness(117.5%);
+}
+
+a:active {
+	filter: brightness(82.5%);
+}
+
+.welcome-modal {
+	display: none;
+	position: fixed;
+	z-index: 1;
+	left: 0;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	overflow: auto;
+	background-color: hsla(0, 0%, 0%, 0.5);
+	text-align: left;
+}
+
+.welcome-modal-title {
+	text-align: center;
+}
+
+.welcome-modal-content {
+	background-color: #241f1f;
+	box-shadow: 0 0.25rem 0.25rem hsla(0, 0%, 0%, 0.5);
+	line-height: 1.5;
+	max-width: 38rem;
+	margin: 4rem auto 0 auto;
+	color: white;
+	border-radius: 0.5rem;
+	padding: 1rem 1rem 2rem 1rem;
+}
+
+#tabs-buttons {
+	/* Match the default background color of the editor window for a seamless appearance. */
+	background-color: #241f1f;
+	display: flex;
+}
+
+#tabs-buttons > div {
+	display: flex;
+}
+
+#tab-game {
+	/* Use a pure black background to better distinguish the running project */
+	/* from the editor window, and to use a more neutral background color (no tint). */
+	background-color: black;
+	/* Make the background span the entire page height. */
+	min-height: 100vh;
+}
+
+#canvas, #gameCanvas {
+	display: block;
+	margin: 0;
+	color: white;
+}
+
+/* Don't show distracting focus outlines for the main tabs' contents. */
+#tab-editor canvas:focus,
+#tab-game canvas:focus,
+#canvas:focus,
+#gameCanvas:focus {
+	outline: none;
+}
+
+.redot {
+	color: #e0e0e0;
+	background-color: #3b3943;
+	background-image: linear-gradient(to bottom, #403e48, #35333c);
+	border: 1px solid #45434e;
+	box-shadow: 0 0 1px 1px #2f2d35;
+}
+
+.btn {
+	appearance: none;
+	color: #e0e0e0;
+	background-color: transparent;
+	border: 1px solid #e0e0e0;
+	padding: 0.5rem 1rem;
+	margin: 0;
+	position: relative;
+	cursor: pointer;
+}
+
+.btn:not(:disabled):hover {
+	color: #e0e1e5;
+	border-color: #666c7b;
+	z-index: 1;
+}
+
+.btn:active {
+	border-color: #241f1f;
+	color: #241f1f;
+}
+
+.btn:disabled {
+	color: #aaa;
+	border-color: #141111;
+	cursor: default;
+}
+
+.btn.tab-btn {
+	padding: 0.3rem 1rem;
+}
+
+.btn.close-btn {
+	padding: 0.3rem 0.6rem;
+	font-weight: 700;
+}
+
+.btn-tab > .btn {
+	border-color: #141111;
+}
+
+.btn-tab.active > .btn {
+	background-color: #141111;
+}
+
+/* Status display */
+
+#status {
+	position: absolute;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	/* don't consume click events - make children visible explicitly */
+	visibility: hidden;
+}
+
+#status-progress {
+	width: 366px;
+	height: 7px;
+	background-color: #38363A;
+	border: 1px solid #444246;
+	padding: 1px;
+	box-shadow: 0 0 2px 1px #1B1C22;
+	border-radius: 2px;
+	visibility: visible;
+}
+
+@media only screen and (orientation: portrait) {
+	#status-progress {
+		width: 61.8%;
+	}
+}
+
+#status-progress-inner {
+	height: 100%;
+	width: 0;
+	box-sizing: border-box;
+	transition: width 0.5s linear;
+	background-color: #202020;
+	border: 1px solid #222223;
+	box-shadow: 0 0 1px 1px #27282E;
+	border-radius: 3px;
+}
+
+#status-indeterminate {
+	visibility: visible;
+	position: relative;
+}
+
+#status-indeterminate > div {
+	width: 4.5px;
+	height: 0;
+	border-style: solid;
+	border-width: 9px 3px 0 3px;
+	border-color: #2b2b2b transparent transparent transparent;
+	transform-origin: center 21px;
+	position: absolute;
+}
+
+#status-indeterminate > div:nth-child(1) {
+	transform: rotate(22.5deg);
+}
+
+#status-indeterminate > div:nth-child(2) {
+	transform: rotate(67.5deg);
+}
+
+#status-indeterminate > div:nth-child(3) {
+	transform: rotate(112.5deg);
+}
+
+#status-indeterminate > div:nth-child(4) {
+	transform: rotate(157.5deg);
+}
+
+#status-indeterminate > div:nth-child(5) {
+	transform: rotate(202.5deg);
+}
+
+#status-indeterminate > div:nth-child(6) {
+	transform: rotate(247.5deg);
+}
+
+#status-indeterminate > div:nth-child(7) {
+	transform: rotate(292.5deg);
+}
+
+#status-indeterminate > div:nth-child(8) {
+	transform: rotate(337.5deg);
+}
+
+#status-notice {
+	margin: 0 100px;
+	line-height: 1.3;
+	visibility: visible;
+	padding: 4px 6px;
+}
diff --git a/platform/web/emscripten_helpers.py b/platform/web/emscripten_helpers.py
index aca5d4ecba1..402bc148b3f 100644
--- a/platform/web/emscripten_helpers.py
+++ b/platform/web/emscripten_helpers.py
@@ -31,7 +31,7 @@ def create_engine_file(env, target, source, externs, threads_enabled):
 
 
 def create_template_zip(env, js, wasm, side):
-    binary_name = "godot.editor" if env.editor_build else "godot"
+    binary_name = "redot.editor" if env.editor_build else "redot"
     zip_dir = env.Dir(env.GetTemplateZipPath())
     in_files = [
         js,
@@ -47,7 +47,7 @@ def create_template_zip(env, js, wasm, side):
     ]
     # Dynamic linking (extensions) specific.
     if env["dlink_enabled"]:
-        in_files.append(side)  # Side wasm (contains the actual Godot code).
+        in_files.append(side)  # Side wasm (contains the actual Redot code).
         out_files.append(zip_dir.File(binary_name + ".side.wasm"))
 
     service_worker = "#misc/dist/html/service-worker.js"
@@ -55,24 +55,27 @@ def create_template_zip(env, js, wasm, side):
         # HTML
         html = "#misc/dist/html/editor.html"
         cache = [
-            "godot.editor.html",
+            "redot.editor.html",
+            "styles.css",
             "offline.html",
-            "godot.editor.js",
-            "godot.editor.audio.worklet.js",
-            "godot.editor.audio.position.worklet.js",
+            "redot.editor.js",
+            "redot.editor.audio.worklet.js",
+            "redot.editor.audio.position.worklet.js",
             "logo.svg",
             "favicon.png",
         ]
-        opt_cache = ["godot.editor.wasm"]
+        if env["threads"]:
+            cache.append("redot.editor.worker.js")
+        opt_cache = ["redot.editor.wasm"]
         subst_dict = {
             "___GODOT_VERSION___": get_build_version(False),
-            "___GODOT_NAME___": "GodotEngine",
+            "___GODOT_NAME___": "RedotEngine",
             "___GODOT_CACHE___": json.dumps(cache),
             "___GODOT_OPT_CACHE___": json.dumps(opt_cache),
             "___GODOT_OFFLINE_PAGE___": "offline.html",
             "___GODOT_THREADS_ENABLED___": "true" if env["threads"] else "false",
         }
-        html = env.Substfile(target="#bin/godot${PROGSUFFIX}.html", source=html, SUBST_DICT=subst_dict)
+        html = env.Substfile(target="#bin/redot${PROGSUFFIX}.html", source=html, SUBST_DICT=subst_dict)
         in_files.append(html)
         out_files.append(zip_dir.File(binary_name + ".html"))
         # And logo/favicon
@@ -82,7 +85,7 @@ def create_template_zip(env, js, wasm, side):
         out_files.append(zip_dir.File("favicon.png"))
         # PWA
         service_worker = env.Substfile(
-            target="#bin/godot${PROGSUFFIX}.service.worker.js",
+            target="#bin/redot${PROGSUFFIX}.service.worker.js",
             source=service_worker,
             SUBST_DICT=subst_dict,
         )
@@ -92,6 +95,8 @@ def create_template_zip(env, js, wasm, side):
         out_files.append(zip_dir.File("manifest.json"))
         in_files.append("#misc/dist/html/offline.html")
         out_files.append(zip_dir.File("offline.html"))
+        in_files.append("#misc/dist/html/styles.css")
+        out_files.append(zip_dir.File("styles.css"))
     else:
         # HTML
         in_files.append("#misc/dist/html/full-size.html")
@@ -99,11 +104,13 @@ def create_template_zip(env, js, wasm, side):
         in_files.append(service_worker)
         out_files.append(zip_dir.File(binary_name + ".service.worker.js"))
         in_files.append("#misc/dist/html/offline-export.html")
-        out_files.append(zip_dir.File("godot.offline.html"))
+        out_files.append(zip_dir.File("redot.offline.html"))
+        in_files.append("#misc/dist/html/styles.css")
+        out_files.append(zip_dir.File("styles.css"))
 
     zip_files = env.InstallAs(out_files, in_files)
     env.Zip(
-        "#bin/godot",
+        "#bin/redot",
         zip_files,
         ZIPROOT=zip_dir,
         ZIPSUFFIX="${PROGSUFFIX}${ZIPSUFFIX}",
diff --git a/platform/web/js/libs/library_godot_input.js b/platform/web/js/libs/library_godot_input.js
index 1c640eb8f55..f0c973242b3 100644
--- a/platform/web/js/libs/library_godot_input.js
+++ b/platform/web/js/libs/library_godot_input.js
@@ -40,57 +40,42 @@ const GodotIME = {
 	$GodotIME: {
 		ime: null,
 		active: false,
-		focusTimerIntervalId: -1,
 
 		getModifiers: function (evt) {
 			return (evt.shiftKey + 0) + ((evt.altKey + 0) << 1) + ((evt.ctrlKey + 0) << 2) + ((evt.metaKey + 0) << 3);
 		},
 
 		ime_active: function (active) {
-			function clearFocusTimerInterval() {
-				clearInterval(GodotIME.focusTimerIntervalId);
-				GodotIME.focusTimerIntervalId = -1;
-			}
-
-			function focusTimer() {
-				if (GodotIME.ime == null) {
-					clearFocusTimerInterval();
-					return;
-				}
+			function focus_timer() {
+				if (!GodotIME.ime) return;
+				GodotIME.active = true;
 				GodotIME.ime.focus();
 			}
 
-			if (GodotIME.focusTimerIntervalId > -1) {
-				clearFocusTimerInterval();
-			}
-
-			if (GodotIME.ime == null) {
-				return;
-			}
-
-			GodotIME.active = active;
-			if (active) {
-				GodotIME.ime.style.display = 'block';
-				GodotIME.focusTimerIntervalId = setInterval(focusTimer, 100);
-			} else {
-				GodotIME.ime.style.display = 'none';
-				GodotConfig.canvas.focus();
+			if (GodotIME.ime) {
+				if (active) {
+					GodotIME.ime.style.display = 'block';
+					setTimeout(focus_timer, 100);
+				} else {
+					GodotIME.ime.style.display = 'none';
+					GodotConfig.canvas.focus();
+					GodotIME.active = false;
+				}
 			}
 		},
 
 		ime_position: function (x, y) {
-			if (GodotIME.ime == null) {
-				return;
+			if (GodotIME.ime) {
+				const canvas = GodotConfig.canvas;
+				const rect = canvas.getBoundingClientRect();
+				const rw = canvas.width / rect.width;
+				const rh = canvas.height / rect.height;
+				const clx = (x / rw) + rect.x;
+				const cly = (y / rh) + rect.y;
+
+				GodotIME.ime.style.left = `${clx}px`;
+				GodotIME.ime.style.top = `${cly}px`;
 			}
-			const canvas = GodotConfig.canvas;
-			const rect = canvas.getBoundingClientRect();
-			const rw = canvas.width / rect.width;
-			const rh = canvas.height / rect.height;
-			const clx = (x / rw) + rect.x;
-			const cly = (y / rh) + rect.y;
-
-			GodotIME.ime.style.left = `${clx}px`;
-			GodotIME.ime.style.top = `${cly}px`;
 		},
 
 		init: function (ime_cb, key_cb, code, key) {
@@ -102,7 +87,7 @@ const GodotIME = {
 				evt.preventDefault();
 			}
 			function ime_event_cb(event) {
-				if (GodotIME.ime == null) {
+				if (!GodotIME.ime) {
 					return;
 				}
 				switch (event.type) {
@@ -158,15 +143,10 @@ const GodotIME = {
 		},
 
 		clear: function () {
-			if (GodotIME.ime == null) {
-				return;
-			}
-			if (GodotIME.focusTimerIntervalId > -1) {
-				clearInterval(GodotIME.focusTimerIntervalId);
-				GodotIME.focusTimerIntervalId = -1;
+			if (GodotIME.ime) {
+				GodotIME.ime.remove();
+				GodotIME.ime = null;
 			}
-			GodotIME.ime.remove();
-			GodotIME.ime = null;
 		},
 	},
 };

From 087545812eb3d2a1f3b132d81d3f7ee537299fca Mon Sep 17 00:00:00 2001
From: Marek Zeman <marekzeman91@gmail.com>
Date: Fri, 18 Oct 2024 18:50:28 +0200
Subject: [PATCH 2/2] Lint fixes

---
 misc/dist/html/editor.html                  | 33 +++++++++++----------
 misc/dist/html/service-worker.js            |  2 +-
 platform/web/js/libs/library_godot_input.js |  4 ++-
 3 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/misc/dist/html/editor.html b/misc/dist/html/editor.html
index eed0c8553e4..936c4558ba0 100644
--- a/misc/dist/html/editor.html
+++ b/misc/dist/html/editor.html
@@ -151,7 +151,10 @@ <h2 id="welcome-modal-title" class="welcome-modal-title">Important - Please read
 			</div>
 		</div>
 		<script>
-const byId = sel => document.getElementById(sel);
+function byId(sel) {
+	return document.getElementById(sel);
+}
+
 window.addEventListener('load', () => {
 	function notifyUpdate(sw) {
 		const btn = byId('btn-tab-update');
@@ -167,7 +170,7 @@ <h2 id="welcome-modal-title" class="welcome-modal-title">Important - Please read
 	}
 	if ('serviceWorker' in navigator) {
 		navigator.serviceWorker.register('service.worker.js').then(
-			reg => {
+			(reg) => {
 				if (reg.waiting) {
 					notifyUpdate(reg.waiting);
 				}
@@ -220,9 +223,7 @@ <h2 id="welcome-modal-title" class="welcome-modal-title">Important - Please read
 		localStorage.setItem('welcomeModalDismissed', 'true');
 	}
 }
-		</script>
-		<script src="redot.editor.js"></script>
-		<script>
+
 let editor = null;
 let game = null;
 let setStatusMode;
@@ -234,8 +235,8 @@ <h2 id="welcome-modal-title" class="welcome-modal-title">Important - Please read
 		return new Promise((resolve, reject) => {
 			const req = indexedDB.deleteDatabase(path);
 			req.onsuccess = () => resolve();
-			req.onerror = err => reject(err);
-			req.onblocked = err => reject(err);
+			req.onerror = (err) => reject(err);
+			req.onblocked = (err) => reject(err);
 		});
 	}
 	if (!window.confirm('Are you sure you want to delete all the locally stored files?\nClicking "OK" will permanently remove your projects and editor settings!')) {
@@ -262,11 +263,11 @@ <h2 id="welcome-modal-title" class="welcome-modal-title">Important - Please read
 	byId('tab-game'),
 ];
 function showTab(name) {
-	tabsLink.forEach(elem => {
+	tabsLink.forEach((elem) => {
 		elem.parentElement.classList.toggle('active', elem.id === `btn-tab-${name}`);
 	});
 
-	tabsContent.forEach(elem => {
+	tabsContent.forEach((elem) => {
 		if (elem.id === `tab-${name}`) {
 			elem.style.display = '';
 
@@ -372,14 +373,14 @@ <h2 id="welcome-modal-title" class="welcome-modal-title">Important - Please read
 		}
 	}
 
-	setStatusMode = mode => {
+	setStatusMode = (mode) => {
 		if (statusMode === mode || !initializing) {
 			return;
 		}
 		[statusProgress, statusIndeterminate, statusNotice].forEach((elem) => {
 			elem.style.display = 'none';
 		});
-		animationCallbacks = animationCallbacks.filter(value => (value !== animateStatusIndeterminate));
+		animationCallbacks = animationCallbacks.filter((value) => (value !== animateStatusIndeterminate));
 		switch (mode) {
 		case 'progress':
 			statusProgress.style.display = 'block';
@@ -428,8 +429,8 @@ <h2 id="welcome-modal-title" class="welcome-modal-title">Important - Please read
 		setLoaderEnabled(true);
 	};
 	function Execute(args) {
-		const is_editor = args.filter(v => v === '--editor' || v === '-e').length !== 0;
-		const is_project_manager = args.filter(v => v === '--project-manager').length !== 0;
+		const is_editor = args.filter((v) => v === '--editor' || v === '-e').length !== 0;
+		const is_project_manager = args.filter((v) => v === '--project-manager').length !== 0;
 		const is_game = !is_editor && !is_project_manager;
 		if (video_driver) {
 			args.push('--rendering-driver', video_driver);
@@ -539,17 +540,19 @@ <h2 id="welcome-modal-title" class="welcome-modal-title">Important - Please read
 	}
 }
 
-async function preloadZip(target) {
+function preloadZip(target) {
 	if (target.files.length > 0) {
 		return target.files[0].arrayBuffer();
 	}
+	return Promise.resolve(null);
 }
 
 byId('startButton').onclick = () => {
-	preloadZip(byId('zip-file')).then(zip => {
+	preloadZip(byId('zip-file')).then((zip) => {
 		startEditor(zip);
 	});
 };
 		</script>
+		<script src="redot.editor.js"></script>
 	</body>
 </html>
diff --git a/misc/dist/html/service-worker.js b/misc/dist/html/service-worker.js
index 64fda4ebd2b..6bf91433e1d 100644
--- a/misc/dist/html/service-worker.js
+++ b/misc/dist/html/service-worker.js
@@ -154,7 +154,7 @@ self.addEventListener('message', (event) => {
 		if (msg === 'claim') {
 			self.skipWaiting().then(() => self.clients.claim());
 		} else if (msg === 'clear') {
-			void caches.delete(CACHE_NAME);
+			caches.delete(CACHE_NAME);
 		} else if (msg === 'update') {
 			self.skipWaiting().then(() => self.clients.claim()).then(() => self.clients.matchAll()).then((all) => all.forEach((c) => c.navigate(c.url)));
 		}
diff --git a/platform/web/js/libs/library_godot_input.js b/platform/web/js/libs/library_godot_input.js
index f0c973242b3..24f2c9b0033 100644
--- a/platform/web/js/libs/library_godot_input.js
+++ b/platform/web/js/libs/library_godot_input.js
@@ -47,7 +47,9 @@ const GodotIME = {
 
 		ime_active: function (active) {
 			function focus_timer() {
-				if (!GodotIME.ime) return;
+				if (!GodotIME.ime) {
+					return;
+				}
 				GodotIME.active = true;
 				GodotIME.ime.focus();
 			}