refactor[DebuggingRegistry]: highlight nodes only on the lowest container for legacy implementations

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

@@ -0,0 +1,114 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ */
+
+import type {
+  ElementRectangle,
+  TraceUpdate,
+} from './DebuggingOverlayNativeComponent';
+
+import View from '../Components/View/View';
+import UIManager from '../ReactNative/UIManager';
+import StyleSheet from '../StyleSheet/StyleSheet';
+import DebuggingOverlayNativeComponent, {
+  Commands,
+} from './DebuggingOverlayNativeComponent';
+import * as React from 'react';
+
+const {useRef, useImperativeHandle} = React;
+const isNativeComponentReady =
+  UIManager.hasViewManagerConfig('DebuggingOverlay');
+
+type DebuggingOverlayHandle = {
+  highlightTraceUpdates(updates: TraceUpdate[]): void,
+  highlightElements(elements: ElementRectangle[]): void,
+  clearElementsHighlight(): void,
+};
+
+function DebuggingOverlay(
+  _props: {},
+  ref: React.RefSetter<DebuggingOverlayHandle>,
+): React.Node {
+  useImperativeHandle(
+    ref,
+    () => ({
+      highlightTraceUpdates(updates) {
+        if (!isNativeComponentReady) {
+          return;
+        }
+
+        const nonEmptyRectangles = updates.filter(
+          ({rectangle, color}) => rectangle.width >= 0 && rectangle.height >= 0,
+        );
+
+        if (nativeComponentRef.current != null) {
+          Commands.highlightTraceUpdates(
+            nativeComponentRef.current,
+            JSON.stringify(nonEmptyRectangles),
+          );
+        }
+      },
+      highlightElements(elements) {
+        if (!isNativeComponentReady) {
+          return;
+        }
+
+        if (nativeComponentRef.current != null) {
+          Commands.highlightElements(
+            nativeComponentRef.current,
+            JSON.stringify(elements),
+          );
+        }
+      },
+      clearElementsHighlight() {
+        if (!isNativeComponentReady) {
+          return;
+        }
+
+        if (nativeComponentRef.current != null) {
+          Commands.clearElementsHighlights(nativeComponentRef.current);
+        }
+      },
+    }),
+    [],
+  );
+
+  const nativeComponentRef = useRef<React.ElementRef<
+    typeof DebuggingOverlayNativeComponent,
+  > | null>(null);
+
+  return (
+    isNativeComponentReady && (
+      <View pointerEvents="none" style={styles.overlay}>
+        <DebuggingOverlayNativeComponent
+          ref={nativeComponentRef}
+          style={styles.overlay}
+        />
+      </View>
+    )
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  },
+});
+
+const DebuggingOverlayWithForwardedRef: React.AbstractComponent<
+  {},
+  DebuggingOverlayHandle,
+  React.Node,
+> = React.forwardRef(DebuggingOverlay);
+
+export default DebuggingOverlayWithForwardedRef;

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

@@ -20,22 +20,43 @@ type NativeProps = $ReadOnly<{|
   ...ViewProps,
 |}>;
 export type DebuggingOverlayNativeComponentType = HostComponent<NativeProps>;
-export type Overlay = {
-  rect: {left: number, top: number, width: number, height: number},
+
+export type TraceUpdate = {
+  id: number,
+  rectangle: ElementRectangle,
   color: ?ProcessedColorValue,
 };
 
+export type ElementRectangle = {
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+};
+
 interface NativeCommands {
-  +draw: (
+  +highlightTraceUpdates: (
     viewRef: React.ElementRef<DebuggingOverlayNativeComponentType>,
     // TODO(T144046177): Ideally we can pass array of Overlay, but currently
     // Array type is not supported in RN codegen for building native commands.
-    overlays: string,
+    updates: string,
+  ) => void;
+  +highlightElements: (
+    viewRef: React.ElementRef<DebuggingOverlayNativeComponentType>,
+    // TODO(T144046177): Codegen doesn't support array type for native commands yet.
+    elements: string,
+  ) => void;
+  +clearElementsHighlights: (
+    viewRef: React.ElementRef<DebuggingOverlayNativeComponentType>,
   ) => void;
 }
 
 export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
-  supportedCommands: ['draw'],
+  supportedCommands: [
+    'highlightTraceUpdates',
+    'highlightElements',
+    'clearElementsHighlights',
+  ],
 });
 
 export default (codegenNativeComponent<NativeProps>(