[devtool] handle click outscope child element (#81296)

Improve the DX of close by clicking outside of the of the UI, if it's children it also shouldn't close it.
Since devtool is under the shadow dom, we need to attach the listeners onto `ownerDocument` rather than the `document` itself

### Diff

| After | Before |
|:--|:--|
| <video src="https://github.com/user-attachments/assets/617d79f8-f093-4c17-9588-633331a416bc"> | <video src="https://github.com/user-attachments/assets/94626f7e-6f2f-450a-aa73-f9cb5548820d"> |

<!-- https://github.com/user-attachments/assets/617d79f8-f093-4c17-9588-633331a416bc -->
<!-- https://github.com/user-attachments/assets/94626f7e-6f2f-450a-aa73-f9cb5548820d -->

Author: huozhi

packages/next/src/next-devtools/dev-overlay/components/errors/dev-tools-indicator/utils.ts

@@ -91,7 +91,14 @@ export function useClickOutside(
       return
     }
 
+    const ownerDocument = rootRef.current?.ownerDocument
+
     function handleClickOutside(event: MouseEvent) {
+      const target = event.target as HTMLElement
+      if (rootRef.current && rootRef.current.contains(target)) {
+        return
+      }
+
       if (
         !(rootRef.current?.getBoundingClientRect()
           ? event.clientX >= rootRef.current.getBoundingClientRect()!.left &&
@@ -117,12 +124,12 @@ export function useClickOutside(
       }
     }
 
-    document.addEventListener('mousedown', handleClickOutside)
-    document.addEventListener('keydown', handleKeyDown)
+    ownerDocument?.addEventListener('mousedown', handleClickOutside)
+    ownerDocument?.addEventListener('keydown', handleKeyDown)
 
     return () => {
-      document.removeEventListener('mousedown', handleClickOutside)
-      document.removeEventListener('keydown', handleKeyDown)
+      ownerDocument?.removeEventListener('mousedown', handleClickOutside)
+      ownerDocument?.removeEventListener('keydown', handleKeyDown)
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [active])