diff --git a/packages/react-devtools-extensions/src/main/elementSelection.js b/packages/react-devtools-extensions/src/main/elementSelection.js
index 54d5422776cb1..7f9b8ed208527 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 8ed84dd8fb5e0..d0bc285b11287 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 46c7d94093a26..a3d579bd65d64 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<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);
   };
 
diff --git a/packages/react-devtools-shared/src/backend/console.js b/packages/react-devtools-shared/src/backend/console.js
index 0e54fa59a13b8..42b08a7205bf2 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 5b34cfb0bd4fb..5a1fc4ee5337d 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 46a8022eace80..9b46d262f993d 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<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,
diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js
index 79b70ad74fba6..351ce64919e54 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<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,
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index 8f691588b8fc3..f08e53416dfbf 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<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,
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 8dbd727c8470d..6ed083abe4c1b 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<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);
 }
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 d461f882d9d02..78ec72d084a0a 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 53a53c0009775..3a5429ab93e01 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<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) {
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 b92b80d1dff68..c44751559431c 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<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);
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 8c774e3f1b6e2..2f27a941b5622 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<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;
   }
diff --git a/packages/react-devtools-shared/src/backend/views/utils.js b/packages/react-devtools-shared/src/backend/views/utils.js
index 989a0d7b6c900..009bb60ffa5da 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 5747967c32c8c..f8d418f1005ba 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<ComponentFilter>],
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 f4cc5a833f25b..2f2b9e9e91d0a 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 5722f13f2358f..5dd887ba59666 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 ad1606c78e42d..f3427410b49b9 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js
@@ -22,7 +22,7 @@ import InspectedElementStyleXPlugin from './InspectedElementStyleXPlugin';
 import InspectedElementSuspenseToggle from './InspectedElementSuspenseToggle';
 import NativeStyleEditor from './NativeStyleEditor';
 import ElementBadges from './ElementBadges';
-import {useHighlightNativeElement} from '../hooks';
+import {useHighlightHostInstance} from '../hooks';
 import {enableStyleXFeatures} from 'react-devtools-feature-flags';
 import {logEvent} from 'react-devtools-shared/src/Logger';
 import InspectedElementSourcePanel from './InspectedElementSourcePanel';
