[core/1.41] fix: restore RAF-coalesced legacy topbar mutation scanning (#10152)

Cherry-picks TopMenuSection.vue RAF coalescing from #9680 which was
overwritten by #10094 (backport ordering issue).

The test expects RAF-based mutation coalescing but #10094 replaced it
with direct synchronous calls. This restores the RAF wrapper.

- Fixes failing test: 'coalesces legacy topbar mutation scans to one
check per frame'

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-10152-core-1-41-fix-restore-RAF-coalesced-legacy-topbar-mutation-scanning-3266d73d3650814ea0dfc039f8b7b84d)
by [Unito](https://www.unito.io)

src/components/TopMenuSection.vue

@@ -117,7 +117,7 @@
 <script setup lang="ts">
 import { useLocalStorage, useMutationObserver } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
-import { computed, onMounted, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import ComfyActionbar from '@/components/actionbar/ComfyActionbar.vue'
@@ -265,6 +265,7 @@ const rightSidePanelTooltipConfig = computed(() =>
 // Maintain support for legacy topbar elements attached by custom scripts
 const legacyCommandsContainerRef = ref<HTMLElement>()
 const hasLegacyContent = ref(false)
+let legacyContentCheckRafId: number | null = null
 
 function checkLegacyContent() {
   const el = legacyCommandsContainerRef.value
@@ -277,10 +278,18 @@ function checkLegacyContent() {
     el.querySelector(':scope > * > *:not(:empty)') !== null
 }
 
-useMutationObserver(legacyCommandsContainerRef, checkLegacyContent, {
+function scheduleLegacyContentCheck() {
+  if (legacyContentCheckRafId !== null) return
+
+  legacyContentCheckRafId = requestAnimationFrame(() => {
+    legacyContentCheckRafId = null
+    checkLegacyContent()
+  })
+}
+
+useMutationObserver(legacyCommandsContainerRef, scheduleLegacyContentCheck, {
   childList: true,
-  subtree: true,
-  characterData: true
+  subtree: true
 })
 
 onMounted(() => {
@@ -291,6 +300,13 @@ onMounted(() => {
   }
 })
 
+onBeforeUnmount(() => {
+  if (legacyContentCheckRafId === null) return
+
+  cancelAnimationFrame(legacyContentCheckRafId)
+  legacyContentCheckRafId = null
+})
+
 const openCustomNodeManager = async () => {
   try {
     await managerState.openManager({