avoid computing tooltip position every frame

this fixes an issue causing misskey to constantly recompute tooltip
position when any kind of chart is being displayed (such as the one
on user profile page, or any page for unauthenticated users)

.forgejo/workflows/api-misskey-js.yml

@@ -17,7 +17,6 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
         with:
-          fetch-depth: 0
           submodules: true
 
       - name: Install pnpm

.forgejo/workflows/check-misskey-js-version.yml

@@ -21,7 +21,6 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
         with:
-          fetch-depth: 0
           submodules: true
       - name: Check version
         run: |

.forgejo/workflows/lint.yml

@@ -24,7 +24,6 @@ jobs:
     steps:
     - uses: actions/checkout@v4
       with:
-        fetch-depth: 0
         submodules: true
     - uses: pnpm/action-setup@v4.0.0
       with:
@@ -49,7 +48,6 @@ jobs:
     steps:
     - uses: actions/checkout@v4
       with:
-        fetch-depth: 0
         submodules: true
     - uses: pnpm/action-setup@v4.0.0
       with:
@@ -73,7 +71,6 @@ jobs:
     steps:
     - uses: actions/checkout@v4
       with:
-        fetch-depth: 0
         submodules: true
     - uses: pnpm/action-setup@v4.0.0
       with:

.forgejo/workflows/test-backend.yml

@@ -44,7 +44,6 @@ jobs:
     steps:
     - uses: actions/checkout@v4
       with:
-        fetch-depth: 0
         submodules: true
     - name: Install pnpm
       uses: pnpm/action-setup@v4.0.0
@@ -96,7 +95,6 @@ jobs:
     steps:
       - uses: actions/checkout@v4
         with:
-          fetch-depth: 0
           submodules: true
       - name: Install pnpm
         uses: pnpm/action-setup@v4.0.0

.forgejo/workflows/test-frontend.yml

@@ -32,7 +32,6 @@ jobs:
     steps:
     - uses: actions/checkout@v4
       with:
-        fetch-depth: 0
         submodules: true
     - name: Install pnpm
       uses: pnpm/action-setup@v4.0.0

.forgejo/workflows/test-misskey-js.yml

@@ -27,7 +27,6 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
         with:
-          fetch-depth: 0
           submodules: true
 
       - name: Install pnpm

.forgejo/workflows/test-production.yml

@@ -20,7 +20,6 @@ jobs:
     steps:
     - uses: actions/checkout@v4
       with:
-        fetch-depth: 0
         submodules: true
     - name: Install pnpm
       uses: pnpm/action-setup@v4.0.0

.forgejo/workflows/validate-api-json.yml

@@ -21,7 +21,6 @@ jobs:
     steps:
     - uses: actions/checkout@v4
       with:
-        fetch-depth: 0
         submodules: true
     - name: Install pnpm
       uses: pnpm/action-setup@v4.0.0

packages/frontend/src/components/MkTooltip.vue

@@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted, onUnmounted, shallowRef } from 'vue';
+import { nextTick, onMounted, onUnmounted, shallowRef, watch } from 'vue';
 import * as os from '@/os.js';
 import { calcPopupPosition } from '@/scripts/popup-position.js';
 import { defaultStore } from '@/store.js';
@@ -70,7 +70,7 @@ function setPosition() {
 	el.value.style.top = data.top + 'px';
 }
 
-let loopHandler;
+let loopHandler: number | undefined;
 
 onMounted(() => {
 	nextTick(() => {
@@ -81,12 +81,23 @@ onMounted(() => {
 			loopHandler = window.requestAnimationFrame(loop);
 		};
 
-		loop();
+		watch(() => props.showing, show => {
+			if (show) {
+				if (!loopHandler) {
+					loop();
+				}
+			} else if (loopHandler) {
+				window.cancelAnimationFrame(loopHandler);
+				loopHandler = undefined;
+			}
+		});
 	});
 });
 
 onUnmounted(() => {
-	window.cancelAnimationFrame(loopHandler);
+	if (loopHandler) {
+		window.cancelAnimationFrame(loopHandler);
+	}
 });
 </script>
 

packages/frontend/src/pages/user/home.vue

@@ -225,7 +225,7 @@ import MkTextarea from '@/components/MkTextarea.vue';
 import MkOmit from '@/components/MkOmit.vue';
 import MkInfo from '@/components/MkInfo.vue';
 import MkButton from '@/components/MkButton.vue';
-import { getScrollPosition } from '@/scripts/scroll.js';
+import { getScrollContainer } from '@/scripts/scroll.js';
 import { getUserMenu } from '@/scripts/get-user-menu.js';
 import number from '@/filters/number.js';
 import { userPage } from '@/filters/user.js';
@@ -282,6 +282,7 @@ const isEditingMemo = ref(false);
 const moderationNote = ref(props.user.moderationNote);
 const editModerationNote = ref(false);
 const movedFromLog = ref<null | {movedFromId:string;}[]>(null);
+let scrollEl: null | HTMLElement = null;
 
 watch(moderationNote, async () => {
 	await misskeyApi('admin/update-user-note', { userId: props.user.id, text: moderationNote.value });
@@ -313,15 +314,19 @@ async function fetchMovedFromLog() {
 }
 
 function parallaxLoop() {
-	parallaxAnimationId.value = window.requestAnimationFrame(parallaxLoop);
+	requestNextParallaxFrame();
 	parallax();
 }
 
+function requestNextParallaxFrame() {
+	parallaxAnimationId.value = window.requestAnimationFrame(parallaxLoop);
+}
+
 function parallax() {
 	const banner = bannerEl.value as any;
 	if (banner == null) return;
 
-	const top = getScrollPosition(rootEl.value);
+	const top = scrollEl?.scrollTop ?? scrollY;
 
 	if (top < 0) return;
 
@@ -330,6 +335,23 @@ function parallax() {
 	banner.style.backgroundPosition = `center calc(50% - ${pos}px)`;
 }
 
+function startParallax() {
+	(scrollEl ?? window).removeEventListener('scroll', startParallax);
+	requestNextParallaxFrame();
+}
+
+function addScrollEvent() {
+	(scrollEl ?? window).addEventListener('scroll', startParallax);
+}
+
+function cancelParallax() {
+	if (parallaxAnimationId.value) {
+		window.cancelAnimationFrame(parallaxAnimationId.value);
+		parallaxAnimationId.value = null;
+		addScrollEvent();
+	}
+}
+
 function showMemoTextarea() {
 	isEditingMemo.value = true;
 	nextTick(() => {
@@ -394,7 +416,10 @@ watch([props.user], () => {
 });
 
 onMounted(() => {
-	window.requestAnimationFrame(parallaxLoop);
+	scrollEl = getScrollContainer(rootEl.value);
+	addScrollEvent();
+	(scrollEl ?? window).addEventListener('scrollend', cancelParallax);
+	parallax();
 	narrow.value = rootEl.value!.clientWidth < 1000;
 
 	if (props.user.birthday) {
@@ -417,11 +442,7 @@ onMounted(() => {
 	});
 });
 
-onUnmounted(() => {
-	if (parallaxAnimationId.value) {
-		window.cancelAnimationFrame(parallaxAnimationId.value);
-	}
-});
+onUnmounted(cancelParallax);
 </script>
 
 <style lang="scss" scoped>