From 7ac0a1346c36f6cd85a6840f2527b839e261ba1c Mon Sep 17 00:00:00 2001
From: Alex <49969959+alexzhang1030@users.noreply.github.com>
Date: Fri, 21 Jun 2024 12:36:54 +0800
Subject: [PATCH] feat(client): only show feature settings on
 iframe/seperate-window (#461)

---
 packages/client/src/pages/settings.vue | 50 +++++++++++++++-----------
 1 file changed, 29 insertions(+), 21 deletions(-)

diff --git a/packages/client/src/pages/settings.vue b/packages/client/src/pages/settings.vue
index 10315816..5f98d1a5 100644
--- 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