From 8da52e4aa3fa8a32251b9e2e055c3c18111aef8b Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 19 Jul 2022 21:37:30 +0200
Subject: [PATCH] Clean up and fix clone button script

The button 'primary' class needs to be set in a synchronous script to
prevent flicker of the button which was regressed recently, fixed that.

Additionally, reduced the two script tags to just one, the previous scripts
were actually initializing the buttons thrice on the empty repo page, now it
only initializes once. Finally, removed duplicate code and re-used the inline
function in the update code as well.
---
 templates/repo/clone_buttons.tmpl  | 11 +----------
 templates/repo/clone_script.tmpl   | 23 +++++++++++++++++++++++
 templates/repo/empty.tmpl          | 19 +++----------------
 templates/repo/home.tmpl           |  1 +
 templates/repo/wiki/revision.tmpl  |  1 +
 templates/repo/wiki/view.tmpl      |  1 +
 web_src/js/features/repo-common.js | 30 +++---------------------------
 7 files changed, 33 insertions(+), 53 deletions(-)
 create mode 100644 templates/repo/clone_script.tmpl

diff --git a/templates/repo/clone_buttons.tmpl b/templates/repo/clone_buttons.tmpl
index fb54b27c820aa..67a509835f4f6 100644
--- a/templates/repo/clone_buttons.tmpl
+++ b/templates/repo/clone_buttons.tmpl
@@ -9,16 +9,7 @@
 		SSH
 	</button>
 {{end}}
-<!-- the value will be updated by initRepoCloneLink, the code below is used to avoid UI flicking  -->
-<input id="repo-clone-url" value="" size="1" readonly>
-<script>
-	(() => {
-		const proto = localStorage.getItem('repo-clone-protocol') || 'https';
-		const btn = document.getElementById(`repo-clone-${proto}`);
-		// it's ok if we don't find the btn here, initRepoCloneLink will take care of it
-		document.getElementById('repo-clone-url').value = btn ? btn.getAttribute('data-link') : '';
-	})();
-</script>
+<input id="repo-clone-url" class="js-clone-url" value="" size="1" readonly>
 <button class="ui basic icon button tooltip" id="clipboard-btn" data-content="{{.locale.Tr "copy_url"}}" data-clipboard-target="#repo-clone-url" aria-label="{{.locale.Tr "copy_url"}}">
 	{{svg "octicon-paste"}}
 </button>
diff --git a/templates/repo/clone_script.tmpl b/templates/repo/clone_script.tmpl
new file mode 100644
index 0000000000000..48b7ad3299ca2
--- /dev/null
+++ b/templates/repo/clone_script.tmpl
@@ -0,0 +1,23 @@
+<script>
+	// synchronously set clone button states and urls here to avoid flickering
+	// on page load. initRepoCloneLink calls this when proto changes.
+	// TODO: This localStorage setting should be moved to backend user config
+	// so it's available during rendering, then this inline script can be removed.
+	(window.updateCloneStates = function() {
+		const httpsBtn = document.getElementById('repo-clone-https');
+		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;
+		}
+	})();
+</script>
diff --git a/templates/repo/empty.tmpl b/templates/repo/empty.tmpl
index 730284da20276..99f662cd0bb93 100644
--- a/templates/repo/empty.tmpl
+++ b/templates/repo/empty.tmpl
@@ -37,7 +37,7 @@ git init
 {{if ne .Repository.DefaultBranch "master"}}git checkout -b {{.Repository.DefaultBranch}}{{end}}
 git add README.md
 git commit -m "first commit"
-git remote add origin <span class="clone-url"></span>
+git remote add origin <span class="js-clone-url"></span>
 git push -u origin {{.Repository.DefaultBranch}}</code></pre>
 								</div>
 							</div>
@@ -46,24 +46,11 @@ git push -u origin {{.Repository.DefaultBranch}}</code></pre>
 							<div class="item">
 								<h3>{{.locale.Tr "repo.push_exist_repo"}}</h3>
 								<div class="markup">
-									<pre><code>git remote add origin <span class="clone-url"></span>
+									<pre><code>git remote add origin <span class="js-clone-url"></span>
 git push -u origin {{.Repository.DefaultBranch}}</code></pre>
 								</div>
 							</div>
