feat(devtools): toggle the display of devtools while inspecting React…

… elements (#5303)
web-infra-dev · Jan 24, 2024 · 2d3971d · 2d3971d
1 parent 97cbdec
commit 2d3971d
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 25 deletions.
diff --git a/packages/devtools/client/src/components/Devtools/Button.module.scss b/packages/devtools/client/src/components/Devtools/Button.module.scss
@@ -8,15 +8,17 @@
   justify-content: center;
   align-items: center;
   transition: opacity 200ms;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
 
-  &[data-loading='true'] {
+  &:disabled {
     cursor: wait;
-    pointer-events: none;
   }
 
   &[data-type='default'] {
     opacity: 0.4;
-    &:hover {
+    &:not(:disabled):hover {
       opacity: 1;
     }
   }

diff --git a/packages/devtools/client/src/components/Devtools/Button.tsx b/packages/devtools/client/src/components/Devtools/Button.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { useAsyncFn } from 'react-use';
 import { Promisable } from 'type-fest';
-import { Box } from '@radix-ui/themes';
 import styles from './Button.module.scss';
 
 export interface DevtoolsCapsuleButtonProps extends React.PropsWithChildren {
@@ -18,13 +17,13 @@ export const DevtoolsCapsuleButton: React.FC<
   );
 
   return (
-    <Box
+    <button
       className={styles.container}
       onClick={handleClick}
       data-type={props.type ?? 'default'}
-      data-loading={clickState.loading}
+      disabled={clickState.loading}
     >
       {props.children}
-    </Box>
+    </button>
   );
 };
diff --git a/packages/devtools/client/src/components/Devtools/Capsule.module.scss b/packages/devtools/client/src/components/Devtools/Capsule.module.scss
@@ -30,6 +30,7 @@
   padding: 0 var(--space-1);
   transition: box-shadow 400ms;
   user-select: none;
+  animation: slideInFromRight 400ms ease-out forwards;
 
   &:hover {
     box-shadow: var(--shadow-5), 0 0 20px var(--gray-a7);
@@ -47,3 +48,13 @@
   background-size: contain;
 }
 
+@keyframes slideInFromRight {
+  0% {
+    opacity: 0;
+    transform: translateX(50%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
diff --git a/packages/devtools/client/src/components/Devtools/Capsule.tsx b/packages/devtools/client/src/components/Devtools/Capsule.tsx
@@ -1,6 +1,6 @@
 import { SetupClientParams } from '@modern-js/devtools-kit';
 import { Flex, Theme } from '@radix-ui/themes';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useEvent, useToggle } from 'react-use';
 import { HiMiniCursorArrowRipple } from 'react-icons/hi2';
 import { withQuery } from 'ufo';
@@ -9,8 +9,9 @@ import styles from './Capsule.module.scss';
 import { FrameBox } from './FrameBox';
 import { DevtoolsCapsuleButton } from './Button';
 import { useStickyDraggable } from '@/utils/draggable';
-import { $client } from '@/entries/mount/state';
+import { $client, bridge, wallAgent } from '@/entries/mount/state';
 import { pTimeout } from '@/utils/promise';
+import { ReactDevtoolsWallListener } from '@/utils/react-devtools';
 
 export const DevtoolsCapsule: React.FC<SetupClientParams> = props => {
   const logoSrc = props.def.assets.logo;
@@ -37,12 +38,37 @@ export const DevtoolsCapsule: React.FC<SetupClientParams> = props => {
     e.shiftKey && e.altKey && e.code === 'KeyD' && toggleDevtools();
   });
 
+  useEffect(() => {
+    const handleStartInspecting = () => {
+      toggleDevtools(false);
+      document.documentElement.style.setProperty('cursor', 'cell');
+    };
+    bridge.addListener('startInspectingNative', handleStartInspecting);
+
+    const handleBeforeWallSend: ReactDevtoolsWallListener = e => {
+      if (e.event !== 'stopInspectingNative') return;
+      toggleDevtools(true);
+      document.documentElement.style.removeProperty('cursor');
+    };
+    wallAgent.hook('send', handleBeforeWallSend);
+
+    return () => {
+      bridge.removeListener('startInspectingNative', handleStartInspecting);
+      wallAgent.removeHook('send', handleBeforeWallSend);
+    };
+  }, []);
+
   const handleClickInspect = async () => {
+    document.documentElement.style.setProperty('cursor', 'wait');
     toggleDevtools(false);
     setLoadDevtools(true);
-    const client = await pTimeout($client, 10_000).catch(() => null);
-    if (!client) return;
-    client.remote.pullUpReactInspector();
+    try {
+      const client = await pTimeout($client, 10_000);
+      client.remote.pullUpReactInspector();
+    } catch (e) {
+      console.error(e);
+      document.documentElement.style.removeProperty('cursor');
+    }
   };
 
   return (
@@ -56,15 +82,13 @@ export const DevtoolsCapsule: React.FC<SetupClientParams> = props => {
           />
         </div>
       </Visible>
-      <Flex asChild align="center">
-        <div className={styles.fab} {...draggable.props}>
-          <DevtoolsCapsuleButton type="primary" onClick={toggleDevtools}>
-            <img className={styles.logo} src={logoSrc}></img>
-          </DevtoolsCapsuleButton>
-          <DevtoolsCapsuleButton onClick={handleClickInspect}>
-            <HiMiniCursorArrowRipple />
-          </DevtoolsCapsuleButton>
-        </div>
+      <Flex className={styles.fab} {...draggable.props} align="center">
+        <DevtoolsCapsuleButton type="primary" onClick={toggleDevtools}>
+          <img className={styles.logo} src={logoSrc}></img>
+        </DevtoolsCapsuleButton>
+        <DevtoolsCapsuleButton onClick={handleClickInspect}>
+          <HiMiniCursorArrowRipple />
+        </DevtoolsCapsuleButton>
       </Flex>
     </Theme>
   );

diff --git a/packages/devtools/client/src/utils/promise.ts b/packages/devtools/client/src/utils/promise.ts
@@ -3,6 +3,7 @@ export const pTimeout = <T>(promise: Promise<T>, timeout: number) =>
     let active = true;
     const timer = setTimeout(() => {
       active = false;
+      reject(new Error('Promise Timeout'));
     }, timeout);
     promise.then(res => {
       active && resolve(res);

diff --git a/packages/devtools/client/src/utils/react-devtools.ts b/packages/devtools/client/src/utils/react-devtools.ts
@@ -8,11 +8,14 @@ export interface ReactDevtoolsWallEvent {
   transferable?: any[] | undefined;
 }
 
-export type ReactDevtoolsWallListener = (event: ReactDevtoolsWallEvent) => void;
+export type ReactDevtoolsWallListener = (
+  event: ReactDevtoolsWallEvent,
+  ...rest: unknown[]
+) => void;
 
 export type WallAgentHooks = Record<
   'send' | 'receive',
-  (...args: any[]) => void
+  ReactDevtoolsWallListener
 >;
 
 export type BirpcReturnLike = Record<string, (...args: any[]) => void> & {
@@ -36,8 +39,11 @@ export class WallAgent extends Hookable<WallAgentHooks> implements Wall {
 
   bindRemote(remote: BirpcReturn<object, object>, methodName: string) {
     const _remote = remote as any;
-    _remote.$functions[methodName] = (...args: any[]) => {
-      this.callHook('receive', ...args);
+    _remote.$functions[methodName] = (
+      event: ReactDevtoolsWallEvent,
+      ...rest: unknown[]
+    ) => {
+      this.callHook('receive', event, ...rest);
     };
     this.hook('send', (...args) => {
       _remote[methodName](...args);