feat(eyedropper): add error boundary (#110)

Author: alexzhang1030

src/client/auto-imports.d.ts

@@ -5,9 +5,9 @@
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
-  const FRAME_STATE_STORAGE_KEY: typeof import('./composables/state')['FRAME_STATE_STORAGE_KEY']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
+  const checkIsSecurityContext: typeof import('./utils/index')['checkIsSecurityContext']
   const computed: typeof import('vue')['computed']
   const computedAsync: typeof import('@vueuse/core')['computedAsync']
   const computedEager: typeof import('@vueuse/core')['computedEager']
@@ -78,7 +78,6 @@ declare global {
   const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
   const onUnmounted: typeof import('vue')['onUnmounted']
   const onUpdated: typeof import('vue')['onUpdated']
-  const openInEditor: typeof import('./utils/index')['openInEditor']
   const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
   const pick: typeof import('./utils/index')['pick']
   const provide: typeof import('vue')['provide']
@@ -197,7 +196,6 @@ declare global {
   const useGamepad: typeof import('@vueuse/core')['useGamepad']
   const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
   const useGraphSettings: typeof import('./composables/graph')['useGraphSettings']
-  const useGroupedTabStore: typeof import('./composables/tabs')['useGroupedTabStore']
   const useGroupedTabs: typeof import('./composables/tabs')['useGroupedTabs']
   const useIdle: typeof import('@vueuse/core')['useIdle']
   const useImage: typeof import('@vueuse/core')['useImage']

src/client/pages/__eyedropper.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="tsx">
 import { useDevtoolsClient } from '../logic/client'
 
 const client = useDevtoolsClient()
@@ -16,7 +16,14 @@ function close() {
   router.replace(frameState.route.value)
 }
 
+const inSecurityContext = checkIsSecurityContext()
+// @ts-expect-error missing types
+const supportEyeDropper = !!window.EyeDropper
+const isSupported = inSecurityContext && supportEyeDropper
+
 async function open() {
+  if (!isSupported)
+    return
   // @ts-expect-error missing types?
   const eyeDropper = new EyeDropper()
   return eyeDropper.open()
@@ -34,25 +41,46 @@ onMounted(() => {
     color.value = res.sRGBHex
   })
 })
+
+function ErrorBoundary() {
+  let content: JSX.Element = <div></div>
+  if (!inSecurityContext) {
+    content = <p>
+    EyeDropper is not available due to <a class="text-primary transition-colors hover:text-primary/80" href="https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts" target='_blank'>secure context</a> restrict.
+    </p>
+  }
+  else if (!supportEyeDropper) {
+    content = <p>
+      Your browser doesn't support&nbsp;
+       <a class="text-primary transition-colors hover:text-primary/80" href="https://developer.mozilla.org/en-US/docs/Web/API/EyeDropper#browser_compatibility" target='_blank'>EyeDropper</a>.
+    </p>
+  }
+  return <div class="flex items-center justify-center text-12px">
+    { content }
+  </div>
+}
 </script>
 
 <template>
   <VPanelGrids h-screen w-screen px5>
     <div absolute right-0 top-0 p2>
       <button carbon-close ma text-xl op50 hover:op100 @click="close" />
     </div>
-    <div v-if="!color">
-      Launching EyeDropper
-    </div>
-    <div v-else flex items-center>
-      <span flex items-center>
-        <em mr-2 inline-block h-5 w-5 border border-base rounded :style="{ backgroundColor: color }" />
-        :
-        {{ color }}
-      </span>
-      <span ml-2 flex cursor-pointer items-center border border-base rounded-10 p-2 hover="bg-active" @click="restart">
-        <i class="i-mdi:eyedropper" text-3 />
-      </span>
+    <div v-if="isSupported">
+      <div v-if="!color">
+        Launching EyeDropper
+      </div>
+      <div v-else flex items-center>
+        <span flex items-center>
+          <em mr-2 inline-block h-5 w-5 border border-base rounded :style="{ backgroundColor: color }" />
+          :
+          {{ color }}
+        </span>
+        <span ml-2 flex cursor-pointer items-center border border-base rounded-10 p-2 hover="bg-active" @click="restart">
+          <i class="i-mdi:eyedropper" text-3 />
+        </span>
+      </div>
     </div>
+    <ErrorBoundary v-else />
   </VPanelGrids>
 </template>

src/client/utils/index.ts

@@ -60,5 +60,10 @@ export function isMacOS() {
     : /Macintosh/.test(navigator.userAgent)
 }
 
+// https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts
+export function checkIsSecurityContext() {
+  return !!window.isSecureContext
+}
+
 // eslint-disable-next-line no-sequences
 export const pick = <T extends object, K extends keyof T>(obj: T, keys: K[]): T => keys.reduce((pre: T, cur: K) => (cur in obj && (pre[cur] = obj[cur]), pre), <T>({}))