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

Author: alexzhang1030

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