Fix various problems (#35012)

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

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
-  toggleClass(toggleButtons.querySelector('.file-view-toggle-rendered'), 'active', displayingRendered);
+  toggleElemClass(toggleButtons.querySelectorAll('.file-view-toggle-source'), 'active', !displayingRendered); // it may not exist
+  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');
-    toggleClass(graphContainer, 'colored', mode === 'colored');
+    toggleElemClass(graphContainer, 'monochrome', mode === 'monochrome');
+    toggleElemClass(graphContainer, 'colored', mode === 'colored');
 
-    toggleClass(elColorMonochrome, 'active', mode === 'monochrome');
-    toggleClass(elColorColored, 'active', mode === 'colored');
+    toggleElemClass(elColorMonochrome, 'active', mode === 'monochrome');
+    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);
-    toggleClass(el.getAttribute('data-context'), 'disabled', el.checked);
+    toggleTargetContextPanel(el.getAttribute('data-target'), 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');
-    toggleClass(el.getAttribute('data-context'), 'disabled', el.value === 'true');
+    toggleTargetContextPanel(el.getAttribute('data-target'), 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 () => {
-  await import(/* webpackChunkName: "index-domready" */'./index-domready.ts');
+  // 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> {