feat: adjust settings

Author: antfu

packages/core/src/client/webcomponents/.generated/css.ts

@@ -5,7 +5,7 @@ import { DEFAULT_STATE_USER_SETTINGS } from '@vitejs/devtools-kit/constants'
 import { computed } from 'vue'
 import { docksGroupByCategories } from '../state/dock-settings'
 import { sharedStateToRef } from '../state/docks'
-import { isDockPopupSupported, requestDockPopupOpen } from '../state/popup'
+import { isDockPopupSupported, requestDockPopupOpen, useIsDockPopupOpen } from '../state/popup'
 import DockIcon from './DockIcon.vue'
 
 const props = defineProps<{
@@ -17,6 +17,7 @@ const settingsStore = props.context.docks.settings
 const settings = sharedStateToRef(settingsStore)
 const panelStore = props.context.panel.store
 const isEmbedded = props.context.clientType === 'embedded'
+const isDockPopupOpen = useIsDockPopupOpen()
 
 const dockModeOptions = computed(() => {
   const options = [
@@ -173,7 +174,7 @@ function resetSettings() {
 
           <div class="flex flex-col gap-4">
             <!-- Dock mode -->
-            <div v-if="isEmbedded" class="flex flex-col gap-2">
+            <div v-if="isEmbedded && !isDockPopupOpen" class="flex flex-col gap-2">
               <div class="flex flex-col">
                 <span class="text-sm">Dock mode</span>
                 <span class="text-xs op50">How the DevTools panel is displayed</span>

packages/core/src/client/webcomponents/components/ViewBuiltinSettings.vue

@@ -16,7 +16,7 @@ const props = defineProps<{
 const settings = sharedStateToRef(props.context.docks.settings)
 const showAddressBar = computed(() => settings.value.showIframeAddressBar ?? true)
 const isEdgeMode = computed(() => props.context.panel.store.mode === 'edge')
-const ADDRESS_BAR_HEIGHT = 50
+const ADDRESS_BAR_HEIGHT = 40
 
 const isLoading = ref(true)
 const isIframeLoading = ref(false)
@@ -226,7 +226,7 @@ onUnmounted(() => {
   <div class="w-full h-full flex flex-col">
     <div
       v-if="showAddressBar"
-      class="flex-none px-2 w-full flex items-center gap-1 bg-gray/5"
+      class="flex-none px-2 w-full flex items-center gap-1"
       :class="isEdgeMode ? 'border-b border-base' : 'border rounded-t-md border-base border-b-0'"
       :style="{ height: `${ADDRESS_BAR_HEIGHT}px` }"
     >
@@ -238,7 +238,7 @@ onUnmounted(() => {
           title="Back"
           @click="goBack"
         >
-          <div class="i-ph-caret-left text-base op60" />
+          <div class="i-ph-caret-left op60 w-4.5 h-4.5" />
         </button>
 
         <!-- Refresh button -->
@@ -247,22 +247,22 @@ onUnmounted(() => {
           title="Refresh"
           @click="refresh"
         >
-          <div class="i-ph-arrow-clockwise text-base op60" />
+          <div class="i-ph-arrow-clockwise op60 w-4.5 h-4.5" />
         </button>
       </template>
 
       <!-- Cross-origin badge -->
       <div
         v-else
-        class="flex items-center gap-1 px-2 py-1 rounded text-xs bg-amber/10 text-amber border border-amber/20 shrink-0"
+        class="flex items-center gap-1 px2 py1 rounded text-xs bg-amber/10 text-amber border border-amber/20 shrink-0"
         title="Cross-origin iframe - navigation controls unavailable"
       >
         <div class="i-ph-globe text-sm" />
         <span>Cross-Origin</span>
       </div>
 
       <!-- URL input -->
-      <div class="flex-1 flex items-center h-8 px-2.5 rounded bg-gray/10 border border-transparent hover:border-gray/20 focus-within:border-gray/30 transition-colors">
+      <div class="flex-1 flex items-center h-7 px-2.5 rounded bg-gray/5 border border-transparent hover:border-gray/10 focus-within:border-gray/15 transition-colors">
         <input
           ref="urlInput"
           :value="isEditing ? editingUrl : displayUrl"