Fix various problems (#35012)

* Fix #35011
* Fix incorrect log message for "Protocol"
* Remove unnecessary styles, fix "comment-header" wrap, fix label height

modules/setting/server.go

@@ -275,7 +275,7 @@ func loadServerFrom(rootCfg ConfigProvider) {
 			HTTPAddr = filepath.Join(AppWorkPath, HTTPAddr)
 		}
 	default:
-		log.Fatal("Invalid PROTOCOL %q", Protocol)
+		log.Fatal("Invalid PROTOCOL %q", protocolCfg)
 	}
 	UseProxyProtocol = sec.Key("USE_PROXY_PROTOCOL").MustBool(false)
 	ProxyProtocolTLSBridging = sec.Key("PROXY_PROTOCOL_TLS_BRIDGING").MustBool(false)

templates/repo/diff/comments.tmpl

@@ -9,7 +9,7 @@
 	{{end}}
 	<div class="content comment-container">
 		<div class="comment-header">
-			<div class="comment-header-left tw-flex tw-items-center">
+			<div class="comment-header-left">
 				{{if .OriginalAuthor}}
 					<span class="text black tw-font-semibold tw-mr-1">
 						{{svg (MigrationIcon $.root.Repository.GetOriginalURLHostname)}}
@@ -30,7 +30,7 @@
 					</span>
 				{{end}}
 			</div>
-			<div class="comment-header-right actions tw-flex tw-items-center">
+			<div class="comment-header-right">
 				{{if .Invalidated}}
 					{{$referenceUrl := printf "%s#%s" $.root.Issue.Link .HashTag}}
 					<a href="{{$referenceUrl}}" class="ui label basic small" data-tooltip-content="{{ctx.Locale.Tr "repo.issues.review.outdated_description"}}">

templates/repo/issue/view_content.tmpl

@@ -14,7 +14,7 @@
 				{{end}}
 				<div class="content comment-container">
 					<div class="comment-header" role="heading" aria-level="3">
-						<div class="comment-header-left tw-flex tw-items-center">
+						<div class="comment-header-left">
 							{{if .Issue.OriginalAuthor}}
 								<span class="text black tw-font-semibold">
 									{{svg (MigrationIcon .Repository.GetOriginalURLHostname)}}
@@ -36,7 +36,7 @@
 								</span>
 							{{end}}
 						</div>
-						<div class="comment-header-right actions tw-flex tw-items-center">
+						<div class="comment-header-right">
 							{{template "repo/issue/view_content/show_role" dict "ShowRole" .Issue.ShowRole "IgnorePoster" true}}
 							{{if not $.Repository.IsArchived}}
 								{{template "repo/issue/view_content/add_reaction" dict "ActionURL" (printf "%s/issues/%d/reactions" $.RepoLink .Issue.Index)}}

templates/repo/issue/view_content/comments.tmpl

@@ -27,7 +27,7 @@
 			{{end}}
 				<div class="content comment-container">
 					<div class="comment-header" role="heading" aria-level="3">
-						<div class="comment-header-left tw-flex tw-items-center">
+						<div class="comment-header-left">
 							{{if .OriginalAuthor}}
 								<span class="text black tw-font-semibold tw-mr-1">
 									{{svg (MigrationIcon $.Repository.GetOriginalURLHostname)}}
@@ -51,7 +51,7 @@
 								</span>
 							{{end}}
 						</div>
