fix

Author: MrWangJustToDo

chrome/public/bundle/detector.js

@@ -2376,6 +2376,8 @@
     		        var fiber = getFiberNodeById(id);
     		        if (!fiber)
     		            return;
+    		        if (id === this._selectId)
+    		            return;
     		        var domArray = getElementNodesFromFiber(fiber);
     		        this._selectId = id;
     		        this._selectDom = domArray[0];

chrome/public/bundle/hook.js

@@ -2378,6 +2378,8 @@
     		        var fiber = getFiberNodeById(id);
     		        if (!fiber)
     		            return;
+    		        if (id === this._selectId)
+    		            return;
     		        var domArray = getElementNodesFromFiber(fiber);
     		        this._selectId = id;
     		        this._selectDom = domArray[0];

chrome/public/bundle/panel.js

@@ -2447,6 +2447,8 @@
     		        var fiber = getFiberNodeById(id);
     		        if (!fiber)
     		            return;
+    		        if (id === this._selectId)
+    		            return;
     		        var domArray = getElementNodesFromFiber(fiber);
     		        this._selectId = id;
     		        this._selectDom = domArray[0];

chrome/public/bundle/proxy.js

@@ -2376,6 +2376,8 @@
     		        var fiber = getFiberNodeById(id);
     		        if (!fiber)
     		            return;
+    		        if (id === this._selectId)
+    		            return;
     		        var domArray = getElementNodesFromFiber(fiber);
     		        this._selectId = id;
     		        this._selectDom = domArray[0];

chrome/public/bundle/service-worker.js

@@ -2376,6 +2376,8 @@
     		        var fiber = getFiberNodeById(id);
     		        if (!fiber)
     		            return;
+    		        if (id === this._selectId)
+    		            return;
     		        var domArray = getElementNodesFromFiber(fiber);
     		        this._selectId = id;
     		        this._selectDom = domArray[0];

chrome/src/components/NameView.tsx

@@ -22,34 +22,36 @@ export const NameView = () => {
 
   const sizeClass = size === "sm" ? "text-[15px]" : size === "md" ? "text-[16px]" : "text-[17px]";
 
+  const sizeNum = size === "sm" ? 11 : size === "md" ? 12 : 13;
+
   if (currentSelectDetail) {
     return (
       <div className={`p-2 ${sizeClass} sticky top-0 bg-content1 transition-transform-background z-50`}>
         <TreeItem node={currentSelectDetail} withCollapse={false} withSelect={false} withKey={false} />
         <ButtonGroup className="absolute right-4 top-0">
           <Tooltip content="force scroll to select" showArrow color="foreground" placement="bottom-end">
             <Button isIconOnly size="sm" variant="flat" onPress={scrollIntoView}>
-              <Crosshair1Icon width="11" height="11" />
+              <Crosshair1Icon width={sizeNum} height={sizeNum} />
             </Button>
           </Tooltip>
           <Tooltip content="store fiber node" showArrow color="foreground" placement="bottom-end">
             <Button isIconOnly size="sm" variant="flat" onPress={storeFiber}>
-              <CubeIcon width="11" height="11" />
+              <CubeIcon width={sizeNum} height={sizeNum} />
             </Button>
           </Tooltip>
           <Tooltip content="force trigger" showArrow color="foreground" placement="bottom-end">
             <Button isIconOnly size="sm" variant="flat" onPress={triggerFiber}>
-              <PlayIcon width="11" height="11" />
+              <PlayIcon width={sizeNum} height={sizeNum} />
             </Button>
           </Tooltip>
           <Tooltip content="inspect dom" showArrow color="foreground" placement="bottom-end">
             <Button isIconOnly size="sm" variant="flat" onPress={inspectDom}>
-              <EyeOpenIcon width="11" height="11" />
+              <EyeOpenIcon width={sizeNum} height={sizeNum} />
             </Button>
           </Tooltip>
           <Tooltip content="force reload" showArrow color="foreground" placement="bottom-end">
             <Button isIconOnly size="sm" variant="flat" onPress={forceReload}>
-              <ReloadIcon width="10" height="10" />
+              <ReloadIcon width={sizeNum - 1} height={sizeNum - 1} />
             </Button>
           </Tooltip>
         </ButtonGroup>

chrome/src/components/TreeView.tsx

@@ -68,6 +68,8 @@ const TreeViewImpl = memo(({ onScroll, data, onMount }: { onScroll: () => void;
     );
   });
 
+  const hasLength = data.length > 0;
+
   useEffect(() => {
     const cb = useTreeNode.subscribe(
       (s) => s.scroll,
@@ -81,9 +83,7 @@ const TreeViewImpl = memo(({ onScroll, data, onMount }: { onScroll: () => void;
     );
 
     return cb;
-  }, []);
-
-  const hasLength = data.length > 0;
+  }, [hasLength]);
 
   useEffect(() => {
     if (hasLength) {

chrome/src/utils/render.ts

@@ -37,6 +37,14 @@ export const onRender = (data: DevToolMessageType) => {
 
       setRender(detector);
     });
+
+    chrome.devtools?.inspectedWindow?.eval?.(`(() => {
+      if (window['$$$$0'] !== $0) {
+        window.__MY_REACT_DEVTOOL_INTERNAL__?.setSelectDom?.($0);
+        window.__MY_REACT_DEVTOOL_INTERNAL__?.notifySelectSync?.();
+        window['$$$$0'] = $0;
+      }
+    })()`);
   }
 
   if (data.type === DevToolMessageEnum.dir) {
@@ -78,11 +86,11 @@ export const onRender = (data: DevToolMessageType) => {
     });
   }
 
-  if (data.type === DevToolMessageEnum['select-sync']) {
+  if (data.type === DevToolMessageEnum["select-sync"]) {
     safeAction(() => {
       useTreeNode.getActions().setSelect(data.data as string);
       useTreeNode.getActions().scrollIntoView();
-    })
+    });
   }
 
   if (data.type === DevToolMessageEnum.hmr) {

packages/core/src/instance.ts

@@ -467,6 +467,8 @@ export class DevToolCore {
 
     if (!fiber) return;
 
+    if (id === this._selectId) return;
+
     const domArray = getElementNodesFromFiber(fiber);
 
     this._selectId = id;