feat(client): only show feature settings on iframe/seperate-window (#461

)
vuejs · Jun 21, 2024 · 7ac0a13 · 7ac0a13
1 parent 9bf2ac5
commit 7ac0a13
Showing 1 changed file with 29 additions and 21 deletions.
diff --git a/packages/client/src/pages/settings.vue b/packages/client/src/pages/settings.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { VueButton, VueCard, VueCheckbox, VueConfirm, VueDarkToggle, VueSelect, VueSwitch } from '@vue/devtools-ui'
-// import { isInChromePanel } from '@vue/devtools-shared'
 
 // #region view mode
 // const viewMode = inject<Ref<'overlay' | 'panel'>>('viewMode', ref('overlay'))
@@ -10,6 +9,13 @@ import { VueButton, VueCard, VueCheckbox, VueConfirm, VueDarkToggle, VueSelect,
 
 const { categorizedTabs: categories } = useAllTabs()
 
+const hostEnv = useHostEnv()
+
+/**
+ * Enable feature settings in separate window because someone is using it, related #458
+ */
+const enableFeatureSettings = hostEnv === 'iframe' || hostEnv === 'separate-window'
+
 const { scale, interactionCloseOnOutsideClick, showPanel, minimizePanelInteractive, expandSidebar, scrollableSidebar } = toRefs(toReactive(devtoolsClientState))
 
 // #region settings
@@ -184,26 +190,28 @@ const minimizePanelInteractiveLabel = computed(() => {
  </div>
  </VueCard>
 
- <h3 mt2 text-lg>
- Features
- </h3>
- <VueCard p4 flex="~ col gap-2">
- <div class="flex items-center gap2 text-sm">
- <VueCheckbox v-model="interactionCloseOnOutsideClick" />
- <span op75>Close DevTools when clicking outside</span>
- </div>
- <div class="flex items-center gap2 text-sm">
- <VueCheckbox v-model="showPanel" />
- <span op75>Always show the floating panel</span>
- </div>
-
- <div mx--2 my1 h-1px border="b base" op75 />
-
- <p>Minimize floating panel on inactive</p>
- <div>
- <VueSelect v-model="minimizePanelInteractive" :button-props="{ outlined: true }" :options="minimizePanelInteractiveOptions" :placeholder="minimizePanelInteractiveLabel" />
- </div>
- </VueCard>
+ <template v-if="enableFeatureSettings">
+ <h3 mt2 text-lg>
+ Features
+ </h3>
+ <VueCard p4 flex="~ col gap-2">
+ <div class="flex items-center gap2 text-sm">
+ <VueCheckbox v-model="interactionCloseOnOutsideClick" />
+ <span op75>Close DevTools when clicking outside</span>
+ </div>
+ <div class="flex items-center gap2 text-sm">
+ <VueCheckbox v-model="showPanel" />
+ <span op75>Always show the floating panel</span>
+ </div>
+
+ <div mx--2 my1 h-1px border="b base" op75 />
+
+ <p>Minimize floating panel on inactive</p>
+ <div>
+ <VueSelect v-model="minimizePanelInteractive" :button-props="{ outlined: true }" :options="minimizePanelInteractiveOptions" :placeholder="minimizePanelInteractiveLabel" />
+ </div>
+ </VueCard>
+ </template>
 
  <h3 mt2 text-lg>
  Debug