feat: respect preferred-reduce-motion (#744)

Author: alexzhang1030

packages/client/src/App.vue

@@ -30,6 +30,7 @@ onRpcConnected(() => {
       minimizePanelInteractive: devtoolsClientState.value.minimizePanelInteractive,
       closeOnOutsideClick: devtoolsClientState.value.interactionCloseOnOutsideClick,
       showFloatingPanel: devtoolsClientState.value.showPanel,
+      reduceMotion: devtoolsClientState.value.reduceMotion,
     })
   })
 })
@@ -125,6 +126,11 @@ function toggleDevToolsClientVisible(params: { visible: boolean, host: string })
     [host]: visible,
   })
 }
+
+watchEffect(() => {
+  const html = document.documentElement
+  html.classList.toggle('reduce-motion', devtoolsClientState.value.reduceMotion)
+})
 </script>
 
 <template>

packages/client/src/assets/styles/main.css

@@ -8,6 +8,12 @@ html {
   scrollbar-width: none; /* Firefox */
 }
 
+html.reduce-motion,
+html.reduce-motion * {
+  transition: none !important;
+  animation: none !important;
+}
+
 html.dark {
   color-scheme: dark;
 }

packages/client/src/components/common/DockingPanel.vue

@@ -13,6 +13,7 @@ const splitScreenEnabled = computed({
   get: () => devtoolsClientState.value.splitScreen.enabled,
   set: v => (devtoolsClientState.value.splitScreen.enabled = v),
 })
