Skip to content

Commit 14fe016

Browse files
committed
Replace inline script for cricital JS with standalone script
The new script utilizes requestAnimationFrame to run DOM transformations as soon as possible. In my testing, this method is equivalent of a synchronous inline script. On Firefox, the callback sometimes fires too early and if that happens we register for another frame. I had 100% sucess within 2 frames in Firefox.
1 parent ac3a61e commit 14fe016

File tree

8 files changed

+39
-32
lines changed

8 files changed

+39
-32
lines changed

templates/base/head.tmpl

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
<link rel="alternate icon" href="{{AssetUrlPrefix}}/img/favicon.png" type="image/png">
2424
<link rel="stylesheet" href="{{AssetUrlPrefix}}/css/index.css?v={{AssetVersion}}">
2525
{{template "base/head_script" .}}
26+
<script src="{{AssetUrlPrefix}}/js/init.js?v={{AssetVersion}}"></script>
2627
<noscript>
2728
<style>
2829
.dropdown:hover > .menu { display: block; }

templates/repo/clone_script.tmpl

Lines changed: 0 additions & 28 deletions
This file was deleted.

templates/repo/empty.tmpl

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,6 @@ git push -u origin {{.Repository.DefaultBranch}}</code></pre>
5050
git push -u origin {{.Repository.DefaultBranch}}</code></pre>
5151
</div>
5252
</div>
53-
{{template "repo/clone_script" .}}
5453
{{end}}
5554
{{else}}
5655
<div class="ui segment center">

templates/repo/home.tmpl

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,6 @@
128128
<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>
129129
</div>
130130
</button>
131-
{{template "repo/clone_script" .}}{{/* the script will update `.js-clone-url` and related elements */}}
132131
</div>
133132
{{end}}
134133
{{if and (ne $n 0) (not .IsViewFile) (not .IsBlame)}}

templates/repo/wiki/revision.tmpl

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
<div class="ui eight wide column text right df ac je">
88
<div class="ui action small input" id="clone-panel">
99
{{template "repo/clone_buttons" .}}
10-
{{template "repo/clone_script" .}}
1110
</div>
1211
</div>
1312
<div class="ui header eight wide column">

templates/repo/wiki/view.tmpl

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,6 @@
3131
<div class="df ac">
3232
<div class="ui action small input" id="clone-panel">
3333
{{template "repo/clone_buttons" .}}
34-
{{template "repo/clone_script" .}}
3534
</div>
3635
</div>
3736
</div>

web_src/js/init.js

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
// This script is for critical JS that needs to run as soon as possible.
2+
// Do not import any dependencies and keep to vanilla JS only.
3+
4+
// This function runs before DOMContentLoaded and checks if most of the page
5+
// has loaded so we can do DOM mutations before anything is painted on the screen.
6+
requestAnimationFrame(function init(elapsed) {
7+
if (elapsed > 10000) return;
8+
if (!document.querySelector('script[src*="index.js"]')) return requestAnimationFrame(init);
9+
10+
// Synchronously set clone button states and urls here to avoid flickering
11+
// on page load. initRepoCloneLink calls this when proto changes.
12+
// this applies the protocol-dependant clone url to all elements with the
13+
// `js-clone-url` and `js-clone-url-vsc` classes.
14+
// TODO: This localStorage setting should be moved to backend user config.
15+
(window.updateCloneStates = function() {
16+
const httpsBtn = document.getElementById('repo-clone-https');
17+
const sshBtn = document.getElementById('repo-clone-ssh');
18+
const value = localStorage.getItem('repo-clone-protocol') || 'https';
19+
const isSSH = value === 'ssh' && sshBtn || value !== 'ssh' && !httpsBtn;
20+
21+
if (httpsBtn) httpsBtn.classList[!isSSH ? 'add' : 'remove']('primary');
22+
if (sshBtn) sshBtn.classList[isSSH ? 'add' : 'remove']('primary');
23+
24+
const btn = isSSH ? sshBtn : httpsBtn;
25+
if (!btn) return;
26+
27+
const link = btn.getAttribute('data-link');
28+
for (const el of document.getElementsByClassName('js-clone-url')) {
29+
el[el.nodeName === 'INPUT' ? 'value' : 'textContent'] = link;
30+
}
31+
for (const el of document.getElementsByClassName('js-clone-url-vsc')) {
32+
el.href = `vscode://vscode.git/clone?url=${encodeURIComponent(link)}`;
33+
}
34+
})();
35+
});

webpack.config.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,9 @@ const filterCssImport = (url, ...args) => {
5050
export default {
5151
mode: isProduction ? 'production' : 'development',
5252
entry: {
53+
init: [
54+
fileURLToPath(new URL('web_src/js/init.js', import.meta.url)),
55+
],
5356
index: [
5457
fileURLToPath(new URL('web_src/js/jquery.js', import.meta.url)),
5558
fileURLToPath(new URL('web_src/fomantic/build/semantic.js', import.meta.url)),

0 commit comments

Comments
 (0)