From 3b4dd88e56e93de59cde67ab891ae015095f969b Mon Sep 17 00:00:00 2001
From: Hugo Locurcio <hugo.locurcio@hugo.pro>
Date: Wed, 24 Feb 2021 22:46:43 +0100
Subject: [PATCH] Improve the editor HTML template

- Darken the header tab background to match the default editor
  background color.
- Hide the distracting focus outlines for the editor and game canvas.
- Use a pure black background for the game canvas to better distinguish it
  from the editor and provide a more neutral background.
- Use a bold font weight for the Start Godot editor button on the
  loader page.
- Link to the web editor documentation on the loader page.
- Clarify what happens when clicking "OK" in the persistent data removal
  warning dialog.
- Tidy up the HTML template by removing obsolete attributes.

(cherry picked from commit 35277569433ebdaa4ab16a35a8280c33ca383a96)
---
 misc/dist/html/editor.html | 34 ++++++++++++++++++++++++++--------
 1 file changed, 26 insertions(+), 8 deletions(-)

diff --git a/misc/dist/html/editor.html b/misc/dist/html/editor.html
index b4a8c69cc63..b0b906270b8 100644
--- a/misc/dist/html/editor.html
+++ b/misc/dist/html/editor.html
@@ -5,8 +5,7 @@
 	<meta name='viewport' content='width=device-width, user-scalable=no' />
 	<link id='-gd-engine-icon' rel='icon' type='image/png' href='favicon.png' />
 	<title>Godot Engine Web Editor ($GODOT_VERSION)</title>
-	<style type='text/css'>
-
+	<style>
 		*:focus {
 			/* More visible outline for better keyboard navigation. */
 			outline: 0.125rem solid hsl(220, 100%, 62.5%);
@@ -40,13 +39,30 @@
 			filter: brightness(82.5%);
 		}
 
+		#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;
 		}
 
-		#canvas:focus, #gameCanvas:focus {
+		/* 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;
 		}
 
@@ -200,9 +216,11 @@
 <a href="demo.zip">(Try this for example)</a>
 				<br />
 				<br />
-				<button id="startButton" class="btn" style="margin-bottom: 4rem">Start Godot editor</button>
+				<button id="startButton" class="btn" style="margin-bottom: 4rem; font-weight: 700">Start Godot editor</button>
 				<br />
-				<button class="btn" onclick="clearPersistence()">Clear persistent data</button>
+				<button class="btn" onclick="clearPersistence()" style="margin-bottom: 1.5rem">Clear persistent data</button>
+				<br />
+				<a href="https://docs.godotengine.org/en/latest/tutorials/editor/using_the_web_editor.html">Web editor documentation</a>
 			</div>
 		</div>
 		<div id='tab-editor' style="display: none;">
@@ -233,8 +251,8 @@
 		</div>
 	</div>
 
-	<script type='text/javascript' src='godot.tools.js'></script>
-	<script type='text/javascript'>//<![CDATA[
+	<script src='godot.tools.js'></script>
+	<script>//<![CDATA[
 
 		var editor = null;
 		var game = null;
@@ -258,7 +276,7 @@
 
 				});
 			}
-			if (!window.confirm("Are you sure you want to delete all the locally stored files?")) {
+			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!")) {
 				return;
 			}
 			Promise.all([