From 9be90a58754061171bbd5025d85d2b891364efd3 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Thu, 23 Mar 2023 17:56:15 +0800
Subject: [PATCH] Use a general approach to show tooltip, fix temporary tooltip
 bug (#23574)

## TLDR

* Improve performance: lazy creating the tippy instances.
* Transparently support all "tooltip" elements, no need to call
`initTooltip` again and again.
* Fix a temporary tooltip re-entrance bug, which causes showing temp
content forever.
* Upgrade vue3-calendar-heatmap to 2.0.2 with lazy tippy init
(initHeatmap time decreases from 100ms to 50ms)

## Details

### The performance

Creating a lot of tippy tooltip instances is expensive. This PR doesn't
create all tippy tooltip instances, instead, it only adds "mouseover"
event listener to necessary elements, and then switches to the tippy
tooltip

### The general approach for all tooltips

Before, dynamically generated tooltips need to be called with
`initTooltip`.

After, use MutationObserver to:

* Attach the event listeners to newly created tooltip elements, work for
Vue (easier than before)
* Catch changed attributes and update the tooltip content (better than
before)

It does help a lot, eg:

https://github.com/go-gitea/gitea/blob/1a4efa0ee9a49d48549be7479a46be133b9bc260/web_src/js/components/PullRequestMergeForm.vue#L33-L36

### Temporary tooltip re-entrance bug

To reproduce, on try.gitea.io, click the "copy clone url" quickly, then
the tooltip will be "Copied!" forever.

After this PR, with the help of `attachTippyTooltip`, the tooltip
content could be reset to the default correctly.

### Other changes

* `data-tooltip-content` is preferred from now on, the old
`data-content` may cause conflicts with other modules.
* `data-placement` was only used for tooltip, so it's renamed to
`data-tooltip-placement`, and removed from `createTippy`.
---
 package-lock.json                             |  12 +-
 package.json                                  |   2 +-
 .../repo/issue/view_content/sidebar.tmpl      |   4 +-
 templates/repo/sub_menu.tmpl                  |   2 +-
 web_src/js/components/DashboardRepoList.vue   |   4 -
 web_src/js/components/DiffFileList.vue        |  12 --
 web_src/js/components/DiffFileTreeItem.vue    |   2 +-
 web_src/js/features/common-global.js          |   7 --
 web_src/js/features/contextpopup.js           |   1 +
 web_src/js/features/repo-diff.js              |   5 -
 web_src/js/features/repo-issue.js             |   5 +-
 web_src/js/index.js                           |   2 +-
 web_src/js/modules/tippy.js                   | 117 +++++++++++++++---
 13 files changed, 111 insertions(+), 64 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 353e0ab655e2a..2f277f180f307 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,7 +43,7 @@
         "vue": "3.2.47",
         "vue-bar-graph": "2.0.0",
         "vue-loader": "17.0.1",
-        "vue3-calendar-heatmap": "2.0.0",
+        "vue3-calendar-heatmap": "2.0.2",
         "webpack": "5.76.2",
         "webpack-cli": "5.0.1",
         "workbox-routing": "6.5.4",
@@ -9425,17 +9425,17 @@
       }
     },
     "node_modules/vue3-calendar-heatmap": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/vue3-calendar-heatmap/-/vue3-calendar-heatmap-2.0.0.tgz",
