From 78176e8ff15deb51b2066e9ee2692da3157dffbd Mon Sep 17 00:00:00 2001
From: Ruslan Lesiutin <hoxy@meta.com>
Date: Mon, 15 Jan 2024 14:11:00 -0800
Subject: [PATCH] fix: highlight nodes relatively to their containers (#41817)

Summary:
Pull Request resolved: https://github.com/facebook/react-native/pull/41817

Changelog: [Internal]

TSIA

Reviewed By: sammy-SC

Differential Revision: D51713088

fbshipit-source-id: b0019a13b0b3ce616ed034a8d97e9e6706ef3268
---
 .../Debugging/DebuggingOverlayRegistry.js     | 30 +++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/packages/react-native/Libraries/Debugging/DebuggingOverlayRegistry.js b/packages/react-native/Libraries/Debugging/DebuggingOverlayRegistry.js
index 6b27e2ef43051b..ecb061c00618fe 100644
--- a/packages/react-native/Libraries/Debugging/DebuggingOverlayRegistry.js
+++ b/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},
       ]);
     }
   }