[HTML5] Editor video driver option. Replace canvas on exit.

Default is "Auto", but can be forced to a specific WebGL version if the
automatic detection fails.

The game and editor canvas are now replaced with a new one in the exit
hooks. This helps the browser do some context cleanup, and allow us to
create a new context of a different type (WebGL/WebGL2).

1 files changed, 30 insertions, 12 deletions

diff --git a/misc/dist/html/editor.html b/misc/dist/html/editor.html
index 2cae215951..69e267f665 100644
--- a/misc/dist/html/editor.html
+++ b/misc/dist/html/editor.html
@@ -14,7 +14,7 @@
 	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
 	<meta name="msapplication-starturl" content="/latest" />
 	<meta property="og:site_name" content="Godot Engine Web Editor" />
-  	<meta property="og:url" name="twitter:url" content="https://editor.godotengine.org/releases/latest/" />
+	<meta property="og:url" name="twitter:url" content="https://editor.godotengine.org/releases/latest/" />
 	<meta property="og:title" name="twitter:title" content="Free and open source 2D and 3D game engine" />
 	<meta property="og:description" name="twitter:description" content="Use the Godot Engine editor directly in your web browser, without having to install anything." />
 	<meta property="og:image" name="twitter:image" content="https://godotengine.org/themes/godotengine/assets/og_image.png" />
@@ -269,11 +269,6 @@
 	<div id="tabs">
 		<div id="tab-loader">
 			<div style="color: #e0e0e0;" id="persistence">
-				<label for="videoMode" style="display: none;">Select video driver:</label><br />
-				<select id="videoMode" style="display: none;">
-					<option value="GLES2" selected="selected">WebGL</option>
-					<option value="GLES3">WebGL 2</option>
-				</select>
 				<br />
 				<img src="logo.svg" alt="Godot Engine logo" width="1024" height="414" style="width: auto; height: auto; max-width: 85%; max-height: 250px" />
 				<br />
@@ -283,6 +278,14 @@
 				<br />
 				<br />
 				<br />
+				<label for="videoMode" style="margin-right: 1rem">Video driver:</label>
+				<select id="videoMode">
+					<option value="" selected="selected">Auto</option>
+					<option value="GLES2">WebGL</option>
+					<option value="GLES3">WebGL 2</option>
+				</select>
+				<br />
+				<br />
 				<label for="zip-file" style="margin-right: 1rem">Preload project ZIP:</label> <input id="zip-file" type="file" name="files" style="margin-bottom: 1rem"/>
 				<br />
 <a href="demo.zip">(Try this for example)</a>
@@ -348,7 +351,7 @@
 		var game = null;
 		var setStatusMode;
 		var setStatusNotice;
-		var video_driver = "GLES2";
+		var video_driver = "";
 
 		function clearPersistence() {
 			function deleteDB(path) {
@@ -479,6 +482,15 @@
 			animationCallbacks.push(adjustCanvasDimensions);
 			adjustCanvasDimensions();
 
+			function replaceCanvas(from) {
+				const out = document.createElement("canvas");
+				out.id = from.id;
+				out.tabIndex = from.tabIndex;
+				from.parentNode.replaceChild(out, from);
+				lastScale = 0;
+				return out;
+			}
+
 			setStatusMode = function setStatusMode(mode) {
 				if (statusMode === mode || !initializing)
 					return;
@@ -534,6 +546,7 @@
 				'canvas': gameCanvas,
 				'canvasResizePolicy': 1,
 				'onExit': function () {
+					gameCanvas = replaceCanvas(gameCanvas);
 					setGameTabEnabled(false);
 					showTab('editor');
 					game = null;
@@ -548,7 +561,7 @@
 				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_game = !is_editor && !is_project_manager;
-				if (is_project_manager) {
+				if (video_driver) {
 					args.push('--video-driver', video_driver);
 				}
 				if (is_game) {
@@ -561,7 +574,7 @@
 					showTab('game');
 					game.init().then(function() {
 						requestAnimationFrame(function() {
-							game.start({'args': args}).then(function() {
+							game.start({'args': args, 'canvas': gameCanvas}).then(function() {
 								gameCanvas.focus();
 							});
 						});
@@ -576,7 +589,7 @@
 									showTab('loader');
 									setLoaderEnabled(true);
 								};
-								editor.start({'args': args, 'persistentDrops': is_project_manager});
+								editor.start({'args': args, 'persistentDrops': is_project_manager, 'canvas': editorCanvas});
 							});
 						}, 0);
 						OnEditorExit = null;
@@ -603,6 +616,7 @@
 				'canvas': editorCanvas,
 				'canvasResizePolicy': 0,
 				'onExit': function() {
+					editorCanvas = replaceCanvas(editorCanvas);
 					if (OnEditorExit) {
 						OnEditorExit();
 					}
@@ -634,10 +648,14 @@
 					} catch(e) {
 						// File exists
 					}
-					//selectVideoMode();
+					selectVideoMode();
 					showTab('editor');
 					setLoaderEnabled(false);
-					editor.start({'args': ['--project-manager', '--video-driver', video_driver], 'persistentDrops': true}).then(function() {
+					const args = ['--project-manager'];
+					if (video_driver) {
+						args.push('--video-driver', video_driver);
+					}
+					editor.start({'args': args, 'persistentDrops': true}).then(function() {
 						setStatusMode('hidden');
 						initializing = false;
 					});