From f70f4c382f8b47924eac8094ac5abc52624d1dc5 Mon Sep 17 00:00:00 2001 From: Sebastian Markbage Date: Sat, 27 Jul 2024 17:24:40 -0400 Subject: [PATCH] Rename NativeElement terms to HostInstance in the frontend The highlight ones are generic. There's a lot of references to Native in the StyleEditor but that one is indeed referring to React Native. --- .../devtools/views/Components/InspectedElementView.js | 8 ++++---- .../src/devtools/views/Components/Tree.js | 10 +++++----- .../src/devtools/views/Profiler/CommitFlamegraph.js | 10 +++++----- .../src/devtools/views/Profiler/CommitRanked.js | 10 +++++----- .../react-devtools-shared/src/devtools/views/hooks.js | 8 ++++---- 5 files changed, 23 insertions(+), 23 deletions(-) diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js index 2da983b578d72..f3427410b49b9 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js +++ b/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 {highlightHostInstance, clearHighlightNativeElement} = - useHighlightNativeElement(); + const {highlightHostInstance, clearHighlightHostInstance} = + useHighlightHostInstance(); const handleClick = useCallback(() => { logEvent({ @@ -209,7 +209,7 @@ function OwnerView({ disabled={!isInStore} onClick={handleClick} onMouseEnter={() => highlightHostInstance(id)} - onMouseLeave={clearHighlightNativeElement}> + onMouseLeave={clearHighlightHostInstance}> (null); const focusTargetRef = useRef(null); @@ -258,7 +258,7 @@ export default function Tree(props: Props): React.Node { if (selectedElementID !== null) { highlightHostInstance(selectedElementID); } else { - clearHighlightNativeElement(); + clearHighlightHostInstance(); } } }, [ @@ -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. diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js index d3c6fcd901a68..3774a4d340045 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js +++ b/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(null); const {lineHeight} = useContext(SettingsContext); const {selectFiber, selectedFiberID} = useContext(ProfilerContext); - const {highlightHostInstance, clearHighlightNativeElement} = - useHighlightNativeElement(); + const {highlightHostInstance, clearHighlightHostInstance} = + useHighlightHostInstance(); const selectedChartNodeIndex = useMemo(() => { if (selectedFiberID === null) { @@ -134,9 +134,9 @@ function CommitFlamegraph({chartData, commitTree, height, width}: Props) { ); 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( () => ({ diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js index 7c801599e24f9..bc482776f4e81 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js +++ b/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(null); const {lineHeight} = useContext(SettingsContext); const {selectedFiberID, selectFiber} = useContext(ProfilerContext); - const {highlightHostInstance, clearHighlightNativeElement} = - useHighlightNativeElement(); + const {highlightHostInstance, clearHighlightHostInstance} = + useHighlightHostInstance(); const selectedFiberIndex = useMemo( () => getNodeIndex(chartData, selectedFiberID), @@ -116,9 +116,9 @@ function CommitRanked({chartData, commitTree, height, width}: Props) { ); 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( () => ({ diff --git a/packages/react-devtools-shared/src/devtools/views/hooks.js b/packages/react-devtools-shared/src/devtools/views/hooks.js index fe367f5c7ac21..6d0afb5c0a0ca 100644 --- a/packages/react-devtools-shared/src/devtools/views/hooks.js +++ b/packages/react-devtools-shared/src/devtools/views/hooks.js @@ -336,8 +336,8 @@ export function useSubscription({ return state.value; } -export function useHighlightNativeElement(): { - clearHighlightNativeElement: () => void, +export function useHighlightHostInstance(): { + clearHighlightHostInstance: () => void, highlightHostInstance: (id: number) => void, } { const bridge = useContext(BridgeContext); @@ -361,12 +361,12 @@ export function useHighlightNativeElement(): { [store, bridge], ); - const clearHighlightNativeElement = useCallback(() => { + const clearHighlightHostInstance = useCallback(() => { bridge.send('clearHostInstanceHighlight'); }, [bridge]); return { highlightHostInstance, - clearHighlightNativeElement, + clearHighlightHostInstance, }; }