Refactor hiding-methods, remove jQuery show/hide, remove .hide clas…

…s, remove inline style=display:none (go-gitea#22950)

Close go-gitea#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,25 +20,25 @@
 		<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>
 	<div class="binddnrequired {{if (eq .type 2)}}required{{end}} field">
 		<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 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-prompt"> {{.locale.Tr "org.settings.change_orgname_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 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 id="issuecomment-{{.ID}}-raw" class="raw-content gt-hidden">{{.Content}}</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}}