feat: fullscreen view mode (#189)

Author: alexzhang1030

packages/client/components/DockingPanel.vue

@@ -6,6 +6,7 @@ import { isInPopup } from '~/logic/state'
   <div>
     <div px3 py2 border="b base" flex="~ gap-2">
       <PopupButton v-if="!isInPopup" />
+      <FullscreenButton v-if="!isInPopup" />
       <VDDarkToggle v-slot="{ toggle, isDark }">
         <VDButton n="sm primary" @click="toggle">
           <div carbon-sun translate-y--1px dark:carbon-moon />

packages/client/components/FullscreenButton.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { useDevToolsClient } from '../logic/client'
+
+const isFullscreen = ref(false)
+const client = useDevToolsClient()
+
+function toggleFullscreen() {
+  client.value.panel?.toggleViewMode(isFullscreen.value ? 'default' : 'fullscreen')
+  isFullscreen.value = !isFullscreen.value
+}
+</script>
+
+<template>
+  <div flex="~ gap-1">
+    <VDButton n="sm primary" @click="toggleFullscreen">
+      <template v-if="isFullscreen">
+        <i material-symbols:fullscreen-exit /> Exit Fullscreen
+      </template>
+      <template v-else>
+        <i material-symbols:fullscreen /> Fullscreen
+      </template>
+    </VDButton>
+  </div>
+</template>

packages/client/types.ts

@@ -12,7 +12,7 @@ export interface ComponentInspectorBounds {
 export interface VueDevtoolsHostClient {
   markClientLoaded: () => void
   panel?: {
-    toggleViewMode: (mode?: 'xs' | 'default') => void
+    toggleViewMode: (mode?: ViewMode) => void
     popup: () => void
     toggle: () => void
   }

packages/node/client.d.ts

@@ -56,3 +56,10 @@ declare interface PackageMeta {
   version: string
   name: string
 }
+
+/**
+ * - `xs` for functions that should only be available in the small view mode, e.g. `__EyeDropper`
+ * - `default` is the default view mode
+ * - `fullscreen` for fullscreen the whole devtool
+ */
+declare type ViewMode = 'xs' | 'default' | 'fullscreen'

packages/node/src/views/FrameBox.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watchEffect } from 'vue'
+import { computed, ref, watchEffect } from 'vue'
 import { PANEL_MAX, PANEL_MIN, popupWindow, state } from './composables'
 import { useWindowEventListener } from './utils'
 
@@ -14,8 +14,7 @@ const props = defineProps<{
       disable: () => void
     } | undefined
   }
-
-  viewMode: 'default' | 'xs'
+  viewMode: 'xs' | 'default' | 'fullscreen'
 }>()
 
 const container = ref<HTMLElement>()
@@ -100,14 +99,22 @@ useWindowEventListener('mouseup', () => {
 useWindowEventListener('mouseleave', () => {
   isResizing.value = false
 })
+
+const viewModeClass = computed(() => {
+  if (props.viewMode === 'xs')
+    return 'view-mode-xs'
+  if (props.viewMode === 'fullscreen')
+    return 'view-mode-fullscreen'
+  return ''
+})
 </script>
 
 <template>
   <div
     v-show="state.open && !client.inspector?.isEnabled.value && !popupWindow"
     ref="container"
     class="vue-devtools-frame"
-    :class="{ 'view-mode-xs': props.viewMode === 'xs' }"
+    :class="viewModeClass"
   >
     <!-- Handlers -->
     <div
@@ -209,4 +216,16 @@ useWindowEventListener('mouseleave', () => {
   width: 400px !important;
   height: 80px !important;
 }
+
+.vue-devtools-frame.view-mode-fullscreen {
+  width: 100vw !important;
+  height: 100vh !important;
+  z-index: 1 !important;
+  bottom: 0 !important;
+  transform: none !important;
+}
+
+.vue-devtools-frame.view-mode-fullscreen :deep(iframe) {
+  border-radius: 0 !important;
+}
 </style>

packages/node/src/views/Main.vue

@@ -23,7 +23,7 @@ const { hookBuffer, collect } = collectDevToolsHookBuffer()
 
 let isAppCreated = false
 const panelState = ref<{
-  viewMode: 'default' | 'xs'
+  viewMode: ViewMode
 }>({
   viewMode: 'default',
 })
@@ -90,16 +90,9 @@ async function setupClient(iframe: HTMLIFrameElement) {
   injection.setClient({
     hook,
     hookBuffer,
-    // inspector: {
-    //   enable: enableInspector,
-    //   disable: disableInspector,
-    // },
     panel: {
-      toggleViewMode: () => {
-        if (panelState.value.viewMode === 'xs')
-          panelState.value.viewMode = 'default'
-        else
-          panelState.value.viewMode = 'xs'
+      toggleViewMode: (mode?: ViewMode) => {
+        panelState.value.viewMode = mode ?? 'default'
       },
       toggle: togglePanelVisible,
       popup,
@@ -242,6 +235,7 @@ collectHookBuffer()
     :class="{
       'vue-devtools-vertical': isVertical,
       'vue-devtools-hide': isHidden,
+      'fullscreen': panelState.viewMode === 'fullscreen',
     }"
     @mousemove="bringUp"
   >
@@ -303,6 +297,10 @@ collectHookBuffer()
   transform-origin: center center;
   transform: translate(-50%, -50%) rotate(0);
 }
+#vue-devtools-anchor.fullscreen {
+  transform: none !important;
+  left: 0 !important;
+}
 
 #vue-devtools-anchor .vue-devtools-icon-button {
   border: none;