feat(popup): fallback notification (#250)

Author: alexzhang1030

packages/client/components/Notification.vue

@@ -4,19 +4,22 @@ const icon = ref<string | undefined>()
 const text = ref<string | undefined>()
 const type = ref<'primary' | 'error' | 'warning' | undefined>()
 const duration = ref<number>()
+const placement = ref<'top' | 'bottom'>('top')
 let timer: ReturnType<typeof setTimeout> | undefined
 
 provideNotification((opt: {
   text: string
   icon?: string
   type?: 'primary' | 'error' | 'warning'
   duration?: number
+  placement?: 'top' | 'bottom'
 }) => {
   text.value = opt.text
   icon.value = opt.icon
   show.value = true
   type.value = opt.type
   duration.value = opt.duration || 1500
+  placement.value = opt.placement || 'top'
   createTimer()
 })
 
@@ -47,15 +50,26 @@ function createTimer() {
 
 <template>
   <div
-    fixed left-0 right-0 top-0 z-1000 text-center text-base
-    :class="show ? '' : 'pointer-events-none overflow-hidden'"
+    fixed z-1000 text-center text-base
+    :class="[
+      {
+        'pointer-events-none overflow-hidden': !show,
+      },
+      [
+        placement === 'top' ? 'top-0' : 'bottom-0',
+      ],
+    ]"
   >
     <div
       border="~ base"
       flex="~ inline gap2"
-      m-3 inline-block items-center rounded px-4 py-1 transition-all duration-300 bg-base
-      :style="show ? {} : { transform: 'translateY(-300%)' }"
-      :class="[show ? 'shadow' : 'shadow-none', textColor]"
+      m-3 inline-block items-center rounded px-4 py-1 transition-transform duration-300 bg-base
+      :class="[
+        show
+          ? 'shadow'
+          : `shadow-none  ${placement === 'top' ? 'translate-y--300%' : 'translate-y-300%'}`,
+        textColor,
+      ]"
       @mouseenter="clearTimer"
       @mouseleave="createTimer"
     >

packages/client/components/PopupButton.vue

@@ -1,19 +1,40 @@
 <script setup lang="ts">
 import { useDevToolsClient } from '~/logic/client'
 
+defineProps<{
+  closePopover: () => void
+}>()
+
 const client = useDevToolsClient()
-// @ts-expect-error missing type
-const isSupported = typeof window !== 'undefined' && window.parent.documentPictureInPicture?.requestWindow
 const showPopupUnsupported = ref(false)
 const copy = useCopy()
 
+const isSupported = typeof window !== 'undefined'
+  // @ts-expect-error experimental API
+  && window.parent?.documentPictureInPicture?.requestWindow
+  && checkIsSecurityContext()
+
+const showNotification = useNotification()
+
 function popup() {
   if (!isSupported) {
     showPopupUnsupported.value = true
     return
   }
-
-  client.value?.panel?.popup()
+  const popupFn = client.value?.panel?.popup as (() => Promise<boolean>) | undefined
+  if (popupFn) {
+    popupFn().then((success) => {
+      if (!success) {
+        showNotification({
+          text: 'Open popup mode failed, check console for more details.',
+          icon: 'i-carbon-warning',
+          type: 'error',
+          duration: 3000,
+          placement: 'bottom',
+        })
+      }
+    })
+  }
 }
 </script>
 

packages/client/composables/context.ts

@@ -19,6 +19,7 @@ const [
   icon?: string
   type?: 'primary' | 'warning' | 'error'
   duration?: number
+  placement?: 'top' | 'bottom'
 }) => void>()
 
 export {

packages/node/src/views/composables.ts

@@ -198,12 +198,14 @@ export function usePiPMode(iframeGetter: () => HTMLIFrameElement | undefined, ho
   const documentPictureInPicture = window.documentPictureInPicture
   async function popup() {
     const iframe = iframeGetter()
-    const pip = popupWindow.value = await documentPictureInPicture.requestWindow({
-      width: Math.round(window.innerWidth * state.value.width / 100),
-      height: Math.round(window.innerHeight * state.value.height / 100),
-    })
-    const style = pip.document.createElement('style')
-    style.innerHTML = `
+    let isSuccess = true
+    try {
+      const pip = popupWindow.value = await documentPictureInPicture.requestWindow({
+        width: Math.round(window.innerWidth * state.value.width / 100),
+        height: Math.round(window.innerHeight * state.value.height / 100),
+      })
+      const style = pip.document.createElement('style')
+      style.innerHTML = `
         body {
           margin: 0;
           padding: 0;
@@ -215,19 +217,25 @@ export function usePiPMode(iframeGetter: () => HTMLIFrameElement | undefined, ho
           outline: none;
         }
       `
-    pip.__VUE_DEVTOOLS_GLOBAL_HOOK__ = hook
-    pip.__VUE_DEVTOOLS_IS_POPUP__ = true
-    pip.document.title = 'Vue DevTools'
-    pip.document.head.appendChild(style)
-    pip.document.body.appendChild(iframe)
-    pip.addEventListener('resize', () => {
-      state.value.width = Math.round(pip.innerWidth / window.innerWidth * 100)
-      state.value.height = Math.round(pip.innerHeight / window.innerHeight * 100)
-    })
-    pip.addEventListener('pagehide', () => {
-      popupWindow.value = null
-      pip.close()
-    })
+      pip.__VUE_DEVTOOLS_GLOBAL_HOOK__ = hook
+      pip.__VUE_DEVTOOLS_IS_POPUP__ = true
+      pip.document.title = 'Vue DevTools'
+      pip.document.head.appendChild(style)
+      pip.document.body.appendChild(iframe)
+      pip.addEventListener('resize', () => {
+        state.value.width = Math.round(pip.innerWidth / window.innerWidth * 100)
+        state.value.height = Math.round(pip.innerHeight / window.innerHeight * 100)
+      })
+      pip.addEventListener('pagehide', () => {
+        popupWindow.value = null
+        pip.close()
+      })
+    }
+    catch (error) {
+      isSuccess = false
+      console.error(`[vite-plugin-vue-devtools] Open popup mode failed: ${(error as DOMException).message}`)
+    }
+    return isSuccess
   }
   return {
     popup,