-      "integrity": "sha512-BchyC33WiZryYatFINj3LWqgyE6X82Huzf7abA23tsF/IbaRZVwZzie8SmGaYvezEBiPXhJogQ3dtxIuXFjkBw==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/vue3-calendar-heatmap/-/vue3-calendar-heatmap-2.0.2.tgz",
+      "integrity": "sha512-ev0rNbOGhzX1YcNhFE0xSmJQUzK96wubBLdzaUKtKf0GhjYE8QAwzmWYcYrugolLgDj2vKzHQ/9gA3O9S26WOA==",
       "dependencies": {
         "tippy.js": "^6.3.7"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=16"
       },
       "peerDependencies": {
-        "vue": "^3.2.24"
+        "vue": "^3.2.29"
       }
     },
     "node_modules/w3c-xmlserializer": {
diff --git a/package.json b/package.json
index db7cf1154bfb5..e5f346f207b92 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "vue": "3.2.47",
     "vue-bar-graph": "2.0.0",
     "vue-loader": "17.0.1",
-    "vue3-calendar-heatmap": "2.0.0",
+    "vue3-calendar-heatmap": "2.0.2",
     "webpack": "5.76.2",
     "webpack-cli": "5.0.1",
     "workbox-routing": "6.5.4",
diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl
index cef1e3a02ec89..fb7c77f4eb43f 100644
--- a/templates/repo/issue/view_content/sidebar.tmpl
+++ b/templates/repo/issue/view_content/sidebar.tmpl
@@ -661,9 +661,9 @@
 			{{if and (not (eq .Issue.PullRequest.HeadRepo.FullName .Issue.PullRequest.BaseRepo.FullName)) .CanWriteToHeadRepo}}
 				<div class="ui divider"></div>
 				<div class="inline field">
-					<div class="ui checkbox" id="allow-edits-from-maintainers"
+					<div class="ui checkbox tooltip" id="allow-edits-from-maintainers"
 							data-url="{{.Issue.Link}}"
-							data-prompt-tip="{{.locale.Tr "repo.pulls.allow_edits_from_maintainers_desc"}}"
+							data-tooltip-content="{{.locale.Tr "repo.pulls.allow_edits_from_maintainers_desc"}}"
 							data-prompt-error="{{.locale.Tr "repo.pulls.allow_edits_from_maintainers_err"}}"
 						>
 						<label><strong>{{.locale.Tr "repo.pulls.allow_edits_from_maintainers"}}</strong></label>
diff --git a/templates/repo/sub_menu.tmpl b/templates/repo/sub_menu.tmpl
index 5c1688d019689..adb1e3079fc3c 100644
--- a/templates/repo/sub_menu.tmpl
+++ b/templates/repo/sub_menu.tmpl
@@ -40,7 +40,7 @@
 	</div>
 	<a class="ui segment language-stats">
 		{{range .LanguageStats}}
-		<div class="bar tooltip" style="width: {{.Percentage}}%; background-color: {{.Color}}" data-placement="top" data-content={{.Language}}>&nbsp;</div>
+		<div class="bar tooltip" style="width: {{.Percentage}}%; background-color: {{.Color}}" data-tooltip-placement="top" data-tooltip-content={{.Language}}>&nbsp;</div>
 		{{end}}
 	</a>
 	{{end}}
diff --git a/web_src/js/components/DashboardRepoList.vue b/web_src/js/components/DashboardRepoList.vue
index 075af65af38c0..a97cfb02babe6 100644
--- a/web_src/js/components/DashboardRepoList.vue
+++ b/web_src/js/components/DashboardRepoList.vue
@@ -147,7 +147,6 @@
 <script>
 import {createApp, nextTick} from 'vue';
 import $ from 'jquery';
-import {initTooltip} from '../modules/tippy.js';
 import {SvgIcon} from '../svg.js';
 
 const {appSubUrl, assetUrlPrefix, pageData} = window.config;
@@ -238,9 +237,6 @@ const sfc = {
   mounted() {
     const el = document.getElementById('dashboard-repo-list');
     this.changeReposFilter(this.reposFilter);
-    for (const elTooltip of el.querySelectorAll('.tooltip')) {
-      initTooltip(elTooltip);
-    }
     $(el).find('.dropdown').dropdown();
     nextTick(() => {
       this.$refs.search.focus();
diff --git a/web_src/js/components/DiffFileList.vue b/web_src/js/components/DiffFileList.vue
index 32919156b8ddd..86444f2b21995 100644
--- a/web_src/js/components/DiffFileList.vue
+++ b/web_src/js/components/DiffFileList.vue
@@ -21,7 +21,6 @@
 </template>
 
 <script>
-import {initTooltip} from '../modules/tippy.js';
 import {doLoadMoreFiles} from '../features/repo-diff.js';
 
 const {pageData} = window.config;
@@ -30,17 +29,6 @@ export default {
   data: () => {
     return pageData.diffFileInfo;
   },
-  watch: {
-    fileListIsVisible(newValue) {
-      if (newValue === true) {
-        this.$nextTick(() => {
-          for (const el of this.$refs.root.querySelectorAll('.tooltip')) {
-            initTooltip(el);
-          }
-        });
-      }
-    }
-  },
   mounted() {
     document.getElementById('show-file-list-btn').addEventListener('click', this.toggleFileList);
   },
diff --git a/web_src/js/components/DiffFileTreeItem.vue b/web_src/js/components/DiffFileTreeItem.vue
index f0a3d909b9fc7..4084dee51d244 100644
--- a/web_src/js/components/DiffFileTreeItem.vue
+++ b/web_src/js/components/DiffFileTreeItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-show="show" class="tooltip" :title="item.name">
+  <div v-show="show" :title="item.name">
     <!--title instead of tooltip above as the tooltip needs too much work with the current methods, i.e. not being loaded or staying open for "too long"-->
     <div class="item" :class="item.isFile ? 'filewrapper gt-p-1' : ''">
       <!-- Files -->
diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js
index 113ff2e1f1592..d533877c27e0e 100644
--- a/web_src/js/features/common-global.js
+++ b/web_src/js/features/common-global.js
@@ -5,7 +5,6 @@ import {createDropzone} from './dropzone.js';
 import {initCompColorPicker} from './comp/ColorPicker.js';
 import {showGlobalErrorMessage} from '../bootstrap.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';
 
@@ -66,12 +65,6 @@ export function initGlobalButtonClickOnEnter() {
   });
 }
 
-export function initGlobalTooltips() {
-  for (const el of document.getElementsByClassName('tooltip')) {
-    initTooltip(el);
-  }
-}
-
 export function initGlobalCommon() {
   // Undo Safari emoji glitch fix at high enough zoom levels
   if (navigator.userAgent.match('Safari')) {
diff --git a/web_src/js/features/contextpopup.js b/web_src/js/features/contextpopup.js
index 8e0ef92bd3ae8..c685d93db04a3 100644
--- a/web_src/js/features/contextpopup.js
+++ b/web_src/js/features/contextpopup.js
@@ -30,6 +30,7 @@ export function initContextPopups() {
 
     createTippy(this, {
       content: el,
+      placement: 'top-start',
       interactive: true,
       interactiveBorder: 5,
       onShow: () => {
diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js
index 56ebe4fc991ef..458f11c6f2b30 100644
--- a/web_src/js/features/repo-diff.js
+++ b/web_src/js/features/repo-diff.js
@@ -3,7 +3,6 @@ import {initCompReactionSelector} from './comp/ReactionSelector.js';
 import {initRepoIssueContentHistory} from './repo-issue-content.js';
 import {validateTextareaNonEmpty} from './comp/EasyMDE.js';
 import {initViewedCheckboxListenerFor, countAndUpdateViewedFiles} from './pull-view-file.js';
-import {initTooltip} from '../modules/tippy.js';
 
 const {csrfToken} = window.config;
 
@@ -60,10 +59,6 @@ export function initRepoDiffConversationForm() {
     const $newConversationHolder = $(await $.post($form.attr('action'), formDataString));
     const {path, side, idx} = $newConversationHolder.data();
 
-    $newConversationHolder.find('.tooltip').each(function () {
-      initTooltip(this);
-    });
-
     $form.closest('.conversation-holder').replaceWith($newConversationHolder);
     if ($form.closest('tr').data('line-type') === 'same') {
       $(`[data-path="${path}"] a.add-code-comment[data-idx="${idx}"]`).addClass('invisible');
diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js
index e49b1b2726f2d..767f07115158c 100644
--- a/web_src/js/features/repo-issue.js
+++ b/web_src/js/features/repo-issue.js
@@ -4,7 +4,7 @@ import {attachTribute} from './tribute.js';
 import {createCommentEasyMDE, getAttachedEasyMDE} from './comp/EasyMDE.js';
 import {initEasyMDEImagePaste} from './comp/ImagePaste.js';
 import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js';
-import {initTooltip, showTemporaryTooltip, createTippy} from '../modules/tippy.js';
+import {showTemporaryTooltip, createTippy} from '../modules/tippy.js';
 import {hideElem, showElem, toggleElem} from '../utils/dom.js';
 import {setFileFolding} from './file-fold.js';
 
@@ -280,10 +280,7 @@ export function initRepoPullRequestAllowMaintainerEdit() {
   const $checkbox = $('#allow-edits-from-maintainers');
   if (!$checkbox.length) return;
 
-  const promptTip = $checkbox.attr('data-prompt-tip');
   const promptError = $checkbox.attr('data-prompt-error');
-
-  initTooltip($checkbox[0], {content: promptTip});
   $checkbox.checkbox({
     'onChange': () => {
       const checked = $checkbox.checkbox('is checked');
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 7d74ee6b944c4..84ffe8e5db757 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -56,7 +56,6 @@ import {
   initGlobalFormDirtyLeaveConfirm,
   initGlobalLinkActions,
   initHeadNavbarContentToggle,
-  initGlobalTooltips,
 } from './features/common-global.js';
 import {initRepoTopicBar} from './features/repo-home.js';
 import {initAdminEmails} from './features/admin/emails.js';
@@ -91,6 +90,7 @@ import {initCaptcha} from './features/captcha.js';
 import {initRepositoryActionView} from './components/RepoActionView.vue';
 import {initAriaCheckboxPatch} from './modules/aria/checkbox.js';
 import {initAriaDropdownPatch} from './modules/aria/dropdown.js';
+import {initGlobalTooltips} from './modules/tippy.js';
 
 // Run time-critical code as soon as possible. This is safe to do because this
 // script appears at the end of <body> and rendered HTML is accessible at that point.
diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js
index 4872608ecd99f..98d0ff84b6062 100644
--- a/web_src/js/modules/tippy.js
+++ b/web_src/js/modules/tippy.js
@@ -3,7 +3,6 @@ import tippy from 'tippy.js';
 export function createTippy(target, opts = {}) {
   const instance = tippy(target, {
     appendTo: document.body,
-    placement: target.getAttribute('data-placement') || 'top-start',
     animation: false,
     allowHTML: false,
     hideOnClick: false,
@@ -25,38 +24,116 @@ export function createTippy(target, opts = {}) {
   return instance;
 }
 
-export function initTooltip(el, props = {}) {
-  const content = el.getAttribute('data-content') || props.content;
+/**
+ * Attach a tooltip tippy to the given target element.
+ * If the target element already has a tooltip tippy attached, the tooltip will be updated with the new content.
+ * If the target element has no content, then no tooltip will be attached, and it returns null.
+ *
+ * Note: "tooltip" doesn't equal to "tippy". "tooltip" means a auto-popup content, it just uses tippy as the implementation.
+ *
+ * @param target {HTMLElement}
+ * @param content {null|string}
+ * @returns {null|tippy}
+ */
+function attachTooltip(target, content = null) {
+  content = content ?? getTooltipContent(target);
   if (!content) return null;
-  if (!el.hasAttribute('aria-label')) el.setAttribute('aria-label', content);
-  return createTippy(el, {
+
+  const props = {
     content,
     delay: 100,
     role: 'tooltip',
-    ...(el.getAttribute('data-tooltip-interactive') === 'true' ? {interactive: true} : {}),
-    ...props,
-  });
-}
+    placement: target.getAttribute('data-tooltip-placement') || 'top-start',
+    ...(target.getAttribute('data-tooltip-interactive') === 'true' ? {interactive: true} : {}),
+  };
 
-export function showTemporaryTooltip(target, content) {
-  let tippy, oldContent;
-  if (target._tippy) {
-    tippy = target._tippy;
-    oldContent = tippy.props.content;
+  if (!target._tippy) {
+    createTippy(target, props);
   } else {
-    tippy = initTooltip(target, {content});
+    target._tippy.setProps(props);
+  }
+  return target._tippy;
+}
+
+/**
+ * Creating tooltip tippy instance is expensive, so we only create it when the user hovers over the element
+ * According to https://www.w3.org/TR/DOM-Level-3-Events/#events-mouseevent-event-order , mouseover event is fired before mouseenter event
+ * Some old browsers like Pale Moon doesn't support "mouseenter(capture)"
+ * The tippy by default uses "mouseenter" event to show, so we use "mouseover" event to switch to tippy
+ * @param e {Event}
+ */
+function lazyTooltipOnMouseHover(e) {
+  e.target.removeEventListener('mouseover', lazyTooltipOnMouseHover, true);
+  attachTooltip(this);
+}
+
+function getTooltipContent(target) {
+  // prefer to always use the "[data-tooltip-content]" attribute
+  // for backward compatibility, we also support the ".tooltip[data-content]" attribute
+  // in next PR, refactor all the ".tooltip[data-content]" to "[data-tooltip-content]"
+  let content = target.getAttribute('data-tooltip-content');
+  if (!content && target.classList.contains('tooltip')) {
+    content = target.getAttribute('data-content');
+  }
+  return content;
+}
+
+/**
+ * Activate the tooltip for all children elements
+ * And if the element has no aria-label, use the tooltip content as aria-label
+ * @param target {HTMLElement}
+ */
+function attachChildrenLazyTooltip(target) {
+  // the selector must match the logic in getTippyTooltipContent
+  for (const el of target.querySelectorAll('[data-tooltip-content], .tooltip[data-content]')) {
+    el.addEventListener('mouseover', lazyTooltipOnMouseHover, true);
+
+    // meanwhile, if the element has no aria-label, use the tooltip content as aria-label
+    if (!el.hasAttribute('aria-label')) {
+      const content = getTooltipContent(el);
+      if (content) {
+        el.setAttribute('aria-label', content);
+      }
+    }
   }
+}
 
+export function initGlobalTooltips() {
+  // use MutationObserver to detect new elements added to the DOM, or attributes changed
+  const observer = new MutationObserver((mutationList) => {
+    for (const mutation of mutationList) {
+      if (mutation.type === 'childList') {
+        // mainly for Vue components and AJAX rendered elements
+        for (const el of mutation.addedNodes) {
+          // handle all "tooltip" elements in added nodes which have 'querySelectorAll' method, skip non-related nodes (eg: "#text")
+          if ('querySelectorAll' in el) {
+            attachChildrenLazyTooltip(el);
+          }
+        }
+      } else if (mutation.type === 'attributes') {
+        // sync the tooltip content if the attributes change
+        attachTooltip(mutation.target);
+      }
+    }
+  });
+  observer.observe(document, {
+    subtree: true,
+    childList: true,
+    attributeFilter: ['data-tooltip-content', 'data-content'],
+  });
+
+  attachChildrenLazyTooltip(document.documentElement);
+}
+
+export function showTemporaryTooltip(target, content) {
+  const tippy = target._tippy ?? attachTooltip(target, content);
   tippy.setContent(content);
   if (!tippy.state.isShown) tippy.show();
   tippy.setProps({
     onHidden: (tippy) => {
-      if (oldContent) {
-        tippy.setContent(oldContent);
-        tippy.setProps({onHidden: undefined});
-      } else {
+      // reset the default tooltip content, if no default, then this temporary tooltip could be destroyed
+      if (!attachTooltip(target)) {
         tippy.destroy();
-        // after destroy, the `_tippy` is detached, it can't do "setProps (etc...)" anymore
       }
     },
   });