From 33e54fa252b9dbe7553ef42a2287c3dbbd4f035d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Tue, 30 Jul 2024 09:12:12 -0400 Subject: [PATCH] [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". --- .../src/main/elementSelection.js | 2 +- .../src/main/index.js | 2 +- .../src/backend/agent.js | 22 +++++------ .../src/backend/console.js | 4 +- .../fiber/DevToolsFiberComponentStack.js | 2 +- .../src/backend/fiber/renderer.js | 22 +++++------ .../src/backend/legacy/renderer.js | 36 ++++++++--------- .../src/backend/types.js | 18 +++++---- .../backend/views/Highlighter/Highlighter.js | 7 ++-- .../src/backend/views/Highlighter/Overlay.js | 2 +- .../src/backend/views/Highlighter/index.js | 39 +++++++++---------- .../src/backend/views/TraceUpdates/canvas.js | 12 +++--- .../src/backend/views/TraceUpdates/index.js | 6 +-- .../src/backend/views/utils.js | 2 +- packages/react-devtools-shared/src/bridge.js | 18 ++++----- .../Components/InspectHostNodesToggle.js | 10 ++--- .../views/Components/InspectedElement.js | 4 +- .../views/Components/InspectedElementView.js | 10 ++--- .../src/devtools/views/Components/Tree.js | 24 ++++++------ .../views/Profiler/CommitFlamegraph.js | 14 +++---- .../devtools/views/Profiler/CommitRanked.js | 14 +++---- .../src/devtools/views/hooks.js | 20 +++++----- 22 files changed, 145 insertions(+), 145 deletions(-) diff --git a/packages/react-devtools-extensions/src/main/elementSelection.js b/packages/react-devtools-extensions/src/main/elementSelection.js index 54d5422776..7f9b8ed208 100644 --- a/packages/react-devtools-extensions/src/main/elementSelection.js +++ b/packages/react-devtools-extensions/src/main/elementSelection.js @@ -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'); } }, ); diff --git a/packages/react-devtools-extensions/src/main/index.js b/packages/react-devtools-extensions/src/main/index.js index 8ed84dd8fb..d0bc285b11 100644 --- a/packages/react-devtools-extensions/src/main/index.js +++ b/packages/react-devtools-extensions/src/main/index.js @@ -58,7 +58,7 @@ function createBridge() { }); bridge.addListener( - 'syncSelectionToNativeElementsPanel', + 'syncSelectionToBuiltinElementsPanel', setBrowserSelectionFromReact, ); diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js index 46c7d94093..a3d579bd65 100644 --- a/packages/react-devtools-shared/src/backend/agent.js +++ b/packages/react-devtools-shared/src/backend/agent.js @@ -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], - drawTraceUpdates: [Array], + traceUpdates: [Set], + drawTraceUpdates: [Array], 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) => void = nodes => { + onTraceUpdates: (nodes: Set) => void = nodes => { this.emit('traceUpdates', nodes); }; diff --git a/packages/react-devtools-shared/src/backend/console.js b/packages/react-devtools-shared/src/backend/console.js index 0e54fa59a1..42b08a7205 100644 --- a/packages/react-devtools-shared/src/backend/console.js +++ b/packages/react-devtools-shared/src/backend/console.js @@ -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 = ''; diff --git a/packages/react-devtools-shared/src/backend/fiber/DevToolsFiberComponentStack.js b/packages/react-devtools-shared/src/backend/fiber/DevToolsFiberComponentStack.js index 5b34cfb0bd..5a1fc4ee53 100644 --- a/packages/react-devtools-shared/src/backend/fiber/DevToolsFiberComponentStack.js +++ b/packages/react-devtools-shared/src/backend/fiber/DevToolsFiberComponentStack.js @@ -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. diff --git a/packages/react-devtools-shared/src/backend/fiber/renderer.js b/packages/react-devtools-shared/src/backend/fiber/renderer.js index 46a8022eac..9b46d262f9 100644 --- a/packages/react-devtools-shared/src/backend/fiber/renderer.js +++ b/packages/react-devtools-shared/src/backend/fiber/renderer.js @@ -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 = new Set(); + const traceUpdatesForNodes: Set = new Set(); function applyComponentFilters(componentFilters: Array) { 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, diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js index 79b70ad74f..351ce64919 100644 --- a/packages/react-devtools-shared/src/backend/legacy/renderer.js +++ b/packages/react-devtools-shared/src/backend/legacy/renderer.js @@ -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 = 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, diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js index 8f691588b8..f08e53416d 100644 --- a/packages/react-devtools-shared/src/backend/types.js +++ b/packages/react-devtools-shared/src/backend/types.js @@ -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; +export type FindHostInstancesForElementID = ( + id: number, +) => ?Array; export type ReactProviderType = { $$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, ) => 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, diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js b/packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js index 8dbd727c84..6ed083abe4 100644 --- a/packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js +++ b/packages/react-devtools-shared/src/backend/views/Highlighter/Highlighter.js @@ -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, agent: Agent): void { +function showOverlayNative(elements: Array, agent: Agent): void { agent.emit('showNativeHighlight', elements); } @@ -63,12 +64,12 @@ function showOverlayWeb( } export function showOverlay( - elements: Array, + elements: Array, componentName: string | null, agent: Agent, hideAfterTimeout: boolean, ): void { return isReactNativeEnvironment() ? showOverlayNative(elements, agent) - : showOverlayWeb(elements, componentName, agent, hideAfterTimeout); + : showOverlayWeb((elements: any), componentName, agent, hideAfterTimeout); } diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js b/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js index d461f882d9..78ec72d084 100644 --- a/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js +++ b/packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js @@ -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, diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js index 53a53c0009..3a5429ab93 100644 --- a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js +++ b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js @@ -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 = (renderer.findNativeNodesForElementID( - id, - ): any); + const nodes: ?Array = + 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) { diff --git a/packages/react-devtools-shared/src/backend/views/TraceUpdates/canvas.js b/packages/react-devtools-shared/src/backend/views/TraceUpdates/canvas.js index b92b80d1df..c447515594 100644 --- a/packages/react-devtools-shared/src/backend/views/TraceUpdates/canvas.js +++ b/packages/react-devtools-shared/src/backend/views/TraceUpdates/canvas.js @@ -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, agent: Agent) { +function drawNative(nodeToData: Map, agent: Agent) { const nodesToDraw = []; iterateNodes(nodeToData, (_, color, node) => { nodesToDraw.push({node, color}); @@ -41,7 +41,7 @@ function drawNative(nodeToData: Map, agent: Agent) { agent.emit('drawTraceUpdates', nodesToDraw); } -function drawWeb(nodeToData: Map) { +function drawWeb(nodeToData: Map) { if (canvas === null) { initialize(); } @@ -59,15 +59,15 @@ function drawWeb(nodeToData: Map) { }); } -export function draw(nodeToData: Map, agent: Agent): void { +export function draw(nodeToData: Map, agent: Agent): void { return isReactNativeEnvironment() ? drawNative(nodeToData, agent) : drawWeb(nodeToData); } function iterateNodes( - nodeToData: Map, - execute: (rect: Rect | null, color: string, node: NativeType) => void, + nodeToData: Map, + execute: (rect: Rect | null, color: string, node: HostInstance) => void, ) { nodeToData.forEach(({count, rect}, node) => { const colorIndex = Math.min(COLORS.length - 1, count - 1); diff --git a/packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js b/packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js index 8c774e3f1b..2f27a941b5 100644 --- a/packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js +++ b/packages/react-devtools-shared/src/backend/views/TraceUpdates/index.js @@ -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 = new Map(); +const nodeToData: Map = 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): void { +function traceUpdates(nodes: Set): void { if (!isEnabled) { return; } diff --git a/packages/react-devtools-shared/src/backend/views/utils.js b/packages/react-devtools-shared/src/backend/views/utils.js index 989a0d7b6c..009bb60ffa 100644 --- a/packages/react-devtools-shared/src/backend/views/utils.js +++ b/packages/react-devtools-shared/src/backend/views/utils.js @@ -108,7 +108,7 @@ export function getNestedBoundingClientRect( } } -export function getElementDimensions(domElement: Element): { +export function getElementDimensions(domElement: HTMLElement): { borderBottom: number, borderLeft: number, borderRight: number, diff --git a/packages/react-devtools-shared/src/bridge.js b/packages/react-devtools-shared/src/bridge.js index 5747967c32..f8d418f100 100644 --- a/packages/react-devtools-shared/src/bridge.js +++ b/packages/react-devtools-shared/src/bridge.js @@ -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], diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js index f4cc5a833f..2f2b9e9e91 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectHostNodesToggle.js +++ b/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 ( diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js index 5722f13f23..5dd887ba59 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElement.js +++ b/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, }); 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 ad1606c78e..f3427410b4 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 {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}> (null); const focusTargetRef = useRef(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. 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 b1dceb9286..3774a4d340 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 {highlightNativeElement, clearHighlightNativeElement} = - useHighlightNativeElement(); + const {highlightHostInstance, clearHighlightHostInstance} = + useHighlightHostInstance(); const selectedChartNodeIndex = useMemo(() => { 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( () => ({ 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 28d507e1f4..bc482776f4 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 {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( () => ({ diff --git a/packages/react-devtools-shared/src/devtools/views/hooks.js b/packages/react-devtools-shared/src/devtools/views/hooks.js index 54d22b23dd..6d0afb5c0a 100644 --- a/packages/react-devtools-shared/src/devtools/views/hooks.js +++ b/packages/react-devtools-shared/src/devtools/views/hooks.js @@ -336,23 +336,23 @@ export function useSubscription({ 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, }; }