Facebook/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2025-11-01 09:12:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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".
This commit is contained in:
Sebastian Markbåge
2024-07-30 09:12:12 -04:00
committed by GitHub
parent bea5a2bc46
commit 33e54fa252
22 changed files with 145 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react-devtools-extensions/src/main/elementSelection.js
Vendored
+1 -1
View File
@@ -35,7 +35,7 @@ export function setReactSelectionFromBrowser(bridge) {
}
// Remember to sync the selection next time we show Components tab.
bridge.send('syncSelectionFromNativeElementsPanel');
bridge.send('syncSelectionFromBuiltinElementsPanel');
}
},
);
packages/react-devtools-extensions/src/main/index.js
Vendored
+1 -1
View File
@@ -58,7 +58,7 @@ function createBridge() {
});
bridge.addListener(
'syncSelectionToNativeElementsPanel',
'syncSelectionToBuiltinElementsPanel',
setBrowserSelectionFromReact,
);
packages/react-devtools-shared/src/backend/agent.js
Vendored
+11 -11
View File
@@ -31,7 +31,7 @@ import {currentBridgeProtocol} from 'react-devtools-shared/src/bridge';
import type {BackendBridge} from 'react-devtools-shared/src/bridge';
import type {
InstanceAndStyle,
NativeType,
HostInstance,
OwnersList,
PathFrame,
PathMatch,
@@ -146,12 +146,12 @@ type PersistedSelection = {
export default class Agent extends EventEmitter<{
hideNativeHighlight: [],
showNativeHighlight: [NativeType],
showNativeHighlight: [HostInstance],
startInspectingNative: [],
stopInspectingNative: [],
shutdown: [],
traceUpdates: [Set<NativeType>],
drawTraceUpdates: [Array<NativeType>],
traceUpdates: [Set<HostInstance>],
drawTraceUpdates: [Array<HostInstance>],
disableTraceUpdates: [],
}> {
_bridge: BackendBridge;
@@ -212,8 +212,8 @@ export default class Agent extends EventEmitter<{
bridge.addListener('stopProfiling', this.stopProfiling);
bridge.addListener('storeAsGlobal', this.storeAsGlobal);
bridge.addListener(
'syncSelectionFromNativeElementsPanel',
this.syncSelectionFromNativeElementsPanel,
'syncSelectionFromBuiltinElementsPanel',
this.syncSelectionFromBuiltinElementsPanel,
);
bridge.addListener('shutdown', this.shutdown);
bridge.addListener(
@@ -367,7 +367,7 @@ export default class Agent extends EventEmitter<{
const rendererInterface = this.getBestMatchingRendererInterface(node);
if (rendererInterface != null) {
try {
return rendererInterface.getElementIDForNative(node, true);
return rendererInterface.getElementIDForHostInstance(node, true);
} catch (error) {
// Some old React versions might throw if they can't find a match.
// If so we should ignore it...
@@ -439,7 +439,7 @@ export default class Agent extends EventEmitter<{
}
// TODO: If there was a way to change the selected DOM element
// in native Elements tab without forcing a switch to it, we'd do it here.
// in built-in Elements tab without forcing a switch to it, we'd do it here.
// For now, it doesn't seem like there is a way to do that:
// https://github.com/bvaughn/react-devtools-experimental/issues/102
// (Setting $0 doesn't work, and calling inspect() switches the tab.)
@@ -658,7 +658,7 @@ export default class Agent extends EventEmitter<{
}
};
syncSelectionFromNativeElementsPanel: () => void = () => {
syncSelectionFromBuiltinElementsPanel: () => void = () => {
const target = window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0;
if (target == null) {
return;
@@ -697,7 +697,7 @@ export default class Agent extends EventEmitter<{
};
stopInspectingNative: (selected: boolean) => void = selected => {
this._bridge.send('stopInspectingNative', selected);
this._bridge.send('stopInspectingHost', selected);
};
storeAsGlobal: StoreAsGlobalParams => void = ({
@@ -768,7 +768,7 @@ export default class Agent extends EventEmitter<{
}
};
onTraceUpdates: (nodes: Set<NativeType>) => void = nodes => {
onTraceUpdates: (nodes: Set<HostInstance>) => void = nodes => {
this.emit('traceUpdates', nodes);
};
packages/react-devtools-shared/src/backend/console.js
Vendored
+2 -2
View File
@@ -30,7 +30,7 @@ import {
getStackByFiberInDevAndProd,
getOwnerStackByFiberInDev,
supportsOwnerStacks,
supportsNativeConsoleTasks,
supportsConsoleTasks,
} from './fiber/DevToolsFiberComponentStack';
import {formatOwnerStack} from './shared/DevToolsOwnerStack';
import {castBool, castBrowserTheme} from '../utils';
@@ -251,7 +251,7 @@ export function patch({
if (
consoleSettingsRef.appendComponentStack &&
!supportsNativeConsoleTasks(current)
!supportsConsoleTasks(current)
) {
const enableOwnerStacks = supportsOwnerStacks(current);
let componentStack = '';
packages/react-devtools-shared/src/backend/fiber/DevToolsFiberComponentStack.js
Vendored
+1 -1
View File
@@ -108,7 +108,7 @@ export function getStackByFiberInDevAndProd(
}
}
export function supportsNativeConsoleTasks(fiber: Fiber): boolean {
export function supportsConsoleTasks(fiber: Fiber): boolean {
// If this Fiber supports native console.createTask then we are already running
// inside a native async stack trace if it's active - meaning the DevTools is open.
// Ideally we'd detect if this task was created while the DevTools was open or not.
packages/react-devtools-shared/src/backend/fiber/renderer.js
Vendored
+11 -11
View File
@@ -111,7 +111,7 @@ import type {
InspectedElement,
InspectedElementPayload,
InstanceAndStyle,
NativeType,
HostInstance,
PathFrame,
PathMatch,
ProfilingDataBackend,
@@ -937,7 +937,7 @@ export function attach(
// Highlight updates
let traceUpdatesEnabled: boolean = false;
const traceUpdatesForNodes: Set<NativeType> = new Set();
const traceUpdatesForNodes: Set<HostInstance> = new Set();
function applyComponentFilters(componentFilters: Array<ComponentFilter>) {
hideElementsWithTypes.clear();
@@ -2862,7 +2862,7 @@ export function attach(
return fibers;
}
function findNativeNodesForElementID(id: number) {
function findHostInstancesForElementID(id: number) {
try {
const fiber = findCurrentFiberUsingSlowPathById(id);
if (fiber === null) {
@@ -2882,12 +2882,12 @@ export function attach(
return fiber != null ? getDisplayNameForFiber(fiber) : null;
}
function getFiberForNative(hostInstance: NativeType) {
function getFiberForNative(hostInstance: HostInstance) {
return renderer.findFiberByHostInstance(hostInstance);
}
function getElementIDForNative(
hostInstance: NativeType,
function getElementIDForHostInstance(
hostInstance: HostInstance,
findNearestUnfilteredAncestor: boolean = false,
) {
let fiber = renderer.findFiberByHostInstance(hostInstance);
@@ -3870,9 +3870,9 @@ export function attach(
if (result.hooks !== null) {
console.log('Hooks:', result.hooks);
}
const nativeNodes = findNativeNodesForElementID(id);
if (nativeNodes !== null) {
console.log('Nodes:', nativeNodes);
const hostInstances = findHostInstancesForElementID(id);
if (hostInstances !== null) {
console.log('Nodes:', hostInstances);
}
if (window.chrome || /firefox/i.test(navigator.userAgent)) {
console.log(
@@ -4655,12 +4655,12 @@ export function attach(
clearWarningsForElementID,
getSerializedElementValueByPath,
deletePath,
findNativeNodesForElementID,
findHostInstancesForElementID,
flushInitialOperations,
getBestMatchForTrackedPath,
getDisplayNameForElementID,
getFiberForNative,
getElementIDForNative,
getElementIDForHostInstance,
getInstanceAndStyle,
getOwnersList,
getPathForElement,
packages/react-devtools-shared/src/backend/legacy/renderer.js
Vendored
+18 -18
View File
@@ -39,10 +39,10 @@ import {decorateMany, forceUpdate, restoreMany} from './utils';
import type {
DevToolsHook,
GetElementIDForNative,
GetElementIDForHostInstance,
InspectedElementPayload,
InstanceAndStyle,
NativeType,
HostInstance,
PathFrame,
PathMatch,
RendererInterface,
@@ -142,33 +142,33 @@ export function attach(
const internalInstanceToRootIDMap: WeakMap<InternalInstance, number> =
new WeakMap();
let getInternalIDForNative: GetElementIDForNative =
((null: any): GetElementIDForNative);
let findNativeNodeForInternalID: (id: number) => ?NativeType;
let getFiberForNative = (node: NativeType) => {
let getElementIDForHostInstance: GetElementIDForHostInstance =
((null: any): GetElementIDForHostInstance);
let findHostInstanceForInternalID: (id: number) => ?HostInstance;
let getFiberForNative = (node: HostInstance) => {
// Not implemented.
return null;
};
if (renderer.ComponentTree) {
getInternalIDForNative = (node, findNearestUnfilteredAncestor) => {
getElementIDForHostInstance = (node, findNearestUnfilteredAncestor) => {
const internalInstance =
renderer.ComponentTree.getClosestInstanceFromNode(node);
return internalInstanceToIDMap.get(internalInstance) || null;
};
findNativeNodeForInternalID = (id: number) => {
findHostInstanceForInternalID = (id: number) => {
const internalInstance = idToInternalInstanceMap.get(id);
return renderer.ComponentTree.getNodeFromInstance(internalInstance);
};
getFiberForNative = (node: NativeType) => {
getFiberForNative = (node: HostInstance) => {
return renderer.ComponentTree.getClosestInstanceFromNode(node);
};
} else if (renderer.Mount.getID && renderer.Mount.getNode) {
getInternalIDForNative = (node, findNearestUnfilteredAncestor) => {
getElementIDForHostInstance = (node, findNearestUnfilteredAncestor) => {
// Not implemented.
return null;
};
findNativeNodeForInternalID = (id: number) => {
findHostInstanceForInternalID = (id: number) => {
// Not implemented.
return null;
};
@@ -884,9 +884,9 @@ export function attach(
if (result.context !== null) {
console.log('Context:', result.context);
}
const nativeNode = findNativeNodeForInternalID(id);
if (nativeNode !== null) {
console.log('Node:', nativeNode);
const hostInstance = findHostInstanceForInternalID(id);
if (hostInstance !== null) {
console.log('Node:', hostInstance);
}
if (window.chrome || /firefox/i.test(navigator.userAgent)) {
console.log(
@@ -1112,11 +1112,11 @@ export function attach(
getBestMatchForTrackedPath,
getDisplayNameForElementID,
getFiberForNative,
getElementIDForNative: getInternalIDForNative,
getElementIDForHostInstance,
getInstanceAndStyle,
findNativeNodesForElementID: (id: number) => {
const nativeNode = findNativeNodeForInternalID(id);
return nativeNode == null ? null : [nativeNode];
findHostInstancesForElementID: (id: number) => {
const hostInstance = findHostInstanceForInternalID(id);
return hostInstance == null ? null : [hostInstance];
},
getOwnersList,
getPathForElement,
packages/react-devtools-shared/src/backend/types.js
Vendored
+10 -8
View File
@@ -75,7 +75,7 @@ export type WorkTagMap = {
Throw: WorkTag,
};
export type NativeType = Object;
export type HostInstance = Object;
export type RendererID = number;
type Dispatcher = any;
@@ -91,11 +91,13 @@ export type GetDisplayNameForElementID = (
findNearestUnfilteredAncestor?: boolean,
) => string | null;
export type GetElementIDForNative = (
component: NativeType,
export type GetElementIDForHostInstance = (
component: HostInstance,
findNearestUnfilteredAncestor?: boolean,
) => number | null;
export type FindNativeNodesForFiberID = (id: number) => ?Array<NativeType>;
export type FindHostInstancesForElementID = (
id: number,
) => ?Array<HostInstance>;
export type ReactProviderType<T> = {
$$typeof: symbol | number,
@@ -107,7 +109,7 @@ export type Lane = number;
export type Lanes = number;
export type ReactRenderer = {
findFiberByHostInstance: (hostInstance: NativeType) => Fiber | null,
findFiberByHostInstance: (hostInstance: HostInstance) => Fiber | null,
version: string,
rendererPackageName: string,
bundleType: BundleType,
@@ -358,11 +360,11 @@ export type RendererInterface = {
hookID: ?number,
path: Array<string | number>,
) => void,
findNativeNodesForElementID: FindNativeNodesForFiberID,
findHostInstancesForElementID: FindHostInstancesForElementID,
flushInitialOperations: () => void,
getBestMatchForTrackedPath: () => PathMatch | null,
getFiberForNative: (component: NativeType) => Fiber | null,
getElementIDForNative: GetElementIDForNative,
getFiberForNative: (component: HostInstance) => Fiber | null,
getElementIDForHostInstance: GetElementIDForHostInstance,
getDisplayNameForElementID: GetDisplayNameForElementID,
getInstanceAndStyle(id: number): InstanceAndStyle,
getProfilingData(): ProfilingDataBackend,
packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js
Vendored
+4 -3
View File
@@ -8,6 +8,7 @@
*/
import type Agent from 'react-devtools-shared/src/backend/agent';
import type {HostInstance} from '../../types';
import {isReactNativeEnvironment} from 'react-devtools-shared/src/backend/utils';
@@ -37,7 +38,7 @@ export function hideOverlay(agent: Agent): void {
: hideOverlayWeb();
}
function showOverlayNative(elements: Array<HTMLElement>, agent: Agent): void {
function showOverlayNative(elements: Array<HostInstance>, agent: Agent): void {
agent.emit('showNativeHighlight', elements);
}
@@ -63,12 +64,12 @@ function showOverlayWeb(
}
export function showOverlay(
elements: Array<HTMLElement>,
elements: Array<HostInstance>,
componentName: string | null,
agent: Agent,
hideAfterTimeout: boolean,
): void {
return isReactNativeEnvironment()
? showOverlayNative(elements, agent)
: showOverlayWeb(elements, componentName, agent, hideAfterTimeout);
: showOverlayWeb((elements: any), componentName, agent, hideAfterTimeout);
}
packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js
Vendored
+1 -1
View File
@@ -236,7 +236,7 @@ export default class Overlay {
const rendererInterface =
this.agent.getBestMatchingRendererInterface(node);
if (rendererInterface) {
const id = rendererInterface.getElementIDForNative(node, true);
const id = rendererInterface.getElementIDForHostInstance(node, true);
if (id) {
const ownerName = rendererInterface.getDisplayNameForElementID(
id,
packages/react-devtools-shared/src/backend/views/Highlighter/index.js
Vendored
+18 -21
View File
@@ -13,6 +13,7 @@ import Agent from 'react-devtools-shared/src/backend/agent';
import {hideOverlay, showOverlay} from './Highlighter';
import type {BackendBridge} from 'react-devtools-shared/src/bridge';
import type {HostInstance} from '../../types';
// This plug-in provides in-page highlighting of the selected element.
// It is used by the browser extension and the standalone DevTools shell (when connected to a browser).
@@ -25,16 +26,13 @@ export default function setupHighlighter(
bridge: BackendBridge,
agent: Agent,
): void {
bridge.addListener(
'clearNativeElementHighlight',
clearNativeElementHighlight,
);
bridge.addListener('highlightNativeElement', highlightNativeElement);
bridge.addListener('shutdown', stopInspectingNative);
bridge.addListener('startInspectingNative', startInspectingNative);
bridge.addListener('stopInspectingNative', stopInspectingNative);
bridge.addListener('clearHostInstanceHighlight', clearHostInstanceHighlight);
bridge.addListener('highlightHostInstance', highlightHostInstance);
bridge.addListener('shutdown', stopInspectingHost);
bridge.addListener('startInspectingHost', startInspectingHost);
bridge.addListener('stopInspectingHost', stopInspectingHost);
function startInspectingNative() {
function startInspectingHost() {
registerListenersOnWindow(window);
}
@@ -53,7 +51,7 @@ export default function setupHighlighter(
}
}
function stopInspectingNative() {
function stopInspectingHost() {
hideOverlay(agent);
removeListenersOnWindow(window);
iframesListeningTo.forEach(function (frame) {
@@ -81,22 +79,22 @@ export default function setupHighlighter(
}
}
function clearNativeElementHighlight() {
function clearHostInstanceHighlight() {
hideOverlay(agent);
}
function highlightNativeElement({
function highlightHostInstance({
displayName,
hideAfterTimeout,
id,
openNativeElementsPanel,
openBuiltinElementsPanel,
rendererID,
scrollIntoView,
}: {
displayName: string | null,
hideAfterTimeout: boolean,
id: number,
openNativeElementsPanel: boolean,
openBuiltinElementsPanel: boolean,
rendererID: number,
scrollIntoView: boolean,
...
@@ -115,9 +113,8 @@ export default function setupHighlighter(
return;
}
const nodes: ?Array<HTMLElement> = (renderer.findNativeNodesForElementID(
id,
): any);
const nodes: ?Array<HostInstance> =
renderer.findHostInstancesForElementID(id);
if (nodes != null && nodes[0] != null) {
const node = nodes[0];
@@ -130,9 +127,9 @@ export default function setupHighlighter(
showOverlay(nodes, displayName, agent, hideAfterTimeout);
if (openNativeElementsPanel) {
if (openBuiltinElementsPanel) {
window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = node;
bridge.send('syncSelectionToNativeElementsPanel');
bridge.send('syncSelectionToBuiltinElementsPanel');
}
} else {
hideOverlay(agent);
@@ -143,9 +140,9 @@ export default function setupHighlighter(
event.preventDefault();
event.stopPropagation();
stopInspectingNative();
stopInspectingHost();
bridge.send('stopInspectingNative', true);
bridge.send('stopInspectingHost', true);
}
function onMouseEvent(event: MouseEvent) {
packages/react-devtools-shared/src/backend/views/TraceUpdates/canvas.js
Vendored
+6 -6
View File
@@ -9,7 +9,7 @@
import type {Data} from './index';
import type {Rect} from '../utils';
import type {NativeType} from '../../types';
import type {HostInstance} from '../../types';
import type Agent from '../../agent';
import {isReactNativeEnvironment} from 'react-devtools-shared/src/backend/utils';
@@ -32,7 +32,7 @@ const COLORS = [
let canvas: HTMLCanvasElement | null = null;
function drawNative(nodeToData: Map<NativeType, Data>, agent: Agent) {
function drawNative(nodeToData: Map<HostInstance, Data>, agent: Agent) {
const nodesToDraw = [];
iterateNodes(nodeToData, (_, color, node) => {
nodesToDraw.push({node, color});
@@ -41,7 +41,7 @@ function drawNative(nodeToData: Map<NativeType, Data>, agent: Agent) {
agent.emit('drawTraceUpdates', nodesToDraw);
}
function drawWeb(nodeToData: Map<NativeType, Data>) {
function drawWeb(nodeToData: Map<HostInstance, Data>) {
if (canvas === null) {
initialize();
}
@@ -59,15 +59,15 @@ function drawWeb(nodeToData: Map<NativeType, Data>) {
});
}
export function draw(nodeToData: Map<NativeType, Data>, agent: Agent): void {
export function draw(nodeToData: Map<HostInstance, Data>, agent: Agent): void {
return isReactNativeEnvironment()
? drawNative(nodeToData, agent)
: drawWeb(nodeToData);
}
function iterateNodes(
nodeToData: Map<NativeType, Data>,
execute: (rect: Rect | null, color: string, node: NativeType) => void,
nodeToData: Map<HostInstance, Data>,
execute: (rect: Rect | null, color: string, node: HostInstance) => void,
) {
nodeToData.forEach(({count, rect}, node) => {
const colorIndex = Math.min(COLORS.length - 1, count - 1);
packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js
Vendored
+3 -3
View File
@@ -11,7 +11,7 @@ import Agent from 'react-devtools-shared/src/backend/agent';
import {destroy as destroyCanvas, draw} from './canvas';
import {getNestedBoundingClientRect} from '../utils';
import type {NativeType} from '../../types';
import type {HostInstance} from '../../types';
import type {Rect} from '../utils';
// How long the rect should be shown for?
@@ -38,7 +38,7 @@ export type Data = {
rect: Rect | null,
};
const nodeToData: Map<NativeType, Data> = new Map();
const nodeToData: Map<HostInstance, Data> = new Map();
let agent: Agent = ((null: any): Agent);
let drawAnimationFrameID: AnimationFrameID | null = null;
@@ -70,7 +70,7 @@ export function toggleEnabled(value: boolean): void {
}
}
function traceUpdates(nodes: Set<NativeType>): void {
function traceUpdates(nodes: Set<HostInstance>): void {
if (!isEnabled) {
return;
}
packages/react-devtools-shared/src/backend/views/utils.js
Vendored
+1 -1
View File
@@ -108,7 +108,7 @@ export function getNestedBoundingClientRect(
}
}
export function getElementDimensions(domElement: Element): {
export function getElementDimensions(domElement: HTMLElement): {
borderBottom: number,
borderLeft: number,
borderRight: number,
packages/react-devtools-shared/src/bridge.js
Vendored
+9 -9
View File
@@ -80,11 +80,11 @@ type Message = {
payload: any,
};
type HighlightElementInDOM = {
type HighlightHostInstance = {
...ElementAndRendererID,
displayName: string | null,
hideAfterTimeout: boolean,
openNativeElementsPanel: boolean,
openBuiltinElementsPanel: boolean,
scrollIntoView: boolean,
};
@@ -197,9 +197,9 @@ export type BackendEvents = {
saveToClipboard: [string],
selectElement: [number],
shutdown: [],
stopInspectingNative: [boolean],
syncSelectionFromNativeElementsPanel: [],
syncSelectionToNativeElementsPanel: [],
stopInspectingHost: [boolean],
syncSelectionFromBuiltinElementsPanel: [],
syncSelectionToBuiltinElementsPanel: [],
unsupportedRendererVersion: [RendererID],
// React Native style editor plug-in.
@@ -212,7 +212,7 @@ export type BackendEvents = {
type FrontendEvents = {
clearErrorsAndWarnings: [{rendererID: RendererID}],
clearErrorsForElementID: [ElementAndRendererID],
clearNativeElementHighlight: [],
clearHostInstanceHighlight: [],
clearWarningsForElementID: [ElementAndRendererID],
copyElementPath: [CopyElementPathParams],
deletePath: [DeletePath],
@@ -221,7 +221,7 @@ type FrontendEvents = {
getOwnersList: [ElementAndRendererID],
getProfilingData: [{rendererID: RendererID}],
getProfilingStatus: [],
highlightNativeElement: [HighlightElementInDOM],
highlightHostInstance: [HighlightHostInstance],
inspectElement: [InspectElementParams],
logElementToConsole: [ElementAndRendererID],
overrideError: [OverrideError],
@@ -233,9 +233,9 @@ type FrontendEvents = {
savedPreferences: [SavedPreferencesParams],
setTraceUpdatesEnabled: [boolean],
shutdown: [],
startInspectingNative: [],
startInspectingHost: [],
startProfiling: [boolean],
stopInspectingNative: [boolean],
stopInspectingHost: [boolean],
stopProfiling: [],
storeAsGlobal: [StoreAsGlobalParams],
updateComponentFilters: [Array<ComponentFilter>],
packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js
Vendored
+5 -5
View File
@@ -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
Vendored
+2 -2
View File
@@ -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
Vendored
+5 -5
View File
@@ -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
Vendored
+12 -12
View File
@@ -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
Vendored
+7 -7
View File
@@ -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
Vendored
+7 -7
View File
@@ -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
Vendored
+10 -10
View File
@@ -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,
};
}