[Branding] Show execution progress in favicon (#3880)

src/composables/useProgressFavicon.ts

@@ -0,0 +1,23 @@
+import { useFavicon } from '@vueuse/core'
+import { watch } from 'vue'
+
+import { useExecutionStore } from '@/stores/executionStore'
+
+export const useProgressFavicon = () => {
+  const defaultFavicon = '/assets/images/favicon_progress_16x16/frame_9.png'
+  const favicon = useFavicon(defaultFavicon)
+  const executionStore = useExecutionStore()
+  const totalFrames = 10
+
+  watch(
+    [() => executionStore.executionProgress, () => executionStore.isIdle],
+    ([progress, isIdle]) => {
+      if (isIdle) {
+        favicon.value = defaultFavicon
+      } else {
+        const frame = Math.floor(progress * totalFrames)
+        favicon.value = `/assets/images/favicon_progress_16x16/frame_${frame}.png`
+      }
+    }
+  )
+}

src/stores/extensionStore.ts

@@ -16,7 +16,11 @@ export const ALWAYS_DISABLED_EXTENSIONS: readonly string[] = [
   // pysssss.SnapToGrid tries to write global app.shiftDown state, which is no longer
   // allowed since v1.3.12.
   // https://github.com/Comfy-Org/ComfyUI_frontend/issues/1176
-  'pysssss.SnapToGrid'
+  'pysssss.SnapToGrid',
+  // Favicon status is implemented in ComfyUI core in v1.20.
+  // https://github.com/Comfy-Org/ComfyUI_frontend/pull/3880
+  'pysssss.FaviconStatus',
+  'KJNodes.browserstatus'
 ]
 
 export const useExtensionStore = defineStore('extension', () => {

src/views/GraphView.vue

@@ -36,6 +36,7 @@ import RerouteMigrationToast from '@/components/toast/RerouteMigrationToast.vue'
 import TopMenubar from '@/components/topbar/TopMenubar.vue'
 import { useCoreCommands } from '@/composables/useCoreCommands'
 import { useErrorHandling } from '@/composables/useErrorHandling'
+import { useProgressFavicon } from '@/composables/useProgressFavicon'
 import { SERVER_CONFIG_ITEMS } from '@/constants/serverConfig'
 import { i18n } from '@/i18n'
 import { StatusWsMessageStatus } from '@/schemas/apiSchema'
@@ -62,6 +63,7 @@ import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { electronAPI, isElectron } from '@/utils/envUtil'
 
 setupAutoQueueHandler()
+useProgressFavicon()
 
 const { t } = useI18n()
 const toast = useToast()