-						<div class="comment-header-right actions tw-flex tw-items-center">
+						<div class="comment-header-right">
 							{{template "repo/issue/view_content/show_role" dict "ShowRole" .ShowRole}}
 							{{if not $.Repository.IsArchived}}
 								{{template "repo/issue/view_content/add_reaction" dict "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID)}}
@@ -395,7 +395,7 @@
 				<div class="timeline-item comment">
 					<div class="content comment-container">
 						<div class="comment-header">
-							<div class="comment-header-left tw-flex tw-items-center">
+							<div class="comment-header-left">
 								{{if gt .Poster.ID 0}}
 									<a class="inline-timeline-avatar" href="{{.Poster.HomeLink}}">
 										{{ctx.AvatarUtils.Avatar .Poster 24}}
@@ -416,7 +416,7 @@
 									{{ctx.Locale.Tr "repo.issues.review.left_comment"}}
 								</span>
 							</div>
-							<div class="comment-header-right actions tw-flex tw-items-center">
+							<div class="comment-header-right">
 								{{template "repo/issue/view_content/show_role" dict "ShowRole" .ShowRole}}
 								{{if not $.Repository.IsArchived}}
 									{{template "repo/issue/view_content/add_reaction" dict "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID)}}

templates/repo/issue/view_content/conversation.tmpl

@@ -58,7 +58,7 @@
 					<div class="comment code-comment" id="{{.HashTag}}">
 						<div class="content comment-container">
 							<div class="comment-header">
-								<div class="comment-header-left tw-flex tw-items-center">
+								<div class="comment-header-left">
 									{{if not .OriginalAuthor}}
 										<a class="avatar">
 											{{ctx.AvatarUtils.Avatar .Poster 20}}
@@ -79,7 +79,7 @@
 										{{ctx.Locale.Tr "repo.issues.commented_at" .HashTag $createdSubStr}}
 									</span>
 								</div>
-								<div class="comment-header-right actions tw-flex tw-items-center">
+								<div class="comment-header-right">
 									{{template "repo/issue/view_content/show_role" dict "ShowRole" .ShowRole}}
 									{{if not $.Repository.IsArchived}}
 										{{template "repo/issue/view_content/add_reaction" dict "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID)}}

web_src/css/base.css

@@ -185,10 +185,6 @@ details summary {
   cursor: pointer;
 }
 
-details summary > * {
-  display: inline;
-}
-
 progress {
   background: var(--color-secondary-dark-1);
   border-radius: var(--border-radius);
@@ -474,15 +470,6 @@ a.label,
   color: var(--color-text-light-2);
 }
 
-.ui.comments .comment .actions a {
-  color: var(--color-text-light);
-}
-
-.ui.comments .comment .actions a.active,
-.ui.comments .comment .actions a:hover {
-  color: var(--color-primary);
-}
-
 img.ui.avatar,
 .ui.avatar img,
 .ui.avatar svg {

web_src/css/modules/label.css

@@ -93,7 +93,6 @@ a.ui.label:hover {
   background: var(--color-button);
   border: 1px solid var(--color-light-border);
   color: var(--color-text-light);
-  padding: calc(0.5833em - 1px) calc(0.833em - 1px);
 }
 a.ui.basic.label:hover {
   text-decoration: none;
@@ -254,6 +253,7 @@ a.ui.ui.ui.basic.grey.label:hover {
   color: var(--color-label-hover-bg);
 }
 
+/* "horizontal label" is actually "fat label" which has enough padding spaces to be used standalone in headers */
 .ui.horizontal.label {
   margin: 0 0.5em 0 0;
   padding: 0.4em 0.833em;

web_src/css/repo.css

@@ -1420,13 +1420,15 @@ td .commit-summary {
 .comment-header {
   background: var(--color-box-header);
   border-bottom: 1px solid var(--color-secondary);
-  padding: 0 1rem;
+  padding: 0.5em 1rem;
   position: relative;
   color: var(--color-text);
   min-height: 41px;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  flex-wrap: wrap;
+  gap: 0.25em;
 }
 
 .comment-header::before,
@@ -1468,17 +1470,16 @@ td .commit-summary {
   left: 7px;
 }
 
-.comment-header .actions a:not(.label) {
-  padding: 0.5rem !important;
-}
-
-.comment-header .actions .label {
-  margin: 0 !important;
-}
-
 .comment-header-left,
 .comment-header-right {
-  gap: 4px;
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+}
+
+.comment-header-right {
+  flex: 1;
+  justify-content: end;
 }
 
 .comment-body {
@@ -2014,15 +2015,6 @@ tbody.commit-list {
   .commit-table th.sha {
     display: none !important;
   }
-  .comment-header {
-    flex-wrap: wrap;
-  }
-  .comment-header .comment-header-left {
-    flex-wrap: wrap;
-  }
-  .comment-header .comment-header-right {
-    margin-left: auto;
-  }
 }
 
 .commit-status-header {

web_src/js/features/file-view.ts

@@ -2,7 +2,7 @@ import type {FileRenderPlugin} from '../render/plugin.ts';
 import {newRenderPlugin3DViewer} from '../render/plugins/3d-viewer.ts';
 import {newRenderPluginPdfViewer} from '../render/plugins/pdf-viewer.ts';
 import {registerGlobalInitFunc} from '../modules/observer.ts';
-import {createElementFromHTML, showElem, toggleClass} from '../utils/dom.ts';
+import {createElementFromHTML, showElem, toggleElemClass} from '../utils/dom.ts';
 import {html} from '../utils/html.ts';
 import {basename} from '../utils.ts';
 
@@ -21,8 +21,8 @@ function showRenderRawFileButton(elFileView: HTMLElement, renderContainer: HTMLE
   const toggleButtons = elFileView.querySelector('.file-view-toggle-buttons');
   showElem(toggleButtons);
   const displayingRendered = Boolean(renderContainer);
-  toggleClass(toggleButtons.querySelectorAll('.file-view-toggle-source'), 'active', !displayingRendered); // it may not exist
+  toggleElemClass(toggleButtons.querySelectorAll('.file-view-toggle-source'), 'active', !displayingRendered); // it may not exist
-  toggleClass(toggleButtons.querySelector('.file-view-toggle-rendered'), 'active', displayingRendered);
+  toggleElemClass(toggleButtons.querySelector('.file-view-toggle-rendered'), 'active', displayingRendered);
   // TODO: if there is only one button, hide it?
 }
 

web_src/js/features/repo-graph.ts

@@ -1,4 +1,4 @@
-import {toggleClass} from '../utils/dom.ts';
+import {toggleElemClass} from '../utils/dom.ts';
 import {GET} from '../modules/fetch.ts';
 import {fomanticQuery} from '../modules/fomantic/base.ts';
 
@@ -9,11 +9,11 @@ export function initRepoGraphGit() {
   const elColorMonochrome = document.querySelector<HTMLElement>('#flow-color-monochrome');
   const elColorColored = document.querySelector<HTMLElement>('#flow-color-colored');
   const toggleColorMode = (mode: 'monochrome' | 'colored') => {
-    toggleClass(graphContainer, 'monochrome', mode === 'monochrome');
+    toggleElemClass(graphContainer, 'monochrome', mode === 'monochrome');
-    toggleClass(graphContainer, 'colored', mode === 'colored');
+    toggleElemClass(graphContainer, 'colored', mode === 'colored');
 
-    toggleClass(elColorMonochrome, 'active', mode === 'monochrome');
+    toggleElemClass(elColorMonochrome, 'active', mode === 'monochrome');
-    toggleClass(elColorColored, 'active', mode === 'colored');
+    toggleElemClass(elColorColored, 'active', mode === 'colored');
 
     const params = new URLSearchParams(window.location.search);
     params.set('mode', mode);

web_src/js/features/repo-settings.ts

@@ -1,6 +1,6 @@
 import {minimatch} from 'minimatch';
 import {createMonaco} from './codeeditor.ts';
-import {onInputDebounce, queryElems, toggleClass, toggleElem} from '../utils/dom.ts';
+import {onInputDebounce, queryElems, toggleElem} from '../utils/dom.ts';
 import {POST} from '../modules/fetch.ts';
 import {initRepoSettingsBranchesDrag} from './repo-settings-branches.ts';
 import {fomanticQuery} from '../modules/fomantic/base.ts';
@@ -124,14 +124,18 @@ function initRepoSettingsOptions() {
   const pageContent = document.querySelector('.page-content.repository.settings.options');
   if (!pageContent) return;
 
-  // Enable or select internal/external wiki system and issue tracker.
+  // toggle related panels for the checkbox/radio inputs, the "selector" may not exist
+  const toggleTargetContextPanel = (selector: string, enabled: boolean) => {
+    if (!selector) return;
+    queryElems(document, selector, (el) => el.classList.toggle('disabled', !enabled));
+  };
   queryElems<HTMLInputElement>(pageContent, '.enable-system', (el) => el.addEventListener('change', () => {
-    toggleClass(el.getAttribute('data-target'), 'disabled', !el.checked);
+    toggleTargetContextPanel(el.getAttribute('data-target'), el.checked);
-    toggleClass(el.getAttribute('data-context'), 'disabled', el.checked);
+    toggleTargetContextPanel(el.getAttribute('data-context'), !el.checked);
   }));
   queryElems<HTMLInputElement>(pageContent, '.enable-system-radio', (el) => el.addEventListener('change', () => {
-    toggleClass(el.getAttribute('data-target'), 'disabled', el.value === 'false');
+    toggleTargetContextPanel(el.getAttribute('data-target'), el.value === 'true');
-    toggleClass(el.getAttribute('data-context'), 'disabled', el.value === 'true');
+    toggleTargetContextPanel(el.getAttribute('data-context'), el.value === 'false');
   }));
 
   queryElems<HTMLInputElement>(pageContent, '.js-tracker-issue-style', (el) => el.addEventListener('change', () => {

web_src/js/index.ts

@@ -9,5 +9,15 @@ import {onDomReady} from './utils/dom.ts';
 import 'htmx.org';
 
 onDomReady(async () => {
+  // when navigate before the import complete, there will be an error from webpack chunk loader:
+  // JavaScript promise rejection: Loading chunk index-domready failed.
+  try {
     await import(/* webpackChunkName: "index-domready" */'./index-domready.ts');
+  } catch (e) {
+    if (e.name === 'ChunkLoadError') {
+      console.error('Error loading index-domready:', e);
+    } else {
+      throw e;
+    }
+  }
 });

web_src/js/utils.ts

@@ -1,6 +1,6 @@
 import {decode, encode} from 'uint8-to-base64';
 import type {IssuePageInfo, IssuePathInfo, RepoOwnerPathInfo} from './types.ts';
-import {toggleClass, toggleElem} from './utils/dom.ts';
+import {toggleElemClass, toggleElem} from './utils/dom.ts';
 
 // transform /path/to/file.ext to /path/to
 export function dirname(path: string): string {
@@ -194,7 +194,7 @@ export function toggleFullScreen(fullscreenElementsSelector: string, isFullScree
 
   const fullScreenEl = document.querySelector(fullscreenElementsSelector);
   const outerEl = document.querySelector('.full.height');
-  toggleClass(fullscreenElementsSelector, 'fullscreen', isFullScreen);
+  toggleElemClass(fullscreenElementsSelector, 'fullscreen', isFullScreen);
   if (isFullScreen) {
     outerEl.append(fullScreenEl);
   } else {

web_src/js/utils/dom.ts

@@ -25,7 +25,7 @@ function elementsCall(el: ElementArg, func: ElementsCallbackWithArgs, ...args: a
   throw new Error('invalid argument to be shown/hidden');
 }
 
-export function toggleClass(el: ElementArg, className: string, force?: boolean): ArrayLikeIterable<Element> {
+export function toggleElemClass(el: ElementArg, className: string, force?: boolean): ArrayLikeIterable<Element> {
   return elementsCall(el, (e: Element) => {
     if (force === true) {
       e.classList.add(className);
@@ -44,7 +44,7 @@ export function toggleClass(el: ElementArg, className: string, force?: boolean):
  * @param force force=true to show or force=false to hide, undefined to toggle
  */
 export function toggleElem(el: ElementArg, force?: boolean): ArrayLikeIterable<Element> {
-  return toggleClass(el, 'tw-hidden', force === undefined ? force : !force);
+  return toggleElemClass(el, 'tw-hidden', force === undefined ? force : !force);
 }
 
 export function showElem(el: ElementArg): ArrayLikeIterable<Element> {