@@ -188,8 +188,8 @@ function OwnerView({
   isInStore,
 }: OwnerViewProps) {
   const dispatch = useContext(TreeDispatcherContext);
-  const {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}`}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
index ccc61f1c1d0ac..d7ddc636060d0 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Tree.js
@@ -31,7 +31,7 @@ import ComponentSearchInput from './ComponentSearchInput';
 import SettingsModalContextToggle from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle';
 import SelectedTreeHighlight from './SelectedTreeHighlight';
 import TreeFocusedContext from './TreeFocusedContext';
-import {useHighlightNativeElement, useSubscription} from '../hooks';
+import {useHighlightHostInstance, useSubscription} from '../hooks';
 import {clearErrorsAndWarnings as clearErrorsAndWarningsAPI} from 'react-devtools-shared/src/backendAPI';
 import styles from './Tree.css';
 import ButtonIcon from '../ButtonIcon';
@@ -66,8 +66,8 @@ export default function Tree(props: Props): React.Node {
   const {hideSettings} = useContext(OptionsContext);
   const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] =
     useState(false);
-  const {highlightNativeElement, clearHighlightNativeElement} =
-    useHighlightNativeElement();
+  const {highlightHostInstance, clearHighlightHostInstance} =
+    useHighlightHostInstance();
   const treeRef = useRef<HTMLDivElement | null>(null);
   const focusTargetRef = useRef<HTMLDivElement | null>(null);
 
@@ -98,7 +98,7 @@ export default function Tree(props: Props): React.Node {
   // Picking an element in the inspector should put focus into the tree.
   // This ensures that keyboard navigation works right after picking a node.
   useEffect(() => {
-    function handleStopInspectingNative(didSelectNode: boolean) {
+    function handleStopInspectingHost(didSelectNode: boolean) {
       if (didSelectNode && focusTargetRef.current !== null) {
         focusTargetRef.current.focus();
         logEvent({
@@ -107,9 +107,9 @@ export default function Tree(props: Props): React.Node {
         });
       }
     }
-    bridge.addListener('stopInspectingNative', handleStopInspectingNative);
+    bridge.addListener('stopInspectingHost', handleStopInspectingHost);
     return () =>
-      bridge.removeListener('stopInspectingNative', handleStopInspectingNative);
+      bridge.removeListener('stopInspectingHost', handleStopInspectingHost);
   }, [bridge]);
 
   // This ref is passed down the context to elements.
@@ -256,15 +256,15 @@ export default function Tree(props: Props): React.Node {
     }
     if (isNavigatingWithKeyboard || didSelectNewSearchResult) {
       if (selectedElementID !== null) {
-        highlightNativeElement(selectedElementID);
+        highlightHostInstance(selectedElementID);
       } else {
-        clearHighlightNativeElement();
+        clearHighlightHostInstance();
       }
     }
   }, [
     bridge,
     isNavigatingWithKeyboard,
-    highlightNativeElement,
+    highlightHostInstance,
     searchIndex,
     searchResults,
     selectedElementID,
@@ -276,10 +276,10 @@ export default function Tree(props: Props): React.Node {
       // Ignore hover while we're navigating with keyboard.
       // This avoids flicker from the hovered nodes under the mouse.
       if (!isNavigatingWithKeyboard) {
-        highlightNativeElement(id);
+        highlightHostInstance(id);
       }
     },
-    [isNavigatingWithKeyboard, highlightNativeElement],
+    [isNavigatingWithKeyboard, highlightHostInstance],
   );
 
   const handleMouseMove = useCallback(() => {
@@ -288,7 +288,7 @@ export default function Tree(props: Props): React.Node {
     setIsNavigatingWithKeyboard(false);
   }, []);
 
-  const handleMouseLeave = clearHighlightNativeElement;
+  const handleMouseLeave = clearHighlightHostInstance;
 
   // Let react-window know to re-render any time the underlying tree data changes.
   // This includes the owner context, since it controls a filtered view of the tree.
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 b1dceb9286112..3774a4d340045 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js
@@ -16,7 +16,7 @@ import NoCommitData from './NoCommitData';
 import CommitFlamegraphListItem from './CommitFlamegraphListItem';
 import HoveredFiberInfo from './HoveredFiberInfo';
 import {scale} from './utils';
-import {useHighlightNativeElement} from '../hooks';
+import {useHighlightHostInstance} from '../hooks';
 import {StoreContext} from '../context';
 import {SettingsContext} from '../Settings/SettingsContext';
 import Tooltip from './Tooltip';
@@ -101,8 +101,8 @@ function CommitFlamegraph({chartData, commitTree, height, width}: Props) {
     useState<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>(
     () => ({
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 28d507e1f48aa..bc482776f4e81 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js
@@ -18,7 +18,7 @@ import HoveredFiberInfo from './HoveredFiberInfo';
 import {scale} from './utils';
 import {StoreContext} from '../context';
 import {SettingsContext} from '../Settings/SettingsContext';
-import {useHighlightNativeElement} from '../hooks';
+import {useHighlightHostInstance} from '../hooks';
 import Tooltip from './Tooltip';
 
 import styles from './CommitRanked.css';
@@ -99,8 +99,8 @@ function CommitRanked({chartData, commitTree, height, width}: Props) {
     useState<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>(
     () => ({
diff --git a/packages/react-devtools-shared/src/devtools/views/hooks.js b/packages/react-devtools-shared/src/devtools/views/hooks.js
index 54d22b23dd02e..6d0afb5c0a0ca 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<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,
   };
 }