From 9b463573f8202c0c8dd9df38f192078db6b8169b Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Thu, 22 Jun 2023 00:27:13 +0200
Subject: [PATCH 1/8] feat: poc working

---
 .../devtools-kit/src/_types/client-api.ts     | 13 ++++++++
 .../client/components/DockingPanel.vue        |  3 ++
 .../src/runtime/plugins/devtools.client.ts    |  4 ++-
 .../src/runtime/plugins/view/Frame.vue        | 33 +++++++++++++++++++
 .../src/runtime/plugins/view/FrameBox.vue     | 14 ++------
 packages/devtools/src/types/global.ts         | 27 +++++++++++++++
 packages/devtools/src/types/index.ts          |  2 ++
 7 files changed, 83 insertions(+), 13 deletions(-)
 create mode 100644 packages/devtools/src/types/global.ts

diff --git a/packages/devtools-kit/src/_types/client-api.ts b/packages/devtools-kit/src/_types/client-api.ts
index d96db94b8b..fc82da2c81 100644
--- a/packages/devtools-kit/src/_types/client-api.ts
+++ b/packages/devtools-kit/src/_types/client-api.ts
@@ -55,8 +55,21 @@ export interface NuxtDevtoolsHostClient {
   reloadPage(): void
   closeDevTools(): void
 
+  /**
+   * Popup the DevTools frame into Picture-in-Picture mode
+   *
+   * Requires Chrome 111 with experimental flag enabled.
+   *
+   * Function is undefined when not supported.
+   *
+   * @see https://developer.chrome.com/docs/web-platform/document-picture-in-picture/
+   */
+  popup?(): any
+
   /**
    * Update client, send to iframe if provided
+   *
+   * @internal
    */
   updateClient(iframe?: HTMLIFrameElement): NuxtDevtoolsHostClient
 }
