Replace inline script for critical JS with standalone script

templates/base/head.tmpl

@@ -23,6 +23,7 @@
 	<link rel="alternate icon" href="{{AssetUrlPrefix}}/img/favicon.png" type="image/png">
 	<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/index.css?v={{AssetVersion}}">
 	{{template "base/head_script" .}}
+	<script src="{{AssetUrlPrefix}}/js/init.js?v={{AssetVersion}}"></script>
 	<noscript>
 		<style>
 			.dropdown:hover > .menu { display: block; }

templates/repo/empty.tmpl

@@ -50,7 +50,6 @@ git push -u origin {{.Repository.DefaultBranch}}</code></pre>
 git push -u origin {{.Repository.DefaultBranch}}</code></pre>
 								</div>
 							</div>
-							{{template "repo/clone_script" .}}
 						{{end}}
 					{{else}}
 						<div class="ui segment center">

templates/repo/home.tmpl

@@ -128,7 +128,6 @@
 								<a class="item js-clone-url-vsc" href="vscode://vscode.git/clone?url={{.CloneButtonOriginLink.HTTPS}}">{{svg "gitea-vscode" 16 "mr-3"}}{{.locale.Tr "repo.clone_in_vsc"}}</a>
 							</div>
 						</button>
-						{{template "repo/clone_script" .}}{{/* the script will update `.js-clone-url` and related elements */}}
 					</div>
 				{{end}}
 				{{if and (ne $n 0) (not .IsViewFile) (not .IsBlame)}}

templates/repo/wiki/revision.tmpl

@@ -7,7 +7,6 @@
 			<div class="ui eight wide column text right df ac je">
 				<div class="ui action small input" id="clone-panel">
 					{{template "repo/clone_buttons" .}}
-					{{template "repo/clone_script" .}}
 				</div>
 			</div>
 			<div class="ui header eight wide column">

templates/repo/wiki/view.tmpl

@@ -31,7 +31,6 @@
 			<div class="df ac">
 				<div class="ui action small input" id="clone-panel">
 					{{template "repo/clone_buttons" .}}
-					{{template "repo/clone_script" .}}
 				</div>
 			</div>
 		</div>

web_src/js/init.js

@@ -0,0 +1,39 @@
+// This script is for critical JS that needs to perform DOM mutations
+// before the initial browser paint.
+
+let attempts = 0;
+window.requestAnimationFrame(function wait() {
+  if (document.querySelector('script[src*="index.js"]') || ++attempts > 100) return init();
+  window.requestAnimationFrame(wait);
+});
+
+// This function runs before DOMContentLoaded and checks if most of the page
+// has loaded so we can do DOM mutations before anything is painted on the screen.
+function init() {
+  // Synchronously set clone button states and urls here to avoid flickering
+  // on page load. initRepoCloneLink calls this when proto changes.
+  // this applies the protocol-dependant clone url to all elements with the
+  // `js-clone-url` and `js-clone-url-vsc` classes.
+  // TODO: This localStorage setting should be moved to backend user config.
+  (window.updateCloneStates = function() {
+    const httpsBtn = document.getElementById('repo-clone-https');
+    if (!httpsBtn) return;
+    const sshBtn = document.getElementById('repo-clone-ssh');
+    const value = localStorage.getItem('repo-clone-protocol') || 'https';
+    const isSSH = value === 'ssh' && sshBtn || value !== 'ssh' && !httpsBtn;
+
+    if (httpsBtn) httpsBtn.classList[!isSSH ? 'add' : 'remove']('primary');
+    if (sshBtn) sshBtn.classList[isSSH ? 'add' : 'remove']('primary');
+
+    const btn = isSSH ? sshBtn : httpsBtn;
+    if (!btn) return;
+
+    const link = btn.getAttribute('data-link');
+    for (const el of document.getElementsByClassName('js-clone-url')) {
+      el[el.nodeName === 'INPUT' ? 'value' : 'textContent'] = link;
+    }
+    for (const el of document.getElementsByClassName('js-clone-url-vsc')) {
+      el.href = `vscode://vscode.git/clone?url=${encodeURIComponent(link)}`;
+    }
+  })();
+}

webpack.config.js

@@ -50,6 +50,9 @@ const filterCssImport = (url, ...args) => {
 export default {
   mode: isProduction ? 'production' : 'development',
   entry: {
+    init: [
+      fileURLToPath(new URL('web_src/js/init.js', import.meta.url)),
+    ],
     index: [
       fileURLToPath(new URL('web_src/js/jquery.js', import.meta.url)),
       fileURLToPath(new URL('web_src/fomantic/build/semantic.js', import.meta.url)),