[Desktop] Use Window Controls Overlay API (#2316)

Co-authored-by: huchenlei <huchenlei@proton.me>

global.d.ts

@@ -1,3 +1,15 @@
 declare const __COMFYUI_FRONTEND_VERSION__: string
 declare const __SENTRY_ENABLED__: boolean
 declare const __SENTRY_DSN__: string
+
+interface Navigator {
+  /**
+   * Used by the electron API.  This is a WICG non-standard API, but is guaranteed to exist in Electron.
+   * It is `undefined` in Firefox and older browsers.
+   * @see https://developer.mozilla.org/en-US/docs/Web/API/Navigator/windowControlsOverlay
+   */
+  windowControlsOverlay?: {
+    /** When `true`, the window is using custom window style. */
+    visible: boolean
+  }
+}

src/components/topbar/TopMenubar.vue

@@ -33,7 +33,7 @@
 
   <!-- Virtual top menu for native window (drag handle) -->
   <div
-    v-show="isNativeWindow && !showTopMenu"
+    v-show="isNativeWindow() && !showTopMenu"
     class="fixed top-0 left-0 app-drag w-full h-[var(--comfy-topbar-height)]"
   />
 </template>
@@ -50,7 +50,12 @@ import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
 import { app } from '@/scripts/app'
 import { useSettingStore } from '@/stores/settingStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
-import { electronAPI, isElectron, showNativeMenu } from '@/utils/envUtil'
+import {
+  electronAPI,
+  isElectron,
+  isNativeWindow,
+  showNativeMenu
+} from '@/utils/envUtil'
 
 const workspaceState = useWorkspaceStore()
 const settingStore = useSettingStore()
@@ -64,10 +69,6 @@ const teleportTarget = computed(() =>
     ? '.comfyui-body-top'
     : '.comfyui-body-bottom'
 )
-const isNativeWindow = computed(
-  () =>
-    isElectron() && settingStore.get('Comfy-Desktop.WindowStyle') === 'custom'
-)
 const showTopMenu = computed(
   () => betaMenuEnabled.value && !workspaceState.focusMode
 )

src/utils/envUtil.ts

@@ -14,3 +14,7 @@ export function electronAPI() {
 export function showNativeMenu(event: MouseEvent) {
   electronAPI()?.showContextMenu(event as ElectronContextMenuOptions)
 }
+
+export function isNativeWindow() {
+  return isElectron() && !!window.navigator.windowControlsOverlay?.visible
+}

src/views/templates/BaseViewTemplate.vue

@@ -9,7 +9,7 @@
   >
     <!-- Virtual top menu for native window (drag handle) -->
     <div
-      v-show="isNativeWindow"
+      v-show="isNativeWindow()"
       ref="topMenuRef"
       class="app-drag w-full h-[var(--comfy-topbar-height)]"
     />
@@ -24,7 +24,7 @@
 <script setup lang="ts">
 import { nextTick, onMounted, ref } from 'vue'
 
-import { electronAPI, isElectron } from '@/utils/envUtil'
+import { electronAPI, isElectron, isNativeWindow } from '@/utils/envUtil'
 
 const props = withDefaults(
   defineProps<{
@@ -46,12 +46,8 @@ const lightTheme = {
 }
 
 const topMenuRef = ref<HTMLDivElement | null>(null)
-const isNativeWindow = ref(false)
 onMounted(async () => {
   if (isElectron()) {
-    const windowStyle = await electronAPI().Config.getWindowStyle()
-    isNativeWindow.value = windowStyle === 'custom'
-
     await nextTick()
 
     electronAPI().changeTheme({