Refactor hiding-methods, remove jQuery show/hide, remove .hide class, remove inline style=display:none (#22950)

Close #22847

This PR:

* introduce Gitea's own `showElem` and related functions
* remove jQuery show/hide
* remove .hide class
* remove inline style=display:none 

From now on:

do not use:
* "[hidden]" attribute: it's too weak, can not be applied to an element
with "display: flex"
* ".hidden" class: it has been polluted by Fomantic UI in many cases
* inline style="display: none": it's difficult to tweak
* jQuery's show/hide/toggle: it can not show/hide elements with
"display: xxx !important"

only use:
* this ".gt-hidden" class
* showElem/hideElem/toggleElem functions in "utils/dom.js"

cc: @silverwind , this is the all-in-one PR

.eslintrc.yaml

@@ -149,7 +149,7 @@ rules:
   jquery/no-global-eval: [2]
   jquery/no-grep: [2]
   jquery/no-has: [2]
-  jquery/no-hide: [0]
+  jquery/no-hide: [2]
   jquery/no-html: [0]
   jquery/no-in-array: [2]
   jquery/no-is-array: [2]
@@ -166,13 +166,13 @@ rules:
   jquery/no-proxy: [2]
   jquery/no-ready: [0]
   jquery/no-serialize: [2]
-  jquery/no-show: [0]
+  jquery/no-show: [2]
   jquery/no-size: [2]
   jquery/no-sizzle: [0]
   jquery/no-slide: [0]
   jquery/no-submit: [0]
   jquery/no-text: [0]
-  jquery/no-toggle: [0]
+  jquery/no-toggle: [2]
   jquery/no-trigger: [0]
   jquery/no-trim: [2]
   jquery/no-val: [0]

docs/content/doc/developers/guidelines-frontend.en-us.md

@@ -93,6 +93,11 @@ However, there are still some special cases, so the current guideline is:
   * `node.dataset` should not be used, use `node.getAttribute` instead.
   * never bind any user data to a DOM node, use a suitable design pattern to describe the relation between node and data.
 
+### Show/Hide Elements
+
+* Vue components are recommended to use `v-if` and `v-show` to show/hide elements.
+* Go template code should use Gitea's `.gt-hidden` and `showElem()/hideElem()/toggleElem()`, see more details in `.gt-hidden`'s comment.
+
 ### Legacy Code
 
 A lot of legacy code already existed before this document's written. It's recommended to refactor legacy code to follow the guidelines.

templates/admin/auth/edit.tmpl

@@ -45,7 +45,7 @@
 						<label for="port">{{.locale.Tr "admin.auths.port"}}</label>
 						<input id="port" name="port" value="{{$cfg.Port}}"  placeholder="e.g. 636" required>
 					</div>
-					<div class="has-tls inline field {{if not .HasTLS}}hide{{end}}">
+					<div class="has-tls inline field {{if not .HasTLS}}gt-hidden{{end}}">
 						<div class="ui checkbox">
 							<label><strong>{{.locale.Tr "admin.auths.skip_tls_verify"}}</strong></label>
 							<input name="skip_verify" type="checkbox" {{if .Source.SkipVerify}}checked{{end}}>
@@ -152,7 +152,7 @@
 								<input id="use_paged_search" name="use_paged_search" type="checkbox" {{if $cfg.UsePagedSearch}}checked{{end}}>
 							</div>
 						</div>
-						<div class="field required search-page-size{{if not $cfg.UsePagedSearch}} hide{{end}}">
+						<div class="field required search-page-size{{if not $cfg.UsePagedSearch}} gt-hidden{{end}}">
 							<label for="search_page_size">{{.locale.Tr "admin.auths.search_page_size"}}</label>
 							<input id="search_page_size" name="search_page_size" value="{{if $cfg.UsePagedSearch}}{{$cfg.SearchPageSize}}{{end}}">
 						</div>
@@ -209,7 +209,7 @@
 						</div>
 						<p class="help">{{.locale.Tr "admin.auths.force_smtps_helper"}}</p>
 					</div>
-					<div class="has-tls inline field {{if not .HasTLS}}hide{{end}}">
+					<div class="has-tls inline field {{if not .HasTLS}}gt-hidden{{end}}">
 						<div class="ui checkbox">
 							<label><strong>{{.locale.Tr "admin.auths.skip_tls_verify"}}</strong></label>
 							<input name="skip_verify" type="checkbox" {{if .Source.SkipVerify}}checked{{end}}>

templates/admin/auth/new.tmpl

@@ -36,13 +36,13 @@
 				{{template "admin/auth/source/smtp" .}}
 
 				<!-- PAM -->
-				<div class="pam required field {{if not (eq .type 4)}}hide{{end}}">
+				<div class="pam required field {{if not (eq .type 4)}}gt-hidden{{end}}">
 					<label for="pam_service_name">{{.locale.Tr "admin.auths.pam_service_name"}}</label>
 					<input id="pam_service_name" name="pam_service_name" value="{{.pam_service_name}}" />
 					<label for="pam_email_domain">{{.locale.Tr "admin.auths.pam_email_domain"}}</label>
 					<input id="pam_email_domain" name="pam_email_domain" value="{{.pam_email_domain}}">
 				</div>
-				<div class="pam optional field {{if not (eq .type 4)}}hide{{end}}">
+				<div class="pam optional field {{if not (eq .type 4)}}gt-hidden{{end}}">
 					<div class="ui checkbox">
 						<label for="skip_local_two_fa"><strong>{{.locale.Tr "admin.auths.skip_local_two_fa"}}</strong></label>
 						<input id="skip_local_two_fa" name="skip_local_two_fa" type="checkbox" {{if .skip_local_two_fa}}checked{{end}}>
@@ -62,7 +62,7 @@
 						<input name="attributes_in_bind" type="checkbox" {{if .attributes_in_bind}}checked{{end}}>
 					</div>
 				</div>
-				<div class="ldap inline field {{if not (eq .type 2)}}hide{{end}}">
+				<div class="ldap inline field {{if not (eq .type 2)}}gt-hidden{{end}}">
 					<div class="ui checkbox">
 						<label><strong>{{.locale.Tr "admin.auths.syncenabled"}}</strong></label>
 						<input name="is_sync_enabled" type="checkbox" {{if .is_sync_enabled}}checked{{end}}>

templates/admin/auth/source/ldap.tmpl

@@ -1,4 +1,4 @@
-<div class="ldap dldap field {{if not (or (eq .type 2) (eq .type 5))}}hide{{end}}">
+<div class="ldap dldap field {{if not (or (eq .type 2) (eq .type 5))}}gt-hidden{{end}}">
 	<div class="inline required field {{if .Err_SecurityProtocol}}error{{end}}">
 		<label>{{.locale.Tr "admin.auths.security_protocol"}}</label>
 		<div class="ui selection security-protocol dropdown">
@@ -20,17 +20,17 @@
 		<label for="port">{{.locale.Tr "admin.auths.port"}}</label>
 		<input id="port" name="port" value="{{.port}}"  placeholder="e.g. 636">
 	</div>
-	<div class="has-tls inline field {{if not .HasTLS}}hide{{end}}">
+	<div class="has-tls inline field {{if not .HasTLS}}gt-hidden{{end}}">
 		<div class="ui checkbox">
 			<label><strong>{{.locale.Tr "admin.auths.skip_tls_verify"}}</strong></label>
 			<input name="skip_verify" type="checkbox" {{if .skip_verify}}checked{{end}}>
 		</div>
 	</div>
-	<div class="ldap field {{if not (eq .type 2)}}hide{{end}}">
+	<div class="ldap field {{if not (eq .type 2)}}gt-hidden{{end}}">
 		<label for="bind_dn">{{.locale.Tr "admin.auths.bind_dn"}}</label>
 		<input id="bind_dn" name="bind_dn" value="{{.bind_dn}}" placeholder="e.g. cn=Search,dc=mydomain,dc=com">
 	</div>
-	<div class="ldap field {{if not (eq .type 2)}}hide{{end}}">
+	<div class="ldap field {{if not (eq .type 2)}}gt-hidden{{end}}">
 		<label for="bind_password">{{.locale.Tr "admin.auths.bind_password"}}</label>
 		<input id="bind_password" name="bind_password" type="password" autocomplete="off" value="{{.bind_password}}">
 	</div>
@@ -38,7 +38,7 @@
 		<label for="user_base">{{.locale.Tr "admin.auths.user_base"}}</label>
 		<input id="user_base" name="user_base" value="{{.user_base}}" placeholder="e.g. ou=Users,dc=mydomain,dc=com">
 	</div>
-	<div class="dldap required field {{if not (eq .type 5)}}hide{{end}}">
+	<div class="dldap required field {{if not (eq .type 5)}}gt-hidden{{end}}">
 		<label for="user_dn">{{.locale.Tr "admin.auths.user_dn"}}</label>
 		<input id="user_dn" name="user_dn" value="{{.user_dn}}" placeholder="e.g. uid=%s,ou=Users,dc=mydomain,dc=com">
 	</div>
@@ -115,13 +115,13 @@
 	</div>
 	<!-- ldap group end -->
 
-	<div class="ldap inline field {{if not (eq .type 2)}}hide{{end}}">
+	<div class="ldap inline field {{if not (eq .type 2)}}gt-hidden{{end}}">
 		<div class="ui checkbox">
 			<label for="use_paged_search"><strong>{{.locale.Tr "admin.auths.use_paged_search"}}</strong></label>
 			<input id="use_paged_search" name="use_paged_search" class="use-paged-search" type="checkbox" {{if .use_paged_search}}checked{{end}}>
 		</div>
 	</div>
-	<div class="ldap field search-page-size required {{if or (not (eq .type 2)) (not .use_paged_search)}}hide{{end}}">
+	<div class="ldap field search-page-size required {{if or (not (eq .type 2)) (not .use_paged_search)}}gt-hidden{{end}}">
 		<label for="search_page_size">{{.locale.Tr "admin.auths.search_page_size"}}</label>
 		<input id="search_page_size" name="search_page_size" value="{{.search_page_size}}">
 	</div>

templates/admin/auth/source/oauth.tmpl

@@ -1,4 +1,4 @@
-<div class="oauth2 field {{if not (eq .type 6)}}hide{{end}}">
+<div class="oauth2 field {{if not (eq .type 6)}}gt-hidden{{end}}">
 	<div class="inline required field">
 		<label>{{.locale.Tr "admin.auths.oauth2_provider"}}</label>
 		<div class="ui selection type dropdown">

templates/admin/auth/source/smtp.tmpl

@@ -1,4 +1,4 @@
-<div class="smtp field {{if not (eq .type 3)}}hide{{end}}">
+<div class="smtp field {{if not (eq .type 3)}}gt-hidden{{end}}">
 	<div class="inline required field">
 		<label>{{.locale.Tr "admin.auths.smtp_auth"}}</label>
 		<div class="ui selection type dropdown">

templates/admin/auth/source/sspi.tmpl

@@ -1,4 +1,4 @@
-<div class="sspi field {{if not (eq .type 7)}}hide{{end}}">
+<div class="sspi field {{if not (eq .type 7)}}gt-hidden{{end}}">
 	<div class="field">
 		<div class="ui checkbox">
 			<label for="sspi_auto_create_users"><strong>{{.locale.Tr "admin.auths.sspi_auto_create_users"}}</strong></label>

templates/admin/user/edit.tmpl

@@ -56,7 +56,7 @@
 					</div>
 				</div>
 
-				<div class="required non-local field {{if .Err_LoginName}}error{{end}} {{if eq .User.LoginSource 0}}hide{{end}}">
+				<div class="required non-local field {{if .Err_LoginName}}error{{end}} {{if eq .User.LoginSource 0}}gt-hidden{{end}}">
 					<label for="login_name">{{.locale.Tr "admin.users.auth_login_name"}}</label>
 					<input id="login_name" name="login_name" value="{{.User.LoginName}}" autofocus>
 				</div>
@@ -68,7 +68,7 @@
 					<label for="email">{{.locale.Tr "email"}}</label>
 					<input id="email" name="email" type="email" value="{{.User.Email}}" autofocus required>
 				</div>
-				<div class="local field {{if .Err_Password}}error{{end}} {{if not (or (.User.IsLocal) (.User.IsOAuth2))}}hide{{end}}">
+				<div class="local field {{if .Err_Password}}error{{end}} {{if not (or (.User.IsLocal) (.User.IsOAuth2))}}gt-hidden{{end}}">
 					<label for="password">{{.locale.Tr "password"}}</label>
 					<input id="password" name="password" type="password" autocomplete="new-password">
 					<p class="help">{{.locale.Tr "admin.users.password_helper"}}</p>
@@ -116,7 +116,7 @@
 						<input name="restricted" type="checkbox" {{if .User.IsRestricted}}checked{{end}}>
 					</div>
 				</div>
-				<div class="inline field"{{if DisableGitHooks}} hidden{{end}}>
+				<div class="inline field {{if DisableGitHooks}}gt-hidden{{end}}">
 					<div class="ui checkbox tooltip" data-content="{{.locale.Tr "admin.users.allow_git_hook_tooltip"}}">
 						<label><strong>{{.locale.Tr "admin.users.allow_git_hook"}}</strong></label>
 						<input name="allow_git_hook" type="checkbox" {{if .User.CanEditGitHook}}checked{{end}} {{if DisableGitHooks}}disabled{{end}}>

templates/install.tmpl

@@ -28,7 +28,7 @@
 						</div>
 					</div>
 
-					<div class="hide" data-db-setting-for="common-host">
+					<div class="gt-hidden" data-db-setting-for="common-host">
 						<div class="inline required field {{if .Err_DbSetting}}error{{end}}">
 							<label for="db_host">{{.locale.Tr "install.host"}}</label>
 							<input id="db_host" name="db_host" value="{{.db_host}}">
@@ -48,7 +48,7 @@
 						</div>
 					</div>
 
-					<div class="hide" data-db-setting-for="postgres">
+					<div class="gt-hidden" data-db-setting-for="postgres">
 						<div class="inline required field">
 							<label>{{.locale.Tr "install.ssl_mode"}}</label>
 							<div class="ui selection database type dropdown">
@@ -69,7 +69,7 @@
 						</div>
 					</div>
 
-					<div class="hide" data-db-setting-for="mysql">
+					<div class="gt-hidden" data-db-setting-for="mysql">
 						<div class="inline required field">
 							<label>{{.locale.Tr "install.charset"}}</label>
 							<div class="ui selection database type dropdown">
@@ -83,7 +83,7 @@
 						</div>
 					</div>
 
-					<div class="hide" data-db-setting-for="sqlite3">
+					<div class="gt-hidden" data-db-setting-for="sqlite3">
 						<div class="inline required field {{if or .Err_DbPath .Err_DbSetting}}error{{end}}">
 							<label for="db_path">{{.locale.Tr "install.path"}}</label>
 							<input id="db_path" name="db_path" value="{{.db_path}}">
@@ -346,5 +346,5 @@
 		</div>
 	</div>
 </div>
-<img style="display: none" src="{{AssetUrlPrefix}}/img/loading.png"/>
+<img class="gt-hidden" src="{{AssetUrlPrefix}}/img/loading.png"/>
 {{template "base/footer" .}}

templates/org/settings/options.tmpl

@@ -14,8 +14,8 @@
 						{{.CsrfTokenHtml}}
 						<div class="required field {{if .Err_Name}}error{{end}}">
 							<label for="org_name">{{.locale.Tr "org.org_name_holder"}}
-								<span class="text red hide" id="org-name-change-prompt"> {{.locale.Tr "org.settings.change_orgname_prompt"}}</span>
+								<span class="text red gt-hidden" id="org-name-change-prompt"> {{.locale.Tr "org.settings.change_orgname_prompt"}}</span>
-								<span class="text red hide" id="org-name-change-redirect-prompt"> {{.locale.Tr "org.settings.change_orgname_redirect_prompt"}}</span>
+								<span class="text red gt-hidden" id="org-name-change-redirect-prompt"> {{.locale.Tr "org.settings.change_orgname_redirect_prompt"}}</span>
 							</label>
 							<input id="org_name" name="name" value="{{.Org.Name}}" data-org-name="{{.Org.Name}}" autofocus required>
 						</div>

templates/org/team/new.tmpl

@@ -71,7 +71,7 @@
 							</div>
 							<div class="ui divider"></div>
 
-							<div class="team-units required grouped field"{{if eq .Team.AccessMode 3}} style="display: none"{{end}}>
+							<div class="team-units required grouped field {{if eq .Team.AccessMode 3}}gt-hidden{{end}}">
 								<label>{{.locale.Tr "org.team_unit_desc"}}</label>
 								<table class="ui celled table">
 									<thead>

templates/repo/blame.tmpl

@@ -12,7 +12,7 @@
 				<a class="ui tiny button" href="{{.RepoLink}}/src/{{.BranchNameSubURL}}/{{.TreePath | PathEscapeSegments}}">{{.locale.Tr "repo.normal_view"}}</a>
 				<a class="ui tiny button" href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/{{.TreePath | PathEscapeSegments}}">{{.locale.Tr "repo.file_history"}}</a>
 				<a class="ui tiny button unescape-button">{{.locale.Tr "repo.unescape_control_characters"}}</a>
-				<a class="ui tiny button escape-button" style="display: none;">{{.locale.Tr "repo.escape_control_characters"}}</a>
+				<a class="ui tiny button escape-button gt-hidden">{{.locale.Tr "repo.escape_control_characters"}}</a>
 			</div>
 		</div>
 	</h4>

templates/repo/branch_dropdown.tmpl

@@ -27,7 +27,7 @@
 			</span>
 			{{svg "octicon-triangle-down" 14 "dropdown icon"}}
 		</button>
-		<div class="data" style="display: none" data-mode="{{if or .root.IsViewTag .isTag}}tags{{else}}branches{{end}}">
+		<div class="data gt-hidden" data-mode="{{if or .root.IsViewTag .isTag}}tags{{else}}branches{{end}}">
 			{{if $showBranchesInDropdown}}
 				{{range .root.Branches}}
 					<div class="item branch {{if eq $defaultBranch .}}selected{{end}}" data-url="{{PathEscapeSegments .}}">{{.}}</div>

templates/repo/commits_list.tmpl

@@ -72,7 +72,7 @@
 							{{end}}
 							{{template "repo/commit_statuses" dict "Status" .Status "Statuses" .Statuses "root" $}}
 							{{if IsMultilineCommitMessage .Message}}
-							<pre class="commit-body" style="display: none;">{{RenderCommitBody $.Context .Message $commitRepoLink $.Repository.ComposeMetas}}</pre>
+							<pre class="commit-body gt-hidden">{{RenderCommitBody $.Context .Message $commitRepoLink $.Repository.ComposeMetas}}</pre>
 							{{end}}
 						</td>
 						{{if .Committer}}

templates/repo/commits_list_small.tmpl

@@ -52,7 +52,7 @@
 			<button class="ui button ellipsis-button" aria-expanded="false">...</button>
 		{{end}}
 		{{if IsMultilineCommitMessage .Message}}
-			<pre class="commit-body" style="display: none;">{{RenderCommitBody $.root.Context .Message ($.comment.Issue.PullRequest.BaseRepo.Link|Escape) $.comment.Issue.PullRequest.BaseRepo.ComposeMetas}}</pre>
+			<pre class="commit-body gt-hidden">{{RenderCommitBody $.root.Context .Message ($.comment.Issue.PullRequest.BaseRepo.Link|Escape) $.comment.Issue.PullRequest.BaseRepo.ComposeMetas}}</pre>
 		{{end}}
 	</div>
 {{end}}

templates/repo/create.tmpl

@@ -73,7 +73,7 @@
 						</div>
 					</div>
 
-					<div id="template_units" style="display: none;">
+					<div id="template_units" class="gt-hidden">
 						<div class="inline field">
 							<label>{{.locale.Tr "repo.template.items"}}</label>
 							<div class="ui checkbox">

templates/repo/diff/box.tmpl

@@ -67,7 +67,7 @@
 				</script>
 		<div id="diff-file-list"></div>
 		<div id="diff-container">
-				<div id="diff-file-tree" class="hide"></div>
+				<div id="diff-file-tree" class="gt-hidden"></div>
 				<div id="diff-file-boxes" class="sixteen wide column">
 					{{range $i, $file := .Diff.Files}}
 						{{/*notice: the index of Diff.Files should not be used for element ID, because the index will be restarted from 0 when doing load-more for PRs with a lot of files*/}}
@@ -116,7 +116,7 @@
 									{{end}}
 									{{if not (or $file.IsIncomplete $file.IsBin $file.IsSubmodule)}}
 										<a class="ui basic tiny button unescape-button">{{$.locale.Tr "repo.unescape_control_characters"}}</a>
-										<a class="ui basic tiny button escape-button" style="display: none;">{{$.locale.Tr "repo.escape_control_characters"}}</a>
+										<a class="ui basic tiny button escape-button gt-hidden">{{$.locale.Tr "repo.escape_control_characters"}}</a>
 									{{end}}
 									{{if and (not $file.IsSubmodule) (not $.PageIsWiki)}}
 										{{if $file.IsDeleted}}
@@ -136,7 +136,7 @@
 								</div>
 							</h4>
 							<div class="diff-file-body ui attached unstackable table segment" {{if $file.IsViewed}}data-folded="true"{{end}}>
-								<div id="diff-source-{{$file.NameHash}}" class="file-body file-code unicode-escaped code-diff{{if $.IsSplitStyle}} code-diff-split{{else}} code-diff-unified{{end}}{{if $showFileViewToggle}} hide{{end}}">
+								<div id="diff-source-{{$file.NameHash}}" class="file-body file-code unicode-escaped code-diff{{if $.IsSplitStyle}} code-diff-split{{else}} code-diff-unified{{end}}{{if $showFileViewToggle}} gt-hidden{{end}}">
 									{{if or $file.IsIncomplete $file.IsBin}}
 										<div class="diff-file-body binary" style="padding: 5px 10px;">
 											{{if $file.IsIncomplete}}
@@ -187,7 +187,7 @@
 		</div>
 
 		{{if not $.Repository.IsArchived}}
-			<div class="hide" id="edit-content-form">
+			<div class="gt-hidden" id="edit-content-form">
 				<div class="ui comment form">
 					<div class="ui top attached tabular menu">
 						<a class="active write item">{{$.locale.Tr "write"}}</a>

templates/repo/diff/comment_form.tmpl

@@ -1,5 +1,5 @@
 {{if and $.root.SignedUserID (not $.Repository.IsArchived)}}
-	<form class="ui form {{if $.hidden}}hide comment-form comment-form-reply{{end}}" action="{{$.root.Issue.Link}}/files/reviews/comments" method="post">
+	<form class="ui form {{if $.hidden}}gt-hidden comment-form comment-form-reply{{end}}" action="{{$.root.Issue.Link}}/files/reviews/comments" method="post">
 	{{$.root.CsrfTokenHtml}}
 		<input type="hidden" name="origin" value="{{if $.root.PageIsPullFiles}}diff{{else}}timeline{{end}}">
 		<input type="hidden" name="latest_commit_id" value="{{$.root.AfterCommitID}}"/>

templates/repo/diff/comments.tmpl

@@ -54,8 +54,8 @@
 				<span class="no-content">{{$.root.locale.Tr "repo.issues.no_content"}}</span>
 			{{end}}
 			</div>
-			<div id="issuecomment-{{.ID}}-raw" class="raw-content hide">{{.Content}}</div>
+			<div id="issuecomment-{{.ID}}-raw" class="raw-content gt-hidden">{{.Content}}</div>
-			<div class="edit-content-zone hide" data-write="issuecomment-{{.ID}}-write" data-preview="issuecomment-{{.ID}}-preview" data-update-url="{{$.root.RepoLink}}/comments/{{.ID}}" data-context="{{$.root.RepoLink}}"></div>
+			<div class="edit-content-zone gt-hidden" data-write="issuecomment-{{.ID}}-write" data-preview="issuecomment-{{.ID}}-preview" data-update-url="{{$.root.RepoLink}}/comments/{{.ID}}" data-context="{{$.root.RepoLink}}"></div>
 		</div>
 		{{$reactions := .Reactions.GroupByType}}
 		{{if $reactions}}

templates/repo/diff/compare.tmpl

@@ -88,7 +88,7 @@
 						{{end}}
 					{{end}}
 				</div>
-				<div class="scrolling menu reference-list-menu base-tag-list" style="display: none">
+				<div class="scrolling menu reference-list-menu base-tag-list gt-hidden">
 					{{range .Tags}}
 						<div class="item {{if eq $.BaseBranch .}}selected{{end}}" data-url="{{$.RepoLink}}/compare/{{PathEscapeSegments .}}{{$.CompareSeparator}}{{if not $.PullRequestCtx.SameRepo}}{{PathEscape $.HeadUser.Name}}/{{PathEscape $.HeadRepo.Name}}:{{end}}{{PathEscapeSegments $.HeadBranch}}">{{$BaseCompareName}}:{{.}}</div>
 					{{end}}
@@ -157,7 +157,7 @@
 						{{end}}
 					{{end}}
 				</div>
-				<div class="scrolling menu reference-list-menu head-tag-list" style="display: none">
+				<div class="scrolling menu reference-list-menu head-tag-list gt-hidden">
 					{{range .HeadTags}}
 						<div class="{{if eq $.HeadBranch .}}selected{{end}} item" data-url="{{$.RepoLink}}/compare/{{PathEscapeSegments $.BaseBranch}}{{$.CompareSeparator}}{{if not $.PullRequestCtx.SameRepo}}{{PathEscape $.HeadUser.Name}}/{{PathEscape $.HeadRepo.Name}}:{{end}}{{PathEscapeSegments .}}">{{$HeadCompareName}}:{{.}}</div>
 					{{end}}
@@ -184,10 +184,10 @@
 	{{if .IsNothingToCompare}}
 		{{if and $.IsSigned $.AllowEmptyPr (not .Repository.IsArchived)}}
 			<div class="ui segment">{{.locale.Tr "repo.pulls.nothing_to_compare_and_allow_empty_pr"}}</div>
-			<div class="ui info message show-form-container" {{if .Flash}}style="display: none"{{end}}>
+			<div class="ui info message show-form-container {{if .Flash}}gt-hidden{{end}}">
 				<button class="ui button green show-form">{{.locale.Tr "repo.pulls.new"}}</button>
 			</div>
-			<div class="pullrequest-form" {{if not .Flash}}style="display: none"{{end}}>
+			<div class="pullrequest-form {{if not .Flash}}gt-hidden{{end}}">
 				{{template "repo/issue/new_form" .}}
 			</div>
 		{{else}}
@@ -214,7 +214,7 @@
 			</div>
 		{{else}}
 			{{if and $.IsSigned (not .Repository.IsArchived)}}
-				<div class="ui info message show-form-container" {{if .Flash}}style="display: none"{{end}}>
+				<div class="ui info message show-form-container {{if .Flash}}gt-hidden{{end}}">
 					<button class="ui button green show-form">{{.locale.Tr "repo.pulls.new"}}</button>
 				</div>
 			{{else if .Repository.IsArchived}}
@@ -223,7 +223,7 @@
 				</div>
 			{{end}}
 			{{if $.IsSigned}}
-				<div class="pullrequest-form" {{if not .Flash}}style="display: none"{{end}}>
+				<div class="pullrequest-form {{if not .Flash}}gt-hidden{{end}}">
 					{{template "repo/issue/new_form" .}}
 				</div>
 			{{end}}

templates/repo/diff/conversation.tmpl

@@ -13,14 +13,14 @@
 					{{svg "octicon-unfold" 16 "gt-mr-3"}}
 					{{$.locale.Tr "repo.issues.review.show_resolved"}}
 				</button>
-				<button id="hide-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="hide ui tiny right labeled button hide-outdated gt-df gt-ac">
+				<button id="hide-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="ui tiny right labeled button hide-outdated gt-df gt-ac gt-hidden">
 					{{svg "octicon-fold" 16 "gt-mr-3"}}
 					{{$.locale.Tr "repo.issues.review.hide_resolved"}}
 				</button>
 			</div>
 		</div>
 	{{end}}
-	<div id="code-comments-{{(index  .comments 0).ID}}" class="field comment-code-cloud {{if $resolved}}hide{{end}}">
+	<div id="code-comments-{{(index  .comments 0).ID}}" class="field comment-code-cloud {{if $resolved}}gt-hidden{{end}}">
 		<div class="comment-list">
 			<ui class="ui comments">
 				{{template "repo/diff/comments" dict "root" $ "comments" .comments}}

templates/repo/diff/image_diff.tmpl

@@ -11,7 +11,7 @@
 					{{end}}
 				</div>
 			</div>
-			<div class="hide">
+			<div class="gt-hidden">
 				<div class="ui bottom attached tab image-diff-container active" data-tab="diff-side-by-side-{{.file.Index}}">
 					<div class="diff-side-by-side">
 						{{if .blobBase}}

templates/repo/editor/edit.tmpl

@@ -36,7 +36,7 @@
 					{{end}}
 				</div>
 				<div class="ui bottom attached active tab segment" data-tab="write">
-					<textarea id="edit_area" name="content" class="hide" data-id="repo-{{.Repository.Name}}-{{.TreePath}}"
+					<textarea id="edit_area" name="content" class="gt-hidden" data-id="repo-{{.Repository.Name}}-{{.TreePath}}"
 						data-url="{{.Repository.Link}}/markdown"
 						data-context="{{.RepoLink}}"
 						data-markdown-file-exts="{{.MarkdownFileExts}}"

templates/repo/editor/patch.tmpl

@@ -25,7 +25,7 @@
 					<a class="active item" data-tab="write">{{svg "octicon-code" 16 "gt-mr-2"}}{{.locale.Tr "repo.editor.new_patch"}}</a>
 				</div>
 				<div class="ui bottom attached active tab segment" data-tab="write">
-					<textarea id="edit_area" name="content" class="hide" data-id="repo-{{.Repository.Name}}-patch"
+					<textarea id="edit_area" name="content" class="gt-hidden" data-id="repo-{{.Repository.Name}}-patch"
 						data-context="{{.RepoLink}}"
 						data-line-wrap-extensions="{{.LineWrapExtensions}}">
 {{.FileContent}}</textarea>

templates/repo/find/files.tmpl

@@ -13,7 +13,7 @@
 			<tbody>
 			</tbody>
 		</table>
-		<div id="repo-find-file-no-result" class="ui row center gt-mt-5" hidden>
+		<div id="repo-find-file-no-result" class="ui row center gt-mt-5 gt-hidden">
 			<h3>{{.locale.Tr "repo.find_file.no_matching"}}</h3>
 		</div>
 	</div>

templates/repo/graph.tmpl

@@ -51,7 +51,7 @@
 				</div>
 			</h2>
 			<div class="ui dividing"></div>
-			<div class="ui segment loading hide" id="loading-indicator"></div>
+			<div class="ui segment loading gt-hidden" id="loading-indicator"></div>
 			{{template "repo/graph/svgcontainer" .}}
 			{{template "repo/graph/commits" .}}
 		</div>

templates/repo/home.tmpl

@@ -34,7 +34,7 @@
 		</div>
 		{{end}}
 		{{if and .Permission.IsAdmin (not .Repository.IsArchived)}}
-		<div class="ui repo-topic-edit grid form" id="topic_edit" style="display:none">
+		<div class="ui repo-topic-edit grid form gt-hidden" id="topic_edit">
 			<div class="fourteen wide column">
 				<div class="field">
 					<div class="ui fluid multiple search selection dropdown">
@@ -52,7 +52,7 @@
 			</div>
 		</div>
 		{{end}}
-		<div class="hide" id="validate_prompt">
+		<div class="gt-hidden" id="validate_prompt">
 			<span id="count_prompt">{{.locale.Tr "repo.topic.count_prompt"}}</span>
 			<span id="format_prompt">{{.locale.Tr "repo.topic.format_prompt"}}</span>
 		</div>

templates/repo/issue/branch_selector_field.tmpl

@@ -39,7 +39,7 @@
 				<div class="item" data-id="refs/heads/{{.}}" data-name="{{.}}" data-id-selector="#ref_selector">{{.}}</div>
 			{{end}}
 		</div>
-		<div id="tag-list" class="scrolling menu reference-list-menu {{if not .Issue}}new-issue{{end}}" style="display: none">
+		<div id="tag-list" class="scrolling menu reference-list-menu {{if not .Issue}}new-issue{{end}} gt-hidden">
 			{{if .Reference}}
 				<div class="item text small" data-id="" data-id-selector="#ref_selector"><strong><a href="#">{{.locale.Tr "repo.clear_ref"}}</a></strong></div>
 			{{end}}

templates/repo/issue/labels/label.tmpl

@@ -1,5 +1,5 @@
 <a
-	class="item {{if not .label.IsChecked}}hide{{end}}"
+	class="item {{if not .label.IsChecked}}gt-hidden{{end}}"
 	id="label_{{.label.ID}}"
 	href="{{.root.RepoLink}}/{{if or .root.IsPull .root.Issue.IsPull}}pulls{{else}}issues{{end}}?labels={{.label.ID}}"{{/* FIXME: use .root.Issue.Link or create .root.Link */}}
 >

templates/repo/issue/labels/labels_sidebar.tmpl

@@ -1,5 +1,5 @@
 <div class="ui labels list">
-	<span class="no-select item {{if .ctx.HasSelectedLabel}}hide{{end}}">{{.ctx.locale.Tr "repo.issues.new.no_label"}}</span>
+	<span class="no-select item {{if .ctx.HasSelectedLabel}}gt-hidden{{end}}">{{.ctx.locale.Tr "repo.issues.new.no_label"}}</span>
 	<span class="labels-list">
 		{{range .ctx.Labels}}
 			{{template "repo/issue/labels/label" dict "root" $.root "label" .}}

templates/repo/issue/list.tmpl

@@ -199,7 +199,7 @@
 				</div>
 			</div>
 		</div>
-		<div id="issue-actions" class="ui stackable grid hide">
+		<div id="issue-actions" class="ui stackable grid gt-hidden">
 			<div class="six wide column">
 				{{template "repo/issue/openclose" .}}
 			</div>

templates/repo/issue/milestone_issues.tmpl

@@ -135,7 +135,7 @@
 				</div>
 			</div>
 		</div>
-		<div id="issue-actions" class="ui stackable grid hide">
+		<div id="issue-actions" class="ui stackable grid gt-hidden">
 			<div class="six wide column">
 				{{template "repo/issue/openclose" .}}
 			</div>

templates/repo/issue/new_form.tmpl

@@ -134,7 +134,7 @@
 				</div>
 			</div>
 			<div class="ui select-milestone list">
-				<span class="no-select item {{if .Milestone}}hide{{end}}">{{.locale.Tr "repo.issues.new.no_milestone"}}</span>
+				<span class="no-select item {{if .Milestone}}gt-hidden{{end}}">{{.locale.Tr "repo.issues.new.no_milestone"}}</span>
 				<div class="selected">
 					{{if .Milestone}}
 						<a class="item muted sidebar-item-link" href="{{.RepoLink}}/issues?milestone={{.Milestone.ID}}">
@@ -198,7 +198,7 @@
 				</div>
 			</div>
 			<div class="ui select-project list">
-				<span class="no-select item {{if .Project}}hide{{end}}">{{.locale.Tr "repo.issues.new.no_projects"}}</span>
+				<span class="no-select item {{if .Project}}gt-hidden{{end}}">{{.locale.Tr "repo.issues.new.no_projects"}}</span>
 				<div class="selected">
 					{{if .Project}}
 						<a class="item muted sidebar-item-link" href="{{.RepoLink}}/projects/{{.Project.ID}}">
@@ -236,11 +236,11 @@
 					</div>
 				</div>
 				<div class="ui assignees list">
-					<span class="no-select item {{if .HasSelectedLabel}}hide{{end}}">
+					<span class="no-select item {{if .HasSelectedLabel}}gt-hidden{{end}}">
 						{{.locale.Tr "repo.issues.new.no_assignees"}}
 					</span>
 					{{range .Assignees}}
-						<a class="hide item gt-p-2 muted" id="assignee_{{.ID}}" href="{{$.RepoLink}}/issues?assignee={{.ID}}">
+						<a class="item gt-p-2 muted gt-hidden" id="assignee_{{.ID}}" href="{{$.RepoLink}}/issues?assignee={{.ID}}">
 							{{avatar $.Context . 28 "gt-mr-3 gt-vm"}}{{.GetDisplayName}}
 						</a>
 					{{end}}

templates/repo/issue/view_content.tmpl

@@ -77,8 +77,8 @@
 								<span class="no-content">{{.locale.Tr "repo.issues.no_content"}}</span>
 							{{end}}
 						</div>
-						<div id="issue-{{.Issue.ID}}-raw" class="raw-content hide">{{.Issue.Content}}</div>
+						<div id="issue-{{.Issue.ID}}-raw" class="raw-content gt-hidden">{{.Issue.Content}}</div>
-						<div class="edit-content-zone hide" data-write="issue-{{.Issue.ID}}-write" data-preview="issue-{{.Issue.ID}}-preview" data-update-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/content" data-context="{{.RepoLink}}" data-attachment-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/attachments" data-view-attachment-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/view-attachments"></div>
+						<div class="edit-content-zone gt-hidden" data-write="issue-{{.Issue.ID}}-write" data-preview="issue-{{.Issue.ID}}-preview" data-update-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/content" data-context="{{.RepoLink}}" data-attachment-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/attachments" data-view-attachment-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/view-attachments"></div>
 						{{if .Issue.Attachments}}
 							{{template "repo/issue/view_content/attachments" Dict "ctx" $ "Attachments" .Issue.Attachments "Content" .Issue.RenderedContent}}
 						{{end}}
@@ -194,7 +194,7 @@
 	{{template "repo/issue/view_content/sidebar" .}}
 </div>
 
-<div class="hide" id="edit-content-form">
+<div class="gt-hidden" id="edit-content-form">
 	<div class="ui comment form">
 		<div class="ui top tabular menu">
 			<a class="active write item">{{$.locale.Tr "write"}}</a>
@@ -224,7 +224,7 @@
 
 {{template "repo/issue/view_content/reference_issue_dialog" .}}
 
-<div class="hide" id="no-content">
+<div class="gt-hidden" id="no-content">
 	<span class="no-content">{{.locale.Tr "repo.issues.no_content"}}</span>
 </div>
 

templates/repo/issue/view_content/comments.tmpl

@@ -77,8 +77,8 @@
 								<span class="no-content">{{$.locale.Tr "repo.issues.no_content"}}</span>
 							{{end}}
 						</div>
-						<div id="issuecomment-{{.ID}}-raw" class="raw-content hide">{{.Content}}</div>
+						<div id="issuecomment-{{.ID}}-raw" class="raw-content gt-hidden">{{.Content}}</div>
-						<div class="edit-content-zone hide" data-write="issuecomment-{{.ID}}-write" data-preview="issuecomment-{{.ID}}-preview" data-update-url="{{$.RepoLink}}/comments/{{.ID}}" data-context="{{$.RepoLink}}" data-attachment-url="{{$.RepoLink}}/comments/{{.ID}}/attachments"></div>
+						<div class="edit-content-zone gt-hidden" data-write="issuecomment-{{.ID}}-write" data-preview="issuecomment-{{.ID}}-preview" data-update-url="{{$.RepoLink}}/comments/{{.ID}}" data-context="{{$.RepoLink}}" data-attachment-url="{{$.RepoLink}}/comments/{{.ID}}/attachments"></div>
 						{{if .Attachments}}
 							{{template "repo/issue/view_content/attachments" Dict "ctx" $ "Attachments" .Attachments "Content" .RenderedContent}}
 						{{end}}
@@ -449,8 +449,8 @@
 									<span class="no-content">{{$.locale.Tr "repo.issues.no_content"}}</span>
 								{{end}}
 							</div>
-							<div id="issuecomment-{{.ID}}-raw" class="raw-content hide">{{.Content}}</div>
+							<div id="issuecomment-{{.ID}}-raw" class="raw-content gt-hidden">{{.Content}}</div>
-							<div class="edit-content-zone hide" data-write="issuecomment-{{.ID}}-write" data-preview="issuecomment-{{.ID}}-preview" data-update-url="{{$.RepoLink}}/comments/{{.ID}}" data-context="{{$.RepoLink}}" data-attachment-url="{{$.RepoLink}}/comments/{{.ID}}/attachments"></div>
+							<div class="edit-content-zone gt-hidden" data-write="issuecomment-{{.ID}}-write" data-preview="issuecomment-{{.ID}}-preview" data-update-url="{{$.RepoLink}}/comments/{{.ID}}" data-context="{{$.RepoLink}}" data-attachment-url="{{$.RepoLink}}/comments/{{.ID}}/attachments"></div>
 							{{if .Attachments}}
 								{{template "repo/issue/view_content/attachments" Dict "ctx" $ "Attachments" .Attachments "Content" .RenderedContent}}
 							{{end}}
@@ -576,8 +576,8 @@
 																<span class="no-content">{{$.locale.Tr "repo.issues.no_content"}}</span>
 															{{end}}
 															</div>
-															<div id="issuecomment-{{.ID}}-raw" class="raw-content hide">{{.Content}}</div>
+															<div id="issuecomment-{{.ID}}-raw" class="raw-content gt-hidden">{{.Content}}</div>
-															<div class="edit-content-zone hide" data-write="issuecomment-{{.ID}}-write" data-preview="issuecomment-{{.ID}}-preview" data-update-url="{{$.RepoLink}}/comments/{{.ID}}" data-context="{{$.RepoLink}}" data-attachment-url="{{$.RepoLink}}/comments/{{.ID}}/attachments"></div>
+															<div class="edit-content-zone gt-hidden" data-write="issuecomment-{{.ID}}-write" data-preview="issuecomment-{{.ID}}-preview" data-update-url="{{$.RepoLink}}/comments/{{.ID}}" data-context="{{$.RepoLink}}" data-attachment-url="{{$.RepoLink}}/comments/{{.ID}}/attachments"></div>
 														</div>
 														{{$reactions := .Reactions.GroupByType}}
 														{{if $reactions}}

templates/repo/issue/view_content/pull.tmpl

@@ -456,7 +456,7 @@
 
 			{{if $.StillCanManualMerge}}
 				<div class="ui divider"></div>
-				<div class="ui form manually-merged-fields" style="display: none">
+				<div class="ui form manually-merged-fields gt-hidden">
 					<form action="{{.Link}}/merge" method="post">
 						{{.CsrfTokenHtml}}
 						<div class="field">

templates/repo/issue/view_content/pull_merge_instruction.tmpl

@@ -1,6 +1,6 @@
 <div class="ui divider"></div>
 <div class="instruct-toggle"> {{$.locale.Tr "repo.pulls.merge_instruction_hint" | Safe}} </div>
-<div class="instruct-content gt-mt-3" style="display:none">
+<div class="instruct-content gt-mt-3 gt-hidden">
 	<div><h3 class="gt-di">{{$.locale.Tr "step1"}} </h3>{{$.locale.Tr "repo.pulls.merge_instruction_step1_desc"}}</div>
 	<div class="ui secondary segment">
 		{{if eq $.Issue.PullRequest.Flow 0}}

templates/repo/issue/view_content/sidebar.tmpl

@@ -50,7 +50,7 @@
 			</div>
 
 			<div class="ui assignees list">
-				<span class="no-select item {{if or .OriginalReviews .PullReviewers}}hide{{end}}">{{.locale.Tr "repo.issues.new.no_reviewers"}}</span>
+				<span class="no-select item {{if or .OriginalReviews .PullReviewers}}gt-hidden{{end}}">{{.locale.Tr "repo.issues.new.no_reviewers"}}</span>
 				<div class="selected">
 					{{range .PullReviewers}}
 						<div class="item gt-mb-2">
@@ -202,7 +202,7 @@
 			</div>
 		</div>
 		<div class="ui select-milestone list">
-			<span class="no-select item {{if .Issue.Milestone}}hide{{end}}">{{.locale.Tr "repo.issues.new.no_milestone"}}</span>
+			<span class="no-select item {{if .Issue.Milestone}}gt-hidden{{end}}">{{.locale.Tr "repo.issues.new.no_milestone"}}</span>
 			<div class="selected">
 				{{if .Issue.Milestone}}
 					<a class="item muted sidebar-item-link" href="{{.RepoLink}}/milestone/{{.Issue.Milestone.ID}}">
@@ -259,7 +259,7 @@
 				</div>
 			</div>
 			<div class="ui select-project list">
-				<span class="no-select item {{if .Issue.ProjectID}}hide{{end}}">{{.locale.Tr "repo.issues.new.no_projects"}}</span>
+				<span class="no-select item {{if .Issue.ProjectID}}gt-hidden{{end}}">{{.locale.Tr "repo.issues.new.no_projects"}}</span>
 				<div class="selected">
 					{{if .Issue.ProjectID}}
 						<a class="item muted sidebar-item-link" href="{{.Issue.Project.Link}}">
@@ -308,7 +308,7 @@
 			</div>
 		</div>
 		<div class="ui assignees list">
-			<span class="no-select item {{if .Issue.Assignees}}hide{{end}}">{{.locale.Tr "repo.issues.new.no_assignees"}}</span>
+			<span class="no-select item {{if .Issue.Assignees}}gt-hidden{{end}}">{{.locale.Tr "repo.issues.new.no_assignees"}}</span>
 			<div class="selected">
 				{{range .Issue.Assignees}}
 					<div class="item">
@@ -423,7 +423,7 @@
 		<div class="ui divider"></div>
 		<span class="text"><strong>{{.locale.Tr "repo.issues.due_date"}}</strong></span>
 		<div class="ui form" id="deadline-loader">
-			<div class="ui negative message" id="deadline-err-invalid-date" style="display: none;">
+			<div class="ui negative message gt-hidden" id="deadline-err-invalid-date">
 				{{svg "octicon-x" 16 "close icon"}}
 				{{.locale.Tr "repo.issues.due_date_invalid"}}
 			</div>
@@ -447,7 +447,7 @@
 			{{end}}
 
 			{{if and .HasIssuesOrPullsWritePermission (not .Repository.IsArchived)}}
-				<div {{if ne .Issue.DeadlineUnix 0}} style="display: none;"{{end}} id="deadlineForm">
+				<div {{if ne .Issue.DeadlineUnix 0}} class="gt-hidden"{{end}} id="deadlineForm">
 					<form class="ui fluid action input issue-due-form" action="{{AppSubUrl}}/{{PathEscape .Repository.Owner.Name}}/{{PathEscape .Repository.Name}}/issues/{{.Issue.Index}}/deadline" method="post" id="update-issue-deadline-form">
 						{{$.CsrfTokenHtml}}
 						<input required placeholder="{{.locale.Tr "repo.issues.due_date_form"}}" {{if gt .Issue.DeadlineUnix 0}}value="{{.Issue.DeadlineUnix.Format "2006-01-02"}}"{{end}} type="date" name="deadlineDate" id="deadlineDate">

templates/repo/issue/view_title.tmpl

@@ -8,14 +8,14 @@
 		<h1>
 			<span id="issue-title">{{RenderIssueTitle $.Context .Issue.Title $.RepoLink $.Repository.ComposeMetas | RenderCodeBlock}}</span>
 			<span class="index">#{{.Issue.Index}}</span>
-			<div id="edit-title-input" class="ui input gt-ml-4" style="display: none">
+			<div id="edit-title-input" class="ui input gt-ml-4 gt-hidden">
 				<input value="{{.Issue.Title}}" maxlength="255" autocomplete="off">
 			</div>
 		</h1>
 		{{if and (or .HasIssuesOrPullsWritePermission .IsIssuePoster) (not .Repository.IsArchived)}}
 			<div class="edit-buttons">
-				<button id="cancel-edit-title" class="ui basic button secondary in-edit" style="display: none">{{.locale.Tr "repo.issues.cancel"}}</button>
+				<button id="cancel-edit-title" class="ui basic button secondary in-edit gt-hidden">{{.locale.Tr "repo.issues.cancel"}}</button>
-				<button id="save-edit-title" class="ui primary button in-edit" style="display: none" data-update-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/title" {{if .Issue.IsPull}}data-target-update-url="{{$.RepoLink}}/pull/{{.Issue.Index}}/target_branch"{{end}}>{{.locale.Tr "repo.issues.save"}}</button>
+				<button id="save-edit-title" class="ui primary button in-edit gt-hidden" data-update-url="{{$.RepoLink}}/issues/{{.Issue.Index}}/title" {{if .Issue.IsPull}}data-target-update-url="{{$.RepoLink}}/pull/{{.Issue.Index}}/target_branch"{{end}}>{{.locale.Tr "repo.issues.save"}}</button>
 			</div>
 		{{end}}
 	</div>
@@ -61,7 +61,7 @@
 					{{$.locale.Tr "repo.pulls.title_desc" .NumCommits $headHref $baseHref | Safe}}
 				</span>
 			{{end}}
-			<span id="pull-desc-edit" style="display: none">
+			<span id="pull-desc-edit gt-hidden">
 				<div class="ui floating filter dropdown">
 					<div class="ui basic small button">
 						<span class="text">{{.locale.Tr "repo.pulls.compare_compare"}}: {{$.HeadTarget}}</span>

templates/repo/migrate/migrating.tmpl

@@ -12,7 +12,7 @@
 								<img src="{{AssetUrlPrefix}}/img/loading.png"/>
 							</div>
 						</div>
-						<div id="repo_migrating_failed_image" class="sixteen wide center aligned centered column" style="display: none;">
+						<div id="repo_migrating_failed_image" class="sixteen wide center aligned centered column gt-hidden">
 							<div>
 								<img src="{{AssetUrlPrefix}}/img/failed.png"/>
 							</div>
@@ -24,7 +24,7 @@
 								<p>{{.locale.Tr "repo.migrate.migrating" .CloneAddr | Safe}}</p>
 								<p id="repo_migrating_progress_message"></p>
 							</div>
-							<div id="repo_migrating_failed" hidden>
+							<div id="repo_migrating_failed" class="gt-hidden">
 								{{if .CloneAddr}}
 									<p>{{.locale.Tr "repo.migrate.migrating_failed" .CloneAddr | Safe}}</p>
 								{{else}}

templates/repo/migrate/options.tmpl

@@ -14,9 +14,9 @@
 		<input id="lfs" name="lfs" type="checkbox" {{if .lfs}} checked{{end}}>
 		<label>{{.locale.Tr "repo.migrate_options_lfs"}}</label>
 	</div>
-	<span id="lfs_settings" style="display:none">(<a id="lfs_settings_show" href="#">{{.locale.Tr "repo.settings.advanced_settings"}}</a>)</span>
+	<span id="lfs_settings" class="gt-hidden">(<a id="lfs_settings_show" href="#">{{.locale.Tr "repo.settings.advanced_settings"}}</a>)</span>
 </div>
-<div id="lfs_endpoint" style="display:none">
+<div id="lfs_endpoint" class="gt-hidden">
 	<span class="help">{{.locale.Tr "repo.migrate_options_lfs_endpoint.description" "https://github.com/git-lfs/git-lfs/blob/main/docs/api/server-discovery.md#server-discovery" | Str2html}}{{if .ContextUser.CanImportLocal}} {{.locale.Tr "repo.migrate_options_lfs_endpoint.description.local"}}{{end}}</span>
 	<div class="inline field {{if .Err_LFSEndpoint}}error{{end}}">
 		<label>{{.locale.Tr "repo.migrate_options_lfs_endpoint.label"}}</label>

templates/repo/settings/deploy_keys.tmpl

@@ -15,7 +15,7 @@
 			</div>
 		</h4>
 		<div class="ui attached segment">
-			<div class="{{if not .HasError}}hide{{end}} gt-mb-4" id="add-deploy-key-panel">
+			<div class="{{if not .HasError}}gt-hidden{{end}} gt-mb-4" id="add-deploy-key-panel">
 				<form class="ui form" action="{{.Link}}" method="post">
 					{{.CsrfTokenHtml}}
 					<div class="field">

templates/repo/settings/githook_edit.tmpl

@@ -18,7 +18,7 @@
 					</div>
 					<div class="field">
 						<label for="content">{{$.locale.Tr "repo.settings.githook_content"}}</label>
-						<textarea id="content" name="content" class="hide">{{if .IsActive}}{{.Content}}{{else}}{{.Sample}}{{end}}</textarea>
+						<textarea id="content" name="content" class="gt-hidden">{{if .IsActive}}{{.Content}}{{else}}{{.Sample}}{{end}}</textarea>
 						<div class="editor-loading is-loading"></div>
 					</div>
 					<div class="inline field">

templates/repo/settings/lfs_file.tmpl

@@ -9,7 +9,7 @@
 				<a href="{{.LFSFilesLink}}">{{.locale.Tr "repo.settings.lfs"}}</a> / <span class="truncate sha">{{.LFSFile.Oid}}</span>
 				<div class="ui right">
 					{{if .EscapeStatus.Escaped}}
-						<a class="ui mini basic button unescape-button" style="display: none;">{{.locale.Tr "repo.unescape_control_characters"}}</a>
+						<a class="ui mini basic button unescape-button gt-hidden">{{.locale.Tr "repo.unescape_control_characters"}}</a>
 						<a class="ui mini basic button escape-button">{{.locale.Tr "repo.escape_control_characters"}}</a>
 					{{end}}
 					<a class="ui primary show-panel button" href="{{.LFSFilesLink}}/find?oid={{.LFSFile.Oid}}&size={{.LFSFile.Size}}">{{$.locale.Tr "repo.settings.lfs_findcommits"}}</a>

templates/repo/settings/webhook/history.tmpl

@@ -25,7 +25,7 @@
 							</span>
 						</div>
 					</div>
-					<div class="info hide" id="info-{{.ID}}">
+					<div class="info gt-hidden" id="info-{{.ID}}">
 						<div class="ui top attached tabular menu">
 							<a class="item active" data-tab="request-{{.ID}}">{{$.locale.Tr "repo.settings.webhook.request"}}</a>
 							<a class="item" data-tab="response-{{.ID}}">

templates/repo/settings/webhook/settings.tmpl

@@ -22,7 +22,7 @@
 		</div>
 	</div>
 
-	<div class="events fields ui grid" {{if not .Webhook.ChooseEvents}}style="display:none"{{end}}>
+	<div class="events fields ui grid {{if not .Webhook.ChooseEvents}}gt-hidden{{end}}">
 		<!-- Repository Events -->
 		<div class="fourteen wide column">
 			<label>{{.locale.Tr "repo.settings.event_header_repository"}}</label>

templates/repo/sub_menu.tmpl

@@ -21,7 +21,7 @@
 		</div>
 	</div>
 	{{if and (.Permission.CanRead $.UnitTypeCode) (not .IsEmptyRepo) .LanguageStats}}
-	<div class="ui segment sub-menu language-stats-details" style="display: none">
+	<div class="ui segment sub-menu language-stats-details gt-hidden">
 		<div class="ui horizontal center link list">
 			{{range .LanguageStats}}
 			<div class="item gt-df gt-ac gt-jc">

templates/repo/view_file.tmpl

@@ -33,7 +33,7 @@
 					{{end}}
 					<a class="ui mini basic button" href="{{.RepoLink}}/commits/{{.BranchNameSubURL}}/{{PathEscapeSegments .TreePath}}">{{.locale.Tr "repo.file_history"}}</a>
 					{{if .EscapeStatus.Escaped}}
-						<a class="ui mini basic button unescape-button" style="display: none;">{{.locale.Tr "repo.unescape_control_characters"}}</a>
+						<a class="ui mini basic button unescape-button gt-hidden">{{.locale.Tr "repo.unescape_control_characters"}}</a>
 						<a class="ui mini basic button escape-button">{{.locale.Tr "repo.escape_control_characters"}}</a>
 					{{end}}
 				</div>
@@ -52,7 +52,7 @@
 					{{end}}
 				{{end}}
 			{{else if .EscapeStatus.Escaped}}
-				<a class="ui mini basic button unescape-button gt-mr-2" style="display: none;">{{.locale.Tr "repo.unescape_control_characters"}}</a>
+				<a class="ui mini basic button unescape-button gt-mr-2 gt-hidden">{{.locale.Tr "repo.unescape_control_characters"}}</a>
 				<a class="ui mini basic button escape-button gt-mr-2">{{.locale.Tr "repo.escape_control_characters"}}</a>
 			{{end}}
 		</div>

templates/repo/view_list.tmpl

@@ -29,7 +29,7 @@
 					<span class="grey commit-summary" title="{{.LatestCommit.Summary}}"><span class="message-wrapper">{{RenderCommitMessageLinkSubject $.Context .LatestCommit.Message $.RepoLink $commitLink $.Repository.ComposeMetas}}</span>
 						{{if IsMultilineCommitMessage .LatestCommit.Message}}
 							<button class="ui button ellipsis-button" aria-expanded="false">...</button>
-							<pre class="commit-body" style="display: none;">{{RenderCommitBody $.Context .LatestCommit.Message $.RepoLink $.Repository.ComposeMetas}}</pre>
+							<pre class="commit-body gt-hidden">{{RenderCommitBody $.Context .LatestCommit.Message $.RepoLink $.Repository.ComposeMetas}}</pre>
 						{{end}}
 					</span>
 				{{end}}

templates/repo/wiki/view.tmpl

@@ -47,7 +47,7 @@
 				</div>
 				<div class="eight wide right aligned column">
 					{{if .EscapeStatus.Escaped}}
-						<a class="ui small button unescape-button" style="display: none;">{{.locale.Tr "repo.unescape_control_characters"}}</a>
+						<a class="ui small button unescape-button gt-hidden">{{.locale.Tr "repo.unescape_control_characters"}}</a>
 						<a class="ui small button escape-button">{{.locale.Tr "repo.escape_control_characters"}}</a>
 					{{end}}
 					{{if and .CanWriteWiki (not .Repository.IsMirror)}}

templates/shared/secrets/add_list.tmpl

@@ -5,7 +5,7 @@
 	</div>
 </h4>
 <div class="ui attached segment">
-	<div class="{{if not .HasError}}hide {{end}}gt-mb-4" id="add-secret-panel">
+	<div class="{{if not .HasError}}gt-hidden {{end}}gt-mb-4" id="add-secret-panel">
 		<form class="ui form" action="{{.Link}}" method="post">
 			{{.CsrfTokenHtml}}
 			<div class="field">

templates/user/auth/webauthn_error.tmpl

@@ -5,18 +5,18 @@
 			<div class="header">
 			{{.locale.Tr "webauthn_error"}}
 			</div>
-			<div class="hide" data-webauthn-error-msg="browser"><p>{{.locale.Tr "webauthn_unsupported_browser"}}</div>
+			<div class="gt-hidden" data-webauthn-error-msg="browser"><p>{{.locale.Tr "webauthn_unsupported_browser"}}</div>
-			<div class="hide" data-webauthn-error-msg="unknown"><p>{{.locale.Tr "webauthn_error_unknown"}}</div>
+			<div class="gt-hidden" data-webauthn-error-msg="unknown"><p>{{.locale.Tr "webauthn_error_unknown"}}</div>
-			<div class="hide" data-webauthn-error-msg="insecure"><p>{{.locale.Tr "webauthn_error_insecure"}}</div>
+			<div class="gt-hidden" data-webauthn-error-msg="insecure"><p>{{.locale.Tr "webauthn_error_insecure"}}</div>
-			<div class="hide" data-webauthn-error-msg="unable-to-process"><p>{{.locale.Tr "webauthn_error_unable_to_process"}}</div>
+			<div class="gt-hidden" data-webauthn-error-msg="unable-to-process"><p>{{.locale.Tr "webauthn_error_unable_to_process"}}</div>
-			<div class="hide" data-webauthn-error-msg="duplicated"><p>{{.locale.Tr "webauthn_error_duplicated"}}</div>
+			<div class="gt-hidden" data-webauthn-error-msg="duplicated"><p>{{.locale.Tr "webauthn_error_duplicated"}}</div>
-			<div class="hide" data-webauthn-error-msg="empty"><p>{{.locale.Tr "webauthn_error_empty"}}</div>
+			<div class="gt-hidden" data-webauthn-error-msg="empty"><p>{{.locale.Tr "webauthn_error_empty"}}</div>
-			<div class="hide" data-webauthn-error-msg="timeout"><p>{{.locale.Tr "webauthn_error_timeout"}}</div>
+			<div class="gt-hidden" data-webauthn-error-msg="timeout"><p>{{.locale.Tr "webauthn_error_timeout"}}</div>
-			<div class="hide" data-webauthn-error-msg="general"></div>
+			<div class="gt-hidden" data-webauthn-error-msg="general"></div>
 		</div>
 	</div>
 	<div class="actions">
-		<button onclick="window.location.reload()" class="success ui button hide webauthn_error_timeout">{{.locale.Tr "webauthn_reload"}}</button>
+		<button onclick="window.location.reload()" class="success ui button gt-hidden webauthn_error_timeout">{{.locale.Tr "webauthn_reload"}}</button>
 		<div class="ui cancel button">{{.locale.Tr "cancel"}}</div>
 	</div>
 </div>

templates/user/notification/notification_div.tmpl

@@ -13,7 +13,7 @@
 			{{if and (eq .Status 1)}}
 				<form action="{{AppSubUrl}}/notifications/purge" method="POST" style="margin-left: auto;">
 					{{$.CsrfTokenHtml}}
-					<div class="{{if not $notificationUnreadCount}}hide{{end}}">
+					<div class="{{if not $notificationUnreadCount}}gt-hidden{{end}}">
 						<button class="ui mini button primary" title='{{$.locale.Tr "notification.mark_all_as_read"}}'>
 							{{svg "octicon-checklist"}}
 						</button>

templates/user/settings/keys_gpg.tmpl

@@ -5,7 +5,7 @@
 	</div>
 </h4>
 <div class="ui attached segment">
-	<div class="{{if not .HasGPGError}}hide{{end}} gt-mb-4" id="add-gpg-key-panel">
+	<div class="{{if not .HasGPGError}}gt-hidden{{end}} gt-mb-4" id="add-gpg-key-panel">
 		<form class="ui form{{if .HasGPGError}} error{{end}}" action="{{.Link}}" method="post">
 			{{.CsrfTokenHtml}}
 			<input type="hidden" name="title" value="none">

templates/user/settings/keys_principal.tmpl

@@ -34,7 +34,7 @@
 	</div>
 	<br>
 
-	<div {{if not .HasPrincipalError}}class="hide"{{end}} id="add-ssh-principal-panel">
+	<div {{if not .HasPrincipalError}}class="gt-hidden"{{end}} id="add-ssh-principal-panel">
 		<h4 class="ui top attached header">
 			{{.locale.Tr "settings.add_new_principal"}}
 		</h4>

templates/user/settings/keys_ssh.tmpl

@@ -11,7 +11,7 @@
 	</div>
 </h4>
 <div class="ui attached segment">
-	<div class="{{if not .HasSSHError}}hide{{end}} gt-mb-4" id="add-ssh-key-panel">
+	<div class="{{if not .HasSSHError}}gt-hidden{{end}} gt-mb-4" id="add-ssh-key-panel">
 		<form class="ui form" action="{{.Link}}" method="post">
 			{{.CsrfTokenHtml}}
 			<div class="field {{if .Err_Title}}error{{end}}">

templates/user/settings/profile.tmpl

@@ -12,8 +12,8 @@
 				{{.CsrfTokenHtml}}
 				<div class="required field {{if .Err_Name}}error{{end}}">
 					<label for="username">{{.locale.Tr "username"}}
-						<span class="text red hide" id="name-change-prompt"> {{.locale.Tr "settings.change_username_prompt"}}</span>
+						<span class="text red gt-hidden" id="name-change-prompt"> {{.locale.Tr "settings.change_username_prompt"}}</span>
-						<span class="text red hide" id="name-change-redirect-prompt"> {{.locale.Tr "settings.change_username_redirect_prompt"}}</span>
+						<span class="text red gt-hidden" id="name-change-redirect-prompt"> {{.locale.Tr "settings.change_username_redirect_prompt"}}</span>
 					</label>
 					<input id="username" name="name" value="{{.SignedUser.Name}}" data-name="{{.SignedUser.Name}}" autofocus required {{if or (not .SignedUser.IsLocal) .IsReverseProxy}}disabled{{end}}>
 					{{if or (not .SignedUser.IsLocal) .IsReverseProxy}}

web_src/js/components/DiffFileTree.vue

@@ -113,11 +113,11 @@ export default {
     },
     adjustToggleButton(visible) {
       const [toShow, toHide] = document.querySelectorAll('.diff-toggle-file-tree-button .icon');
-      toShow.classList.toggle('hide', visible);  // hide the toShow icon if the tree is visible
+      toShow.classList.toggle('gt-hidden', visible);  // hide the toShow icon if the tree is visible
-      toHide.classList.toggle('hide', !visible); // similarly
+      toHide.classList.toggle('gt-hidden', !visible); // similarly
 
       const diffTree = document.getElementById('diff-file-tree');
-      diffTree.classList.toggle('hide', !visible);
+      diffTree.classList.toggle('gt-hidden', !visible);
     },
     loadMoreData() {
       this.isLoadingNewData = true;

web_src/js/features/admin/common.js

@@ -1,5 +1,6 @@
 import $ from 'jquery';
 import {checkAppUrl} from '../common-global.js';
+import {hideElem, showElem, toggleElem} from '../../utils/dom.js';
 
 const {csrfToken} = window.config;
 
@@ -18,8 +19,8 @@ export function initAdminCommon() {
       if ($(this).val().substring(0, 1) === '0') {
         $('#user_name').removeAttr('disabled');
         $('#login_name').removeAttr('required');
-        $('.non-local').hide();
+        hideElem($('.non-local'));
-        $('.local').show();
+        showElem($('.local'));
         $('#user_name').focus();
 
         if ($(this).data('password') === 'required') {
@@ -30,8 +31,8 @@ export function initAdminCommon() {
           $('#user_name').attr('disabled', 'disabled');
         }
         $('#login_name').attr('required', 'required');
-        $('.non-local').show();
+        showElem($('.non-local'));
-        $('.local').hide();
+        hideElem($('.local'));
         $('#login_name').focus();
 
         $('#password').removeAttr('required');
@@ -41,38 +42,38 @@ export function initAdminCommon() {
 
   function onSecurityProtocolChange() {
     if ($('#security_protocol').val() > 0) {
-      $('.has-tls').show();
+      showElem($('.has-tls'));
     } else {
-      $('.has-tls').hide();
+      hideElem($('.has-tls'));
     }
   }
 
   function onUsePagedSearchChange() {
     if ($('#use_paged_search').prop('checked')) {
-      $('.search-page-size').show()
+      showElem($('.search-page-size'))
         .find('input').attr('required', 'required');
     } else {
-      $('.search-page-size').hide()
+      hideElem($('.search-page-size'))
         .find('input').removeAttr('required');
     }
   }
 
   function onOAuth2Change(applyDefaultValues) {
-    $('.open_id_connect_auto_discovery_url, .oauth2_use_custom_url').hide();
+    hideElem($('.open_id_connect_auto_discovery_url, .oauth2_use_custom_url'));
     $('.open_id_connect_auto_discovery_url input[required]').removeAttr('required');
 
     const provider = $('#oauth2_provider').val();
     switch (provider) {
       case 'openidConnect':
         $('.open_id_connect_auto_discovery_url input').attr('required', 'required');
-        $('.open_id_connect_auto_discovery_url').show();
+        showElem($('.open_id_connect_auto_discovery_url'));
         break;
       default:
         if ($(`#${provider}_customURLSettings`).data('required')) {
           $('#oauth2_use_custom_url').attr('checked', 'checked');
         }
         if ($(`#${provider}_customURLSettings`).data('available')) {
-          $('.oauth2_use_custom_url').show();
+          showElem($('.oauth2_use_custom_url'));
         }
     }
     onOAuth2UseCustomURLChange(applyDefaultValues);
@@ -80,7 +81,7 @@ export function initAdminCommon() {
 
   function onOAuth2UseCustomURLChange(applyDefaultValues) {
     const provider = $('#oauth2_provider').val();
-    $('.oauth2_use_custom_url_field').hide();
+    hideElem($('.oauth2_use_custom_url_field'));
     $('.oauth2_use_custom_url_field input[required]').removeAttr('required');
 
     if ($('#oauth2_use_custom_url').is(':checked')) {
@@ -90,20 +91,20 @@ export function initAdminCommon() {
         }
         if ($(`#${provider}_${custom}`).data('available')) {
           $(`.oauth2_${custom} input`).attr('required', 'required');
-          $(`.oauth2_${custom}`).show();
+          showElem($(`.oauth2_${custom}`));
         }
       }
     }
   }
 
   function onEnableLdapGroupsChange() {
-    $('#ldap-group-options').toggle($('.js-ldap-group-toggle').is(':checked'));
+    toggleElem($('#ldap-group-options'), $('.js-ldap-group-toggle').is(':checked'));
   }
 
   // New authentication
   if ($('.admin.new.authentication').length > 0) {
     $('#auth_type').on('change', function () {
-      $('.ldap, .dldap, .smtp, .pam, .oauth2, .has-tls, .search-page-size, .sspi').hide();
+      hideElem($('.ldap, .dldap, .smtp, .pam, .oauth2, .has-tls, .search-page-size, .sspi'));
 
       $('.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]').removeAttr('required');
       $('.binddnrequired').removeClass('required');
@@ -111,30 +112,30 @@ export function initAdminCommon() {
       const authType = $(this).val();
       switch (authType) {
         case '2': // LDAP
-          $('.ldap').show();
+          showElem($('.ldap'));
           $('.binddnrequired input, .ldap div.required:not(.dldap) input').attr('required', 'required');
           $('.binddnrequired').addClass('required');
           break;
         case '3': // SMTP
-          $('.smtp').show();
+          showElem($('.smtp'));
-          $('.has-tls').show();
+          showElem($('.has-tls'));
           $('.smtp div.required input, .has-tls').attr('required', 'required');
           break;
         case '4': // PAM
-          $('.pam').show();
+          showElem($('.pam'));
           $('.pam input').attr('required', 'required');
           break;
         case '5': // LDAP
-          $('.dldap').show();
+          showElem($('.dldap'));
           $('.dldap div.required:not(.ldap) input').attr('required', 'required');
           break;
         case '6': // OAuth2
-          $('.oauth2').show();
+          showElem($('.oauth2'));
           $('.oauth2 div.required:not(.oauth2_use_custom_url,.oauth2_use_custom_url_field,.open_id_connect_auto_discovery_url) input').attr('required', 'required');
           onOAuth2Change(true);
           break;
         case '7': // SSPI
-          $('.sspi').show();
+          showElem($('.sspi'));
           $('.sspi div.required input').attr('required', 'required');
           break;
       }

web_src/js/features/common-global.js

@@ -8,6 +8,7 @@ import {attachCheckboxAria, attachDropdownAria} from './aria.js';
 import {handleGlobalEnterQuickSubmit} from './comp/QuickSubmit.js';
 import {initTooltip} from '../modules/tippy.js';
 import {svg} from '../svg.js';
+import {hideElem, showElem, toggleElem} from '../utils/dom.js';
 
 const {appUrl, csrfToken} = window.config;
 
@@ -118,7 +119,7 @@ export function initGlobalCommon() {
   $('.tabable.menu .item').tab();
 
   $('.toggle.button').on('click', function () {
-    $($(this).data('target')).slideToggle(100);
+    toggleElem($($(this).data('target')));
   });
 
   // make table <tr> and <td> elements clickable like a link
@@ -317,7 +318,7 @@ export function initGlobalLinkActions() {
 
 export function initGlobalButtons() {
   $('.show-panel.button').on('click', function () {
-    $($(this).data('panel')).show();
+    showElem($(this).data('panel'));
   });
 
   $('.hide-panel.button').on('click', function (event) {
@@ -325,12 +326,12 @@ export function initGlobalButtons() {
     event.preventDefault();
     let sel = $(this).attr('data-panel');
     if (sel) {
-      $(sel).hide();
+      hideElem($(sel));
       return;
     }
     sel = $(this).attr('data-panel-closest');
     if (sel) {
-      $(this).closest(sel).hide();
+      hideElem($(this).closest(sel));
       return;
     }
     // should never happen, otherwise there is a bug in code

web_src/js/features/common-issue.js

@@ -1,5 +1,6 @@
 import $ from 'jquery';
 import {updateIssuesMeta} from './repo-issue.js';
+import {toggleElem} from '../utils/dom.js';
 
 export function initCommonIssue() {
   const $issueSelectAllWrapper = $('.issue-checkbox-all');
@@ -19,8 +20,8 @@ export function initCommonIssue() {
       $issueSelectAll.prop({'checked': false, 'indeterminate': false});
     }
     // if any issue is selected, show the action panel, otherwise show the filter panel
-    $('#issue-filters').toggle(!anyChecked);
+    toggleElem($('#issue-filters'), !anyChecked);
-    $('#issue-actions').toggle(anyChecked);
+    toggleElem($('#issue-actions'), anyChecked);
     // there are two panels but only one select-all checkbox, so move the checkbox to the visible panel
     $('#issue-filters, #issue-actions').filter(':visible').find('.column:first').prepend($issueSelectAllWrapper);
   };

web_src/js/features/common-organization.js

@@ -1,5 +1,6 @@
 import $ from 'jquery';
 import {initCompLabelEdit} from './comp/LabelEdit.js';
+import {hideElem, showElem} from '../utils/dom.js';
 
 export function initCommonOrganization() {
   if ($('.organization').length === 0) {
@@ -11,11 +12,11 @@ export function initCommonOrganization() {
       const $prompt = $('#org-name-change-prompt');
       const $prompt_redirect = $('#org-name-change-redirect-prompt');
       if ($(this).val().toString().toLowerCase() !== $(this).data('org-name').toString().toLowerCase()) {
-        $prompt.show();
+        showElem($prompt);
-        $prompt_redirect.show();
+        showElem($prompt_redirect);
       } else {
-        $prompt.hide();
+        hideElem($prompt);
-        $prompt_redirect.hide();
+        hideElem($prompt_redirect);
       }
     });
   }

web_src/js/features/comp/WebHookEditor.js

@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import {hideElem, showElem, toggleElem} from '../../utils/dom.js';
 
 const {csrfToken} = window.config;
 
@@ -9,18 +10,18 @@ export function initCompWebHookEditor() {
 
   $('.events.checkbox input').on('change', function () {
     if ($(this).is(':checked')) {
-      $('.events.fields').show();
+      showElem($('.events.fields'));
     }
   });
   $('.non-events.checkbox input').on('change', function () {
     if ($(this).is(':checked')) {
-      $('.events.fields').hide();
+      hideElem($('.events.fields'));
     }
   });
 
   const updateContentType = function () {
     const visible = $('#http_method').val() === 'POST';
-    $('#content_type').parent().parent()[visible ? 'show' : 'hide']();
+    toggleElem($('#content_type').parent().parent(), visible);
   };
   updateContentType();
   $('#http_method').on('change', () => {

web_src/js/features/imagediff.js

@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import {hideElem} from '../utils/dom.js';
 
 function getDefaultSvgBoundsIfUndefined(svgXml, src) {
   const DefaultSize = 300;
@@ -104,7 +105,7 @@ export function initImageDiff() {
               if (bounds) {
                 info.$image.attr('width', bounds.width);
                 info.$image.attr('height', bounds.height);
-                info.$boundsInfo.hide();
+                hideElem(info.$boundsInfo);
               }
             }
           }
@@ -128,8 +129,8 @@ export function initImageDiff() {
         initOverlay(createContext($imageAfter[2], $imageBefore[2]));
       }
 
-      $container.find('> .loader').hide();
+      hideElem($container.find('> .loader'));
-      $container.find('> .hide').removeClass('hide');
+      $container.find('> .gt-hidden').removeClass('gt-hidden');
     }
 
     function initSideBySide(sizes) {

web_src/js/features/install.js

@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import {hideElem, showElem} from '../utils/dom.js';
 
 export function initInstall() {
   if ($('.page-content.install').length === 0) {
@@ -21,12 +22,12 @@ export function initInstall() {
   // Database type change detection.
   $('#db_type').on('change', function () {
     const dbType = $(this).val();
-    $('div[data-db-setting-for]').hide();
+    hideElem($('div[data-db-setting-for]'));
-    $(`div[data-db-setting-for=${dbType}]`).show();
+    showElem($(`div[data-db-setting-for=${dbType}]`));
 
     if (dbType !== 'sqlite3') {
       // for most remote database servers
-      $(`div[data-db-setting-for=common-host]`).show();
+      showElem($(`div[data-db-setting-for=common-host]`));
       const lastDbHost = $dbHost.val();
       const isDbHostDefault = !lastDbHost || Object.values(defaultDbHosts).includes(lastDbHost);
       if (isDbHostDefault) {

web_src/js/features/org-team.js

@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import {hideElem, showElem} from '../utils/dom.js';
 
 const {appSubUrl} = window.config;
 
@@ -7,9 +8,9 @@ export function initOrgTeamSettings() {
   $('.organization.new.team input[name=permission]').on('change', () => {
     const val = $('input[name=permission]:checked', '.organization.new.team').val();
     if (val === 'admin') {
-      $('.organization.new.team .team-units').hide();
+      hideElem($('.organization.new.team .team-units'));
     } else {
-      $('.organization.new.team .team-units').show();
+      showElem($('.organization.new.team .team-units'));
     }
   });
 }

web_src/js/features/repo-commit.js

@@ -1,5 +1,6 @@
 import $ from 'jquery';
 import {createTippy} from '../modules/tippy.js';
+import {toggleElem} from '../utils/dom.js';
 
 const {csrfToken} = window.config;
 
@@ -7,7 +8,7 @@ export function initRepoEllipsisButton() {
   $('.ellipsis-button').on('click', function (e) {
     e.preventDefault();
     const expanded = $(this).attr('aria-expanded') === 'true';
-    $(this).parent().find('.commit-body').toggle();
+    toggleElem($(this).parent().find('.commit-body'));
     $(this).attr('aria-expanded', String(!expanded));
   });
 }

web_src/js/features/repo-common.js

@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import {hideElem, showElem, toggleElem} from '../utils/dom.js';
 
 const {csrfToken} = window.config;
 
@@ -76,8 +77,8 @@ export function initRepoCommonBranchOrTagDropdown(selector) {
   $(selector).each(function () {
     const $dropdown = $(this);
     $dropdown.find('.reference.column').on('click', function () {
-      $dropdown.find('.scrolling.reference-list-menu').hide();
+      hideElem($dropdown.find('.scrolling.reference-list-menu'));
-      $($(this).data('target')).show();
+      showElem($($(this).data('target')));
       return false;
     });
   });
@@ -102,7 +103,7 @@ export function initRepoCommonLanguageStats() {
   if ($('.language-stats').length > 0) {
     $('.language-stats').on('click', (e) => {
       e.preventDefault();
-      $('.language-stats-details, .repository-menu').slideToggle();
+      toggleElem($('.language-stats-details, .repository-menu'));
     });
   }
 }

web_src/js/features/repo-diff.js

@@ -35,8 +35,8 @@ export function initRepoDiffFileViewToggle() {
     $this.addClass('active');
 
     const $target = $($this.data('toggle-selector'));
-    $target.parent().children().addClass('hide');
+    $target.parent().children().addClass('gt-hidden');
-    $target.removeClass('hide');
+    $target.removeClass('gt-hidden');
   });
 }
 
@@ -92,7 +92,7 @@ export function initRepoDiffConversationNav() {
   // Previous/Next code review conversation
   $(document).on('click', '.previous-conversation', (e) => {
     const $conversation = $(e.currentTarget).closest('.comment-code-cloud');
-    const $conversations = $('.comment-code-cloud:not(.hide)');
+    const $conversations = $('.comment-code-cloud:not(.gt-hidden)');
     const index = $conversations.index($conversation);
     const previousIndex = index > 0 ? index - 1 : $conversations.length - 1;
     const $previousConversation = $conversations.eq(previousIndex);
@@ -101,7 +101,7 @@ export function initRepoDiffConversationNav() {
   });
   $(document).on('click', '.next-conversation', (e) => {
     const $conversation = $(e.currentTarget).closest('.comment-code-cloud');
-    const $conversations = $('.comment-code-cloud:not(.hide)');
+    const $conversations = $('.comment-code-cloud:not(.gt-hidden)');
     const index = $conversations.index($conversation);
     const nextIndex = index < $conversations.length - 1 ? index + 1 : 0;
     const $nextConversation = $conversations.eq(nextIndex);

web_src/js/features/repo-editor.js

@@ -2,6 +2,7 @@ import $ from 'jquery';
 import {htmlEscape} from 'escape-goat';
 import {initMarkupContent} from '../markup/content.js';
 import {createCodeEditor} from './codeeditor.js';
+import {hideElem, showElem} from '../utils/dom.js';
 
 const {csrfToken} = window.config;
 let previewFileModes;
@@ -81,10 +82,10 @@ export function initRepoEditor() {
 
   $('.js-quick-pull-choice-option').on('change', function () {
     if ($(this).val() === 'commit-to-new-branch') {
-      $('.quick-pull-branch-name').show();
+      showElem($('.quick-pull-branch-name'));
       $('.quick-pull-branch-name input').prop('required', true);
     } else {
-      $('.quick-pull-branch-name').hide();
+      hideElem($('.quick-pull-branch-name'));
       $('.quick-pull-branch-name input').prop('required', false);
     }
     $('#commit-button').text($(this).attr('button_text'));

web_src/js/features/repo-findfile.js

@@ -1,5 +1,6 @@
 import $ from 'jquery';
 import {svg} from '../svg.js';
+import {toggleElem} from '../utils/dom.js';
 
 const {csrf} = window.config;
 
@@ -83,7 +84,7 @@ function filterRepoFiles(filter) {
   const filterResult = filterRepoFilesWeighted(files, filter);
   const tmplRow = `<tr><td><a></a></td></tr>`;
 
-  $repoFindFileNoResult.toggle(filterResult.length === 0);
+  toggleElem($repoFindFileNoResult, filterResult.length === 0);
   for (const r of filterResult) {
     const $row = $(tmplRow);
     const $a = $row.find('a');

web_src/js/features/repo-graph.js

@@ -56,17 +56,17 @@ export function initRepoGraphGit() {
     ajaxUrl.searchParams.set('div-only', 'true');
     window.history.replaceState({}, '', queryString ? `?${queryString}` : window.location.pathname);
     $('#pagination').empty();
-    $('#rel-container').addClass('hide');
+    $('#rel-container').addClass('gt-hidden');
-    $('#rev-container').addClass('hide');
+    $('#rev-container').addClass('gt-hidden');
-    $('#loading-indicator').removeClass('hide');
+    $('#loading-indicator').removeClass('gt-hidden');
     (async () => {
       const div = $(await $.ajax(String(ajaxUrl)));
       $('#pagination').html(div.find('#pagination').html());
       $('#rel-container').html(div.find('#rel-container').html());
       $('#rev-container').html(div.find('#rev-container').html());
-      $('#loading-indicator').addClass('hide');
+      $('#loading-indicator').addClass('gt-hidden');
-      $('#rel-container').removeClass('hide');
+      $('#rel-container').removeClass('gt-hidden');
-      $('#rev-container').removeClass('hide');
+      $('#rev-container').removeClass('gt-hidden');
     })();
   };
   const dropdownSelected = params.getAll('branch');

web_src/js/features/repo-home.js

@@ -1,5 +1,6 @@
 import $ from 'jquery';
 import {stripTags} from '../utils.js';
+import {hideElem, showElem} from '../utils/dom.js';
 
 const {appSubUrl, csrfToken} = window.config;
 
@@ -13,12 +14,12 @@ export function initRepoTopicBar() {
   const topicPrompts = getPrompts();
 
   mgrBtn.on('click', () => {
-    viewDiv.hide();
+    hideElem(viewDiv);
-    editDiv.css('display', ''); // show Semantic UI Grid
+    showElem(editDiv);
   });
 
   function getPrompts() {
-    const hidePrompt = $('div.hide#validate_prompt');
+    const hidePrompt = $('#validate_prompt');
     const prompts = {
       countPrompt: hidePrompt.children('#count_prompt').text(),
       formatPrompt: hidePrompt.children('#format_prompt').text()
@@ -47,8 +48,8 @@ export function initRepoTopicBar() {
             link.insertBefore(last);
           }
         }
-        editDiv.css('display', 'none');
+        hideElem(editDiv);
-        viewDiv.show();
+        showElem(viewDiv);
       }
     }).fail((xhr) => {
       if (xhr.status === 422) {

web_src/js/features/repo-issue-content.js

@@ -16,7 +16,7 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
   ${svg('octicon-x', 16, 'close icon inside')}
   <div class="header gt-df gt-ac gt-sb">
     <div>${itemTitleHtml}</div>
-    <div class="ui dropdown dialog-header-options gt-df gt-ac gt-mr-5 hide">
+    <div class="ui dropdown dialog-header-options gt-df gt-ac gt-mr-5 gt-hidden">
       ${i18nTextOptions}${svg('octicon-triangle-down', 14, 'dropdown icon')}
       <div class="menu">
         <div class="item red text" data-option-item="delete">${i18nTextDeleteFromHistory}</div>
@@ -62,7 +62,7 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
         $dialog.find('.comment-diff-data').removeClass('is-loading').html(resp.diffHtml);
         // there is only one option "item[data-option-item=delete]", so the dropdown can be entirely shown/hidden.
         if (resp.canSoftDelete) {
-          $dialog.find('.dialog-header-options').removeClass('hide');
+          $dialog.find('.dialog-header-options').removeClass('gt-hidden');
         }
       });
     },

web_src/js/features/repo-issue.js

@@ -5,6 +5,7 @@ import {createCommentEasyMDE, getAttachedEasyMDE} from './comp/EasyMDE.js';
 import {initEasyMDEImagePaste} from './comp/ImagePaste.js';
 import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js';
 import {initTooltip, showTemporaryTooltip} from '../modules/tippy.js';
+import {hideElem, showElem, toggleElem} from '../utils/dom.js';
 
 const {appSubUrl, csrfToken} = window.config;
 
@@ -40,7 +41,7 @@ export function initRepoIssueTimeTracking() {
 }
 
 function updateDeadline(deadlineString) {
-  $('#deadline-err-invalid-date').hide();
+  hideElem($('#deadline-err-invalid-date'));
   $('#deadline-loader').addClass('loading');
 
   let realDeadline = null;
@@ -49,7 +50,7 @@ function updateDeadline(deadlineString) {
 
     if (Number.isNaN(newDate)) {
       $('#deadline-loader').removeClass('loading');
-      $('#deadline-err-invalid-date').show();
+      showElem($('#deadline-err-invalid-date'));
       return false;
     }
     realDeadline = new Date(newDate);
@@ -69,7 +70,7 @@ function updateDeadline(deadlineString) {
     },
     error() {
       $('#deadline-loader').removeClass('loading');
-      $('#deadline-err-invalid-date').show();
+      showElem($('#deadline-err-invalid-date'));
     },
   });
 }
@@ -213,8 +214,8 @@ export function initRepoIssueCodeCommentCancel() {
   $(document).on('click', '.cancel-code-comment', (e) => {
     const form = $(e.currentTarget).closest('form');
     if (form.length > 0 && form.hasClass('comment-form')) {
-      form.addClass('hide');
+      form.addClass('gt-hidden');
-      form.closest('.comment-code-cloud').find('button.comment-form-reply').show();
+      showElem(form.closest('.comment-code-cloud').find('button.comment-form-reply'));
     } else {
       form.closest('.comment-code-cloud').remove();
     }
@@ -269,7 +270,7 @@ export function initRepoPullRequestUpdate() {
 
 export function initRepoPullRequestMergeInstruction() {
   $('.show-instruction').on('click', () => {
-    $('.instruct-content').toggle();
+    toggleElem($('.instruct-content'));
   });
 }
 
@@ -455,9 +456,9 @@ export function initRepoPullRequestReview() {
   $(document).on('click', 'button.comment-form-reply', async function (e) {
     e.preventDefault();
 
-    $(this).hide();
+    hideElem($(this));
     const form = $(this).closest('.comment-code-cloud').find('.comment-form');
-    form.removeClass('hide');
+    form.removeClass('gt-hidden');
     const $textarea = form.find('textarea');
     let easyMDE = getAttachedEasyMDE($textarea);
     if (!easyMDE) {
@@ -488,10 +489,10 @@ export function initRepoPullRequestReview() {
 
   $('.btn-review').on('click', function (e) {
     e.preventDefault();
-    $(this).closest('.dropdown').find('.menu').toggle('visible');
+    $(this).closest('.dropdown').find('.menu').toggle('visible'); // eslint-disable-line
   }).closest('.dropdown').find('.close').on('click', function (e) {
     e.preventDefault();
-    $(this).closest('.menu').toggle('visible');
+    $(this).closest('.menu').toggle('visible'); // eslint-disable-line
   });
 
   $(document).on('click', 'a.add-code-comment', async function (e) {
@@ -551,7 +552,7 @@ export function initRepoIssueReferenceIssue() {
   // Reference issue
   $(document).on('click', '.reference-issue', function (event) {
     const $this = $(this);
-    $this.closest('.dropdown').find('.menu').toggle('visible');
+    $this.closest('.dropdown').find('.menu').toggle('visible');  // eslint-disable-line
 
     const content = $(`#${$this.data('target')}`).text();
     const poster = $this.data('poster-username');
@@ -587,12 +588,12 @@ export function initRepoIssueTitleEdit() {
   const $editInput = $('#edit-title-input input');
 
   const editTitleToggle = function () {
-    $issueTitle.toggle();
+    toggleElem($issueTitle);
-    $('.not-in-edit').toggle();
+    toggleElem($('.not-in-edit'));
-    $('#edit-title-input').toggle();
+    toggleElem($('#edit-title-input'));
-    $('#pull-desc').toggle();
+    toggleElem($('#pull-desc'));
-    $('#pull-desc-edit').toggle();
+    toggleElem($('#pull-desc-edit'));
-    $('.in-edit').toggle();
+    toggleElem($('.in-edit'));
     $('#issue-title-wrapper').toggleClass('edit-active');
     $editInput.focus();
     return false;

web_src/js/features/repo-legacy.js

@@ -25,6 +25,7 @@ import {initCommentContent, initMarkupContent} from '../markup/content.js';
 import {initCompReactionSelector} from './comp/ReactionSelector.js';
 import {initRepoSettingBranches} from './repo-settings.js';
 import {initRepoPullRequestMergeForm} from './repo-issue-pr-form.js';
+import {hideElem, showElem} from '../utils/dom.js';
 
 const {csrfToken} = window.config;
 
@@ -55,9 +56,9 @@ export function initRepoCommentForm() {
       }
     });
     $selectBranch.find('.reference.column').on('click', function () {
-      $selectBranch.find('.scrolling.reference-list-menu').css('display', 'none');
+      hideElem($selectBranch.find('.scrolling.reference-list-menu'));
       $selectBranch.find('.reference .text').removeClass('black');
-      $($(this).data('target')).css('display', 'block');
+      showElem($($(this).data('target')));
       $(this).find('.text').addClass('black');
       return false;
     });
@@ -174,15 +175,15 @@ export function initRepoCommentForm() {
       $(this).parent().find('.item').each(function () {
         if ($(this).hasClass('checked')) {
           listIds.push($(this).data('id'));
-          $($(this).data('id-selector')).removeClass('hide');
+          $($(this).data('id-selector')).removeClass('gt-hidden');
         } else {
-          $($(this).data('id-selector')).addClass('hide');
+          $($(this).data('id-selector')).addClass('gt-hidden');
         }
       });
       if (listIds.length === 0) {
-        $noSelect.removeClass('hide');
+        $noSelect.removeClass('gt-hidden');
       } else {
-        $noSelect.addClass('hide');
+        $noSelect.addClass('gt-hidden');
       }
       $($(this).parent().data('id')).val(listIds.join(','));
       return false;
@@ -208,9 +209,9 @@ export function initRepoCommentForm() {
       }
 
       $list.find('.item').each(function () {
-        $(this).addClass('hide');
+        $(this).addClass('gt-hidden');
       });
-      $noSelect.removeClass('hide');
+      $noSelect.removeClass('gt-hidden');
       $($(this).parent().data('id')).val('');
     });
   }
@@ -257,7 +258,7 @@ export function initRepoCommentForm() {
         </a>
       `);
 
-      $(`.ui${select_id}.list .no-select`).addClass('hide');
+      $(`.ui${select_id}.list .no-select`).addClass('gt-hidden');
       $(input_id).val($(this).data('id'));
     });
     $menu.find('.no-select.item').on('click', function () {
@@ -275,7 +276,7 @@ export function initRepoCommentForm() {
       }
 
       $list.find('.selected').html('');
-      $list.find('.no-select').removeClass('hide');
+      $list.find('.no-select').removeClass('gt-hidden');
       $(input_id).val('');
     });
   }
@@ -290,7 +291,7 @@ export function initRepoCommentForm() {
 async function onEditContent(event) {
   event.preventDefault();
 
-  $(this).closest('.dropdown').find('.menu').toggle('visible');
+  $(this).closest('.dropdown').find('.menu').toggle('visible'); // eslint-disable-line
   const $segment = $(this).closest('.header').next();
   const $editContentZone = $segment.find('.edit-content-zone');
   const $renderContent = $segment.find('.render-content');
@@ -387,16 +388,16 @@ async function onEditContent(event) {
     });
 
     $editContentZone.find('.cancel.button').on('click', () => {
-      $renderContent.show();
+      showElem($renderContent);
-      $editContentZone.hide();
+      hideElem($editContentZone);
       if (dz) {
         dz.emit('reload');
       }
     });
 
     $saveButton.on('click', () => {
-      $renderContent.show();
+      showElem($renderContent);
-      $editContentZone.hide();
+      hideElem($editContentZone);
       const $attachments = $dropzone.find('.files').find('[name=files]').map(function () {
         return $(this).val();
       }).get();
@@ -438,8 +439,8 @@ async function onEditContent(event) {
   }
 
   // Show write/preview tab and copy raw content as needed
-  $editContentZone.show();
+  showElem($editContentZone);
-  $renderContent.hide();
+  hideElem($renderContent);
   if ($textarea.val().length === 0) {
     $textarea.val($rawContent.text());
     easyMDE.value($rawContent.text());
@@ -558,10 +559,10 @@ export function initRepository() {
     // show pull request form
     $repoComparePull.find('button.show-form').on('click', function (e) {
       e.preventDefault();
-      $(this).parent().hide();
+      hideElem($(this).parent());
 
       const $form = $repoComparePull.find('.pullrequest-form');
-      $form.show();
+      showElem($form);
       $form.find('textarea.edit_area').each(function() {
         const easyMDE = getAttachedEasyMDE($(this));
         if (easyMDE) {
@@ -583,7 +584,7 @@ function initRepoIssueCommentEdit() {
 
   // Quote reply
   $(document).on('click', '.quote-reply', function (event) {
-    $(this).closest('.dropdown').find('.menu').toggle('visible');
+    $(this).closest('.dropdown').find('.menu').toggle('visible'); // eslint-disable-line
     const target = $(this).data('target');
     const quote = $(`#${target}`).text().replace(/\n/g, '\n> ');
     const content = `> ${quote}\n\n`;

web_src/js/features/repo-migrate.js

@@ -1,12 +1,13 @@
 import $ from 'jquery';
+import {hideElem, showElem} from '../utils/dom.js';
 
 const {appSubUrl, csrfToken} = window.config;
 
 export function initRepoMigrationStatusChecker() {
   const migrating = $('#repo_migrating');
-  $('#repo_migrating_failed').hide();
+  hideElem($('#repo_migrating_failed'));
-  $('#repo_migrating_failed_image').hide();
+  hideElem($('#repo_migrating_failed_image'));
-  $('#repo_migrating_progress_message').hide();
+  hideElem($('#repo_migrating_progress_message'));
   if (migrating) {
     const task = migrating.attr('task');
     if (task === undefined) {
@@ -24,15 +25,15 @@ export function initRepoMigrationStatusChecker() {
             window.location.reload();
             return;
           } else if (xhr.responseJSON.status === 3) {
-            $('#repo_migrating_progress').hide();
+            hideElem($('#repo_migrating_progress'));
-            $('#repo_migrating').hide();
+            hideElem($('#repo_migrating'));
-            $('#repo_migrating_failed').show();
+            showElem($('#repo_migrating_failed'));
-            $('#repo_migrating_failed_image').show();
+            showElem($('#repo_migrating_failed_image'));
             $('#repo_migrating_failed_error').text(xhr.responseJSON.message);
             return;
           }
           if (xhr.responseJSON.message) {
-            $('#repo_migrating_progress_message').show();
+            showElem($('#repo_migrating_progress_message'));
             $('#repo_migrating_progress_message').text(xhr.responseJSON.message);
           }
           setTimeout(() => {
@@ -40,10 +41,10 @@ export function initRepoMigrationStatusChecker() {
           }, 2000);
           return;
         }
-        $('#repo_migrating_progress').hide();
+        hideElem($('#repo_migrating_progress'));
-        $('#repo_migrating').hide();
+        hideElem($('#repo_migrating'));
-        $('#repo_migrating_failed').show();
+        showElem($('#repo_migrating_failed'));
-        $('#repo_migrating_failed_image').show();
+        showElem($('#repo_migrating_failed_image'));
       }
     });
   }

web_src/js/features/repo-migration.js

@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import {hideElem, showElem, toggleElem} from '../utils/dom.js';
 
 const $service = $('#service_type');
 const $user = $('#auth_username');
@@ -18,7 +19,7 @@ export function initRepoMigration() {
   $pass.on('keyup', () => {checkItems(false)});
   $token.on('keyup', () => {checkItems(true)});
   $mirror.on('change', () => {checkItems(true)});
-  $('#lfs_settings_show').on('click', () => { $lfsEndpoint.show(); return false });
+  $('#lfs_settings_show').on('click', () => { showElem($lfsEndpoint); return false });
   $lfs.on('change', setLFSSettingsVisibility);
 
   const $cloneAddr = $('#clone_addr');
@@ -57,6 +58,6 @@ function checkItems(tokenAuth) {
 
 function setLFSSettingsVisibility() {
   const visible = $lfs.is(':checked');
-  $lfsSettings.toggle(visible);
+  toggleElem($lfsSettings, visible);
-  $lfsEndpoint.hide();
+  hideElem($lfsEndpoint);
 }

web_src/js/features/repo-release.js

@@ -3,13 +3,14 @@ import {attachTribute} from './tribute.js';
 import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js';
 import {initEasyMDEImagePaste} from './comp/ImagePaste.js';
 import {createCommentEasyMDE} from './comp/EasyMDE.js';
+import {hideElem} from '../utils/dom.js';
 
 export function initRepoRelease() {
   $(document).on('click', '.remove-rel-attach', function() {
     const uuid = $(this).data('uuid');
     const id = $(this).data('id');
     $(`input[name='attachment-del-${uuid}']`).attr('value', true);
-    $(`#attachment-${id}`).hide();
+    hideElem($(`#attachment-${id}`));
   });
 }
 

web_src/js/features/repo-template.js

@@ -1,5 +1,6 @@
 import $ from 'jquery';
 import {htmlEscape} from 'escape-goat';
+import {hideElem, showElem} from '../utils/dom.js';
 
 const {appSubUrl} = window.config;
 
@@ -9,11 +10,11 @@ export function initRepoTemplateSearch() {
     const $templateUnits = $('#template_units');
     const $nonTemplate = $('#non_template');
     if ($repoTemplate.val() !== '' && $repoTemplate.val() !== '0') {
-      $templateUnits.show();
+      showElem($templateUnits);
-      $nonTemplate.hide();
+      hideElem($nonTemplate);
     } else {
-      $templateUnits.hide();
+      hideElem($templateUnits);
-      $nonTemplate.show();
+      showElem($nonTemplate);
     }
   };
   $repoTemplate.on('change', checkTemplate);

web_src/js/features/repo-unicode-escape.js

@@ -1,17 +1,18 @@
 import $ from 'jquery';
+import {hideElem, showElem} from '../utils/dom.js';
 
 export function initUnicodeEscapeButton() {
   $(document).on('click', 'a.escape-button', (e) => {
     e.preventDefault();
     $(e.target).parents('.file-content, .non-diff-file-content').find('.file-code, .file-view').addClass('unicode-escaped');
-    $(e.target).hide();
+    hideElem($(e.target));
-    $(e.target).siblings('a.unescape-button').show();
+    showElem($(e.target).siblings('a.unescape-button'));
   });
   $(document).on('click', 'a.unescape-button', (e) => {
     e.preventDefault();
     $(e.target).parents('.file-content, .non-diff-file-content').find('.file-code, .file-view').removeClass('unicode-escaped');
-    $(e.target).hide();
+    hideElem($(e.target));
-    $(e.target).siblings('a.escape-button').show();
+    showElem($(e.target).siblings('a.escape-button'));
   });
   $(document).on('click', 'a.toggle-escape-button', (e) => {
     e.preventDefault();
@@ -19,12 +20,12 @@ export function initUnicodeEscapeButton() {
     const fileView = fileContent.find('.file-code, .file-view');
     if (fileView.hasClass('unicode-escaped')) {
       fileView.removeClass('unicode-escaped');
-      fileContent.find('a.unescape-button').hide();
+      hideElem(fileContent.find('a.unescape-button'));
-      fileContent.find('a.escape-button').show();
+      showElem(fileContent.find('a.escape-button'));
     } else {
       fileView.addClass('unicode-escaped');
-      fileContent.find('a.unescape-button').show();
+      showElem(fileContent.find('a.unescape-button'));
-      fileContent.find('a.escape-button').hide();
+      hideElem(fileContent.find('a.escape-button'));
     }
   });
 }

web_src/js/features/user-auth-webauthn.js

@@ -1,5 +1,6 @@
 import $ from 'jquery';
 import {encode, decode} from 'uint8-to-base64';
+import {hideElem, showElem} from '../utils/dom.js';
 
 const {appSubUrl, csrfToken} = window.config;
 
@@ -132,16 +133,18 @@ function webauthnRegistered(newCredential) {
 }
 
 function webAuthnError(errorType, message) {
-  $('#webauthn-error [data-webauthn-error-msg]').hide();
+  hideElem($('#webauthn-error [data-webauthn-error-msg]'));
   const $errorGeneral = $(`#webauthn-error [data-webauthn-error-msg=general]`);
   if (errorType === 'general') {
-    $errorGeneral.show().text(message || 'unknown error');
+    showElem($errorGeneral);
+    $errorGeneral.text(message || 'unknown error');
   } else {
     const $errorTyped = $(`#webauthn-error [data-webauthn-error-msg=${errorType}]`);
     if ($errorTyped.length) {
-      $errorTyped.show();
+      showElem($errorTyped);
     } else {
-      $errorGeneral.show().text(`unknown error type: ${errorType}`);
+      showElem($errorGeneral);
+      $errorGeneral.text(`unknown error type: ${errorType}`);
     }
   }
   $('#webauthn-error').modal('show');

web_src/js/features/user-auth.js

@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import {hideElem, showElem} from '../utils/dom.js';
 
 export function initUserAuthOauth2() {
   const $oauth2LoginNav = $('#oauth2-login-navigator');
@@ -8,14 +9,14 @@ export function initUserAuthOauth2() {
     const oauthLoader = $('#oauth2-login-loader');
     const oauthNav = $('#oauth2-login-navigator');
 
-    oauthNav.hide();
+    hideElem(oauthNav);
     oauthLoader.removeClass('disabled');
 
     setTimeout(() => {
       // recover previous content to let user try again
       // usually redirection will be performed before this action
       oauthLoader.addClass('disabled');
-      oauthNav.show();
+      showElem(oauthNav);
     }, 5000);
   });
 }

web_src/js/features/user-settings.js

@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import {hideElem, showElem} from '../utils/dom.js';
 
 export function initUserSettings() {
   if ($('.user.settings.profile').length > 0) {
@@ -6,11 +7,11 @@ export function initUserSettings() {
       const $prompt = $('#name-change-prompt');
       const $prompt_redirect = $('#name-change-redirect-prompt');
       if ($(this).val().toString().toLowerCase() !== $(this).data('name').toString().toLowerCase()) {
-        $prompt.show();
+        showElem($prompt);
-        $prompt_redirect.show();
+        showElem($prompt_redirect);
       } else {
-        $prompt.hide();
+        hideElem($prompt);
-        $prompt_redirect.hide();
+        hideElem($prompt_redirect);
       }
     });
   }

web_src/js/utils/dom.js

@@ -0,0 +1,65 @@
+function getComputedStyleProperty(el, prop) {
+  const cs = el ? window.getComputedStyle(el) : null;
+  return cs ? cs[prop] : null;
+}
+
+function isShown(el) {
+  return getComputedStyleProperty(el, 'display') !== 'none';
+}
+
+function assertShown(el, expectShown) {
+  if (window.config.runModeIsProd) return;
+
+  // to help developers to catch display bugs, this assertion can be removed after next release cycle or if it has been proved that there is no bug.
+  if (expectShown && !isShown(el)) {
+    throw new Error('element is hidden but should be shown');
+  } else if (!expectShown && isShown(el)) {
+    throw new Error('element is shown but should be hidden');
+  }
+}
+
+function elementsCall(el, func, ...args) {
+  if (el instanceof String) {
+    el = document.querySelectorAll(el);
+  }
+  if (el instanceof Node) {
+    func(el, ...args);
+  } else if (el.length !== undefined) {
+    // this works for: NodeList, HTMLCollection, Array, jQuery
+    for (const e of el) {
+      func(e, ...args);
+    }
+  } else {
+    throw new Error('invalid argument to be shown/hidden');
+  }
+}
+
+function toggleShown(el, force) {
+  if (force === true) {
+    el.classList.remove('gt-hidden');
+    assertShown(el, true);
+  } else if (force === false) {
+    el.classList.add('gt-hidden');
+    assertShown(el, false);
+  } else if (force === undefined) {
+    const wasShown = window.config.runModeIsProd ? undefined : isShown(el);
+    el.classList.toggle('gt-hidden');
+    if (wasShown !== undefined) {
+      assertShown(el, !wasShown);
+    }
+  } else {
+    throw new Error('invalid force argument');
+  }
+}
+
+export function showElem(el) {
+  elementsCall(el, toggleShown, true);
+}
+
+export function hideElem(el) {
+  elementsCall(el, toggleShown, false);
+}
+
+export function toggleElem(el, force) {
+  elementsCall(el, toggleShown, force);
+}

web_src/less/_base.less

@@ -1812,11 +1812,6 @@ footer {
   }
 }
 
-// TODO: refactor to use ".gt-hidden" instead (a simple search&replace should do the trick)
-.hide {
-  display: none;
-}
-
 .center:not(.popup) {
   text-align: center;
 }

web_src/less/_repository.less

@@ -106,10 +106,6 @@
         margin-right: 8.75px;
       }
 
-      .hide {
-        display: none !important;
-      }
-
       .dependency {
         padding: 0;
         white-space: nowrap;
@@ -2592,18 +2588,10 @@
   }
 }
 
-#issue-filters.hide {
-  display: none;
-}
-
 #issue-actions {
   margin-top: -1rem !important; // counteract padding from Semantic
 }
 
-#issue-actions.hide {
-  display: none;
-}
-
 .ui.menu .item > img:not(.ui) {
   width: auto;
 }

web_src/less/helpers.less

@@ -181,5 +181,15 @@
   .gt-js-small { justify-content: flex-start !important; }
 }
 
-// gt-hidden must be placed after all other "display: xxx !important" classes to win the hidden chance
+/*
+gt-hidden must be placed after all other "display: xxx !important" classes to win the chance
+do not use:
+* "[hidden]" attribute: it's too weak, can not be applied to an element with "display: flex"
+* ".hidden" class: it has been polluted by Fomantic UI in many cases
+* inline style="display: none": it's difficult to tweak
+* jQuery's show/hide/toggle: it can not show/hide elements with "display: xxx !important"
+only use:
+* this ".gt-hidden" class
+* showElem/hideElem/toggleElem functions in "utils/dom.js"
+*/
 .gt-hidden { display: none !important; }