refactor: TraceUpdates native component -> DebuggingOverlay (#41562)

Ruslan Lesiutin · facebook-github-bot · commit fac4f356c7f1 · 2023-11-23T06:36:51.000-08:00
Summary:

Changelog: [Internal]

We will use this native component as a single layer for drawing debugging information: both for trace updates and inspected components from React DevTools.

Reviewed By: javache

Differential Revision: D51470789
diff --git a/packages/react-native/Libraries/Components/TraceUpdateOverlay/TraceUpdateOverlay.js b/packages/react-native/Libraries/Components/TraceUpdateOverlay/TraceUpdateOverlay.js
@@ -8,24 +8,24 @@
  * @format
  */
 
+import type {Overlay} from '../../Debugging/DebuggingOverlayNativeComponent';
 import type {
   InstanceFromReactDevTools,
   ReactDevToolsAgent,
 } from '../../Types/ReactDevToolsTypes';
-import type {Overlay} from './TraceUpdateOverlayNativeComponent';
 
+import DebuggingOverlayNativeComponent, {
+  Commands,
+} from '../../Debugging/DebuggingOverlayNativeComponent';
 import UIManager from '../../ReactNative/UIManager';
 import processColor from '../../StyleSheet/processColor';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import View from '../View/View';
-import TraceUpdateOverlayNativeComponent, {
-  Commands,
-} from './TraceUpdateOverlayNativeComponent';
 import * as React from 'react';
 
 const {useEffect, useRef, useState} = React;
 const isNativeComponentReady =
-  UIManager.hasViewManagerConfig('TraceUpdateOverlay');
+  UIManager.hasViewManagerConfig('DebuggingOverlay');
 
 type Props = {
   reactDevToolsAgent: ReactDevToolsAgent,
@@ -111,13 +111,13 @@ export default function TraceUpdateOverlay({
   }, [reactDevToolsAgent]);
 
   const nativeComponentRef =
-    useRef<?React.ElementRef<typeof TraceUpdateOverlayNativeComponent>>(null);
+    useRef<?React.ElementRef<typeof DebuggingOverlayNativeComponent>>(null);
 
   return (
     !overlayDisabled &&
     isNativeComponentReady && (
       <View pointerEvents="none" style={styles.overlay}>
-        <TraceUpdateOverlayNativeComponent
+        <DebuggingOverlayNativeComponent
           ref={nativeComponentRef}
           style={styles.overlay}
         />
diff --git a/packages/react-native/Libraries/Debugging/DebuggingOverlayNativeComponent.js b/packages/react-native/Libraries/Debugging/DebuggingOverlayNativeComponent.js
@@ -8,26 +8,26 @@
  * @format
  */
 
-import type {HostComponent} from '../../Renderer/shims/ReactNativeTypes';
-import type {ProcessedColorValue} from '../../StyleSheet/processColor';
-import type {ViewProps} from '../View/ViewPropTypes';
+import type {ViewProps} from '../Components/View/ViewPropTypes';
+import type {HostComponent} from '../Renderer/shims/ReactNativeTypes';
+import type {ProcessedColorValue} from '../StyleSheet/processColor';
 
-import codegenNativeCommands from '../../Utilities/codegenNativeCommands';
-import codegenNativeComponent from '../../Utilities/codegenNativeComponent';
+import codegenNativeCommands from '../Utilities/codegenNativeCommands';
+import codegenNativeComponent from '../Utilities/codegenNativeComponent';
 import * as React from 'react';
 
 type NativeProps = $ReadOnly<{|
   ...ViewProps,
 |}>;
-export type TraceUpdateOverlayNativeComponentType = HostComponent<NativeProps>;
+export type DebuggingOverlayNativeComponentType = HostComponent<NativeProps>;
 export type Overlay = {
   rect: {left: number, top: number, width: number, height: number},
   color: ?ProcessedColorValue,
 };
 
 interface NativeCommands {
   +draw: (
-    viewRef: React.ElementRef<TraceUpdateOverlayNativeComponentType>,
+    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,
@@ -39,5 +39,5 @@ export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
 });
 
 export default (codegenNativeComponent<NativeProps>(
-  'TraceUpdateOverlay',
+  'DebuggingOverlay',
 ): HostComponent<NativeProps>);
diff --git a/packages/react-native/React/Fabric/Mounting/ComponentViews/DebuggingOverlay/RCTDebuggingOverlayComponentView.h b/packages/react-native/React/Fabric/Mounting/ComponentViews/DebuggingOverlay/RCTDebuggingOverlayComponentView.h
@@ -11,6 +11,6 @@
 
 #import <react/renderer/components/rncore/RCTComponentViewHelpers.h>
 
-@interface RCTTraceUpdateOverlayComponentView : RCTViewComponentView <RCTTraceUpdateOverlayViewProtocol>
+@interface RCTDebuggingOverlayComponentView : RCTViewComponentView <RCTDebuggingOverlayViewProtocol>
 
 @end
diff --git a/packages/react-native/React/Fabric/Mounting/ComponentViews/DebuggingOverlay/RCTDebuggingOverlayComponentView.mm b/packages/react-native/React/Fabric/Mounting/ComponentViews/DebuggingOverlay/RCTDebuggingOverlayComponentView.mm
@@ -5,11 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-#import "RCTTraceUpdateOverlayComponentView.h"
+#import "RCTDebuggingOverlayComponentView.h"
 
+#import <React/RCTDebuggingOverlay.h>
 #import <React/RCTDefines.h>
 #import <React/RCTLog.h>
-#import <React/RCTTraceUpdateOverlay.h>
 
 #import <react/renderer/components/rncore/ComponentDescriptors.h>
 #import <react/renderer/components/rncore/EventEmitters.h>
@@ -20,17 +20,17 @@
 
 using namespace facebook::react;
 
-@implementation RCTTraceUpdateOverlayComponentView {
-  RCTTraceUpdateOverlay *_overlay;
+@implementation RCTDebuggingOverlayComponentView {
+  RCTDebuggingOverlay *_overlay;
 }
 
 - (instancetype)initWithFrame:(CGRect)frame
 {
   if (self = [super initWithFrame:frame]) {
-    static const auto defaultProps = std::make_shared<const TraceUpdateOverlayProps>();
+    static const auto defaultProps = std::make_shared<const DebuggingOverlayProps>();
     _props = defaultProps;
 
-    _overlay = [[RCTTraceUpdateOverlay alloc] initWithFrame:self.bounds];
+    _overlay = [[RCTDebuggingOverlay alloc] initWithFrame:self.bounds];
 
     self.contentView = _overlay;
   }
@@ -42,14 +42,14 @@ - (instancetype)initWithFrame:(CGRect)frame
 
 + (ComponentDescriptorProvider)componentDescriptorProvider
 {
-  return concreteComponentDescriptorProvider<TraceUpdateOverlayComponentDescriptor>();
+  return concreteComponentDescriptorProvider<DebuggingOverlayComponentDescriptor>();
 }
 
 #pragma mark - Native commands
 
 - (void)handleCommand:(const NSString *)commandName args:(const NSArray *)args
 {
-  RCTTraceUpdateOverlayHandleCommand(self, commandName, args);
+  RCTDebuggingOverlayHandleCommand(self, commandName, args);
 }
 
 - (void)draw:(NSString *)overlays
@@ -59,7 +59,7 @@ - (void)draw:(NSString *)overlays
 
 @end
 
-Class<RCTComponentViewProtocol> RCTTraceUpdateOverlayCls(void)
+Class<RCTComponentViewProtocol> RCTDebuggingOverlayCls(void)
 {
-  return RCTTraceUpdateOverlayComponentView.class;
+  return RCTDebuggingOverlayComponentView.class;
 }
diff --git a/packages/react-native/React/Fabric/Mounting/ComponentViews/RCTFabricComponentsPlugins.h b/packages/react-native/React/Fabric/Mounting/ComponentViews/RCTFabricComponentsPlugins.h
@@ -31,14 +31,14 @@ Class<RCTComponentViewProtocol> RCTFabricComponentsProvider(const char *name);
 
 // Lookup functions
 Class<RCTComponentViewProtocol> RCTActivityIndicatorViewCls(void) __attribute__((used));
+Class<RCTComponentViewProtocol> RCTDebuggingOverlayCls(void) __attribute__((used));
 Class<RCTComponentViewProtocol> RCTInputAccessoryCls(void) __attribute__((used));
 Class<RCTComponentViewProtocol> RCTParagraphCls(void) __attribute__((used));
 Class<RCTComponentViewProtocol> RCTPullToRefreshViewCls(void) __attribute__((used));
 Class<RCTComponentViewProtocol> RCTSafeAreaViewCls(void) __attribute__((used));
 Class<RCTComponentViewProtocol> RCTScrollViewCls(void) __attribute__((used));
 Class<RCTComponentViewProtocol> RCTSwitchCls(void) __attribute__((used));
 Class<RCTComponentViewProtocol> RCTTextInputCls(void) __attribute__((used));
-Class<RCTComponentViewProtocol> RCTTraceUpdateOverlayCls(void) __attribute__((used));
 Class<RCTComponentViewProtocol> RCTUnimplementedNativeViewCls(void) __attribute__((used));
 Class<RCTComponentViewProtocol> RCTViewCls(void) __attribute__((used));
 Class<RCTComponentViewProtocol> RCTImageCls(void) __attribute__((used));
diff --git a/packages/react-native/React/Fabric/Mounting/ComponentViews/RCTFabricComponentsPlugins.mm b/packages/react-native/React/Fabric/Mounting/ComponentViews/RCTFabricComponentsPlugins.mm
@@ -19,14 +19,14 @@
 Class<RCTComponentViewProtocol> RCTFabricComponentsProvider(const char *name) {
   static std::unordered_map<std::string, Class (*)(void)> sFabricComponentsClassMap = {
     {"ActivityIndicatorView", RCTActivityIndicatorViewCls},
+    {"DebuggingOverlay", RCTDebuggingOverlayCls},
     {"InputAccessoryView", RCTInputAccessoryCls},
     {"Paragraph", RCTParagraphCls},
     {"PullToRefreshView", RCTPullToRefreshViewCls},
     {"SafeAreaView", RCTSafeAreaViewCls},
     {"ScrollView", RCTScrollViewCls},
     {"Switch", RCTSwitchCls},
     {"TextInput", RCTTextInputCls},
-    {"TraceUpdateOverlay", RCTTraceUpdateOverlayCls},
     {"UnimplementedNativeView", RCTUnimplementedNativeViewCls},
     {"View", RCTViewCls},
     {"Image", RCTImageCls},
diff --git a/packages/react-native/React/Views/RCTDebuggingOverlay.h b/packages/react-native/React/Views/RCTDebuggingOverlay.h
@@ -9,7 +9,7 @@
 
 #import <React/RCTView.h>
 
-@interface RCTTraceUpdateOverlay : RCTView
+@interface RCTDebuggingOverlay : RCTView
 
 - (void)draw:(NSString *)serializedNodes;
 
diff --git a/packages/react-native/React/Views/RCTDebuggingOverlay.m b/packages/react-native/React/Views/RCTDebuggingOverlay.m
@@ -5,13 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-#import "RCTTraceUpdateOverlay.h"
+#import "RCTDebuggingOverlay.h"
 
 #import <React/RCTConvert.h>
 #import <React/RCTLog.h>
 #import <React/RCTUtils.h>
 
-@implementation RCTTraceUpdateOverlay
+@implementation RCTDebuggingOverlay
 
 - (void)draw:(NSString *)serializedNodes
 {
@@ -24,7 +24,7 @@ - (void)draw:(NSString *)serializedNodes
   id deserializedNodes = RCTJSONParse(serializedNodes, &error);
 
   if (error) {
-    RCTLogError(@"Failed to parse serialized nodes passed to RCTTraceUpdatesOverlay");
+    RCTLogError(@"Failed to parse serialized nodes passed to RCTDebuggingOverlay");
     return;
   }
 
diff --git a/packages/react-native/React/Views/RCTDebuggingOverlayManager.h b/packages/react-native/React/Views/RCTDebuggingOverlayManager.h
@@ -7,6 +7,6 @@
 
 #import <React/RCTViewManager.h>
 
-@interface RCTTraceUpdateOverlayManager : RCTViewManager
+@interface RCTDebuggingOverlayManager : RCTViewManager
 
 @end
diff --git a/packages/react-native/React/Views/RCTDebuggingOverlayManager.m b/packages/react-native/React/Views/RCTDebuggingOverlayManager.m
@@ -5,32 +5,32 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-#import "RCTTraceUpdateOverlayManager.h"
-#import "RCTTraceUpdateOverlay.h"
+#import "RCTDebuggingOverlayManager.h"
+#import "RCTDebuggingOverlay.h"
 
 #import <React/RCTLog.h>
 #import <React/RCTUIManager.h>
 
 #import "RCTBridge.h"
 
-@implementation RCTTraceUpdateOverlayManager
+@implementation RCTDebuggingOverlayManager
 
-RCT_EXPORT_MODULE(TraceUpdateOverlay)
+RCT_EXPORT_MODULE(DebuggingOverlay)
 
 - (UIView *)view
 {
-  return [RCTTraceUpdateOverlay new];
+  return [RCTDebuggingOverlay new];
 }
 
 RCT_EXPORT_METHOD(draw : (nonnull NSNumber *)viewTag nodes : (NSString *)serializedNodes)
 {
   [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
     UIView *view = viewRegistry[viewTag];
 
-    if ([view isKindOfClass:[RCTTraceUpdateOverlay class]]) {
-      [(RCTTraceUpdateOverlay *)view draw:serializedNodes];
+    if ([view isKindOfClass:[RCTDebuggingOverlay class]]) {
+      [(RCTDebuggingOverlay *)view draw:serializedNodes];
     } else {
-      RCTLogError(@"Expected view to be RCTTraceUpdateOverlay, got %@", NSStringFromClass([view class]));
+      RCTLogError(@"Expected view to be RCTDebuggingOverlay, got %@", NSStringFromClass([view class]));
     }
   }];
 }
diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/DebugCorePackage.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/DebugCorePackage.java
@@ -19,7 +19,7 @@
 import com.facebook.react.module.model.ReactModuleInfoProvider;
 import com.facebook.react.uimanager.UIManagerModule;
 import com.facebook.react.uimanager.ViewManager;
-import com.facebook.react.views.traceupdateoverlay.TraceUpdateOverlayManager;
+import com.facebook.react.views.debuggingoverlay.DebuggingOverlayManager;
 import java.util.ArrayList;
 import java.util.Collection;
 import java.util.HashMap;
@@ -96,8 +96,7 @@ private static void appendMap(
   private Map<String, ModuleSpec> getViewManagersMap() {
     if (mViewManagers == null) {
       Map<String, ModuleSpec> viewManagers = new HashMap<>();
-      appendMap(
-          viewManagers, TraceUpdateOverlayManager.REACT_CLASS, TraceUpdateOverlayManager::new);
+      appendMap(viewManagers, DebuggingOverlayManager.REACT_CLASS, DebuggingOverlayManager::new);
 
       mViewManagers = viewManagers;
     }
diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/debuggingoverlay/DebuggingOverlay.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/debuggingoverlay/DebuggingOverlay.java
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-package com.facebook.react.views.traceupdateoverlay;
+package com.facebook.react.views.debuggingoverlay;
 
 import android.content.Context;
 import android.graphics.Canvas;
@@ -17,7 +17,7 @@
 import java.util.ArrayList;
 import java.util.List;
 
-public class TraceUpdateOverlay extends View {
+public class DebuggingOverlay extends View {
   private final Paint mOverlayPaint = new Paint();
   private List<Overlay> mOverlays = new ArrayList<Overlay>();
 
@@ -43,7 +43,7 @@ public RectF getPixelRect() {
     }
   }
 
-  public TraceUpdateOverlay(Context context) {
+  public DebuggingOverlay(Context context) {
     super(context);
     mOverlayPaint.setStyle(Paint.Style.STROKE);
     mOverlayPaint.setStrokeWidth(6);
diff --git a/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/debuggingoverlay/DebuggingOverlayManager.java b/packages/react-native/ReactAndroid/src/main/java/com/facebook/react/views/debuggingoverlay/DebuggingOverlayManager.java
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-package com.facebook.react.views.traceupdateoverlay;
+package com.facebook.react.views.debuggingoverlay;
 
 import android.graphics.RectF;
 import androidx.annotation.Nullable;
@@ -16,22 +16,22 @@
 import com.facebook.react.module.annotations.ReactModule;
 import com.facebook.react.uimanager.SimpleViewManager;
 import com.facebook.react.uimanager.ThemedReactContext;
-import com.facebook.react.views.traceupdateoverlay.TraceUpdateOverlay.Overlay;
+import com.facebook.react.views.debuggingoverlay.DebuggingOverlay.Overlay;
 import java.util.ArrayList;
 import java.util.List;
 import org.json.JSONArray;
 import org.json.JSONException;
 import org.json.JSONObject;
 
-@ReactModule(name = TraceUpdateOverlayManager.REACT_CLASS)
-public class TraceUpdateOverlayManager extends SimpleViewManager<TraceUpdateOverlay> {
-  public static final String REACT_CLASS = "TraceUpdateOverlay";
+@ReactModule(name = DebuggingOverlayManager.REACT_CLASS)
+public class DebuggingOverlayManager extends SimpleViewManager<DebuggingOverlay> {
+  public static final String REACT_CLASS = "DebuggingOverlay";
 
-  public TraceUpdateOverlayManager() {}
+  public DebuggingOverlayManager() {}
 
   @Override
   public void receiveCommand(
-      TraceUpdateOverlay view, String commandId, @Nullable ReadableArray args) {
+      DebuggingOverlay view, String commandId, @Nullable ReadableArray args) {
     switch (commandId) {
       case "draw":
         if (args == null) {
@@ -67,13 +67,13 @@ public void receiveCommand(
         ReactSoftExceptionLogger.logSoftException(
             REACT_CLASS,
             new ReactNoCrashSoftException(
-                "Received unexpected command in TraceUpdateOverlayManager"));
+                "Received unexpected command in DebuggingOverlayManager"));
     }
   }
 
   @Override
-  public TraceUpdateOverlay createViewInstance(ThemedReactContext context) {
-    return new TraceUpdateOverlay(context);
+  public DebuggingOverlay createViewInstance(ThemedReactContext context) {
+    return new DebuggingOverlay(context);
   }
 
   @Override
diff --git a/packages/react-native/ReactAndroid/src/main/jni/react/fabric/CoreComponentsRegistry.cpp b/packages/react-native/ReactAndroid/src/main/jni/react/fabric/CoreComponentsRegistry.cpp
@@ -66,7 +66,7 @@ CoreComponentsRegistry::sharedProviderRegistry() {
     providerRegistry->add(concreteComponentDescriptorProvider<
                           AndroidDrawerLayoutComponentDescriptor>());
     providerRegistry->add(concreteComponentDescriptorProvider<
-                          TraceUpdateOverlayComponentDescriptor>());
+                          DebuggingOverlayComponentDescriptor>());
 
     return providerRegistry;
   }();

Original file line number	Diff line number	Diff line change
`@@ -5,11 +5,11 @@`
`5`	`5`	`* LICENSE file in the root directory of this source tree.`
`6`	`6`	`*/`
`7`	`7`
`8`		`-#import "RCTTraceUpdateOverlayComponentView.h"`
	`8`	`+#import "RCTDebuggingOverlayComponentView.h"`
`9`	`9`
	`10`	`+#import <React/RCTDebuggingOverlay.h>`
`10`	`11`	`#import <React/RCTDefines.h>`
`11`	`12`	`#import <React/RCTLog.h>`
`12`		`-#import <React/RCTTraceUpdateOverlay.h>`
`13`	`13`
`14`	`14`	`#import <react/renderer/components/rncore/ComponentDescriptors.h>`
`15`	`15`	`#import <react/renderer/components/rncore/EventEmitters.h>`
`@@ -20,17 +20,17 @@`
`20`	`20`
`21`	`21`	`using namespace facebook::react;`
`22`	`22`
`23`		`-@implementation RCTTraceUpdateOverlayComponentView {`
`24`		`- RCTTraceUpdateOverlay *_overlay;`
	`23`	`+@implementation RCTDebuggingOverlayComponentView {`
	`24`	`+ RCTDebuggingOverlay *_overlay;`
`25`	`25`	`}`
`26`	`26`
`27`	`27`	`- (instancetype)initWithFrame:(CGRect)frame`
`28`	`28`	`{`
`29`	`29`	`if (self = [super initWithFrame:frame]) {`
`30`		`- static const auto defaultProps = std::make_shared<const TraceUpdateOverlayProps>();`
	`30`	`+ static const auto defaultProps = std::make_shared<const DebuggingOverlayProps>();`
`31`	`31`	`_props = defaultProps;`
`32`	`32`
`33`		`- _overlay = [[RCTTraceUpdateOverlay alloc] initWithFrame:self.bounds];`
	`33`	`+ _overlay = [[RCTDebuggingOverlay alloc] initWithFrame:self.bounds];`
`34`	`34`
`35`	`35`	`self.contentView = _overlay;`
`36`	`36`	`}`
`@@ -42,14 +42,14 @@ - (instancetype)initWithFrame:(CGRect)frame`
`42`	`42`
`43`	`43`	`+ (ComponentDescriptorProvider)componentDescriptorProvider`
`44`	`44`	`{`
`45`		`- return concreteComponentDescriptorProvider<TraceUpdateOverlayComponentDescriptor>();`
	`45`	`+ return concreteComponentDescriptorProvider<DebuggingOverlayComponentDescriptor>();`
`46`	`46`	`}`
`47`	`47`
`48`	`48`	`#pragma mark - Native commands`
`49`	`49`
`50`	`50`	`- (void)handleCommand:(const NSString )commandName args:(const NSArray )args`
`51`	`51`	`{`
`52`		`- RCTTraceUpdateOverlayHandleCommand(self, commandName, args);`
	`52`	`+ RCTDebuggingOverlayHandleCommand(self, commandName, args);`
`53`	`53`	`}`
`54`	`54`
`55`	`55`	`- (void)draw:(NSString *)overlays`
`@@ -59,7 +59,7 @@ - (void)draw:(NSString *)overlays`
`59`	`59`
`60`	`60`	`@end`
`61`	`61`
`62`		`-Class<RCTComponentViewProtocol> RCTTraceUpdateOverlayCls(void)`
	`62`	`+Class<RCTComponentViewProtocol> RCTDebuggingOverlayCls(void)`
`63`	`63`	`{`
`64`		`- return RCTTraceUpdateOverlayComponentView.class;`
	`64`	`+ return RCTDebuggingOverlayComponentView.class;`
`65`	`65`	`}`