+const reduceMotion = computed(() => devtoolsClientState.value.reduceMotion)
 
 function refreshPage() {
   location.reload()
@@ -46,7 +47,7 @@ function toggleApp(id: string) {
 <template>
   <div>
     <div px3 py2 border="b base" flex="~ gap-2">
-      <VueDarkToggle>
+      <VueDarkToggle :animation="!reduceMotion">
         <template #default="{ isDark, toggle }">
           <VueButton outlined type="primary" @click="toggle">
             <div i-carbon-sun dark:i-carbon-moon translate-y--1px /> {{ isDark ? 'Dark' : 'Light' }}

packages/client/src/composables/state.ts

@@ -18,6 +18,7 @@ interface DevtoolsClientState {
   interactionCloseOnOutsideClick: boolean
   showPanel: boolean
   minimizePanelInteractive: number
+  reduceMotion: boolean
 }
 
 function clientStateFactory(): DevtoolsClientState {
@@ -45,6 +46,7 @@ function clientStateFactory(): DevtoolsClientState {
     interactionCloseOnOutsideClick: false,
     showPanel: true,
     minimizePanelInteractive: 5000,
+    reduceMotion: false,
   }
 }
 
@@ -66,3 +68,9 @@ watch(() => devtoolsClientState.value.splitScreen.enabled, (enabled, o) => {
   }
 })
 // #endregion
+
+const preferredMotion = usePreferredReducedMotion()
+
+watch(preferredMotion, (value) => {
+  devtoolsClientState.value.reduceMotion = value === 'reduce'
+}, { immediate: true })

packages/client/src/pages/graph.vue

@@ -20,6 +20,7 @@ onViteRpcConnected(() => {
 
 const container = ref<HTMLDivElement>()
 const networkRef = shallowRef<Network>()
+const showStabilizingModal = ref(false)
 
 function mountNetwork() {
   const node = container.value!
@@ -35,6 +36,14 @@ function mountNetwork() {
     toggleGraphDrawer(true)
   })
 
+  network.on('startStabilizing', () => {
+    if (devtoolsClientState.value.reduceMotion)
+      showStabilizingModal.value = true
+  })
+  network.on('stabilized', () => {
+    showStabilizingModal.value = false
+  })
+
   network.on('deselectNode', () => {
     toggleGraphDrawer(false)
   })
@@ -61,8 +70,15 @@ const navbarRef = ref<HTMLElement>()
 <template>
   <div flex="~ col" relative h-full of-hidden panel-grids class="graph-body">
     <GraphNavbar ref="navbarRef" />
-    <div ref="container" class="absolute h-full w-full" />
-    <GraphFileType />
-    <GraphDrawer :top="navbarRef" />
+    <div class="relative flex-1">
+      <div ref="container" class="absolute inset-0" />
+      <div v-if="showStabilizingModal" class="absolute inset-0 flex select-none items-center justify-center bg-base text-base">
+        <div class="flex items-center space-x-2">
+          <span>Stabilizing...</span>
+        </div>
+      </div>
+      <GraphFileType />
+      <GraphDrawer :top="navbarRef" />
+    </div>
   </div>
 </template>

packages/client/src/pages/settings.vue

@@ -16,7 +16,7 @@ const hostEnv = useHostEnv()
  */
 const enableFeatureSettings = hostEnv === 'iframe' || hostEnv === 'separate-window'
 
-const { scale, interactionCloseOnOutsideClick, showPanel, minimizePanelInteractive, expandSidebar, scrollableSidebar } = toRefs(toReactive(devtoolsClientState))
+const { scale, interactionCloseOnOutsideClick, showPanel, minimizePanelInteractive, expandSidebar, scrollableSidebar, reduceMotion } = toRefs(toReactive(devtoolsClientState))
 
 // #region settings
 const scaleOptions = [
@@ -163,7 +163,7 @@ const minimizePanelInteractiveLabel = computed(() => {
         </h3>
         <VueCard p4 flex="~ col gap-2">
           <div flex="~ gap2">
-            <VueDarkToggle v-slot="{ isDark, toggle }">
+            <VueDarkToggle v-slot="{ isDark, toggle }" :animation="!reduceMotion">
               <VueButton outlined type="primary" @click="toggle">
                 <div i-carbon-sun dark:i-carbon-moon translate-y--1px /> {{ isDark ? 'Dark' : 'Light' }}
               </VueButton>

packages/overlay/src/App.vue

@@ -103,6 +103,7 @@ const { iframe, getIframe } = useIframe(clientUrl, async () => {
       'vue-devtools__anchor--vertical': isVertical,
       'vue-devtools__anchor--hide': isHidden,
       'fullscreen': panelState.viewMode === 'fullscreen',
+      'reduce-motion': state.reduceMotion,
     }" @mousemove="bringUp"
   >
     <div
@@ -162,6 +163,15 @@ const { iframe, getIframe } = useIframe(clientUrl, async () => {
     transform-origin: center center;
     transform: translate(-50%, -50%) rotate(0);
 
+    &.reduce-motion {
+      transition: none !important;
+      animation: none !important;
+      * {
+        transition: none !important;
+        animation: none !important;
+      }
+    }
+
     &.fullscreen {
       transform: none !important;
       left: 0 !important;

packages/overlay/src/components/FrameBox.vue

@@ -32,6 +32,7 @@ onRpcSeverReady(() => {
         minimizePanelInactive: v.minimizePanelInteractive,
         closeOnOutsideClick: v.closeOnOutsideClick,
         preferShowFloatingPanel: v.showFloatingPanel,
+        reduceMotion: v.reduceMotion,
       })
     }
   })

packages/overlay/src/composables/state.ts

@@ -14,6 +14,7 @@ interface DevToolsFrameState {
   closeOnOutsideClick: boolean
   minimizePanelInactive: number
   preferShowFloatingPanel: boolean
+  reduceMotion: boolean
 }
 
 export interface UseFrameStateReturn {
@@ -33,6 +34,7 @@ const state = useLocalStorage<DevToolsFrameState>('__vue-devtools-frame-state__'
   closeOnOutsideClick: false,
   minimizePanelInactive: 5000,
   preferShowFloatingPanel: true,
+  reduceMotion: false,
 })
 
 export function useFrameState(): UseFrameStateReturn {