diff --git a/packages/devtools/client/components/DockingPanel.vue b/packages/devtools/client/components/DockingPanel.vue
index d665c83b4e..4c4b7bc47e 100644
--- a/packages/devtools/client/components/DockingPanel.vue
+++ b/packages/devtools/client/components/DockingPanel.vue
@@ -15,6 +15,9 @@ function refreshPage() {
 <template>
   <div>
     <div px3 py2 border="b base" flex="~ gap-2">
+      <NButton v-if="client?.popup" n="sm primary" @click="client.popup()">
+        <div carbon-launch /> Popup
+      </NButton>
       <NDarkToggle v-slot="{ toggle, isDark }">
         <NButton n="sm primary" @click="toggle">
           <div carbon-sun dark:carbon-moon translate-y--1px /> {{ isDark.value ? 'Dark' : 'Light' }}
diff --git a/packages/devtools/src/runtime/plugins/devtools.client.ts b/packages/devtools/src/runtime/plugins/devtools.client.ts
index 744d6498d3..e54b57fc32 100644
--- a/packages/devtools/src/runtime/plugins/devtools.client.ts
+++ b/packages/devtools/src/runtime/plugins/devtools.client.ts
@@ -2,7 +2,6 @@ import { createApp, h, markRaw, ref, shallowReactive, watch, watchEffect } from
 
 import { setupHooksDebug } from '../shared/hooks'
 import type { LoadingTimeMetric, NuxtDevtoolsHostClient, PluginMetric, VueInspectorClient } from '../../types'
-
 import { useClientColorMode } from './view/client'
 
 // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error
@@ -10,6 +9,9 @@ import { useClientColorMode } from './view/client'
 import { defineNuxtPlugin, useAppConfig, useRouter, useState } from '#imports'
 
 export default defineNuxtPlugin((nuxt: any) => {
+  if (window.__NUXT_DEVTOOLS_DISABLE__ || window.parent?.__NUXT_DEVTOOLS_DISABLE__)
+    return
+
   // TODO: Stackblitz support?
   if (typeof document === 'undefined' || typeof window === 'undefined')
     return
diff --git a/packages/devtools/src/runtime/plugins/view/Frame.vue b/packages/devtools/src/runtime/plugins/view/Frame.vue
index 73ec20195a..7416e8ccf5 100644
--- a/packages/devtools/src/runtime/plugins/view/Frame.vue
+++ b/packages/devtools/src/runtime/plugins/view/Frame.vue
@@ -40,6 +40,39 @@ function waitForClientInjection(retry = 10, timeout = 200) {
 }
 
 onMounted(() => {
+  const documentPictureInPicture = window.documentPictureInPicture
+  if (documentPictureInPicture?.requestWindow) {
+    let pipWindow: Window | null = null
+    // eslint-disable-next-line vue/no-mutating-props
+    props.client.popup = async () => {
+      if (pipWindow) {
+        document.exitPictureInPicture()
+      }
+      else {
+        pipWindow = await documentPictureInPicture.requestWindow({
+          width: iframe.value!.clientWidth,
+          height: iframe.value!.clientHeight,
+        }) as Window
+        const style = pipWindow.document.createElement('style')
+        style.innerHTML = `
+          body {
+            margin: 0;
+            padding: 0;
+          }
+          iframe {
+            width: 100vw;
+            height: 100vh;
+            border: none;
+            outline: none;
+          }
+        `
+        pipWindow.__NUXT_DEVTOOLS_DISABLE__ = true
+        pipWindow.document.head.appendChild(style)
+        pipWindow.document.body.appendChild(iframe.value!)
+      }
+    }
+  }
+
   props.client.updateClient(iframe.value)
   props.client.hooks.hook('devtools:navigate', (path) => {
     state.value.route = path
diff --git a/packages/devtools/src/runtime/plugins/view/FrameBox.vue b/packages/devtools/src/runtime/plugins/view/FrameBox.vue
index 8af1b4f24e..242e65d8c2 100644
--- a/packages/devtools/src/runtime/plugins/view/FrameBox.vue
+++ b/packages/devtools/src/runtime/plugins/view/FrameBox.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { VueInspectorClient } from 'vite-plugin-vue-inspector'
 import { computed, ref } from 'vue'
-import type { NuxtDevtoolsHostClient, NuxtDevtoolsIframeClient, NuxtDevtoolsGlobal as NuxtDevtoolsViewGlobal } from '../../../types'
+import type { NuxtDevtoolsHostClient } from '../../../types'
 import { PANEL_MAX, PANEL_MIN, isInitialized, state } from './state'
 import { useEventListener } from './utils'
 import Frame from './Frame.vue'
+import '../../../types/global'
 
 const props = defineProps<{
   client: NuxtDevtoolsHostClient
@@ -69,16 +69,6 @@ useEventListener(window, 'mouseleave', () => {
 })
 </script>
 
-<script lang="ts">
-declare global {
-  interface Window {
-    __NUXT_DEVTOOLS_VIEW__?: NuxtDevtoolsViewGlobal
-    __NUXT_DEVTOOLS__?: NuxtDevtoolsIframeClient
-    __VUE_INSPECTOR__?: VueInspectorClient
-  }
-}
-</script>
-
 <template>
   <div v-show="state.open && !client.inspector?.isEnabled.value" class="nuxt-devtools-frame">
     <Frame
diff --git a/packages/devtools/src/types/global.ts b/packages/devtools/src/types/global.ts
new file mode 100644
index 0000000000..54df96ac2b
--- /dev/null
+++ b/packages/devtools/src/types/global.ts
@@ -0,0 +1,27 @@
+import type { VueInspectorClient } from 'vite-plugin-vue-inspector'
+import type { NuxtDevtoolsIframeClient, NuxtDevtoolsGlobal as NuxtDevtoolsViewGlobal } from '../../types'
+
+declare global {
+  interface Window {
+    __NUXT_DEVTOOLS_VIEW__?: NuxtDevtoolsViewGlobal
+    __NUXT_DEVTOOLS__?: NuxtDevtoolsIframeClient
+
+    /**
+     * Manually disable Nuxt DevTools embedding.
+     * Used for popup mode.
+     */
+    __NUXT_DEVTOOLS_DISABLE__?: boolean
+
+    __VUE_INSPECTOR__?: VueInspectorClient
+
+    /**
+     * Experimental API: Picture-in-Picture mode
+     *
+     * @see https://developer.chrome.com/docs/web-platform/document-picture-in-picture/
+     */
+    documentPictureInPicture?: any
+  }
+
+}
+
+export {}
diff --git a/packages/devtools/src/types/index.ts b/packages/devtools/src/types/index.ts
index 9cb54e636d..fb59703213 100644
--- a/packages/devtools/src/types/index.ts
+++ b/packages/devtools/src/types/index.ts
@@ -1,3 +1,5 @@
+import './global'
+
 // eslint-disable-next-line import/export
 export * from '@nuxt/devtools-kit/types'
 

From f781992b8cd5aaa341ee9e8fa6f1a12b4ef06e09 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Thu, 22 Jun 2023 00:29:55 +0200
Subject: [PATCH 2/8] chore: types

---
 .../src/runtime/plugins/devtools.client.ts    |  6 ++--
 packages/devtools/src/types/global.ts         | 32 +++++++++++++++++--
 2 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/packages/devtools/src/runtime/plugins/devtools.client.ts b/packages/devtools/src/runtime/plugins/devtools.client.ts
index e54b57fc32..1c2a294b31 100644
--- a/packages/devtools/src/runtime/plugins/devtools.client.ts
+++ b/packages/devtools/src/runtime/plugins/devtools.client.ts
@@ -1,7 +1,7 @@
 import { createApp, h, markRaw, ref, shallowReactive, watch, watchEffect } from 'vue'
 
 import { setupHooksDebug } from '../shared/hooks'
-import type { LoadingTimeMetric, NuxtDevtoolsHostClient, PluginMetric, VueInspectorClient } from '../../types'
+import type { NuxtDevtoolsHostClient, VueInspectorClient } from '../../types'
 import { useClientColorMode } from './view/client'
 
 // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error
@@ -175,8 +175,6 @@ export default defineNuxtPlugin((nuxt: any) => {
 
 declare global {
   interface Window {
-    __NUXT_DEVTOOLS_PLUGINS_METRIC__?: PluginMetric[]
-    __NUXT_DEVTOOLS_TIME_METRIC__?: LoadingTimeMetric
-    __VUE_INSPECTOR__?: VueInspectorClient
+
   }
 }
diff --git a/packages/devtools/src/types/global.ts b/packages/devtools/src/types/global.ts
index 54df96ac2b..78025c309b 100644
--- a/packages/devtools/src/types/global.ts
+++ b/packages/devtools/src/types/global.ts
@@ -1,17 +1,45 @@
 import type { VueInspectorClient } from 'vite-plugin-vue-inspector'
-import type { NuxtDevtoolsIframeClient, NuxtDevtoolsGlobal as NuxtDevtoolsViewGlobal } from '../../types'
+import type { LoadingTimeMetric, NuxtDevtoolsIframeClient, NuxtDevtoolsGlobal as NuxtDevtoolsViewGlobal, PluginMetric } from '../../types'
 
 declare global {
   interface Window {
-    __NUXT_DEVTOOLS_VIEW__?: NuxtDevtoolsViewGlobal
+    /**
+     * API for module integration
+     */
     __NUXT_DEVTOOLS__?: NuxtDevtoolsIframeClient
 
+    /**
+     * Nuxt DevTools for receiving host client
+     *
+     * @internal
+     */
+    __NUXT_DEVTOOLS_VIEW__?: NuxtDevtoolsViewGlobal
+
+    /**
+     * Metrics for plugin loading time
+     *
+     * @internal
+     */
+    __NUXT_DEVTOOLS_PLUGINS_METRIC__?: PluginMetric[]
+
+    /**
+     * Metrics for page / route loading time
+     *
+     * @internal
+     */
+    __NUXT_DEVTOOLS_TIME_METRIC__?: LoadingTimeMetric
+
     /**
      * Manually disable Nuxt DevTools embedding.
      * Used for popup mode.
+     *
+     * @internal
      */
     __NUXT_DEVTOOLS_DISABLE__?: boolean
 
+    /**
+     * Vue Inspector client
+     */
     __VUE_INSPECTOR__?: VueInspectorClient
 
     /**

From d74cd7948cb18dbb871bacfddb2de9400590a284 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Thu, 22 Jun 2023 01:02:13 +0200
Subject: [PATCH 3/8] feat: working!

---
 .../devtools-kit/src/_types/client-api.ts     |   7 +-
 packages/devtools/client/plugins/global.ts    |   4 +-
 .../src/runtime/plugins/devtools.client.ts    | 139 +----------
 .../src/runtime/plugins/view/Frame.vue        | 104 ---------
 .../src/runtime/plugins/view/FrameBox.vue     |  63 +++--
 .../src/runtime/plugins/view/client.ts        | 218 +++++++++++++++++-
 .../src/runtime/plugins/view/state.ts         |   8 +-
 7 files changed, 277 insertions(+), 266 deletions(-)
 delete mode 100644 packages/devtools/src/runtime/plugins/view/Frame.vue

diff --git a/packages/devtools-kit/src/_types/client-api.ts b/packages/devtools-kit/src/_types/client-api.ts
index fc82da2c81..d08e9eeb77 100644
--- a/packages/devtools-kit/src/_types/client-api.ts
+++ b/packages/devtools-kit/src/_types/client-api.ts
@@ -67,11 +67,12 @@ export interface NuxtDevtoolsHostClient {
   popup?(): any
 
   /**
-   * Update client, send to iframe if provided
-   *
+   * Update client
    * @internal
    */
-  updateClient(iframe?: HTMLIFrameElement): NuxtDevtoolsHostClient
+  updateClient(): NuxtDevtoolsHostClient
+
+  getIframe(): HTMLIFrameElement
 }
 
 export interface NuxtDevtoolsClient {
diff --git a/packages/devtools/client/plugins/global.ts b/packages/devtools/client/plugins/global.ts
index 7cb4078eed..53553fcf6b 100644
--- a/packages/devtools/client/plugins/global.ts
+++ b/packages/devtools/client/plugins/global.ts
@@ -1,11 +1,9 @@
-import type { NuxtDevtoolsGlobal } from '../../src/types'
-
 export default defineNuxtPlugin(() => {
   const client = useClient()
   const inspectorData = useComponentInspectorData()
   const router = useRouter()
 
-  window.__NUXT_DEVTOOLS_VIEW__ = <NuxtDevtoolsGlobal>{
+  window.__NUXT_DEVTOOLS_VIEW__ = {
     setClient(_client) {
       if (client.value === _client)
         return
diff --git a/packages/devtools/src/runtime/plugins/devtools.client.ts b/packages/devtools/src/runtime/plugins/devtools.client.ts
index 1c2a294b31..07eeca139a 100644
--- a/packages/devtools/src/runtime/plugins/devtools.client.ts
+++ b/packages/devtools/src/runtime/plugins/devtools.client.ts
@@ -1,12 +1,10 @@
-import { createApp, h, markRaw, ref, shallowReactive, watch, watchEffect } from 'vue'
+import { shallowReactive, watchEffect } from 'vue'
 
 import { setupHooksDebug } from '../shared/hooks'
-import type { NuxtDevtoolsHostClient, VueInspectorClient } from '../../types'
-import { useClientColorMode } from './view/client'
 
 // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error
 // @ts-ignore tsconfig
-import { defineNuxtPlugin, useAppConfig, useRouter, useState } from '#imports'
+import { defineNuxtPlugin, useRouter, useState } from '#imports'
 
 export default defineNuxtPlugin((nuxt: any) => {
   if (window.__NUXT_DEVTOOLS_DISABLE__ || window.parent?.__NUXT_DEVTOOLS_DISABLE__)
@@ -48,133 +46,12 @@ export default defineNuxtPlugin((nuxt: any) => {
       timeMetric.ssrStart = ssrState.value.timeSsrStart
   })
 
-  async function init() {
-    const { closePanel, togglePanel } = await import('./view/state')
-    const { createHooks } = await import('hookable')
-    const { default: Main } = await import('./view/Main.vue')
-
-    const isInspecting = ref(false)
-    const colorMode = useClientColorMode()
-    const client: NuxtDevtoolsHostClient = shallowReactive({
-      nuxt: markRaw(nuxt as any),
-      appConfig: useAppConfig() as any,
-      hooks: createHooks(),
-      getClientHooksMetrics: () => Object.values(clientHooks),
-      getClientPluginMetrics: () => {
-        return window.__NUXT_DEVTOOLS_PLUGINS_METRIC__ || []
-      },
-      loadingTimeMetrics: timeMetric,
-      reloadPage() {
-        location.reload()
-      },
-      closeDevTools: closePanel,
-      inspector: getInspectorInstance(),
-      colorMode,
-      updateClient(iframe?: HTMLIFrameElement): NuxtDevtoolsHostClient {
-        if (!client.inspector)
-          client.inspector = getInspectorInstance()
-
-        try {
-          iframe?.contentWindow?.__NUXT_DEVTOOLS_VIEW__?.setClient(client)
-        }
-        catch (e) {
-          // cross-origin
-        }
-        return client
-      },
-    })
-
-    function enableComponentInspector() {
-      window.__VUE_INSPECTOR__?.enable()
-      isInspecting.value = true
-    }
-
-    function disableComponentInspector() {
-      if (!window.__VUE_INSPECTOR__?.enabled)
-        return
-
-      window.__VUE_INSPECTOR__?.disable()
-      client?.hooks.callHook('host:inspector:close')
-      isInspecting.value = false
-    }
-
-    function getInspectorInstance(): NuxtDevtoolsHostClient['inspector'] {
-      const componentInspector = window.__VUE_INSPECTOR__ as VueInspectorClient
-
-      if (componentInspector) {
-        componentInspector.openInEditor = async (baseUrl, file, line, column) => {
-          disableComponentInspector()
-          await client.hooks.callHook('host:inspector:click', baseUrl, file, line, column)
-        }
-        componentInspector.onUpdated = () => {
-          client.hooks.callHook('host:inspector:update', {
-            ...componentInspector.linkParams,
-            ...componentInspector.position,
-          })
-        }
-      }
-      return markRaw({
-        isEnabled: isInspecting,
-        enable: enableComponentInspector,
-        disable: disableComponentInspector,
-        toggle: () => {
-          if (window.__VUE_INSPECTOR__?.enabled)
-            disableComponentInspector()
-          else
-            enableComponentInspector()
-        },
-        instance: componentInspector,
+  import('./view/client')
+    .then(({ setupDevToolsClient }) => {
+      setupDevToolsClient({
+        nuxt,
+        clientHooks,
+        timeMetric,
       })
-    }
-
-    function refreshReactivity() {
-      client.hooks.callHook('host:update:reactivity')
-    }
-
-    // trigger update for reactivity
-    watch(() => [
-      client.nuxt.payload,
-      client.colorMode.value,
-      client.loadingTimeMetrics,
-    ], () => {
-      refreshReactivity()
-    }, { deep: true })
-    // trigger update for route change
-    client.nuxt.vueApp.config.globalProperties?.$router?.afterEach(() => {
-      refreshReactivity()
-    })
-    // trigger update for app mounted
-    client.nuxt.hook('app:mounted', () => {
-      refreshReactivity()
     })
-
-    client.updateClient()
-
-    const holder = document.createElement('div')
-    holder.id = 'nuxt-devtools-container'
-    holder.setAttribute('data-v-inspector-ignore', 'true')
-    document.body.appendChild(holder)
-
-    // Shortcut to toggle devtools
-    addEventListener('keydown', (e) => {
-      if (e.code === 'KeyD' && e.altKey && e.shiftKey)
-        togglePanel()
-    })
-
-    const app = createApp({
-      render: () => h(Main, { client }),
-      devtools: {
-        hide: true,
-      },
-    })
-    app.mount(holder)
-  }
-
-  setTimeout(init, 1)
 })
-
-declare global {
-  interface Window {
-
-  }
-}
diff --git a/packages/devtools/src/runtime/plugins/view/Frame.vue b/packages/devtools/src/runtime/plugins/view/Frame.vue
deleted file mode 100644
index 7416e8ccf5..0000000000
--- a/packages/devtools/src/runtime/plugins/view/Frame.vue
+++ /dev/null
@@ -1,104 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref, watchEffect } from 'vue'
-import type { NuxtDevtoolsHostClient } from '../../../types'
-import { closePanel, state } from './state'
-import { useEventListener } from './utils'
-
-const props = defineProps<{
-  client: NuxtDevtoolsHostClient
-}>()
-
-const CLIENT_PATH = '/__nuxt_devtools__/client'
-
-const initialUrl = CLIENT_PATH + state.value.route
-const iframe = ref<HTMLIFrameElement>()
-
-async function onLoad() {
-  await waitForClientInjection()
-  props.client.updateClient(iframe.value)
-}
-
-function waitForClientInjection(retry = 10, timeout = 200) {
-  const test = () => !!iframe.value?.contentWindow?.__NUXT_DEVTOOLS_VIEW__
-
-  if (test())
-    return
-
-  return new Promise<void>((resolve, reject) => {
-    const interval = setInterval(() => {
-      if (test()) {
-        clearInterval(interval)
-        resolve()
-      }
-      else if (retry-- <= 0) {
-        clearInterval(interval)
-        // eslint-disable-next-line prefer-promise-reject-errors
-        reject('Nuxt Devtools client injection failed')
-      }
-    }, timeout)
-  })
-}
-
-onMounted(() => {
-  const documentPictureInPicture = window.documentPictureInPicture
-  if (documentPictureInPicture?.requestWindow) {
-    let pipWindow: Window | null = null
-    // eslint-disable-next-line vue/no-mutating-props
-    props.client.popup = async () => {
-      if (pipWindow) {
-        document.exitPictureInPicture()
-      }
-      else {
-        pipWindow = await documentPictureInPicture.requestWindow({
-          width: iframe.value!.clientWidth,
-          height: iframe.value!.clientHeight,
-        }) as Window
-        const style = pipWindow.document.createElement('style')
-        style.innerHTML = `
-          body {
-            margin: 0;
-            padding: 0;
-          }
-          iframe {
-            width: 100vw;
-            height: 100vh;
-            border: none;
-            outline: none;
-          }
-        `
-        pipWindow.__NUXT_DEVTOOLS_DISABLE__ = true
-        pipWindow.document.head.appendChild(style)
-        pipWindow.document.body.appendChild(iframe.value!)
-      }
-    }
-  }
-
-  props.client.updateClient(iframe.value)
-  props.client.hooks.hook('devtools:navigate', (path) => {
-    state.value.route = path
-  })
-})
-
-useEventListener(window, 'keydown', (e: KeyboardEvent) => {
-  if (e.key === 'Escape' && props.client.inspector?.isEnabled.value) {
-    e.preventDefault()
-    props.client.inspector?.disable()
-    closePanel()
-  }
-})
-
-watchEffect(() => {
-  if (!state.value.open)
-    iframe.value?.blur()
-  else
-    iframe.value?.focus()
-})
-</script>
-
-<template>
-  <iframe
-    ref="iframe"
-    :src="initialUrl"
-    @load="onLoad"
-  />
-</template>
diff --git a/packages/devtools/src/runtime/plugins/view/FrameBox.vue b/packages/devtools/src/runtime/plugins/view/FrameBox.vue
index 242e65d8c2..db9d675736 100644
--- a/packages/devtools/src/runtime/plugins/view/FrameBox.vue
+++ b/packages/devtools/src/runtime/plugins/view/FrameBox.vue
@@ -1,19 +1,40 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { ref, watchEffect } from 'vue'
 import type { NuxtDevtoolsHostClient } from '../../../types'
-import { PANEL_MAX, PANEL_MIN, isInitialized, state } from './state'
+import { PANEL_MAX, PANEL_MIN, closePanel, popupWindow, state } from './state'
 import { useEventListener } from './utils'
-import Frame from './Frame.vue'
 import '../../../types/global'
 
 const props = defineProps<{
   client: NuxtDevtoolsHostClient
 }>()
 
-const frame = ref<InstanceType<typeof Frame>>()
-const frameEl = computed(() => frame.value?.$el as HTMLElement | undefined)
+const container = ref<HTMLElement>()
 const isDragging = ref<false | { top?: boolean; left?: boolean; right?: boolean; bottom?: boolean }>(false)
 
+watchEffect(() => {
+  if (!container.value)
+    return
+
+  if (state.value.open) {
+    const iframe = props.client.getIframe()
+    iframe.style.pointerEvents = isDragging.value ? 'none' : 'auto'
+
+    if (!popupWindow.value) {
+      if (Array.from(container.value.children).every(el => el !== iframe))
+        container.value.appendChild(iframe)
+    }
+  }
+})
+
+useEventListener(window, 'keydown', (e: KeyboardEvent) => {
+  if (e.key === 'Escape' && props.client.inspector?.isEnabled.value) {
+    e.preventDefault()
+    props.client.inspector?.disable()
+    closePanel()
+  }
+})
+
 // Close panel on outside click (when enabled)
 useEventListener(window, 'mousedown', (e: MouseEvent) => {
   if (!state.value.closeOnOutsideClick)
@@ -35,7 +56,11 @@ useEventListener(window, 'mousemove', (e: MouseEvent) => {
   if (!isDragging.value)
     return
 
-  const box = frameEl.value?.getBoundingClientRect()
+  if (!state.value.open)
+    return
+
+  const iframe = props.client.getIframe()
+  const box = iframe.getBoundingClientRect()
 
   if (isDragging.value.right) {
     const widthPx = Math.abs(e.clientX - (box?.left || 0))
@@ -70,40 +95,32 @@ useEventListener(window, 'mouseleave', () => {
 </script>
 
 <template>
-  <div v-show="state.open && !client.inspector?.isEnabled.value" class="nuxt-devtools-frame">
-    <Frame
-      v-if="isInitialized"
-      ref="frame"
-      :client="client"
-      :style="{
-        pointerEvents: isDragging ? 'none' : undefined,
-      }"
-    />
+  <div v-show="state.open && !client.inspector?.isEnabled.value && !popupWindow" ref="container" class="nuxt-devtools-frame">
     <!-- Handlers -->
-    <div v-if="state.position !== 'top'" class="nuxt-devtools-resize-handle nuxt-devtools-resize-handle-horizontal" :style="{ top: 0 }" @mousedown.prevent="() => isDragging = { top: true }" />
-    <div v-if="state.position !== 'bottom'" class="nuxt-devtools-resize-handle nuxt-devtools-resize-handle-horizontal" :style="{ bottom: 0 }" @mousedown.prevent="() => isDragging = { bottom: true }" />
-    <div v-if="state.position !== 'left'" class="nuxt-devtools-resize-handle nuxt-devtools-resize-handle-vertical" :style="{ left: 0 }" @mousedown.prevent="() => isDragging = { left: true }" />
-    <div v-if="state.position !== 'right'" class="nuxt-devtools-resize-handle nuxt-devtools-resize-handle-vertical" :style="{ right: 0 }" @mousedown.prevent="() => isDragging = { right: true }" />
+    <div v-show="state.position !== 'top'" class="nuxt-devtools-resize-handle nuxt-devtools-resize-handle-horizontal" :style="{ top: 0 }" @mousedown.prevent="() => isDragging = { top: true }" />
+    <div v-show="state.position !== 'bottom'" class="nuxt-devtools-resize-handle nuxt-devtools-resize-handle-horizontal" :style="{ bottom: 0 }" @mousedown.prevent="() => isDragging = { bottom: true }" />
+    <div v-show="state.position !== 'left'" class="nuxt-devtools-resize-handle nuxt-devtools-resize-handle-vertical" :style="{ left: 0 }" @mousedown.prevent="() => isDragging = { left: true }" />
+    <div v-show="state.position !== 'right'" class="nuxt-devtools-resize-handle nuxt-devtools-resize-handle-vertical" :style="{ right: 0 }" @mousedown.prevent="() => isDragging = { right: true }" />
     <div
-      v-if="state.position !== 'top' && state.position !== 'left'"
+      v-show="state.position !== 'top' && state.position !== 'left'"
       class="nuxt-devtools-resize-handle nuxt-devtools-resize-handle-corner"
       :style="{ top: 0, left: 0, cursor: 'nwse-resize' }"
       @mousedown.prevent="() => isDragging = { top: true, left: true }"
     />
     <div
-      v-if="state.position !== 'top' && state.position !== 'right'"
+      v-show="state.position !== 'top' && state.position !== 'right'"
       class="nuxt-devtools-resize-handle nuxt-devtools-resize-handle-corner"
       :style="{ top: 0, right: 0, cursor: 'nesw-resize' }"
       @mousedown.prevent="() => isDragging = { top: true, right: true }"
     />
     <div
-      v-if="state.position !== 'bottom' && state.position !== 'left'"
+      v-show="state.position !== 'bottom' && state.position !== 'left'"
       class="nuxt-devtools-resize-handle nuxt-devtools-resize-handle-corner"
       :style="{ bottom: 0, left: 0, cursor: 'nesw-resize' }"
       @mousedown.prevent="() => isDragging = { bottom: true, left: true }"
     />
     <div
-      v-if="state.position !== 'bottom' && state.position !== 'right'"
+      v-show="state.position !== 'bottom' && state.position !== 'right'"
       class="nuxt-devtools-resize-handle nuxt-devtools-resize-handle-corner"
       :style="{ bottom: 0, right: 0, cursor: 'nwse-resize' }"
       @mousedown.prevent="() => isDragging = { bottom: true, right: true }"
diff --git a/packages/devtools/src/runtime/plugins/view/client.ts b/packages/devtools/src/runtime/plugins/view/client.ts
index 0d4a7d553c..7d586336d8 100644
--- a/packages/devtools/src/runtime/plugins/view/client.ts
+++ b/packages/devtools/src/runtime/plugins/view/client.ts
@@ -1,8 +1,224 @@
 import type { Ref } from 'vue'
-import { computed, ref } from 'vue'
+import { computed, createApp, h, markRaw, ref, shallowReactive, shallowRef, watch } from 'vue'
+import { createHooks } from 'hookable'
+import type { NuxtDevtoolsHostClient } from '../../../types'
+import Main from './Main.vue'
+import { closePanel, popupWindow, state, togglePanel } from './state'
+
+// eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error
+// @ts-ignore tsconfig
+import { useAppConfig } from '#imports'
+
+const clientRef = shallowRef<NuxtDevtoolsHostClient>()
+
+export { clientRef as client }
 
 export type ColorScheme = 'dark' | 'light'
 
+export async function setupDevToolsClient({
+  nuxt,
+  clientHooks,
+  timeMetric,
+}: {
+  nuxt: any
+  clientHooks: any
+  timeMetric: any
+}) {
+  const isInspecting = ref(false)
+  const colorMode = useClientColorMode()
+
+  const client: NuxtDevtoolsHostClient = shallowReactive({
+    nuxt: markRaw(nuxt as any),
+    appConfig: useAppConfig() as any,
+    hooks: createHooks(),
+    getClientHooksMetrics: () => Object.values(clientHooks),
+    getClientPluginMetrics: () => {
+      return window.__NUXT_DEVTOOLS_PLUGINS_METRIC__ || []
+    },
+    loadingTimeMetrics: timeMetric,
+    reloadPage() {
+      location.reload()
+    },
+    closeDevTools: closePanel,
+    inspector: getInspectorInstance(),
+    colorMode,
+    getIframe,
+    updateClient,
+  })
+
+  let iframe: HTMLIFrameElement | undefined
+
+  function updateClient() {
+    if (!client.inspector)
+      client.inspector = getInspectorInstance()
+
+    try {
+      iframe?.contentWindow?.__NUXT_DEVTOOLS_VIEW__?.setClient(client)
+    }
+    catch (e) {
+      // cross-origin
+    }
+    return client
+  }
+
+  function getIframe() {
+    if (!iframe) {
+      const CLIENT_PATH = '/__nuxt_devtools__/client'
+      const initialUrl = CLIENT_PATH + state.value.route
+      iframe = document.createElement('iframe')
+      iframe.id = 'nuxt-devtools-iframe'
+      iframe.src = initialUrl
+      iframe.setAttribute('data-v-inspector-ignore', 'true')
+      iframe.addEventListener('load', async () => {
+        await waitForClientInjection()
+        client.updateClient()
+      })
+    }
+
+    return iframe
+  }
+
+  function waitForClientInjection(retry = 10, timeout = 200) {
+    const test = () => !!iframe?.contentWindow?.__NUXT_DEVTOOLS_VIEW__
+
+    if (test())
+      return
+
+    return new Promise<void>((resolve, reject) => {
+      const interval = setInterval(() => {
+        if (test()) {
+          clearInterval(interval)
+          resolve()
+        }
+        else if (retry-- <= 0) {
+          clearInterval(interval)
+          // eslint-disable-next-line prefer-promise-reject-errors
+          reject('Nuxt Devtools client injection failed')
+        }
+      }, timeout)
+    })
+  }
+
+  function enableComponentInspector() {
+    window.__VUE_INSPECTOR__?.enable()
+    isInspecting.value = true
+  }
+
+  function disableComponentInspector() {
+    if (!window.__VUE_INSPECTOR__?.enabled)
+      return
+
+    window.__VUE_INSPECTOR__?.disable()
+    client?.hooks.callHook('host:inspector:close')
+    isInspecting.value = false
+  }
+
+  function getInspectorInstance(): NuxtDevtoolsHostClient['inspector'] {
+    const componentInspector = window.__VUE_INSPECTOR__
+    if (componentInspector) {
+      componentInspector.openInEditor = async (baseUrl, file, line, column) => {
+        disableComponentInspector()
+        await client.hooks.callHook('host:inspector:click', baseUrl, file, line, column)
+      }
+      componentInspector.onUpdated = () => {
+        client.hooks.callHook('host:inspector:update', {
+          ...componentInspector.linkParams,
+          ...componentInspector.position,
+        })
+      }
+    }
+    return markRaw({
+      isEnabled: isInspecting,
+      enable: enableComponentInspector,
+      disable: disableComponentInspector,
+      toggle: () => {
+        if (window.__VUE_INSPECTOR__?.enabled)
+          disableComponentInspector()
+        else
+          enableComponentInspector()
+      },
+      instance: componentInspector,
+    })
+  }
+
+  function refreshReactivity() {
+    client.hooks.callHook('host:update:reactivity')
+  }
+
+  // trigger update for reactivity
+  watch(() => [
+    client.nuxt.payload,
+    client.colorMode.value,
+    client.loadingTimeMetrics,
+  ], () => {
+    refreshReactivity()
+  }, { deep: true })
+  // trigger update for route change
+  client.nuxt.vueApp.config.globalProperties?.$router?.afterEach(() => {
+    refreshReactivity()
+  })
+  // trigger update for app mounted
+  client.nuxt.hook('app:mounted', () => {
+    refreshReactivity()
+  })
+  // record last route
+  client.hooks.hook('devtools:navigate', (path) => {
+    state.value.route = path
+  })
+
+  clientRef.value = client
+
+  // Experimental: Picture-in-Picture mode
+  // https://developer.chrome.com/docs/web-platform/document-picture-in-picture/
+  const documentPictureInPicture = window.documentPictureInPicture
+  if (documentPictureInPicture?.requestWindow) {
+    client.popup = async () => {
+      const iframe = getIframe()
+      const pip = popupWindow.value = await documentPictureInPicture.requestWindow({
+        width: iframe!.clientWidth || 500,
+        height: iframe!.clientHeight || 500,
+      }) as Window
+      const style = pip.document.createElement('style')
+      style.innerHTML = `
+          body {
+            margin: 0;
+            padding: 0;
+          }
+          iframe {
+            width: 100vw;
+            height: 100vh;
+            border: none;
+            outline: none;
+          }
+        `
+      pip.__NUXT_DEVTOOLS_DISABLE__ = true
+      pip.document.head.appendChild(style)
+      pip.document.body.appendChild(iframe)
+    }
+  }
+
+  client.updateClient()
+
+  const holder = document.createElement('div')
+  holder.id = 'nuxt-devtools-container'
+  holder.setAttribute('data-v-inspector-ignore', 'true')
+  document.body.appendChild(holder)
+
+  // Shortcut to toggle devtools
+  addEventListener('keydown', (e) => {
+    if (e.code === 'KeyD' && e.altKey && e.shiftKey)
+      togglePanel()
+  })
+
+  const app = createApp({
+    render: () => h(Main, { client }),
+    devtools: {
+      hide: true,
+    },
+  })
+  app.mount(holder)
+}
+
 export function useClientColorMode(): Ref<ColorScheme> {
   const explicitColor = ref<ColorScheme>()
   const systemColor = ref<ColorScheme>()
diff --git a/packages/devtools/src/runtime/plugins/view/state.ts b/packages/devtools/src/runtime/plugins/view/state.ts
index 77318ed8f2..1a49134136 100644
--- a/packages/devtools/src/runtime/plugins/view/state.ts
+++ b/packages/devtools/src/runtime/plugins/view/state.ts
@@ -1,4 +1,4 @@
-import { ref, watch } from 'vue'
+import { ref, shallowRef, watch } from 'vue'
 import type { DevToolsFrameState } from '../../../types'
 import { useObjectStorage } from './utils'
 
@@ -6,6 +6,8 @@ export const PANEL_PADDING = 10
 export const PANEL_MIN = 20
 export const PANEL_MAX = 100
 
+export const popupWindow = shallowRef<Window | null>(null)
+
 export const state = useObjectStorage<DevToolsFrameState>('nuxt-devtools-frame-state', {
   width: 80,
   height: 60,
@@ -34,6 +36,10 @@ export function togglePanel() {
 
 export function closePanel() {
   state.value.open = false
+  if (popupWindow.value) {
+    popupWindow.value.close()
+    popupWindow.value = null
+  }
 }
 
 export function openPanel() {

From c15c03ae2ca17372b4bd00f4cd99eccb3c3f0c14 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Thu, 22 Jun 2023 13:07:06 +0200
Subject: [PATCH 4/8] docs: update desc

---
 README.md                       | 6 ++----
 docs/content/1.guide/0.index.md | 5 -----
 2 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 4400346bb8..87fd83f619 100644
--- a/README.md
+++ b/README.md
@@ -31,7 +31,7 @@ Unleash Nuxt Developer Experience.
 
 > Nuxt DevTools requires **Nuxt v3.1.0 or higher**.
 
-You can opt-in Nuxt DevTools per-project by going to the project root and run:
+You can opt-in Nuxt DevTools per project by going to the project root and run:
 
 ```bash
 npx nuxi@latest devtools enable
@@ -41,9 +41,7 @@ Restart your Nuxt server and open your app in browser. Click the Nuxt icon on th
 
 > **Note**: If you using `nvm` or other Node version managers, we suggest to run the enable command again after switching Node version.
 
-When you run `nuxi devtools enable`, Nuxt DevTools will be installed as a global module and only activated for the projects you enabled. The configuration will be saved in your local `~/.nuxtrc` file, so it doesn't affect your team unless they also opt-in.
-
-Similarly, you can disable it per-project by running:
+Similarly, you can disable it per project by running:
 
 ```bash
 npx nuxi@latest devtools disable
diff --git a/docs/content/1.guide/0.index.md b/docs/content/1.guide/0.index.md
index 1c68fcda1c..a8240415b7 100644
--- a/docs/content/1.guide/0.index.md
+++ b/docs/content/1.guide/0.index.md
@@ -18,8 +18,6 @@ Restart your Nuxt server and open your app in browser. Click the Nuxt icon on th
 If you using `nvm` or other Node version managers, we suggest to run the enable command again after switching Node version.
 ::
 
-When you run `nuxi devtools enable`, Nuxt DevTools will be installed as a global module and only activated for the projects you enabled. The configuration will be saved in your local `~/.nuxtrc` file, so it doesn't affect your team unless they also opt-in.
-
 Similarly, you can disable it per-project by running:
 
 ```bash
@@ -68,9 +66,6 @@ To configure Nuxt DevTools, you can pass the `devtools` options.
 ```ts
 // nuxt.config.ts
 export default defineNuxtConfig({
-  modules: [
-    '@nuxt/devtools',
-  ],
   devtools: {
     // Enable devtools (default: true)
     enabled: true,

From c08b794711e1fd2f4ed295e2bd30cae48696ecba Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Thu, 22 Jun 2023 21:17:58 +0200
Subject: [PATCH 5/8] feat: popup size

---
 .../src/runtime/plugins/view/FrameBox.vue     | 41 +++++++++++++++----
 .../src/runtime/plugins/view/Main.vue         |  4 +-
 .../src/runtime/plugins/view/client.ts        | 20 ++++++---
 .../src/runtime/plugins/view/state.ts         | 16 +++++---
 4 files changed, 60 insertions(+), 21 deletions(-)

diff --git a/packages/devtools/src/runtime/plugins/view/FrameBox.vue b/packages/devtools/src/runtime/plugins/view/FrameBox.vue
index db9d675736..a08aa0afb6 100644
--- a/packages/devtools/src/runtime/plugins/view/FrameBox.vue
+++ b/packages/devtools/src/runtime/plugins/view/FrameBox.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watchEffect } from 'vue'
 import type { NuxtDevtoolsHostClient } from '../../../types'
-import { PANEL_MAX, PANEL_MIN, closePanel, popupWindow, state } from './state'
+import { PANEL_MAX, PANEL_MIN, closeDevTools, popupWindow, state } from './state'
 import { useEventListener } from './utils'
 import '../../../types/global'
 
@@ -31,7 +31,7 @@ useEventListener(window, 'keydown', (e: KeyboardEvent) => {
   if (e.key === 'Escape' && props.client.inspector?.isEnabled.value) {
     e.preventDefault()
     props.client.inspector?.disable()
-    closePanel()
+    closeDevTools()
   }
 })
 
@@ -39,6 +39,8 @@ useEventListener(window, 'keydown', (e: KeyboardEvent) => {
 useEventListener(window, 'mousedown', (e: MouseEvent) => {
   if (!state.value.closeOnOutsideClick)
     return
+  if (popupWindow.value)
+    return
   if (!state.value.open || isDragging.value || props.client.inspector?.isEnabled.value)
     return
 
@@ -55,7 +57,6 @@ useEventListener(window, 'mousedown', (e: MouseEvent) => {
 useEventListener(window, 'mousemove', (e: MouseEvent) => {
   if (!isDragging.value)
     return
-
   if (!state.value.open)
     return
 
@@ -95,12 +96,36 @@ useEventListener(window, 'mouseleave', () => {
 </script>
 
 <template>
-  <div v-show="state.open && !client.inspector?.isEnabled.value && !popupWindow" ref="container" class="nuxt-devtools-frame">
+  <div
+    v-show="state.open && !client.inspector?.isEnabled.value && !popupWindow"
+    ref="container"
+    class="nuxt-devtools-frame"
+  >
     <!-- Handlers -->
-    <div v-show="state.position !== 'top'" class="nuxt-devtools-resize-handle nuxt-devtools-resize-handle-horizontal" :style="{ top: 0 }" @mousedown.prevent="() => isDragging = { top: true }" />
-    <div v-show="state.position !== 'bottom'" class="nuxt-devtools-resize-handle nuxt-devtools-resize-handle-horizontal" :style="{ bottom: 0 }" @mousedown.prevent="() => isDragging = { bottom: true }" />
-    <div v-show="state.position !== 'left'" class="nuxt-devtools-resize-handle nuxt-devtools-resize-handle-vertical" :style="{ left: 0 }" @mousedown.prevent="() => isDragging = { left: true }" />
-    <div v-show="state.position !== 'right'" class="nuxt-devtools-resize-handle nuxt-devtools-resize-handle-vertical" :style="{ right: 0 }" @mousedown.prevent="() => isDragging = { right: true }" />
+    <div
+      v-show="state.position !== 'top'"
+      class="nuxt-devtools-resize-handle nuxt-devtools-resize-handle-horizontal"
+      :style="{ top: 0 }"
+      @mousedown.prevent="() => isDragging = { top: true }"
+    />
+    <div
+      v-show="state.position !== 'bottom'"
+      class="nuxt-devtools-resize-handle nuxt-devtools-resize-handle-horizontal"
+      :style="{ bottom: 0 }"
+      @mousedown.prevent="() => isDragging = { bottom: true }"
+    />
+    <div
+      v-show="state.position !== 'left'"
+      class="nuxt-devtools-resize-handle nuxt-devtools-resize-handle-vertical"
+      :style="{ left: 0 }"
+      @mousedown.prevent="() => isDragging = { left: true }"
+    />
+    <div
+      v-show="state.position !== 'right'"
+      class="nuxt-devtools-resize-handle nuxt-devtools-resize-handle-vertical"
+      :style="{ right: 0 }"
+      @mousedown.prevent="() => isDragging = { right: true }"
+    />
     <div
       v-show="state.position !== 'top' && state.position !== 'left'"
       class="nuxt-devtools-resize-handle nuxt-devtools-resize-handle-corner"
diff --git a/packages/devtools/src/runtime/plugins/view/Main.vue b/packages/devtools/src/runtime/plugins/view/Main.vue
index d44a15a411..7dd285b420 100644
--- a/packages/devtools/src/runtime/plugins/view/Main.vue
+++ b/packages/devtools/src/runtime/plugins/view/Main.vue
@@ -2,7 +2,7 @@
 import type { CSSProperties } from 'vue'
 import { computed, onMounted, reactive, ref } from 'vue'
 import type { NuxtDevtoolsHostClient } from '../../../types'
-import { state, togglePanel } from './state'
+import { state, toggleDevTools } from './state'
 import { millisecondToHumanreadable, useEventListener } from './utils'
 import FrameBox from './FrameBox.vue'
 
@@ -223,7 +223,7 @@ const time = computed(() => {
   >
     <div class="nuxt-devtools-glowing" :style="isDragging ? 'opacity: 0.6 !important' : ''" />
     <div ref="panelEl" class="nuxt-devtools-panel" @pointerdown="onPointerDown">
-      <button class="nuxt-devtools-icon-button nuxt-devtools-nuxt-button" title="Toggle Nuxt DevTools" @click="togglePanel">
+      <button class="nuxt-devtools-icon-button nuxt-devtools-nuxt-button" title="Toggle Nuxt DevTools" @click="toggleDevTools">
         <svg
           viewBox="0 0 324 324" fill="none" xmlns="http://www.w3.org/2000/svg"
           style="margin-top:-1px; height: 1.2em; width: 1.2em;"
diff --git a/packages/devtools/src/runtime/plugins/view/client.ts b/packages/devtools/src/runtime/plugins/view/client.ts
index 7d586336d8..722ae44183 100644
--- a/packages/devtools/src/runtime/plugins/view/client.ts
+++ b/packages/devtools/src/runtime/plugins/view/client.ts
@@ -3,7 +3,7 @@ import { computed, createApp, h, markRaw, ref, shallowReactive, shallowRef, watc
 import { createHooks } from 'hookable'
 import type { NuxtDevtoolsHostClient } from '../../../types'
 import Main from './Main.vue'
-import { closePanel, popupWindow, state, togglePanel } from './state'
+import { closeDevTools, popupWindow, state, toggleDevTools } from './state'
 
 // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error
 // @ts-ignore tsconfig
@@ -39,7 +39,7 @@ export async function setupDevToolsClient({
     reloadPage() {
       location.reload()
     },
-    closeDevTools: closePanel,
+    closeDevTools,
     inspector: getInspectorInstance(),
     colorMode,
     getIframe,
@@ -175,8 +175,8 @@ export async function setupDevToolsClient({
     client.popup = async () => {
       const iframe = getIframe()
       const pip = popupWindow.value = await documentPictureInPicture.requestWindow({
-        width: iframe!.clientWidth || 500,
-        height: iframe!.clientHeight || 500,
+        width: Math.round(window.innerWidth * state.value.width / 100),
+        height: Math.round(window.innerHeight * state.value.height / 100),
       }) as Window
       const style = pip.document.createElement('style')
       style.innerHTML = `
@@ -194,6 +194,16 @@ export async function setupDevToolsClient({
       pip.__NUXT_DEVTOOLS_DISABLE__ = true
       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', () => {
+        closeDevTools()
+      })
+      pip.addEventListener('close', () => {
+        closeDevTools()
+      })
     }
   }
 
@@ -207,7 +217,7 @@ export async function setupDevToolsClient({
   // Shortcut to toggle devtools
   addEventListener('keydown', (e) => {
     if (e.code === 'KeyD' && e.altKey && e.shiftKey)
-      togglePanel()
+      toggleDevTools()
   })
 
   const app = createApp({
diff --git a/packages/devtools/src/runtime/plugins/view/state.ts b/packages/devtools/src/runtime/plugins/view/state.ts
index 1a49134136..a9f1c635aa 100644
--- a/packages/devtools/src/runtime/plugins/view/state.ts
+++ b/packages/devtools/src/runtime/plugins/view/state.ts
@@ -27,21 +27,25 @@ if (!isInitialized.value) {
   })
 }
 
-export function togglePanel() {
+export function toggleDevTools() {
   if (state.value.open)
-    closePanel()
+    closeDevTools()
   else
-    openPanel()
+    openDevTools()
 }
 
-export function closePanel() {
+export function closeDevTools() {
   state.value.open = false
   if (popupWindow.value) {
-    popupWindow.value.close()
+    try {
+      popupWindow.value.close()
+    }
+    catch (e) {
+    }
     popupWindow.value = null
   }
 }
 
-export function openPanel() {
+export function openDevTools() {
   state.value.open = true
 }

From 31093ac4dfa042bbfcc0eb6d149a5bcb101bd98c Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Thu, 22 Jun 2023 21:26:20 +0200
Subject: [PATCH 6/8] chore: fix build

---
 packages/devtools/src/types/global.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/devtools/src/types/global.ts b/packages/devtools/src/types/global.ts
index 78025c309b..7b388069af 100644
--- a/packages/devtools/src/types/global.ts
+++ b/packages/devtools/src/types/global.ts
@@ -1,5 +1,5 @@
 import type { VueInspectorClient } from 'vite-plugin-vue-inspector'
-import type { LoadingTimeMetric, NuxtDevtoolsIframeClient, NuxtDevtoolsGlobal as NuxtDevtoolsViewGlobal, PluginMetric } from '../../types'
+import type { LoadingTimeMetric, NuxtDevtoolsIframeClient, NuxtDevtoolsGlobal as NuxtDevtoolsViewGlobal, PluginMetric } from '.'
 
 declare global {
   interface Window {

From c1a2d8fe8f9213f00a1a0ccff65780e1f9c8b329 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Thu, 22 Jun 2023 21:59:33 +0200
Subject: [PATCH 7/8] feat: improve state handling

---
 .../devtools-kit/src/_types/client-api.ts     |  5 +-
 packages/devtools/client/app.vue              |  2 +-
 .../src/runtime/plugins/view/FrameBox.vue     |  5 +-
 .../src/runtime/plugins/view/Main.vue         |  9 ++-
 .../src/runtime/plugins/view/client.ts        | 68 +++++++++++++------
 .../src/runtime/plugins/view/state.ts         | 33 +--------
 packages/devtools/src/types/global.ts         |  7 ++
 playgrounds/empty/nuxt.config.ts              |  1 +
 .../module-starter/client/pages/index.vue     |  2 +-
 9 files changed, 71 insertions(+), 61 deletions(-)

diff --git a/packages/devtools-kit/src/_types/client-api.ts b/packages/devtools-kit/src/_types/client-api.ts
index d08e9eeb77..aa38f17545 100644
--- a/packages/devtools-kit/src/_types/client-api.ts
+++ b/packages/devtools-kit/src/_types/client-api.ts
@@ -53,7 +53,10 @@ export interface NuxtDevtoolsHostClient {
   getClientPluginMetrics(): PluginMetric[]
 
   reloadPage(): void
-  closeDevTools(): void
+
+  close(): void
+  open(): void
+  toggle(): void
 
   /**
    * Popup the DevTools frame into Picture-in-Picture mode
diff --git a/packages/devtools/client/app.vue b/packages/devtools/client/app.vue
index e2941218c3..8785a179b5 100644
--- a/packages/devtools/client/app.vue
+++ b/packages/devtools/client/app.vue
@@ -45,7 +45,7 @@ watch(
 
 addEventListener('keydown', (e) => {
   if (e.code === 'KeyD' && e.altKey) {
-    client.value?.closeDevTools()
+    client.value?.close()
     e.preventDefault()
   }
 })
diff --git a/packages/devtools/src/runtime/plugins/view/FrameBox.vue b/packages/devtools/src/runtime/plugins/view/FrameBox.vue
index a08aa0afb6..9566afa4a4 100644
--- a/packages/devtools/src/runtime/plugins/view/FrameBox.vue
+++ b/packages/devtools/src/runtime/plugins/view/FrameBox.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { ref, watchEffect } from 'vue'
 import type { NuxtDevtoolsHostClient } from '../../../types'
-import { PANEL_MAX, PANEL_MIN, closeDevTools, popupWindow, state } from './state'
+import { PANEL_MAX, PANEL_MIN, popupWindow, state } from './state'
 import { useEventListener } from './utils'
-import '../../../types/global'
 
 const props = defineProps<{
   client: NuxtDevtoolsHostClient
@@ -31,7 +30,7 @@ useEventListener(window, 'keydown', (e: KeyboardEvent) => {
   if (e.key === 'Escape' && props.client.inspector?.isEnabled.value) {
     e.preventDefault()
     props.client.inspector?.disable()
-    closeDevTools()
+    props.client.close()
   }
 })
 
diff --git a/packages/devtools/src/runtime/plugins/view/Main.vue b/packages/devtools/src/runtime/plugins/view/Main.vue
index 631581d571..8e0de6a00e 100644
--- a/packages/devtools/src/runtime/plugins/view/Main.vue
+++ b/packages/devtools/src/runtime/plugins/view/Main.vue
@@ -2,7 +2,7 @@
 import type { CSSProperties } from 'vue'
 import { computed, onMounted, reactive, ref } from 'vue'
 import type { NuxtDevtoolsHostClient } from '../../../types'
-import { state, toggleDevTools } from './state'
+import { state } from './state'
 import { millisecondToHumanreadable, useEventListener } from './utils'
 import FrameBox from './FrameBox.vue'
 
@@ -223,7 +223,12 @@ const time = computed(() => {
   >
     <div class="nuxt-devtools-glowing" :style="isDragging ? 'opacity: 0.6 !important' : ''" />
     <div ref="panelEl" class="nuxt-devtools-panel" @pointerdown="onPointerDown">
-      <button class="nuxt-devtools-icon-button nuxt-devtools-nuxt-button" title="Toggle Nuxt DevTools" @click="toggleDevTools">
+      <button
+        class="nuxt-devtools-icon-button nuxt-devtools-nuxt-button"
+        title="Toggle Nuxt DevTools"
+        :style="state.open ? '' : 'filter:saturate(0)'"
+        @click="client.toggle()"
+      >
         <svg
           viewBox="0 0 324 324" fill="none" xmlns="http://www.w3.org/2000/svg"
           style="margin-top:-1px; height: 1.2em; width: 1.2em;"
diff --git a/packages/devtools/src/runtime/plugins/view/client.ts b/packages/devtools/src/runtime/plugins/view/client.ts
index 722ae44183..284d209000 100644
--- a/packages/devtools/src/runtime/plugins/view/client.ts
+++ b/packages/devtools/src/runtime/plugins/view/client.ts
@@ -1,9 +1,9 @@
 import type { Ref } from 'vue'
-import { computed, createApp, h, markRaw, ref, shallowReactive, shallowRef, watch } from 'vue'
+import { computed, createApp, h, markRaw, nextTick, ref, shallowReactive, shallowRef, watch } from 'vue'
 import { createHooks } from 'hookable'
 import type { NuxtDevtoolsHostClient } from '../../../types'
 import Main from './Main.vue'
-import { closeDevTools, popupWindow, state, toggleDevTools } from './state'
+import { popupWindow, state } from './state'
 
 // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error
 // @ts-ignore tsconfig
@@ -39,7 +39,33 @@ export async function setupDevToolsClient({
     reloadPage() {
       location.reload()
     },
-    closeDevTools,
+    toggle() {
+      if (state.value.open)
+        client.close()
+      else
+        client.open()
+    },
+    close() {
+      if (!state.value.open)
+        return
+      state.value.open = false
+      if (popupWindow.value) {
+        try {
+          popupWindow.value.close()
+        }
+        catch (e) {
+        }
+        popupWindow.value = null
+      }
+    },
+    open() {
+      if (state.value.open)
+        return
+      state.value.open = true
+      nextTick(() => {
+        client.updateClient()
+      })
+    },
     inspector: getInspectorInstance(),
     colorMode,
     getIframe,
@@ -69,10 +95,10 @@ export async function setupDevToolsClient({
       iframe.id = 'nuxt-devtools-iframe'
       iframe.src = initialUrl
       iframe.setAttribute('data-v-inspector-ignore', 'true')
-      iframe.addEventListener('load', async () => {
+      iframe.onload = async () => {
         await waitForClientInjection()
         client.updateClient()
-      })
+      }
     }
 
     return iframe
@@ -180,18 +206,20 @@ export async function setupDevToolsClient({
       }) as Window
       const style = pip.document.createElement('style')
       style.innerHTML = `
-          body {
-            margin: 0;
-            padding: 0;
-          }
-          iframe {
-            width: 100vw;
-            height: 100vh;
-            border: none;
-            outline: none;
-          }
-        `
+        body {
+          margin: 0;
+          padding: 0;
+        }
+        iframe {
+          width: 100vw;
+          height: 100vh;
+          border: none;
+          outline: none;
+        }
+      `
       pip.__NUXT_DEVTOOLS_DISABLE__ = true
+      pip.__NUXT_DEVTOOLS_IS_POPUP__ = true
+      pip.document.title = 'Nuxt DevTools'
       pip.document.head.appendChild(style)
       pip.document.body.appendChild(iframe)
       pip.addEventListener('resize', () => {
@@ -199,10 +227,8 @@ export async function setupDevToolsClient({
         state.value.height = Math.round(pip.innerHeight / window.innerHeight * 100)
       })
       pip.addEventListener('pagehide', () => {
-        closeDevTools()
-      })
-      pip.addEventListener('close', () => {
-        closeDevTools()
+        popupWindow.value = null
+        pip.close()
       })
     }
   }
@@ -217,7 +243,7 @@ export async function setupDevToolsClient({
   // Shortcut to toggle devtools
   addEventListener('keydown', (e) => {
     if (e.code === 'KeyD' && e.altKey && e.shiftKey)
-      toggleDevTools()
+      client.close()
   })
 
   const app = createApp({
diff --git a/packages/devtools/src/runtime/plugins/view/state.ts b/packages/devtools/src/runtime/plugins/view/state.ts
index a9f1c635aa..b092151d0f 100644
--- a/packages/devtools/src/runtime/plugins/view/state.ts
+++ b/packages/devtools/src/runtime/plugins/view/state.ts
@@ -1,4 +1,4 @@
-import { ref, shallowRef, watch } from 'vue'
+import { shallowRef } from 'vue'
 import type { DevToolsFrameState } from '../../../types'
 import { useObjectStorage } from './utils'
 
@@ -18,34 +18,3 @@ export const state = useObjectStorage<DevToolsFrameState>('nuxt-devtools-frame-s
   position: 'bottom',
   closeOnOutsideClick: false,
 })
-
-export const isInitialized = ref(state.value.open)
-if (!isInitialized.value) {
-  watch(() => state.value.open, (open) => {
-    if (open)
-      isInitialized.value = open
-  })
-}
-
-export function toggleDevTools() {
-  if (state.value.open)
-    closeDevTools()
-  else
-    openDevTools()
-}
-
-export function closeDevTools() {
-  state.value.open = false
-  if (popupWindow.value) {
-    try {
-      popupWindow.value.close()
-    }
-    catch (e) {
-    }
-    popupWindow.value = null
-  }
-}
-
-export function openDevTools() {
-  state.value.open = true
-}
diff --git a/packages/devtools/src/types/global.ts b/packages/devtools/src/types/global.ts
index 7b388069af..6d07f13330 100644
--- a/packages/devtools/src/types/global.ts
+++ b/packages/devtools/src/types/global.ts
@@ -37,6 +37,13 @@ declare global {
      */
     __NUXT_DEVTOOLS_DISABLE__?: boolean
 
+    /**
+     * Is popup mode
+     *
+     * @internal
+     */
+    __NUXT_DEVTOOLS_IS_POPUP__?: boolean
+
     /**
      * Vue Inspector client
      */
diff --git a/playgrounds/empty/nuxt.config.ts b/playgrounds/empty/nuxt.config.ts
index 222f0ff5c1..4af4258639 100644
--- a/playgrounds/empty/nuxt.config.ts
+++ b/playgrounds/empty/nuxt.config.ts
@@ -2,5 +2,6 @@
 export default defineNuxtConfig({
   modules: [
     '../../local',
+    // '@nuxt/devtools',
   ],
 })
diff --git a/playgrounds/module-starter/client/pages/index.vue b/playgrounds/module-starter/client/pages/index.vue
index 07e038ad82..00681af617 100644
--- a/playgrounds/module-starter/client/pages/index.vue
+++ b/playgrounds/module-starter/client/pages/index.vue
@@ -45,7 +45,7 @@ onDevtoolsClientConnected((client) => {
         <NButton
           n="green"
           class="mt-4"
-          @click="client!.host.closeDevTools()"
+          @click="client!.host.close()"
         >
           Close DevTools
         </NButton>

From 1f579b67a9028052d58cede7ca9213ead3d8bf28 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Fri, 23 Jun 2023 16:32:51 +0200
Subject: [PATCH 8/8] feat: showing info

---
 .../client/components/DockingPanel.vue        | 11 ++---
 .../components/PictureInPictureButton.vue     | 42 +++++++++++++++++++
 .../components/PictureInPictureInfoDialog.vue |  0
 playgrounds/tab-seo/nuxt.config.ts            |  2 +-
 4 files changed, 46 insertions(+), 9 deletions(-)
 create mode 100644 packages/devtools/client/components/PictureInPictureButton.vue
 create mode 100644 packages/devtools/client/components/PictureInPictureInfoDialog.vue

diff --git a/packages/devtools/client/components/DockingPanel.vue b/packages/devtools/client/components/DockingPanel.vue
index 4c4b7bc47e..97e2f41b30 100644
--- a/packages/devtools/client/components/DockingPanel.vue
+++ b/packages/devtools/client/components/DockingPanel.vue
@@ -15,23 +15,18 @@ function refreshPage() {
 <template>
   <div>
     <div px3 py2 border="b base" flex="~ gap-2">
-      <NButton v-if="client?.popup" n="sm primary" @click="client.popup()">
-        <div carbon-launch /> Popup
-      </NButton>
       <NDarkToggle v-slot="{ toggle, isDark }">
         <NButton n="sm primary" @click="toggle">
           <div carbon-sun dark:carbon-moon translate-y--1px /> {{ isDark.value ? 'Dark' : 'Light' }}
         </NButton>
       </NDarkToggle>
-      <NButton n="sm primary" to="/settings">
-        <div carbon-settings-adjust translate-y--1px /> Settings
-      </NButton>
+      <PictureInPictureButton />
     </div>
     <div px3 py2 flex="~ gap2">
-      <NButton n="solid primary xs" @click="refreshData">
+      <NButton n="primary sm" @click="refreshData">
         Refetch Data
       </NButton>
-      <NButton n="solid primary xs" @click="refreshPage">
+      <NButton n="primary sm" @click="refreshPage">
         Refresh Page
       </NButton>
     </div>
diff --git a/packages/devtools/client/components/PictureInPictureButton.vue b/packages/devtools/client/components/PictureInPictureButton.vue
new file mode 100644
index 0000000000..4c3fbcfc03
--- /dev/null
+++ b/packages/devtools/client/components/PictureInPictureButton.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const client = useClient()
+
+const isInPopup = window.__NUXT_DEVTOOLS_IS_POPUP__
+
+const showInfo = ref(false)
+</script>
+
+<template>
+  <template v-if="!isInPopup">
+    <NButton v-if="client?.popup" n="sm primary" @click="client.popup()">
+      <div carbon-launch /> Popup
+    </NButton>
+    <template v-else>
+      <NButton n="sm primary" @click="showInfo = true">
+        <div carbon-launch /> Popup <span mt-0.5 text-xs op50>(not supported)</span>
+      </NButton>
+      <NDialog
+        v-model="showInfo" class="max-w-150 p6 pt-2 prose"
+        @close="showInfo = false"
+      >
+        <h1 text-3xl>
+          Popup is not Supported
+        </h1>
+        <p>
+          To popup the DevTools, it requires the <a href="https://developer.chrome.com/docs/web-platform/document-picture-in-picture/" target="_blank">Document Picture-in-Picture API</a> which is currently in experimental state.
+        </p>
+        <p>
+          As June 2023, the API is only available in Chrome 111 and above, under a flag <code>#document-picture-in-picture-api</code>.
+        </p>
+        <p>
+          You currently browser seems not supporting the API or the flag is not enabled yet.
+        </p>
+        <div>
+          <NButton @click="showInfo = false">
+            Close
+          </NButton>
+        </div>
+      </NDialog>
+    </template>
+  </template>
+</template>
diff --git a/packages/devtools/client/components/PictureInPictureInfoDialog.vue b/packages/devtools/client/components/PictureInPictureInfoDialog.vue
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/playgrounds/tab-seo/nuxt.config.ts b/playgrounds/tab-seo/nuxt.config.ts
index d733b5bff0..8575476963 100644
--- a/playgrounds/tab-seo/nuxt.config.ts
+++ b/playgrounds/tab-seo/nuxt.config.ts
@@ -1,7 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   modules: [
-    '../../packages/devtools-ui-kit',
+    '../../packages/devtools-ui-kit/src/module',
     '../../local',
   ],
 })