fix: highlight nodes relatively to their containers (#41817)

Summary:
Pull Request resolved: #41817

Changelog: [Internal]

TSIA

Reviewed By: sammy-SC

Differential Revision: D51713088

fbshipit-source-id: b0019a13b0b3ce616ed034a8d97e9e6706ef3268

packages/react-native/Libraries/Debugging/DebuggingOverlayRegistry.js

@@ -189,9 +189,22 @@ class DebuggingOverlayRegistry {
       }
 
       const {x, y, width, height} = instance.getBoundingClientRect();
+
+      const rootViewInstance = parent.rootViewRef.current;
+      if (rootViewInstance == null) {
+        continue;
+      }
+
+      const {x: parentX, y: parentY} =
+        // $FlowFixMe[prop-missing] React Native View is not a descendant of ReactNativeElement yet. We should be able to remove it once Paper is no longer supported.
+        rootViewInstance.getBoundingClientRect();
+
+      // DebuggingOverlay will scale to the same size as a Root view. Substract Root view position from the element position
+      // to calculate the element's position relatively to its parent DebuggingOverlay.
+      // We can't call `getBoundingClientRect` on the debuggingOverlayRef, because its a ref for the native component, which doesn't have it, hopefully yet.
       traceUpdatesForParent.push({
         id,
-        rectangle: {x, y, width, height},
+        rectangle: {x: x - parentX, y: y - parentY, width, height},
         color: processColor(color),
       });
     }
@@ -274,9 +287,22 @@ class DebuggingOverlayRegistry {
 
     const parent =
       this.#findLowestParentFromRegistryForInstance(publicInstance);
+
     if (parent) {
+      const rootViewInstance = parent.rootViewRef.current;
+      if (rootViewInstance == null) {
+        return;
+      }
+
+      const {x: parentX, y: parentY} =
+        // $FlowFixMe[prop-missing] React Native View is not a descendant of ReactNativeElement yet. We should be able to remove it once Paper is no longer supported.
+        rootViewInstance.getBoundingClientRect();
+
+      // DebuggingOverlay will scale to the same size as a Root view. Substract Root view position from the element position
+      // to calculate the element's position relatively to its parent DebuggingOverlay.
+      // We can't call `getBoundingClientRect` on the debuggingOverlayRef, because its a ref for the native component, which doesn't have it, hopefully yet.
       parent.debuggingOverlayRef.current?.highlightElements([
-        {x, y, width, height},
+        {x: x - parentX, y: y - parentY, width, height},
       ]);
     }
   }