-							<!-- the clone-url content will be updated by initRepoCloneLink, the code below is used to avoid UI flicking  -->
-							<script>
-								(() => {
-									const proto = localStorage.getItem('repo-clone-protocol') || 'https';
-									const btn = document.getElementById(`repo-clone-${proto}`);
-									const cloneUrls = document.getElementsByClassName('clone-url');
-									// it's ok if we didn't find the btn here, initRepoCloneLink will take all the work
-									if (btn) {
-										for (let i = 0; i < cloneUrls.length; i++) {
-											cloneUrls[i].textContent = btn.getAttribute('data-link');
-										}
-									}
-								})();
-							</script>
+							{{template "repo/clone_script" .}}
 						{{end}}
 					{{else}}
 						<div class="ui segment center">
diff --git a/templates/repo/home.tmpl b/templates/repo/home.tmpl
index 5e1af447a49a3..dc6dae9a8e20b 100644
--- a/templates/repo/home.tmpl
+++ b/templates/repo/home.tmpl
@@ -124,6 +124,7 @@
 				{{if eq $n 0}}
 					<div class="ui action tiny input" id="clone-panel">
 						{{template "repo/clone_buttons" .}}
+						{{template "repo/clone_script" .}}
 						<button id="download-btn" class="ui basic jump dropdown icon button tooltip" data-content="{{.locale.Tr "repo.download_archive"}}" data-position="top right">
 							{{svg "octicon-download"}}
 							<div class="menu">
diff --git a/templates/repo/wiki/revision.tmpl b/templates/repo/wiki/revision.tmpl
index 577eb6e6c0dda..71b69220c6006 100644
--- a/templates/repo/wiki/revision.tmpl
+++ b/templates/repo/wiki/revision.tmpl
@@ -7,6 +7,7 @@
 			<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">
diff --git a/templates/repo/wiki/view.tmpl b/templates/repo/wiki/view.tmpl
index 91a15f19e2e35..21affddc623e2 100644
--- a/templates/repo/wiki/view.tmpl
+++ b/templates/repo/wiki/view.tmpl
@@ -31,6 +31,7 @@
 			<div class="right fitted item">
 				<div class="ui action small input" id="clone-panel">
 					{{template "repo/clone_buttons" .}}
+					{{template "repo/clone_script" .}}
 				</div>
 			</div>
 		</div>
diff --git a/web_src/js/features/repo-common.js b/web_src/js/features/repo-common.js
index b0ecc5a651275..1cf67401be371 100644
--- a/web_src/js/features/repo-common.js
+++ b/web_src/js/features/repo-common.js
@@ -44,8 +44,6 @@ export function initRepoArchiveLinks() {
 }
 
 export function initRepoCloneLink() {
-  const defaultGitProtocol = 'https'; // ssh or https
-
   const $repoCloneSsh = $('#repo-clone-ssh');
   const $repoCloneHttps = $('#repo-clone-https');
   const $inputLink = $('#repo-clone-url');
@@ -54,41 +52,19 @@ export function initRepoCloneLink() {
     return;
   }
 
-  const updateUi = () => {
-    let isSSH = (localStorage.getItem('repo-clone-protocol') || defaultGitProtocol) === 'ssh';
-    // there must be at least one clone button (by context/repo.go). if no ssh, then there must be https.
-    if (isSSH && $repoCloneSsh.length === 0) {
-      isSSH = false;
-    } else if (!isSSH && $repoCloneHttps.length === 0) {
-      isSSH = true;
-    }
-    const cloneLink = (isSSH ? $repoCloneSsh : $repoCloneHttps).attr('data-link');
-    $inputLink.val(cloneLink);
-    if (isSSH) {
-      $repoCloneSsh.addClass('primary');
-      $repoCloneHttps.removeClass('primary');
-    } else {
-      $repoCloneSsh.removeClass('primary');
-      $repoCloneHttps.addClass('primary');
-    }
-    // the empty repo guide
-    $('.quickstart .empty-repo-guide .clone-url').text(cloneLink);
-  };
-  updateUi();
-
+  // restore animation after first init
   setTimeout(() => {
-    // restore animation after first init
     $repoCloneSsh.removeClass('no-transition');
     $repoCloneHttps.removeClass('no-transition');
   }, 100);
 
   $repoCloneSsh.on('click', () => {
     localStorage.setItem('repo-clone-protocol', 'ssh');
-    updateUi();
+    window.updateCloneStates();
   });
   $repoCloneHttps.on('click', () => {
     localStorage.setItem('repo-clone-protocol', 'https');
-    updateUi();
+    window.updateCloneStates();
   });
 
   $inputLink.on('click', () => {