Optimized emscripten logo in generated html (#20690)

oliversalzburg · web-flow · commit 90ab3a7ea65d · 2023-11-16T09:44:36.000-08:00
Replaces the huge SVG in the shell with a smaller logo.
diff --git a/emcc.py b/emcc.py
@@ -4218,7 +4218,9 @@ def generate_traditional_runtime_html(target, options, js_target, target_basenam
 
   shell = do_replace(shell, '{{{ SCRIPT }}}', script.replacement())
   shell = shell.replace('{{{ SHELL_CSS }}}', utils.read_file(utils.path_from_root('src/shell.css')))
-  shell = shell.replace('{{{ SHELL_LOGO }}}', utils.read_file(utils.path_from_root('media/powered_by_logo_mini.svg')))
+  shell_logo = utils.read_binary(utils.path_from_root('media/powered_by_logo_shell.png'))
+  shell_logo_b64 = base64_encode(shell_logo)
+  shell = shell.replace('{{{ SHELL_LOGO }}}', f'<img id="emscripten_logo" src="data:image/png;base64,{shell_logo_b64}">')
 
   check_output_file(target)
   write_file(target, shell)
diff --git a/media/powered_by_logo_shell.png b/media/powered_by_logo_shell.png
diff --git a/src/shell.css b/src/shell.css
@@ -13,6 +13,8 @@ canvas.emscripten { border: 0px none; background-color: black; }
 #emscripten_logo {
   display: inline-block;
   margin: 0;
+  padding: 6px;
+  width: 265px;
 }
 
 .spinner {

Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,8 @@ canvas.emscripten { border: 0px none; background-color: black; }`
`13`	`13`	`#emscripten_logo {`
`14`	`14`	`display: inline-block;`
`15`	`15`	`margin: 0;`
	`16`	`+ padding: 6px;`
	`17`	`+ width: 265px;`
`16`	`18`	`}`
`17`	`19`
`18`	`20`	`.spinner {`