@samitouri / QOS-React / commits / 33e54fa252

[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".

Sebastian Markbåge committed Jul 30, 2024 at 09:12 UTC 33e54fa252b9dbe7553ef42a2287c3dbbd4f035d
22 files changed +145 -145
packages/react-devtools-extensions/src/main/elementSelection.js
+1 -1
@@ -35,7 +35,7 @@ export function setReactSelectionFromBrowser(bridge) {
35 }
36
37 // Remember to sync the selection next time we show Components tab.
38 - bridge.send('syncSelectionFromNativeElementsPanel');
38 + bridge.send('syncSelectionFromBuiltinElementsPanel');
39 }
40 },
41 );
packages/react-devtools-extensions/src/main/index.js
+1 -1
@@ -58,7 +58,7 @@ function createBridge() {
58 });
59
60 bridge.addListener(
61 - 'syncSelectionToNativeElementsPanel',
61 + 'syncSelectionToBuiltinElementsPanel',
62 setBrowserSelectionFromReact,
63 );
64
packages/react-devtools-shared/src/backend/agent.js
+11 -11
@@ -31,7 +31,7 @@ import {currentBridgeProtocol} from 'react-devtools-shared/src/bridge';
31 import type {BackendBridge} from 'react-devtools-shared/src/bridge';
32 import type {
33 InstanceAndStyle,
34 - NativeType,
34 + HostInstance,
35 OwnersList,
36 PathFrame,
37 PathMatch,
@@ -146,12 +146,12 @@ type PersistedSelection = {
146
147 export default class Agent extends EventEmitter<{
148 hideNativeHighlight: [],
149 - showNativeHighlight: [NativeType],
149 + showNativeHighlight: [HostInstance],
150 startInspectingNative: [],
151 stopInspectingNative: [],
152 shutdown: [],
153 - traceUpdates: [Set<NativeType>],
154 - drawTraceUpdates: [Array<NativeType>],
153 + traceUpdates: [Set<HostInstance>],
154 + drawTraceUpdates: [Array<HostInstance>],
155 disableTraceUpdates: [],
156 }> {
157 _bridge: BackendBridge;
@@ -212,8 +212,8 @@ export default class Agent extends EventEmitter<{
212 bridge.addListener('stopProfiling', this.stopProfiling);
213 bridge.addListener('storeAsGlobal', this.storeAsGlobal);
214 bridge.addListener(
215 - 'syncSelectionFromNativeElementsPanel',
216 - this.syncSelectionFromNativeElementsPanel,
215 + 'syncSelectionFromBuiltinElementsPanel',
216 + this.syncSelectionFromBuiltinElementsPanel,
217 );
218 bridge.addListener('shutdown', this.shutdown);
219 bridge.addListener(
@@ -367,7 +367,7 @@ export default class Agent extends EventEmitter<{
367 const rendererInterface = this.getBestMatchingRendererInterface(node);
368 if (rendererInterface != null) {
369 try {
370 - return rendererInterface.getElementIDForNative(node, true);
370 + return rendererInterface.getElementIDForHostInstance(node, true);
371 } catch (error) {
372 // Some old React versions might throw if they can't find a match.
373 // If so we should ignore it...
@@ -439,7 +439,7 @@ export default class Agent extends EventEmitter<{
439 }
440
441 // TODO: If there was a way to change the selected DOM element
442 - // in native Elements tab without forcing a switch to it, we'd do it here.
442 + // in built-in Elements tab without forcing a switch to it, we'd do it here.
443 // For now, it doesn't seem like there is a way to do that:
444 // https://github.com/bvaughn/react-devtools-experimental/issues/102
445 // (Setting $0 doesn't work, and calling inspect() switches the tab.)
@@ -658,7 +658,7 @@ export default class Agent extends EventEmitter<{
658 }
659 };
660
661 - syncSelectionFromNativeElementsPanel: () => void = () => {
661 + syncSelectionFromBuiltinElementsPanel: () => void = () => {
662 const target = window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0;
663 if (target == null) {
664 return;
@@ -697,7 +697,7 @@ export default class Agent extends EventEmitter<{
697 };
698
699 stopInspectingNative: (selected: boolean) => void = selected => {
700 - this._bridge.send('stopInspectingNative', selected);
700 + this._bridge.send('stopInspectingHost', selected);
701 };
702
703 storeAsGlobal: StoreAsGlobalParams => void = ({
@@ -768,7 +768,7 @@ export default class Agent extends EventEmitter<{
768 }
769 };
770
771 - onTraceUpdates: (nodes: Set<NativeType>) => void = nodes => {
771 + onTraceUpdates: (nodes: Set<HostInstance>) => void = nodes => {
772 this.emit('traceUpdates', nodes);
773 };
774
packages/react-devtools-shared/src/backend/console.js
+2 -2
@@ -30,7 +30,7 @@ import {
30 getStackByFiberInDevAndProd,
31 getOwnerStackByFiberInDev,
32 supportsOwnerStacks,
33 - supportsNativeConsoleTasks,
33 + supportsConsoleTasks,
34 } from './fiber/DevToolsFiberComponentStack';
35 import {formatOwnerStack} from './shared/DevToolsOwnerStack';
36 import {castBool, castBrowserTheme} from '../utils';
@@ -251,7 +251,7 @@ export function patch({
251
252 if (
253 consoleSettingsRef.appendComponentStack &&
254 - !supportsNativeConsoleTasks(current)
254 + !supportsConsoleTasks(current)
255 ) {
256 const enableOwnerStacks = supportsOwnerStacks(current);
257 let componentStack = '';
packages/react-devtools-shared/src/backend/fiber/DevToolsFiberComponentStack.js
+1 -1
@@ -108,7 +108,7 @@ export function getStackByFiberInDevAndProd(
108 }
109 }
110
111 -export function supportsNativeConsoleTasks(fiber: Fiber): boolean {
111 +export function supportsConsoleTasks(fiber: Fiber): boolean {
112 // If this Fiber supports native console.createTask then we are already running
113 // inside a native async stack trace if it's active - meaning the DevTools is open.
114 // 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
+11 -11
@@ -111,7 +111,7 @@ import type {
111 InspectedElement,
112 InspectedElementPayload,
113 InstanceAndStyle,
114 - NativeType,
114 + HostInstance,
115 PathFrame,
116 PathMatch,
117 ProfilingDataBackend,
@@ -937,7 +937,7 @@ export function attach(
937
938 // Highlight updates
939 let traceUpdatesEnabled: boolean = false;
940 - const traceUpdatesForNodes: Set<NativeType> = new Set();
940 + const traceUpdatesForNodes: Set<HostInstance> = new Set();
941
942 function applyComponentFilters(componentFilters: Array<ComponentFilter>) {
943 hideElementsWithTypes.clear();
@@ -2862,7 +2862,7 @@ export function attach(
2862 return fibers;
2863 }
2864
2865 - function findNativeNodesForElementID(id: number) {
2865 + function findHostInstancesForElementID(id: number) {
2866 try {
2867 const fiber = findCurrentFiberUsingSlowPathById(id);
2868 if (fiber === null) {
@@ -2882,12 +2882,12 @@ export function attach(
2882 return fiber != null ? getDisplayNameForFiber(fiber) : null;
2883 }
2884
2885 - function getFiberForNative(hostInstance: NativeType) {
2885 + function getFiberForNative(hostInstance: HostInstance) {
2886 return renderer.findFiberByHostInstance(hostInstance);
2887 }
2888
2889 - function getElementIDForNative(
2890 - hostInstance: NativeType,
2889 + function getElementIDForHostInstance(
2890 + hostInstance: HostInstance,
2891 findNearestUnfilteredAncestor: boolean = false,
2892 ) {
2893 let fiber = renderer.findFiberByHostInstance(hostInstance);
@@ -3870,9 +3870,9 @@ export function attach(
3870 if (result.hooks !== null) {
3871 console.log('Hooks:', result.hooks);
3872 }
3873 - const nativeNodes = findNativeNodesForElementID(id);
3874 - if (nativeNodes !== null) {
3875 - console.log('Nodes:', nativeNodes);
3873 + const hostInstances = findHostInstancesForElementID(id);
3874 + if (hostInstances !== null) {
3875 + console.log('Nodes:', hostInstances);
3876 }
3877 if (window.chrome || /firefox/i.test(navigator.userAgent)) {
3878 console.log(
@@ -4655,12 +4655,12 @@ export function attach(
4655 clearWarningsForElementID,
4656 getSerializedElementValueByPath,
4657 deletePath,
4658 - findNativeNodesForElementID,
4658 + findHostInstancesForElementID,
4659 flushInitialOperations,
4660 getBestMatchForTrackedPath,
4661 getDisplayNameForElementID,
4662 getFiberForNative,
4663 - getElementIDForNative,
4663 + getElementIDForHostInstance,
4664 getInstanceAndStyle,
4665 getOwnersList,
4666 getPathForElement,
packages/react-devtools-shared/src/backend/legacy/renderer.js
+18 -18
@@ -39,10 +39,10 @@ import {decorateMany, forceUpdate, restoreMany} from './utils';
39
40 import type {
41 DevToolsHook,
42 - GetElementIDForNative,
42 + GetElementIDForHostInstance,
43 InspectedElementPayload,
44 InstanceAndStyle,
45 - NativeType,
45 + HostInstance,
46 PathFrame,
47 PathMatch,
48 RendererInterface,
@@ -142,33 +142,33 @@ export function attach(
142 const internalInstanceToRootIDMap: WeakMap<InternalInstance, number> =
143 new WeakMap();
144
145 - let getInternalIDForNative: GetElementIDForNative =
146 - ((null: any): GetElementIDForNative);
147 - let findNativeNodeForInternalID: (id: number) => ?NativeType;
148 - let getFiberForNative = (node: NativeType) => {
145 + let getElementIDForHostInstance: GetElementIDForHostInstance =
146 + ((null: any): GetElementIDForHostInstance);
147 + let findHostInstanceForInternalID: (id: number) => ?HostInstance;
148 + let getFiberForNative = (node: HostInstance) => {
149 // Not implemented.
150 return null;
151 };
152
153 if (renderer.ComponentTree) {
154 - getInternalIDForNative = (node, findNearestUnfilteredAncestor) => {
154 + getElementIDForHostInstance = (node, findNearestUnfilteredAncestor) => {
155 const internalInstance =
156 renderer.ComponentTree.getClosestInstanceFromNode(node);
157 return internalInstanceToIDMap.get(internalInstance) || null;
158 };
159 - findNativeNodeForInternalID = (id: number) => {
159 + findHostInstanceForInternalID = (id: number) => {
160 const internalInstance = idToInternalInstanceMap.get(id);
161 return renderer.ComponentTree.getNodeFromInstance(internalInstance);
162 };
163 - getFiberForNative = (node: NativeType) => {
163 + getFiberForNative = (node: HostInstance) => {
164 return renderer.ComponentTree.getClosestInstanceFromNode(node);
165 };
166 } else if (renderer.Mount.getID && renderer.Mount.getNode) {
167 - getInternalIDForNative = (node, findNearestUnfilteredAncestor) => {
167 + getElementIDForHostInstance = (node, findNearestUnfilteredAncestor) => {
168 // Not implemented.
169 return null;
170 };
171 - findNativeNodeForInternalID = (id: number) => {
171 + findHostInstanceForInternalID = (id: number) => {
172 // Not implemented.
173 return null;
174 };
@@ -884,9 +884,9 @@ export function attach(
884 if (result.context !== null) {
885 console.log('Context:', result.context);
886 }
887 - const nativeNode = findNativeNodeForInternalID(id);
888 - if (nativeNode !== null) {
889 - console.log('Node:', nativeNode);
887 + const hostInstance = findHostInstanceForInternalID(id);
888 + if (hostInstance !== null) {
889 + console.log('Node:', hostInstance);
890 }
891 if (window.chrome || /firefox/i.test(navigator.userAgent)) {
892 console.log(
@@ -1112,11 +1112,11 @@ export function attach(
1112 getBestMatchForTrackedPath,
1113 getDisplayNameForElementID,
1114 getFiberForNative,
1115 - getElementIDForNative: getInternalIDForNative,
1115 + getElementIDForHostInstance,
1116 getInstanceAndStyle,
1117 - findNativeNodesForElementID: (id: number) => {
1118 - const nativeNode = findNativeNodeForInternalID(id);
1119 - return nativeNode == null ? null : [nativeNode];
1117 + findHostInstancesForElementID: (id: number) => {
1118 + const hostInstance = findHostInstanceForInternalID(id);
1119 + return hostInstance == null ? null : [hostInstance];
1120 },
1121 getOwnersList,
1122 getPathForElement,
packages/react-devtools-shared/src/backend/types.js
+10 -8
@@ -75,7 +75,7 @@ export type WorkTagMap = {
75 Throw: WorkTag,
76 };
77
78 -export type NativeType = Object;
78 +export type HostInstance = Object;
79 export type RendererID = number;
80
81 type Dispatcher = any;
@@ -91,11 +91,13 @@ export type GetDisplayNameForElementID = (
91 findNearestUnfilteredAncestor?: boolean,
92 ) => string | null;
93
94 -export type GetElementIDForNative = (
95 - component: NativeType,
94 +export type GetElementIDForHostInstance = (
95 + component: HostInstance,
96 findNearestUnfilteredAncestor?: boolean,
97 ) => number | null;
98 -export type FindNativeNodesForFiberID = (id: number) => ?Array<NativeType>;
98 +export type FindHostInstancesForElementID = (
99 + id: number,
100 +) => ?Array<HostInstance>;
101
102 export type ReactProviderType<T> = {
103 $$typeof: symbol | number,
@@ -107,7 +109,7 @@ export type Lane = number;
109 export type Lanes = number;
110
111 export type ReactRenderer = {
110 - findFiberByHostInstance: (hostInstance: NativeType) => Fiber | null,
112 + findFiberByHostInstance: (hostInstance: HostInstance) => Fiber | null,
113 version: string,
114 rendererPackageName: string,
115 bundleType: BundleType,
@@ -358,11 +360,11 @@ export type RendererInterface = {
360 hookID: ?number,
361 path: Array<string | number>,
362 ) => void,
361 - findNativeNodesForElementID: FindNativeNodesForFiberID,
363 + findHostInstancesForElementID: FindHostInstancesForElementID,
364 flushInitialOperations: () => void,
365 getBestMatchForTrackedPath: () => PathMatch | null,
364 - getFiberForNative: (component: NativeType) => Fiber | null,
365 - getElementIDForNative: GetElementIDForNative,
366 + getFiberForNative: (component: HostInstance) => Fiber | null,
367 + getElementIDForHostInstance: GetElementIDForHostInstance,
368 getDisplayNameForElementID: GetDisplayNameForElementID,
369 getInstanceAndStyle(id: number): InstanceAndStyle,
370 getProfilingData(): ProfilingDataBackend,
packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js
+4 -3
@@ -8,6 +8,7 @@
8 */
9
10 import type Agent from 'react-devtools-shared/src/backend/agent';
11 +import type {HostInstance} from '../../types';
12
13 import {isReactNativeEnvironment} from 'react-devtools-shared/src/backend/utils';
14
@@ -37,7 +38,7 @@ export function hideOverlay(agent: Agent): void {
38 : hideOverlayWeb();
39 }
40
40 -function showOverlayNative(elements: Array<HTMLElement>, agent: Agent): void {
41 +function showOverlayNative(elements: Array<HostInstance>, agent: Agent): void {
42 agent.emit('showNativeHighlight', elements);
43 }
44
@@ -63,12 +64,12 @@ function showOverlayWeb(
64 }
65
66 export function showOverlay(
66 - elements: Array<HTMLElement>,
67 + elements: Array<HostInstance>,
68 componentName: string | null,
69 agent: Agent,
70 hideAfterTimeout: boolean,
71 ): void {
72 return isReactNativeEnvironment()
73 ? showOverlayNative(elements, agent)
73 - : showOverlayWeb(elements, componentName, agent, hideAfterTimeout);
74 + : showOverlayWeb((elements: any), componentName, agent, hideAfterTimeout);
75 }
packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js
+1 -1
@@ -236,7 +236,7 @@ export default class Overlay {
236 const rendererInterface =
237 this.agent.getBestMatchingRendererInterface(node);
238 if (rendererInterface) {
239 - const id = rendererInterface.getElementIDForNative(node, true);
239 + const id = rendererInterface.getElementIDForHostInstance(node, true);
240 if (id) {
241 const ownerName = rendererInterface.getDisplayNameForElementID(
242 id,
packages/react-devtools-shared/src/backend/views/Highlighter/index.js
+18 -21
@@ -13,6 +13,7 @@ import Agent from 'react-devtools-shared/src/backend/agent';
13 import {hideOverlay, showOverlay} from './Highlighter';
14
15 import type {BackendBridge} from 'react-devtools-shared/src/bridge';
16 +import type {HostInstance} from '../../types';
17
18 // This plug-in provides in-page highlighting of the selected element.
19 // 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(
26 bridge: BackendBridge,
27 agent: Agent,
28 ): void {
28 - bridge.addListener(
29 - 'clearNativeElementHighlight',
30 - clearNativeElementHighlight,
31 - );
32 - bridge.addListener('highlightNativeElement', highlightNativeElement);
33 - bridge.addListener('shutdown', stopInspectingNative);
34 - bridge.addListener('startInspectingNative', startInspectingNative);
35 - bridge.addListener('stopInspectingNative', stopInspectingNative);
29 + bridge.addListener('clearHostInstanceHighlight', clearHostInstanceHighlight);
30 + bridge.addListener('highlightHostInstance', highlightHostInstance);
31 + bridge.addListener('shutdown', stopInspectingHost);
32 + bridge.addListener('startInspectingHost', startInspectingHost);
33 + bridge.addListener('stopInspectingHost', stopInspectingHost);
34
37 - function startInspectingNative() {
35 + function startInspectingHost() {
36 registerListenersOnWindow(window);
37 }
38
@@ -53,7 +51,7 @@ export default function setupHighlighter(
51 }
52 }
53
56 - function stopInspectingNative() {
54 + function stopInspectingHost() {
55 hideOverlay(agent);
56 removeListenersOnWindow(window);
57 iframesListeningTo.forEach(function (frame) {
@@ -81,22 +79,22 @@ export default function setupHighlighter(
79 }
80 }
81
84 - function clearNativeElementHighlight() {
82 + function clearHostInstanceHighlight() {
83 hideOverlay(agent);
84 }
85
88 - function highlightNativeElement({
86 + function highlightHostInstance({
87 displayName,
88 hideAfterTimeout,
89 id,
92 - openNativeElementsPanel,
90 + openBuiltinElementsPanel,
91 rendererID,
92 scrollIntoView,
93 }: {
94 displayName: string | null,
95 hideAfterTimeout: boolean,
96 id: number,
99 - openNativeElementsPanel: boolean,
97 + openBuiltinElementsPanel: boolean,
98 rendererID: number,
99 scrollIntoView: boolean,
100 ...
@@ -115,9 +113,8 @@ export default function setupHighlighter(
113 return;
114 }
115
118 - const nodes: ?Array<HTMLElement> = (renderer.findNativeNodesForElementID(
119 - id,
120 - ): any);
116 + const nodes: ?Array<HostInstance> =
117 + renderer.findHostInstancesForElementID(id);
118
119 if (nodes != null && nodes[0] != null) {
120 const node = nodes[0];
@@ -130,9 +127,9 @@ export default function setupHighlighter(
127
128 showOverlay(nodes, displayName, agent, hideAfterTimeout);
129
133 - if (openNativeElementsPanel) {
130 + if (openBuiltinElementsPanel) {
131 window.__REACT_DEVTOOLS_GLOBAL_HOOK__.$0 = node;
135 - bridge.send('syncSelectionToNativeElementsPanel');
132 + bridge.send('syncSelectionToBuiltinElementsPanel');
133 }
134 } else {
135 hideOverlay(agent);
@@ -143,9 +140,9 @@ export default function setupHighlighter(
140 event.preventDefault();
141 event.stopPropagation();
142
146 - stopInspectingNative();
143 + stopInspectingHost();
144
148 - bridge.send('stopInspectingNative', true);
145 + bridge.send('stopInspectingHost', true);
146 }
147
148 function onMouseEvent(event: MouseEvent) {
packages/react-devtools-shared/src/backend/views/TraceUpdates/canvas.js
+6 -6
@@ -9,7 +9,7 @@
9
10 import type {Data} from './index';
11 import type {Rect} from '../utils';
12 -import type {NativeType} from '../../types';
12 +import type {HostInstance} from '../../types';
13 import type Agent from '../../agent';
14
15 import {isReactNativeEnvironment} from 'react-devtools-shared/src/backend/utils';
@@ -32,7 +32,7 @@ const COLORS = [
32
33 let canvas: HTMLCanvasElement | null = null;
34
35 -function drawNative(nodeToData: Map<NativeType, Data>, agent: Agent) {
35 +function drawNative(nodeToData: Map<HostInstance, Data>, agent: Agent) {
36 const nodesToDraw = [];
37 iterateNodes(nodeToData, (_, color, node) => {
38 nodesToDraw.push({node, color});
@@ -41,7 +41,7 @@ function drawNative(nodeToData: Map<NativeType, Data>, agent: Agent) {
41 agent.emit('drawTraceUpdates', nodesToDraw);
42 }
43
44 -function drawWeb(nodeToData: Map<NativeType, Data>) {
44 +function drawWeb(nodeToData: Map<HostInstance, Data>) {
45 if (canvas === null) {
46 initialize();
47 }
@@ -59,15 +59,15 @@ function drawWeb(nodeToData: Map<NativeType, Data>) {
59 });
60 }
61
62 -export function draw(nodeToData: Map<NativeType, Data>, agent: Agent): void {
62 +export function draw(nodeToData: Map<HostInstance, Data>, agent: Agent): void {
63 return isReactNativeEnvironment()
64 ? drawNative(nodeToData, agent)
65 : drawWeb(nodeToData);
66 }
67
68 function iterateNodes(
69 - nodeToData: Map<NativeType, Data>,
70 - execute: (rect: Rect | null, color: string, node: NativeType) => void,
69 + nodeToData: Map<HostInstance, Data>,
70 + execute: (rect: Rect | null, color: string, node: HostInstance) => void,
71 ) {
72 nodeToData.forEach(({count, rect}, node) => {
73 const colorIndex = Math.min(COLORS.length - 1, count - 1);
packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js
+3 -3
@@ -11,7 +11,7 @@ import Agent from 'react-devtools-shared/src/backend/agent';
11 import {destroy as destroyCanvas, draw} from './canvas';
12 import {getNestedBoundingClientRect} from '../utils';
13
14 -import type {NativeType} from '../../types';
14 +import type {HostInstance} from '../../types';
15 import type {Rect} from '../utils';
16
17 // How long the rect should be shown for?
@@ -38,7 +38,7 @@ export type Data = {
38 rect: Rect | null,
39 };
40
41 -const nodeToData: Map<NativeType, Data> = new Map();
41 +const nodeToData: Map<HostInstance, Data> = new Map();
42
43 let agent: Agent = ((null: any): Agent);
44 let drawAnimationFrameID: AnimationFrameID | null = null;
@@ -70,7 +70,7 @@ export function toggleEnabled(value: boolean): void {
70 }
71 }
72
73 -function traceUpdates(nodes: Set<NativeType>): void {
73 +function traceUpdates(nodes: Set<HostInstance>): void {
74 if (!isEnabled) {
75 return;
76 }
packages/react-devtools-shared/src/backend/views/utils.js
+1 -1
@@ -108,7 +108,7 @@ export function getNestedBoundingClientRect(
108 }
109 }
110
111 -export function getElementDimensions(domElement: Element): {
111 +export function getElementDimensions(domElement: HTMLElement): {
112 borderBottom: number,
113 borderLeft: number,
114 borderRight: number,
packages/react-devtools-shared/src/bridge.js
+9 -9
@@ -80,11 +80,11 @@ type Message = {
80 payload: any,
81 };
82
83 -type HighlightElementInDOM = {
83 +type HighlightHostInstance = {
84 ...ElementAndRendererID,
85 displayName: string | null,
86 hideAfterTimeout: boolean,
87 - openNativeElementsPanel: boolean,
87 + openBuiltinElementsPanel: boolean,
88 scrollIntoView: boolean,
89 };
90
@@ -197,9 +197,9 @@ export type BackendEvents = {
197 saveToClipboard: [string],
198 selectElement: [number],
199 shutdown: [],
200 - stopInspectingNative: [boolean],
201 - syncSelectionFromNativeElementsPanel: [],
202 - syncSelectionToNativeElementsPanel: [],
200 + stopInspectingHost: [boolean],
201 + syncSelectionFromBuiltinElementsPanel: [],
202 + syncSelectionToBuiltinElementsPanel: [],
203 unsupportedRendererVersion: [RendererID],
204
205 // React Native style editor plug-in.
@@ -212,7 +212,7 @@ export type BackendEvents = {
212 type FrontendEvents = {
213 clearErrorsAndWarnings: [{rendererID: RendererID}],
214 clearErrorsForElementID: [ElementAndRendererID],
215 - clearNativeElementHighlight: [],
215 + clearHostInstanceHighlight: [],
216 clearWarningsForElementID: [ElementAndRendererID],
217 copyElementPath: [CopyElementPathParams],
218 deletePath: [DeletePath],
@@ -221,7 +221,7 @@ type FrontendEvents = {
221 getOwnersList: [ElementAndRendererID],
222 getProfilingData: [{rendererID: RendererID}],
223 getProfilingStatus: [],
224 - highlightNativeElement: [HighlightElementInDOM],
224 + highlightHostInstance: [HighlightHostInstance],
225 inspectElement: [InspectElementParams],
226 logElementToConsole: [ElementAndRendererID],
227 overrideError: [OverrideError],
@@ -233,9 +233,9 @@ type FrontendEvents = {
233 savedPreferences: [SavedPreferencesParams],
234 setTraceUpdatesEnabled: [boolean],
235 shutdown: [],
236 - startInspectingNative: [],
236 + startInspectingHost: [],
237 startProfiling: [boolean],
238 - stopInspectingNative: [boolean],
238 + stopInspectingHost: [boolean],
239 stopProfiling: [],
240 storeAsGlobal: [StoreAsGlobalParams],
241 updateComponentFilters: [Array<ComponentFilter>],
packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js
+5 -5
@@ -24,19 +24,19 @@ export default function InspectHostNodesToggle(): React.Node {
24
25 if (isChecked) {
26 logEvent({event_name: 'inspect-element-button-clicked'});
27 - bridge.send('startInspectingNative');
27 + bridge.send('startInspectingHost');
28 } else {
29 - bridge.send('stopInspectingNative', false);
29 + bridge.send('stopInspectingHost', false);
30 }
31 },
32 [bridge],
33 );
34
35 useEffect(() => {
36 - const onStopInspectingNative = () => setIsInspecting(false);
37 - bridge.addListener('stopInspectingNative', onStopInspectingNative);
36 + const onStopInspectingHost = () => setIsInspecting(false);
37 + bridge.addListener('stopInspectingHost', onStopInspectingHost);
38 return () =>
39 - bridge.removeListener('stopInspectingNative', onStopInspectingNative);
39 + bridge.removeListener('stopInspectingHost', onStopInspectingHost);
40 }, [bridge]);
41
42 return (
packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js
+2 -2
@@ -80,11 +80,11 @@ export default function InspectedElementWrapper(_: Props): React.Node {
80 if (element !== null && inspectedElementID !== null) {
81 const rendererID = store.getRendererIDForElement(inspectedElementID);
82 if (rendererID !== null) {
83 - bridge.send('highlightNativeElement', {
83 + bridge.send('highlightHostInstance', {
84 displayName: element.displayName,
85 hideAfterTimeout: true,
86 id: inspectedElementID,
87 - openNativeElementsPanel: true,
87 + openBuiltinElementsPanel: true,
88 rendererID,
89 scrollIntoView: true,
90 });
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
+5 -5
@@ -22,7 +22,7 @@ import InspectedElementStyleXPlugin from './InspectedElementStyleXPlugin';
22 import InspectedElementSuspenseToggle from './InspectedElementSuspenseToggle';
23 import NativeStyleEditor from './NativeStyleEditor';
24 import ElementBadges from './ElementBadges';
25 -import {useHighlightNativeElement} from '../hooks';
25 +import {useHighlightHostInstance} from '../hooks';
26 import {enableStyleXFeatures} from 'react-devtools-feature-flags';
27 import {logEvent} from 'react-devtools-shared/src/Logger';
28 import InspectedElementSourcePanel from './InspectedElementSourcePanel';
@@ -188,8 +188,8 @@ function OwnerView({
188 isInStore,
189 }: OwnerViewProps) {
190 const dispatch = useContext(TreeDispatcherContext);
191 - const {highlightNativeElement, clearHighlightNativeElement} =
192 - useHighlightNativeElement();
191 + const {highlightHostInstance, clearHighlightHostInstance} =
192 + useHighlightHostInstance();
193
194 const handleClick = useCallback(() => {
195 logEvent({
@@ -208,8 +208,8 @@ function OwnerView({
208 className={styles.OwnerButton}
209 disabled={!isInStore}
210 onClick={handleClick}
211 - onMouseEnter={() => highlightNativeElement(id)}
212 - onMouseLeave={clearHighlightNativeElement}>
211 + onMouseEnter={() => highlightHostInstance(id)}
212 + onMouseLeave={clearHighlightHostInstance}>
213 <span className={styles.OwnerContent}>
214 <span
215 className={`${styles.Owner} ${isInStore ? '' : styles.NotInStore}`}
packages/react-devtools-shared/src/devtools/views/Components/Tree.js
+12 -12
@@ -31,7 +31,7 @@ import ComponentSearchInput from './ComponentSearchInput';
31 import SettingsModalContextToggle from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle';
32 import SelectedTreeHighlight from './SelectedTreeHighlight';
33 import TreeFocusedContext from './TreeFocusedContext';
34 -import {useHighlightNativeElement, useSubscription} from '../hooks';
34 +import {useHighlightHostInstance, useSubscription} from '../hooks';
35 import {clearErrorsAndWarnings as clearErrorsAndWarningsAPI} from 'react-devtools-shared/src/backendAPI';
36 import styles from './Tree.css';
37 import ButtonIcon from '../ButtonIcon';
@@ -66,8 +66,8 @@ export default function Tree(props: Props): React.Node {
66 const {hideSettings} = useContext(OptionsContext);
67 const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] =
68 useState(false);
69 - const {highlightNativeElement, clearHighlightNativeElement} =
70 - useHighlightNativeElement();
69 + const {highlightHostInstance, clearHighlightHostInstance} =
70 + useHighlightHostInstance();
71 const treeRef = useRef<HTMLDivElement | null>(null);
72 const focusTargetRef = useRef<HTMLDivElement | null>(null);
73
@@ -98,7 +98,7 @@ export default function Tree(props: Props): React.Node {
98 // Picking an element in the inspector should put focus into the tree.
99 // This ensures that keyboard navigation works right after picking a node.
100 useEffect(() => {
101 - function handleStopInspectingNative(didSelectNode: boolean) {
101 + function handleStopInspectingHost(didSelectNode: boolean) {
102 if (didSelectNode && focusTargetRef.current !== null) {
103 focusTargetRef.current.focus();
104 logEvent({
@@ -107,9 +107,9 @@ export default function Tree(props: Props): React.Node {
107 });
108 }
109 }
110 - bridge.addListener('stopInspectingNative', handleStopInspectingNative);
110 + bridge.addListener('stopInspectingHost', handleStopInspectingHost);
111 return () =>
112 - bridge.removeListener('stopInspectingNative', handleStopInspectingNative);
112 + bridge.removeListener('stopInspectingHost', handleStopInspectingHost);
113 }, [bridge]);
114
115 // This ref is passed down the context to elements.
@@ -256,15 +256,15 @@ export default function Tree(props: Props): React.Node {
256 }
257 if (isNavigatingWithKeyboard || didSelectNewSearchResult) {
258 if (selectedElementID !== null) {
259 - highlightNativeElement(selectedElementID);
259 + highlightHostInstance(selectedElementID);
260 } else {
261 - clearHighlightNativeElement();
261 + clearHighlightHostInstance();
262 }
263 }
264 }, [
265 bridge,
266 isNavigatingWithKeyboard,
267 - highlightNativeElement,
267 + highlightHostInstance,
268 searchIndex,
269 searchResults,
270 selectedElementID,
@@ -276,10 +276,10 @@ export default function Tree(props: Props): React.Node {
276 // Ignore hover while we're navigating with keyboard.
277 // This avoids flicker from the hovered nodes under the mouse.
278 if (!isNavigatingWithKeyboard) {
279 - highlightNativeElement(id);
279 + highlightHostInstance(id);
280 }
281 },
282 - [isNavigatingWithKeyboard, highlightNativeElement],
282 + [isNavigatingWithKeyboard, highlightHostInstance],
283 );
284
285 const handleMouseMove = useCallback(() => {
@@ -288,7 +288,7 @@ export default function Tree(props: Props): React.Node {
288 setIsNavigatingWithKeyboard(false);
289 }, []);
290
291 - const handleMouseLeave = clearHighlightNativeElement;
291 + const handleMouseLeave = clearHighlightHostInstance;
292
293 // Let react-window know to re-render any time the underlying tree data changes.
294 // This includes the owner context, since it controls a filtered view of the tree.
packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js
+7 -7
@@ -16,7 +16,7 @@ import NoCommitData from './NoCommitData';
16 import CommitFlamegraphListItem from './CommitFlamegraphListItem';
17 import HoveredFiberInfo from './HoveredFiberInfo';
18 import {scale} from './utils';
19 -import {useHighlightNativeElement} from '../hooks';
19 +import {useHighlightHostInstance} from '../hooks';
20 import {StoreContext} from '../context';
21 import {SettingsContext} from '../Settings/SettingsContext';
22 import Tooltip from './Tooltip';
@@ -101,8 +101,8 @@ function CommitFlamegraph({chartData, commitTree, height, width}: Props) {
101 useState<TooltipFiberData | null>(null);
102 const {lineHeight} = useContext(SettingsContext);
103 const {selectFiber, selectedFiberID} = useContext(ProfilerContext);
104 - const {highlightNativeElement, clearHighlightNativeElement} =
105 - useHighlightNativeElement();
104 + const {highlightHostInstance, clearHighlightHostInstance} =
105 + useHighlightHostInstance();
106
107 const selectedChartNodeIndex = useMemo<number>(() => {
108 if (selectedFiberID === null) {
@@ -127,16 +127,16 @@ function CommitFlamegraph({chartData, commitTree, height, width}: Props) {
127
128 const handleElementMouseEnter = useCallback(
129 ({id, name}: $FlowFixMe) => {
130 - highlightNativeElement(id); // Highlight last hovered element.
130 + highlightHostInstance(id); // Highlight last hovered element.
131 setHoveredFiberData({id, name}); // Set hovered fiber data for tooltip
132 },
133 - [highlightNativeElement],
133 + [highlightHostInstance],
134 );
135
136 const handleElementMouseLeave = useCallback(() => {
137 - clearHighlightNativeElement(); // clear highlighting of element on mouse leave
137 + clearHighlightHostInstance(); // clear highlighting of element on mouse leave
138 setHoveredFiberData(null); // clear hovered fiber data for tooltip
139 - }, [clearHighlightNativeElement]);
139 + }, [clearHighlightHostInstance]);
140
141 const itemData = useMemo<ItemData>(
142 () => ({
packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js
+7 -7
@@ -18,7 +18,7 @@ import HoveredFiberInfo from './HoveredFiberInfo';
18 import {scale} from './utils';
19 import {StoreContext} from '../context';
20 import {SettingsContext} from '../Settings/SettingsContext';
21 -import {useHighlightNativeElement} from '../hooks';
21 +import {useHighlightHostInstance} from '../hooks';
22 import Tooltip from './Tooltip';
23
24 import styles from './CommitRanked.css';
@@ -99,8 +99,8 @@ function CommitRanked({chartData, commitTree, height, width}: Props) {
99 useState<TooltipFiberData | null>(null);
100 const {lineHeight} = useContext(SettingsContext);
101 const {selectedFiberID, selectFiber} = useContext(ProfilerContext);
102 - const {highlightNativeElement, clearHighlightNativeElement} =
103 - useHighlightNativeElement();
102 + const {highlightHostInstance, clearHighlightHostInstance} =
103 + useHighlightHostInstance();
104
105 const selectedFiberIndex = useMemo(
106 () => getNodeIndex(chartData, selectedFiberID),
@@ -109,16 +109,16 @@ function CommitRanked({chartData, commitTree, height, width}: Props) {
109
110 const handleElementMouseEnter = useCallback(
111 ({id, name}: $FlowFixMe) => {
112 - highlightNativeElement(id); // Highlight last hovered element.
112 + highlightHostInstance(id); // Highlight last hovered element.
113 setHoveredFiberData({id, name}); // Set hovered fiber data for tooltip
114 },
115 - [highlightNativeElement],
115 + [highlightHostInstance],
116 );
117
118 const handleElementMouseLeave = useCallback(() => {
119 - clearHighlightNativeElement(); // clear highlighting of element on mouse leave
119 + clearHighlightHostInstance(); // clear highlighting of element on mouse leave
120 setHoveredFiberData(null); // clear hovered fiber data for tooltip
121 - }, [clearHighlightNativeElement]);
121 + }, [clearHighlightHostInstance]);
122
123 const itemData = useMemo<ItemData>(
124 () => ({
packages/react-devtools-shared/src/devtools/views/hooks.js
+10 -10
@@ -336,23 +336,23 @@ export function useSubscription<Value>({
336 return state.value;
337 }
338
339 -export function useHighlightNativeElement(): {
340 - clearHighlightNativeElement: () => void,
341 - highlightNativeElement: (id: number) => void,
339 +export function useHighlightHostInstance(): {
340 + clearHighlightHostInstance: () => void,
341 + highlightHostInstance: (id: number) => void,
342 } {
343 const bridge = useContext(BridgeContext);
344 const store = useContext(StoreContext);
345
346 - const highlightNativeElement = useCallback(
346 + const highlightHostInstance = useCallback(
347 (id: number) => {
348 const element = store.getElementByID(id);
349 const rendererID = store.getRendererIDForElement(id);
350 if (element !== null && rendererID !== null) {
351 - bridge.send('highlightNativeElement', {
351 + bridge.send('highlightHostInstance', {
352 displayName: element.displayName,
353 hideAfterTimeout: false,
354 id,
355 - openNativeElementsPanel: false,
355 + openBuiltinElementsPanel: false,
356 rendererID,
357 scrollIntoView: false,
358 });
@@ -361,12 +361,12 @@ export function useHighlightNativeElement(): {
361 [store, bridge],
362 );
363
364 - const clearHighlightNativeElement = useCallback(() => {
365 - bridge.send('clearNativeElementHighlight');
364 + const clearHighlightHostInstance = useCallback(() => {
365 + bridge.send('clearHostInstanceHighlight');
366 }, [bridge]);
367
368 return {
369 - highlightNativeElement,
370 - clearHighlightNativeElement,
369 + highlightHostInstance,
370 + clearHighlightHostInstance,
371 };
372 }