Skip to content

Commit 507fbf4

Browse files
silverwindwxiaoguangGiteaBot
authored
Use querySelector over alternative DOM methods (#31280)
As per #30115 (comment), prefer `querySelector` by enabling [`unicorn/prefer-query-selector`](https://github.com/sindresorhus/eslint-plugin-unicorn/blob/main/docs/rules/prefer-query-selector.md) and autofixing all except 10 issues. According to [this](https://old.reddit.com/r/learnjavascript/comments/i0f5o8/performance_of_getelementbyid_vs_queryselector/), querySelector may be faster as well, so it's a win-win. --------- Co-authored-by: wxiaoguang <[email protected]> Co-authored-by: Giteabot <[email protected]>
1 parent a2304cb commit 507fbf4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+165
-168
lines changed

‎.eslintrc.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -798,7 +798,7 @@ rules:
798798
unicorn/prefer-object-has-own: [0]
799799
unicorn/prefer-optional-catch-binding: [2]
800800
unicorn/prefer-prototype-methods: [0]
801-
unicorn/prefer-query-selector: [0]
801+
unicorn/prefer-query-selector: [2]
802802
unicorn/prefer-reflect-apply: [0]
803803
unicorn/prefer-regexp-test: [2]
804804
unicorn/prefer-set-has: [0]

‎web_src/js/components/DashboardRepoList.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ const sfc = {
101101
},
102102
103103
mounted() {
104-
const el = document.getElementById('dashboard-repo-list');
104+
const el = document.querySelector('#dashboard-repo-list');
105105
this.changeReposFilter(this.reposFilter);
106106
$(el).find('.dropdown').dropdown();
107107
nextTick(() => {
@@ -330,7 +330,7 @@ const sfc = {
330330
};
331331
332332
export function initDashboardRepoList() {
333-
const el = document.getElementById('dashboard-repo-list');
333+
const el = document.querySelector('#dashboard-repo-list');
334334
if (el) {
335335
createApp(sfc).mount(el);
336336
}

‎web_src/js/components/DiffCommitSelector.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {GET} from '../modules/fetch.js';
55
export default {
66
components: {SvgIcon},
77
data: () => {
8-
const el = document.getElementById('diff-commit-select');
8+
const el = document.querySelector('#diff-commit-select');
99
return {
1010
menuVisible: false,
1111
isLoading: false,

‎web_src/js/components/DiffFileList.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,10 @@ export default {
77
return {store: diffTreeStore()};
88
},
99
mounted() {
10-
document.getElementById('show-file-list-btn').addEventListener('click', this.toggleFileList);
10+
document.querySelector('#show-file-list-btn').addEventListener('click', this.toggleFileList);
1111
},
1212
unmounted() {
13-
document.getElementById('show-file-list-btn').removeEventListener('click', this.toggleFileList);
13+
document.querySelector('#show-file-list-btn').removeEventListener('click', this.toggleFileList);
1414
},
1515
methods: {
1616
toggleFileList() {

‎web_src/js/components/DiffFileTree.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ export default {
112112
updateState(visible) {
113113
const btn = document.querySelector('.diff-toggle-file-tree-button');
114114
const [toShow, toHide] = btn.querySelectorAll('.icon');
115-
const tree = document.getElementById('diff-file-tree');
115+
const tree = document.querySelector('#diff-file-tree');
116116
const newTooltip = btn.getAttribute(visible ? 'data-hide-text' : 'data-show-text');
117117
btn.setAttribute('data-tooltip-content', newTooltip);
118118
toggleElem(tree, visible);

‎web_src/js/components/RepoActionView.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -325,7 +325,7 @@ const sfc = {
325325
export default sfc;
326326
327327
export function initRepositoryActionView() {
328-
const el = document.getElementById('repo-action-view');
328+
const el = document.querySelector('#repo-action-view');
329329
if (!el) return;
330330
331331
// TODO: the parent element's full height doesn't work well now,

‎web_src/js/components/RepoActivityTopAuthors.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ const sfc = {
5151
};
5252
5353
export function initRepoActivityTopAuthorsChart() {
54-
const el = document.getElementById('repo-activity-top-authors-chart');
54+
const el = document.querySelector('#repo-activity-top-authors-chart');
5555
if (el) {
5656
createApp(sfc).mount(el);
5757
}

‎web_src/js/components/RepoBranchTagSelector.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ const sfc = {
8585
this.isViewBranch = false;
8686
this.$refs.dropdownRefName.textContent = item.name;
8787
if (this.setAction) {
88-
document.getElementById(this.branchForm)?.setAttribute('action', url);
88+
document.querySelector(`#${this.branchForm}`)?.setAttribute('action', url);
8989
} else {
9090
$(`#${this.branchForm} input[name="refURL"]`).val(url);
9191
}

‎web_src/js/components/ScopedAccessTokenSelector.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -43,25 +43,25 @@ const sfc = {
4343
},
4444
4545
mounted() {
46-
document.getElementById('scoped-access-submit').addEventListener('click', this.onClickSubmit);
46+
document.querySelector('#scoped-access-submit').addEventListener('click', this.onClickSubmit);
4747
},
4848
4949
unmounted() {
50-
document.getElementById('scoped-access-submit').removeEventListener('click', this.onClickSubmit);
50+
document.querySelector('#scoped-access-submit').removeEventListener('click', this.onClickSubmit);
5151
},
5252
5353
methods: {
5454
onClickSubmit(e) {
5555
e.preventDefault();
5656
57-
const warningEl = document.getElementById('scoped-access-warning');
57+
const warningEl = document.querySelector('#scoped-access-warning');
5858
// check that at least one scope has been selected
59-
for (const el of document.getElementsByClassName('access-token-select')) {
59+
for (const el of document.querySelectorAll('.access-token-select')) {
6060
if (el.value) {
6161
// Hide the error if it was visible from previous attempt.
6262
hideElem(warningEl);
6363
// Submit the form.
64-
document.getElementById('scoped-access-form').submit();
64+
document.querySelector('#scoped-access-form').submit();
6565
// Don't show the warning.
6666
return;
6767
}
@@ -78,7 +78,7 @@ export default sfc;
7878
* Initialize category toggle sections
7979
*/
8080
export function initScopedAccessTokenCategories() {
81-
for (const el of document.getElementsByClassName('scoped-access-token-mount')) {
81+
for (const el of document.querySelectorAll('.scoped-access-token-mount')) {
8282
createApp({})
8383
.component('scoped-access-token-selector', sfc)
8484
.mount(el);

‎web_src/js/features/admin/common.js‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {POST} from '../../modules/fetch.js';
66
const {appSubUrl} = window.config;
77

88
function onSecurityProtocolChange() {
9-
if (Number(document.getElementById('security_protocol')?.value) > 0) {
9+
if (Number(document.querySelector('#security_protocol')?.value) > 0) {
1010
showElem('.has-tls');
1111
} else {
1212
hideElem('.has-tls');
@@ -21,34 +21,34 @@ export function initAdminCommon() {
2121

2222
// New user
2323
if ($('.admin.new.user').length > 0 || $('.admin.edit.user').length > 0) {
24-
document.getElementById('login_type')?.addEventListener('change', function () {
24+
document.querySelector('#login_type')?.addEventListener('change', function () {
2525
if (this.value?.substring(0, 1) === '0') {
26-
document.getElementById('user_name')?.removeAttribute('disabled');
27-
document.getElementById('login_name')?.removeAttribute('required');
26+
document.querySelector('#user_name')?.removeAttribute('disabled');
27+
document.querySelector('#login_name')?.removeAttribute('required');
2828
hideElem('.non-local');
2929
showElem('.local');
30-
document.getElementById('user_name')?.focus();
30+
document.querySelector('#user_name')?.focus();
3131

3232
if (this.getAttribute('data-password') === 'required') {
33-
document.getElementById('password')?.setAttribute('required', 'required');
33+
document.querySelector('#password')?.setAttribute('required', 'required');
3434
}
3535
} else {
3636
if (document.querySelector('.admin.edit.user')) {
37-
document.getElementById('user_name')?.setAttribute('disabled', 'disabled');
37+
document.querySelector('#user_name')?.setAttribute('disabled', 'disabled');
3838
}
39-
document.getElementById('login_name')?.setAttribute('required', 'required');
39+
document.querySelector('#login_name')?.setAttribute('required', 'required');
4040
showElem('.non-local');
4141
hideElem('.local');
42-
document.getElementById('login_name')?.focus();
42+
document.querySelector('#login_name')?.focus();
4343

44-
document.getElementById('password')?.removeAttribute('required');
44+
document.querySelector('#password')?.removeAttribute('required');
4545
}
4646
});
4747
}
4848

4949
function onUsePagedSearchChange() {
5050
const searchPageSizeElements = document.querySelectorAll('.search-page-size');
51-
if (document.getElementById('use_paged_search').checked) {
51+
if (document.querySelector('#use_paged_search').checked) {
5252
showElem('.search-page-size');
5353
for (const el of searchPageSizeElements) {
5454
el.querySelector('input')?.setAttribute('required', 'required');
@@ -67,7 +67,7 @@ export function initAdminCommon() {
6767
input.removeAttribute('required');
6868
}
6969

70-
const provider = document.getElementById('oauth2_provider').value;
70+
const provider = document.querySelector('#oauth2_provider').value;
7171
switch (provider) {
7272
case 'openidConnect':
7373
document.querySelector('.open_id_connect_auto_discovery_url input').setAttribute('required', 'required');
@@ -91,19 +91,19 @@ export function initAdminCommon() {
9191
}
9292

9393
function onOAuth2UseCustomURLChange(applyDefaultValues) {
94-
const provider = document.getElementById('oauth2_provider').value;
94+
const provider = document.querySelector('#oauth2_provider').value;
9595
hideElem('.oauth2_use_custom_url_field');
9696
for (const input of document.querySelectorAll('.oauth2_use_custom_url_field input[required]')) {
9797
input.removeAttribute('required');
9898
}
9999

100100
const elProviderCustomUrlSettings = document.querySelector(`#${provider}_customURLSettings`);
101-
if (elProviderCustomUrlSettings && document.getElementById('oauth2_use_custom_url').checked) {
101+
if (elProviderCustomUrlSettings && document.querySelector('#oauth2_use_custom_url').checked) {
102102
for (const custom of ['token_url', 'auth_url', 'profile_url', 'email_url', 'tenant']) {
103103
if (applyDefaultValues) {
104-
document.getElementById(`oauth2_${custom}`).value = document.getElementById(`${provider}_${custom}`).value;
104+
document.querySelector(`#oauth2_${custom}`).value = document.querySelector(`#${provider}_${custom}`).value;
105105
}
106-
const customInput = document.getElementById(`${provider}_${custom}`);
106+
const customInput = document.querySelector(`#${provider}_${custom}`);
107107
if (customInput && customInput.getAttribute('data-available') === 'true') {
108108
for (const input of document.querySelectorAll(`.oauth2_${custom} input`)) {
109109
input.setAttribute('required', 'required');
@@ -115,12 +115,12 @@ export function initAdminCommon() {
115115
}
116116

117117
function onEnableLdapGroupsChange() {
118-
toggleElem(document.getElementById('ldap-group-options'), $('.js-ldap-group-toggle')[0].checked);
118+
toggleElem(document.querySelector('#ldap-group-options'), $('.js-ldap-group-toggle')[0].checked);
119119
}
120120

121121
// New authentication
122122
if (document.querySelector('.admin.new.authentication')) {
123-
document.getElementById('auth_type')?.addEventListener('change', function () {
123+
document.querySelector('#auth_type')?.addEventListener('change', function () {
124124
hideElem('.ldap, .dldap, .smtp, .pam, .oauth2, .has-tls, .search-page-size, .sspi');
125125

126126
for (const input of document.querySelectorAll('.ldap input[required], .binddnrequired input[required], .dldap input[required], .smtp input[required], .pam input[required], .oauth2 input[required], .has-tls input[required], .sspi input[required]')) {
@@ -180,39 +180,39 @@ export function initAdminCommon() {
180180
}
181181
});
182182
$('#auth_type').trigger('change');
183-
document.getElementById('security_protocol')?.addEventListener('change', onSecurityProtocolChange);
184-
document.getElementById('use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
185-
document.getElementById('oauth2_provider')?.addEventListener('change', () => onOAuth2Change(true));
186-
document.getElementById('oauth2_use_custom_url')?.addEventListener('change', () => onOAuth2UseCustomURLChange(true));
183+
document.querySelector('#security_protocol')?.addEventListener('change', onSecurityProtocolChange);
184+
document.querySelector('#use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
185+
document.querySelector('#oauth2_provider')?.addEventListener('change', () => onOAuth2Change(true));
186+
document.querySelector('#oauth2_use_custom_url')?.addEventListener('change', () => onOAuth2UseCustomURLChange(true));
187187
$('.js-ldap-group-toggle').on('change', onEnableLdapGroupsChange);
188188
}
189189
// Edit authentication
190190
if (document.querySelector('.admin.edit.authentication')) {
191-
const authType = document.getElementById('auth_type')?.value;
191+
const authType = document.querySelector('#auth_type')?.value;
192192
if (authType === '2' || authType === '5') {
193-
document.getElementById('security_protocol')?.addEventListener('change', onSecurityProtocolChange);
193+
document.querySelector('#security_protocol')?.addEventListener('change', onSecurityProtocolChange);
194194
$('.js-ldap-group-toggle').on('change', onEnableLdapGroupsChange);
195195
onEnableLdapGroupsChange();
196196
if (authType === '2') {
197-
document.getElementById('use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
197+
document.querySelector('#use_paged_search')?.addEventListener('change', onUsePagedSearchChange);
198198
}
199199
} else if (authType === '6') {
200-
document.getElementById('oauth2_provider')?.addEventListener('change', () => onOAuth2Change(true));
201-
document.getElementById('oauth2_use_custom_url')?.addEventListener('change', () => onOAuth2UseCustomURLChange(false));
200+
document.querySelector('#oauth2_provider')?.addEventListener('change', () => onOAuth2Change(true));
201+
document.querySelector('#oauth2_use_custom_url')?.addEventListener('change', () => onOAuth2UseCustomURLChange(false));
202202
onOAuth2Change(false);
203203
}
204204
}
205205

206206
if (document.querySelector('.admin.authentication')) {
207207
$('#auth_name').on('input', function () {
208208
// appSubUrl is either empty or is a path that starts with `/` and doesn't have a trailing slash.
209-
document.getElementById('oauth2-callback-url').textContent = `${window.location.origin}${appSubUrl}/user/oauth2/${encodeURIComponent(this.value)}/callback`;
209+
document.querySelector('#oauth2-callback-url').textContent = `${window.location.origin}${appSubUrl}/user/oauth2/${encodeURIComponent(this.value)}/callback`;
210210
}).trigger('input');
211211
}
212212

213213
// Notice
214214
if (document.querySelector('.admin.notice')) {
215-
const detailModal = document.getElementById('detail-modal');
215+
const detailModal = document.querySelector('#detail-modal');
216216

217217
// Attach view detail modals
218218
$('.view-detail').on('click', function () {
@@ -244,7 +244,7 @@ export function initAdminCommon() {
244244
break;
245245
}
246246
});
247-
document.getElementById('delete-selection')?.addEventListener('click', async function (e) {
247+
document.querySelector('#delete-selection')?.addEventListener('click', async function (e) {
248248
e.preventDefault();
249249
this.classList.add('is-loading', 'disabled');
250250
const data = new FormData();

0 commit comments

Comments
 (0)