[DevTools] Rename NativeElement to HostInstance in the Bridge (#30491)

Stacked on #30490.

This is in the same spirit but to clarify the difference between what is
React Native vs part of any generic Host. We used to use "Native" to
mean three different concepts. Now "Native" just means React Native.

E.g. from the frontend's perspective the Host can be
Highlighted/Inspected. However, that in turn can then be implemented as
either direct DOM manipulation or commands to React Native. So frontend
-> backend is "Host" but backend -> React Native is "Native" while
backend -> DOM is "Web".

Rename NativeElementsPanel to BuiltinElementsPanel. This isn't a React
Native panel but one part of the surrounding DevTools. We refer to Host
more as the thing running React itself. I.e. where the backend lives.
The runtime you're inspecting. The DevTools itself needs a third term.
So I went with "Builtin".

packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js

@@ -24,19 +24,19 @@ export default function InspectHostNodesToggle(): React.Node {
 
       if (isChecked) {
         logEvent({event_name: 'inspect-element-button-clicked'});
-        bridge.send('startInspectingNative');
+        bridge.send('startInspectingHost');
       } else {
-        bridge.send('stopInspectingNative', false);
+        bridge.send('stopInspectingHost', false);
       }
     },
     [bridge],
   );
 
   useEffect(() => {
-    const onStopInspectingNative = () => setIsInspecting(false);
-    bridge.addListener('stopInspectingNative', onStopInspectingNative);
+    const onStopInspectingHost = () => setIsInspecting(false);
+    bridge.addListener('stopInspectingHost', onStopInspectingHost);
     return () =>
-      bridge.removeListener('stopInspectingNative', onStopInspectingNative);
+      bridge.removeListener('stopInspectingHost', onStopInspectingHost);
   }, [bridge]);
 
   return (

packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js

@@ -80,11 +80,11 @@ export default function InspectedElementWrapper(_: Props): React.Node {
     if (element !== null && inspectedElementID !== null) {
       const rendererID = store.getRendererIDForElement(inspectedElementID);
       if (rendererID !== null) {
-        bridge.send('highlightNativeElement', {
+        bridge.send('highlightHostInstance', {
           displayName: element.displayName,
           hideAfterTimeout: true,
           id: inspectedElementID,
-          openNativeElementsPanel: true,
+          openBuiltinElementsPanel: true,
           rendererID,
           scrollIntoView: true,
         });

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js

@@ -22,7 +22,7 @@ import InspectedElementStyleXPlugin from './InspectedElementStyleXPlugin';
 import InspectedElementSuspenseToggle from './InspectedElementSuspenseToggle';
 import NativeStyleEditor from './NativeStyleEditor';
 import ElementBadges from './ElementBadges';
-import {useHighlightNativeElement} from '../hooks';
+import {useHighlightHostInstance} from '../hooks';
 import {enableStyleXFeatures} from 'react-devtools-feature-flags';
 import {logEvent} from 'react-devtools-shared/src/Logger';
 import InspectedElementSourcePanel from './InspectedElementSourcePanel';
@@ -188,8 +188,8 @@ function OwnerView({
   isInStore,
 }: OwnerViewProps) {
   const dispatch = useContext(TreeDispatcherContext);
-  const {highlightNativeElement, clearHighlightNativeElement} =
-    useHighlightNativeElement();
+  const {highlightHostInstance, clearHighlightHostInstance} =
+    useHighlightHostInstance();
 
   const handleClick = useCallback(() => {
     logEvent({
@@ -208,8 +208,8 @@ function OwnerView({
       className={styles.OwnerButton}
       disabled={!isInStore}
       onClick={handleClick}
-      onMouseEnter={() => highlightNativeElement(id)}
-      onMouseLeave={clearHighlightNativeElement}>
+      onMouseEnter={() => highlightHostInstance(id)}
+      onMouseLeave={clearHighlightHostInstance}>
       <span className={styles.OwnerContent}>
         <span
           className={`${styles.Owner} ${isInStore ? '' : styles.NotInStore}`}

packages/react-devtools-shared/src/devtools/views/Components/Tree.js

@@ -31,7 +31,7 @@ import ComponentSearchInput from './ComponentSearchInput';
 import SettingsModalContextToggle from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle';
 import SelectedTreeHighlight from './SelectedTreeHighlight';
 import TreeFocusedContext from './TreeFocusedContext';
-import {useHighlightNativeElement, useSubscription} from '../hooks';
+import {useHighlightHostInstance, useSubscription} from '../hooks';
 import {clearErrorsAndWarnings as clearErrorsAndWarningsAPI} from 'react-devtools-shared/src/backendAPI';
 import styles from './Tree.css';
 import ButtonIcon from '../ButtonIcon';
@@ -66,8 +66,8 @@ export default function Tree(props: Props): React.Node {
   const {hideSettings} = useContext(OptionsContext);
   const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] =
     useState(false);
-  const {highlightNativeElement, clearHighlightNativeElement} =
-    useHighlightNativeElement();
+  const {highlightHostInstance, clearHighlightHostInstance} =
+    useHighlightHostInstance();
   const treeRef = useRef<HTMLDivElement | null>(null);
   const focusTargetRef = useRef<HTMLDivElement | null>(null);
 
@@ -98,7 +98,7 @@ export default function Tree(props: Props): React.Node {
   // Picking an element in the inspector should put focus into the tree.
   // This ensures that keyboard navigation works right after picking a node.
   useEffect(() => {
-    function handleStopInspectingNative(didSelectNode: boolean) {
+    function handleStopInspectingHost(didSelectNode: boolean) {
       if (didSelectNode && focusTargetRef.current !== null) {
         focusTargetRef.current.focus();
         logEvent({
@@ -107,9 +107,9 @@ export default function Tree(props: Props): React.Node {
         });
       }
     }
-    bridge.addListener('stopInspectingNative', handleStopInspectingNative);
+    bridge.addListener('stopInspectingHost', handleStopInspectingHost);
     return () =>
-      bridge.removeListener('stopInspectingNative', handleStopInspectingNative);
+      bridge.removeListener('stopInspectingHost', handleStopInspectingHost);
   }, [bridge]);
 
   // This ref is passed down the context to elements.
@@ -256,15 +256,15 @@ export default function Tree(props: Props): React.Node {
     }
     if (isNavigatingWithKeyboard || didSelectNewSearchResult) {
       if (selectedElementID !== null) {
-        highlightNativeElement(selectedElementID);
+        highlightHostInstance(selectedElementID);
       } else {
-        clearHighlightNativeElement();
+        clearHighlightHostInstance();
       }
     }
   }, [
     bridge,
     isNavigatingWithKeyboard,
-    highlightNativeElement,
+    highlightHostInstance,
     searchIndex,
     searchResults,
     selectedElementID,
@@ -276,10 +276,10 @@ export default function Tree(props: Props): React.Node {
       // Ignore hover while we're navigating with keyboard.
       // This avoids flicker from the hovered nodes under the mouse.
       if (!isNavigatingWithKeyboard) {
-        highlightNativeElement(id);
+        highlightHostInstance(id);
       }
     },
-    [isNavigatingWithKeyboard, highlightNativeElement],
+    [isNavigatingWithKeyboard, highlightHostInstance],
   );
 
   const handleMouseMove = useCallback(() => {
@@ -288,7 +288,7 @@ export default function Tree(props: Props): React.Node {
     setIsNavigatingWithKeyboard(false);
   }, []);
 
-  const handleMouseLeave = clearHighlightNativeElement;
+  const handleMouseLeave = clearHighlightHostInstance;
 
   // Let react-window know to re-render any time the underlying tree data changes.
   // This includes the owner context, since it controls a filtered view of the tree.

packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js

@@ -16,7 +16,7 @@ import NoCommitData from './NoCommitData';
 import CommitFlamegraphListItem from './CommitFlamegraphListItem';
 import HoveredFiberInfo from './HoveredFiberInfo';
 import {scale} from './utils';
-import {useHighlightNativeElement} from '../hooks';
+import {useHighlightHostInstance} from '../hooks';
 import {StoreContext} from '../context';
 import {SettingsContext} from '../Settings/SettingsContext';
 import Tooltip from './Tooltip';
@@ -101,8 +101,8 @@ function CommitFlamegraph({chartData, commitTree, height, width}: Props) {
     useState<TooltipFiberData | null>(null);
   const {lineHeight} = useContext(SettingsContext);
   const {selectFiber, selectedFiberID} = useContext(ProfilerContext);
-  const {highlightNativeElement, clearHighlightNativeElement} =
-    useHighlightNativeElement();
+  const {highlightHostInstance, clearHighlightHostInstance} =
+    useHighlightHostInstance();
 
   const selectedChartNodeIndex = useMemo<number>(() => {
     if (selectedFiberID === null) {
@@ -127,16 +127,16 @@ function CommitFlamegraph({chartData, commitTree, height, width}: Props) {
 
   const handleElementMouseEnter = useCallback(
     ({id, name}: $FlowFixMe) => {
-      highlightNativeElement(id); // Highlight last hovered element.
+      highlightHostInstance(id); // Highlight last hovered element.
       setHoveredFiberData({id, name}); // Set hovered fiber data for tooltip
     },
-    [highlightNativeElement],
+    [highlightHostInstance],
   );
 
   const handleElementMouseLeave = useCallback(() => {
-    clearHighlightNativeElement(); // clear highlighting of element on mouse leave
+    clearHighlightHostInstance(); // clear highlighting of element on mouse leave
     setHoveredFiberData(null); // clear hovered fiber data for tooltip
-  }, [clearHighlightNativeElement]);
+  }, [clearHighlightHostInstance]);
 
   const itemData = useMemo<ItemData>(
     () => ({

packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js

@@ -18,7 +18,7 @@ import HoveredFiberInfo from './HoveredFiberInfo';
 import {scale} from './utils';
 import {StoreContext} from '../context';
 import {SettingsContext} from '../Settings/SettingsContext';
-import {useHighlightNativeElement} from '../hooks';
+import {useHighlightHostInstance} from '../hooks';
 import Tooltip from './Tooltip';
 
 import styles from './CommitRanked.css';
@@ -99,8 +99,8 @@ function CommitRanked({chartData, commitTree, height, width}: Props) {
     useState<TooltipFiberData | null>(null);
   const {lineHeight} = useContext(SettingsContext);
   const {selectedFiberID, selectFiber} = useContext(ProfilerContext);
-  const {highlightNativeElement, clearHighlightNativeElement} =
-    useHighlightNativeElement();
+  const {highlightHostInstance, clearHighlightHostInstance} =
+    useHighlightHostInstance();
 
   const selectedFiberIndex = useMemo(
     () => getNodeIndex(chartData, selectedFiberID),
@@ -109,16 +109,16 @@ function CommitRanked({chartData, commitTree, height, width}: Props) {
 
   const handleElementMouseEnter = useCallback(
     ({id, name}: $FlowFixMe) => {
-      highlightNativeElement(id); // Highlight last hovered element.
+      highlightHostInstance(id); // Highlight last hovered element.
       setHoveredFiberData({id, name}); // Set hovered fiber data for tooltip
     },
-    [highlightNativeElement],
+    [highlightHostInstance],
   );
 
   const handleElementMouseLeave = useCallback(() => {
-    clearHighlightNativeElement(); // clear highlighting of element on mouse leave
+    clearHighlightHostInstance(); // clear highlighting of element on mouse leave
     setHoveredFiberData(null); // clear hovered fiber data for tooltip
-  }, [clearHighlightNativeElement]);
+  }, [clearHighlightHostInstance]);
 
   const itemData = useMemo<ItemData>(
     () => ({

packages/react-devtools-shared/src/devtools/views/hooks.js

@@ -336,23 +336,23 @@ export function useSubscription<Value>({
   return state.value;
 }
 
-export function useHighlightNativeElement(): {
-  clearHighlightNativeElement: () => void,
-  highlightNativeElement: (id: number) => void,
+export function useHighlightHostInstance(): {
+  clearHighlightHostInstance: () => void,
+  highlightHostInstance: (id: number) => void,
 } {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
-  const highlightNativeElement = useCallback(
+  const highlightHostInstance = useCallback(
     (id: number) => {
       const element = store.getElementByID(id);
       const rendererID = store.getRendererIDForElement(id);
       if (element !== null && rendererID !== null) {
-        bridge.send('highlightNativeElement', {
+        bridge.send('highlightHostInstance', {
           displayName: element.displayName,
           hideAfterTimeout: false,
           id,
-          openNativeElementsPanel: false,
+          openBuiltinElementsPanel: false,
           rendererID,
           scrollIntoView: false,
         });
@@ -361,12 +361,12 @@ export function useHighlightNativeElement(): {
     [store, bridge],
   );
 
-  const clearHighlightNativeElement = useCallback(() => {
-    bridge.send('clearNativeElementHighlight');
+  const clearHighlightHostInstance = useCallback(() => {
+    bridge.send('clearHostInstanceHighlight');
   }, [bridge]);
 
   return {
-    highlightNativeElement,
-    clearHighlightNativeElement,
+    highlightHostInstance,
+    clearHighlightHostInstance,
   };
 }