Fix line-button issue after file selection in file tree (#34574)

Fix the issue where the line-button fails to work after selecting a file
from the file tree.

---------

Co-authored-by: wxiaoguang <[email protected]>

Author: kerwin612

web_src/css/repo/file-view.css

@@ -1,7 +1,10 @@
-.file-view tr.active {
+.file-view tr.active .lines-num,
+.file-view tr.active .lines-escape,
+.file-view tr.active .lines-code {
   background: var(--color-highlight-bg);
 }
 
+/* set correct border radius on the last active lines, to avoid border overflow */
 .file-view tr.active:last-of-type .lines-code {
   border-bottom-right-radius: var(--border-radius);
 }
@@ -10,6 +13,7 @@
   position: relative;
 }
 
+/* add a darker "handler" at the beginning of the active line */
 .file-view tr.active .lines-num::before {
   content: "";
   position: absolute;

web_src/js/features/repo-code.ts

@@ -110,10 +110,15 @@ function showLineButton() {
 }
 
 export function initRepoCodeView() {
-  if (!document.querySelector('.code-view .lines-num')) return;
+  // When viewing a file or blame, there is always a ".file-view" element,
+  // but the ".code-view" class is only present when viewing the "code" of a file; it is not present when viewing a PDF file.
+  // Since the ".file-view" will be dynamically reloaded when navigating via the left file tree (eg: view a PDF file, then view a source code file, etc.)
+  // the "code-view" related event listeners should always be added when the current page contains ".file-view" element.
+  if (!document.querySelector('.repo-view-container .file-view')) return;
 
+  // "file code view" and "blame" pages need this "line number button" feature
   let selRangeStart: string;
-  addDelegatedEventListener(document, 'click', '.lines-num span', (el: HTMLElement, e: KeyboardEvent) => {
+  addDelegatedEventListener(document, 'click', '.code-view .lines-num span', (el: HTMLElement, e: KeyboardEvent) => {
     if (!selRangeStart || !e.shiftKey) {
       selRangeStart = el.getAttribute('id');
       selectRange(selRangeStart);
@@ -125,12 +130,14 @@ export function initRepoCodeView() {
     showLineButton();
   });
 
+  // apply the selected range from the URL hash
   const onHashChange = () => {
     if (!window.location.hash) return;
+    if (!document.querySelector('.code-view .lines-num')) return;
     const range = window.location.hash.substring(1);
     const first = selectRange(range);
     if (first) {
-      // set scrollRestoration to 'manual' when there is a hash in url, so that the scroll position will not be remembered after refreshing
+      // set scrollRestoration to 'manual' when there is a hash in the URL, so that the scroll position will not be remembered after refreshing
       if (window.history.scrollRestoration !== 'manual') window.history.scrollRestoration = 'manual';
       first.scrollIntoView({block: 'start'});
       showLineButton();

web_src/js/modules/tippy.ts

@@ -40,6 +40,7 @@ export function createTippy(target: Element, opts: TippyOpts = {}): Instance {
         }
       }
       visibleInstances.add(instance);
+      target.setAttribute('aria-controls', instance.popper.id);
       return onShow?.(instance);
     },
     arrow: arrow ?? (theme === 'bare' ? false : arrowSvg),
@@ -180,13 +181,25 @@ export function initGlobalTooltips(): void {
 }
 
 export function showTemporaryTooltip(target: Element, content: Content): void {
-  // if the target is inside a dropdown, the menu will be hidden soon
-  // so display the tooltip on the dropdown instead
-  target = target.closest('.ui.dropdown') || target;
-  const tippy = target._tippy ?? attachTooltip(target, content);
-  tippy.setContent(content);
-  if (!tippy.state.isShown) tippy.show();
-  tippy.setProps({
+  // if the target is inside a dropdown or tippy popup, the menu will be hidden soon
+  // so display the tooltip on the "aria-controls" element or dropdown instead
+  let refClientRect: DOMRect;
+  const popupTippyId = target.closest(`[data-tippy-root]`)?.id;
+  if (popupTippyId) {
+    // for example, the "Copy Permalink" button in the "File View" page for the selected lines
+    target = document.body;
+    refClientRect = document.querySelector(`[aria-controls="${CSS.escape(popupTippyId)}"]`)?.getBoundingClientRect();
+    refClientRect = refClientRect ?? new DOMRect(0, 0, 0, 0); // fallback to empty rect if not found, tippy doesn't accept null
+  } else {
+    // for example, the "Copy Link" button in the issue header dropdown menu
+    target = target.closest('.ui.dropdown') ?? target;
+    refClientRect = target.getBoundingClientRect();
+  }
+  const tooltipTippy = target._tippy ?? attachTooltip(target, content);
+  tooltipTippy.setContent(content);
+  tooltipTippy.setProps({getReferenceClientRect: () => refClientRect});
+  if (!tooltipTippy.state.isShown) tooltipTippy.show();
+  tooltipTippy.setProps({
     onHidden: (tippy) => {
       // reset the default tooltip content, if no default, then this temporary tooltip could be destroyed
       if (!attachTooltip(target)) {