From afe54bfcbf744eec8640f6d0006d50329682a43a Mon Sep 17 00:00:00 2001
From: Moti Zilberman <moti@meta.com>
Date: Tue, 7 May 2024 16:06:36 +0100
Subject: [PATCH] [DevTools] Expose "view source" options to Fusebox
 integration (#28973)

## Summary

Exposes the APIs needed by React Native DevTools (Fusebox) to implement
the "view element source" and "view attribute source" features.

## How did you test this change?

1. `yarn build` in `react-devtools-fusebox`
2. Copy artifacts to rn-chrome-devtools-frontend
3. Write some additional glue code to implement
`viewElementSourceFunction` in our CDT fork.
4. Test the feature manually.


https://github.com/facebook/react/assets/2246565/12667018-100a-4b3f-957a-06c07f2af41a
---
 .../react-devtools-fusebox/src/frontend.d.ts  | 49 ++++++++++++-------
 .../react-devtools-fusebox/src/frontend.js    | 20 +++++++-
 2 files changed, 50 insertions(+), 19 deletions(-)

diff --git a/packages/react-devtools-fusebox/src/frontend.d.ts b/packages/react-devtools-fusebox/src/frontend.d.ts
index f17639a88c7be..4074baf507745 100644
--- a/packages/react-devtools-fusebox/src/frontend.d.ts
+++ b/packages/react-devtools-fusebox/src/frontend.d.ts
@@ -5,23 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-export type MessagePayload =
-  | null
-  | string
-  | number
-  | boolean
-  | {[key: string]: MessagePayload}
-  | MessagePayload[];
-export type Message = {event: string; payload?: MessagePayload};
+export type MessagePayload = null | string | number | boolean | { [key: string]: MessagePayload } | MessagePayload[];
+export type Message = { event: string, payload?: MessagePayload };
 
 export type WallListener = (message: Message) => void;
 export type Wall = {
-  listen: (fn: WallListener) => Function;
-  send: (event: string, payload?: MessagePayload) => void;
+  listen: (fn: WallListener) => Function,
+  send: (event: string, payload?: MessagePayload) => void,
 };
 
 export type Bridge = {
-  shutdown: () => void;
+  shutdown: () => void,
 };
 export type Store = Object;
 export type BrowserTheme = 'dark' | 'light';
@@ -29,12 +23,31 @@ export type BrowserTheme = 'dark' | 'light';
 export function createBridge(wall: Wall): Bridge;
 export function createStore(bridge: Bridge): Store;
 
+export type Source = {
+  sourceURL: string,
+  line: number,
+  column: number,
+};
+export type ViewElementSource = (
+  source: Source,
+  symbolicatedSource: Source | null,
+) => void;
+export type ViewAttributeSource = (
+  id: number,
+  path: Array<string | number>,
+) => void;
+export type CanViewElementSource = (
+  source: Source,
+  symbolicatedSource: Source | null,
+) => boolean;
+
 export type InitializationOptions = {
-  bridge: Bridge;
-  store: Store;
-  theme?: BrowserTheme;
+  bridge: Bridge,
+  store: Store,
+  theme?: BrowserTheme,
+  viewAttributeSourceFunction?: ViewAttributeSource,
+  viewElementSourceFunction?: ViewElementSource,
+  canViewElementSourceFunction?: CanViewElementSource,
 };
-export function initialize(
-  node: Element | Document,
-  options: InitializationOptions,
-): void;
+
+export function initialize(node: Element | Document, options: InitializationOptions): void;
diff --git a/packages/react-devtools-fusebox/src/frontend.js b/packages/react-devtools-fusebox/src/frontend.js
index 9a7a6b9ea90d9..d8a019b36a3ec 100644
--- a/packages/react-devtools-fusebox/src/frontend.js
+++ b/packages/react-devtools-fusebox/src/frontend.js
@@ -18,6 +18,11 @@ import type {
   Wall,
 } from 'react-devtools-shared/src/frontend/types';
 import type {FrontendBridge} from 'react-devtools-shared/src/bridge';
+import type {
+  ViewAttributeSource,
+  ViewElementSource,
+  CanViewElementSource,
+} from 'react-devtools-shared/src/devtools/views/DevTools';
 
 type Config = {
   checkBridgeProtocolCompatibility?: boolean,
@@ -46,13 +51,23 @@ type InitializationOptions = {
   bridge: FrontendBridge,
   store: Store,
   theme?: BrowserTheme,
+  viewAttributeSourceFunction?: ViewAttributeSource,
+  viewElementSourceFunction?: ViewElementSource,
+  canViewElementSourceFunction?: CanViewElementSource,
 };
 
 export function initialize(
   contentWindow: Element | Document,
   options: InitializationOptions,
 ): void {
-  const {bridge, store, theme = 'light'} = options;
+  const {
+    bridge,
+    store,
+    theme = 'light',
+    viewAttributeSourceFunction,
+    viewElementSourceFunction,
+    canViewElementSourceFunction,
+  } = options;
   const root = createRoot(contentWindow);
 
   root.render(
@@ -63,6 +78,9 @@ export function initialize(
       showTabBar={true}
       warnIfLegacyBackendDetected={true}
       enabledInspectedElementContextMenu={true}
+      viewAttributeSourceFunction={viewAttributeSourceFunction}
+      viewElementSourceFunction={viewElementSourceFunction}
+      canViewElementSourceFunction={canViewElementSourceFunction}
     />,
   );
 }