[DevTools] Rename Fiber to Element in the Bridge Protocol and RendererInterface (#30490)

I need to start clarifying where things are really actually Fibers and
where they're not since I'm adding Server Components as a separate type
of component instance which is not backed by a Fiber.

Nothing in the front end should really know anything about what kind of
renderer implementation we're inspecting and indeed it's already not
always a "Fiber" in the legacy renderer.

We typically refer to this as a "Component Instance" but the front end
currently refers to it as an Element as it historically grew from the
browser DevTools Elements tab.

I also moved the renderer.js implementation into the `backend/fiber`
folder. These are at the same level as `backend/legacy`. This clarifies
that anything outside of this folder ideally shouldn't refer to a
"Fiber".

console.js and profilingHooks.js unfortunately use Fibers a lot which
needs further refactoring. The profiler frontend also uses the term
alot.

Author: sebmarkbage

.eslintrc.js

@@ -490,7 +490,7 @@ module.exports = {
         'packages/react-devtools-extensions/**/*.js',
         'packages/react-devtools-shared/src/hook.js',
         'packages/react-devtools-shared/src/backend/console.js',
-        'packages/react-devtools-shared/src/backend/DevToolsComponentStackFrame.js',
+        'packages/react-devtools-shared/src/backend/shared/DevToolsComponentStackFrame.js',
       ],
       globals: {
         __IS_CHROME__: 'readonly',

packages/react-devtools-extensions/src/contentScripts/renderer.js

@@ -8,7 +8,7 @@
  * @flow
  */
 
-import {attach} from 'react-devtools-shared/src/backend/renderer';
+import {attach} from 'react-devtools-shared/src/backend/fiber/renderer';
 import {SESSION_STORAGE_RELOAD_AND_PROFILE_KEY} from 'react-devtools-shared/src/constants';
 import {sessionStorageGetItem} from 'react-devtools-shared/src/storage';
 

packages/react-devtools-shared/src/backend/agent.js

@@ -188,8 +188,11 @@ export default class Agent extends EventEmitter<{
     this._bridge = bridge;
 
     bridge.addListener('clearErrorsAndWarnings', this.clearErrorsAndWarnings);
-    bridge.addListener('clearErrorsForFiberID', this.clearErrorsForFiberID);
-    bridge.addListener('clearWarningsForFiberID', this.clearWarningsForFiberID);
+    bridge.addListener('clearErrorsForElementID', this.clearErrorsForElementID);
+    bridge.addListener(
+      'clearWarningsForElementID',
+      this.clearWarningsForElementID,
+    );
     bridge.addListener('copyElementPath', this.copyElementPath);
     bridge.addListener('deletePath', this.deletePath);
     bridge.addListener('getBackendVersion', this.getBackendVersion);
@@ -270,24 +273,27 @@ export default class Agent extends EventEmitter<{
     }
   };
 
-  clearErrorsForFiberID: ElementAndRendererID => void = ({id, rendererID}) => {
+  clearErrorsForElementID: ElementAndRendererID => void = ({
+    id,
+    rendererID,
+  }) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}"`);
     } else {
-      renderer.clearErrorsForFiberID(id);
+      renderer.clearErrorsForElementID(id);
     }
   };
 
-  clearWarningsForFiberID: ElementAndRendererID => void = ({
+  clearWarningsForElementID: ElementAndRendererID => void = ({
     id,
     rendererID,
   }) => {
     const renderer = this._rendererInterfaces[rendererID];
     if (renderer == null) {
       console.warn(`Invalid renderer id "${rendererID}"`);
     } else {
-      renderer.clearWarningsForFiberID(id);
+      renderer.clearWarningsForElementID(id);
     }
   };
 
@@ -361,7 +367,7 @@ export default class Agent extends EventEmitter<{
     const rendererInterface = this.getBestMatchingRendererInterface(node);
     if (rendererInterface != null) {
       try {
-        return rendererInterface.getFiberIDForNative(node, true);
+        return rendererInterface.getElementIDForNative(node, true);
       } catch (error) {
         // Some old React versions might throw if they can't find a match.
         // If so we should ignore it...
@@ -613,7 +619,7 @@ export default class Agent extends EventEmitter<{
   selectNode(target: Object): void {
     const id = this.getIDForNode(target);
     if (id !== null) {
-      this._bridge.send('selectFiber', id);
+      this._bridge.send('selectElement', id);
     }
   }
 
@@ -820,7 +826,7 @@ export default class Agent extends EventEmitter<{
           if (prevMatchID !== nextMatchID) {
             if (nextMatchID !== null) {
               // We moved forward, unlocking a deeper node.
-              this._bridge.send('selectFiber', nextMatchID);
+              this._bridge.send('selectElement', nextMatchID);
             }
           }
           if (nextMatch !== null && nextMatch.isFullMatch) {

packages/react-devtools-shared/src/backend/console.js

@@ -25,14 +25,14 @@ import {
   ANSI_STYLE_DIMMING_TEMPLATE,
   ANSI_STYLE_DIMMING_TEMPLATE_WITH_COMPONENT_STACK,
 } from 'react-devtools-shared/src/constants';
-import {getInternalReactConstants, getDispatcherRef} from './renderer';
+import {getInternalReactConstants, getDispatcherRef} from './fiber/renderer';
 import {
   getStackByFiberInDevAndProd,
   getOwnerStackByFiberInDev,
   supportsOwnerStacks,
   supportsNativeConsoleTasks,
-} from './DevToolsFiberComponentStack';
-import {formatOwnerStack} from './DevToolsOwnerStack';
+} from './fiber/DevToolsFiberComponentStack';
+import {formatOwnerStack} from './shared/DevToolsOwnerStack';
 import {castBool, castBrowserTheme} from '../utils';
 
 const OVERRIDE_CONSOLE_METHODS = ['error', 'trace', 'warn'];

packages/react-devtools-shared/src/backend/DevToolsFiberComponentStack.js renamed to packages/react-devtools-shared/src/backend/fiber/DevToolsFiberComponentStack.js

@@ -13,7 +13,7 @@
 // (which use different values for ReactTypeOfWork).
 
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
-import type {CurrentDispatcherRef, WorkTagMap} from './types';
+import type {CurrentDispatcherRef, WorkTagMap} from '../types';
 
 import type {ReactComponentInfo} from 'shared/ReactTypes';
 
@@ -22,9 +22,9 @@ import {
   describeFunctionComponentFrame,
   describeClassComponentFrame,
   describeDebugInfoFrame,
-} from './DevToolsComponentStackFrame';
+} from '../shared/DevToolsComponentStackFrame';
 
-import {formatOwnerStack} from './DevToolsOwnerStack';
+import {formatOwnerStack} from '../shared/DevToolsOwnerStack';
 
 export function describeFiber(
   workTagMap: WorkTagMap,

packages/react-devtools-shared/src/backend/renderer.js renamed to packages/react-devtools-shared/src/backend/fiber/renderer.js

@@ -52,7 +52,7 @@ import {
   copyWithRename,
   copyWithSet,
   getEffectDurations,
-} from './utils';
+} from '../utils';
 import {
   __DEBUG__,
   PROFILING_FLAG_BASIC_SUPPORT,
@@ -66,14 +66,14 @@ import {
   TREE_OPERATION_SET_SUBTREE_MODE,
   TREE_OPERATION_UPDATE_ERRORS_OR_WARNINGS,
   TREE_OPERATION_UPDATE_TREE_BASE_DURATION,
-} from '../constants';
+} from '../../constants';
 import {inspectHooksOfFiber} from 'react-debug-tools';
 import {
   patchConsoleUsingWindowValues,
   registerRenderer as registerRendererWithConsole,
   patchForStrictMode as patchConsoleForStrictMode,
   unpatchForStrictMode as unpatchConsoleForStrictMode,
-} from './console';
+} from '../console';
 import {
   CONCURRENT_MODE_NUMBER,
   CONCURRENT_MODE_SYMBOL_STRING,
@@ -95,14 +95,14 @@ import {
   MEMO_NUMBER,
   MEMO_SYMBOL_STRING,
   SERVER_CONTEXT_SYMBOL_STRING,
-} from './ReactSymbols';
+} from '../shared/ReactSymbols';
 import {enableStyleXFeatures} from 'react-devtools-feature-flags';
 import is from 'shared/objectIs';
 import hasOwnProperty from 'shared/hasOwnProperty';
-import {getStyleXData} from './StyleX/utils';
-import {createProfilingHooks} from './profilingHooks';
+import {getStyleXData} from '../StyleX/utils';
+import {createProfilingHooks} from '../profilingHooks';
 
-import type {GetTimelineData, ToggleProfilingStatus} from './profilingHooks';
+import type {GetTimelineData, ToggleProfilingStatus} from '../profilingHooks';
 import type {Fiber} from 'react-reconciler/src/ReactInternalTypes';
 import type {
   ChangeDescription,
@@ -122,7 +122,7 @@ import type {
   WorkTagMap,
   CurrentDispatcherRef,
   LegacyDispatcherRef,
-} from './types';
+} from '../types';
 import type {
   ComponentFilter,
   ElementType,
@@ -811,15 +811,15 @@ export function attach(
     }
   }
 
-  function clearErrorsForFiberID(fiberID: number) {
+  function clearErrorsForElementID(fiberID: number) {
     clearMessageCountHelper(
       fiberID,
       pendingFiberToErrorsMap,
       fiberIDToErrorsMap,
     );
   }
 
-  function clearWarningsForFiberID(fiberID: number) {
+  function clearWarningsForElementID(fiberID: number) {
     clearMessageCountHelper(
       fiberID,
       pendingFiberToWarningsMap,
@@ -1311,8 +1311,8 @@ export function attach(
         idToArbitraryFiberMap.delete(fiberID);
 
         // Also clear any errors/warnings associated with this fiber.
-        clearErrorsForFiberID(fiberID);
-        clearWarningsForFiberID(fiberID);
+        clearErrorsForElementID(fiberID);
+        clearWarningsForElementID(fiberID);
       }
 
       fiberToIDMap.delete(fiber);
@@ -2862,7 +2862,7 @@ export function attach(
     return fibers;
   }
 
-  function findNativeNodesForFiberID(id: number) {
+  function findNativeNodesForElementID(id: number) {
     try {
       const fiber = findCurrentFiberUsingSlowPathById(id);
       if (fiber === null) {
@@ -2877,7 +2877,7 @@ export function attach(
     }
   }
 
-  function getDisplayNameForFiberID(id: number): null | string {
+  function getDisplayNameForElementID(id: number): null | string {
     const fiber = idToArbitraryFiberMap.get(id);
     return fiber != null ? getDisplayNameForFiber(fiber) : null;
   }
@@ -2886,7 +2886,7 @@ export function attach(
     return renderer.findFiberByHostInstance(hostInstance);
   }
 
-  function getFiberIDForNative(
+  function getElementIDForNative(
     hostInstance: NativeType,
     findNearestUnfilteredAncestor: boolean = false,
   ) {
@@ -3870,7 +3870,7 @@ export function attach(
     if (result.hooks !== null) {
       console.log('Hooks:', result.hooks);
     }
-    const nativeNodes = findNativeNodesForFiberID(id);
+    const nativeNodes = findNativeNodesForElementID(id);
     if (nativeNodes !== null) {
       console.log('Nodes:', nativeNodes);
     }
@@ -4616,7 +4616,7 @@ export function attach(
     traceUpdatesEnabled = isEnabled;
   }
 
-  function hasFiberWithId(id: number): boolean {
+  function hasElementWithId(id: number): boolean {
     return idToArbitraryFiberMap.has(id);
   }
 
@@ -4651,26 +4651,24 @@ export function attach(
   return {
     cleanup,
     clearErrorsAndWarnings,
-    clearErrorsForFiberID,
-    clearWarningsForFiberID,
+    clearErrorsForElementID,
+    clearWarningsForElementID,
     getSerializedElementValueByPath,
     deletePath,
-    findNativeNodesForFiberID,
+    findNativeNodesForElementID,
     flushInitialOperations,
     getBestMatchForTrackedPath,
-    getComponentStackForFiber,
-    getSourceForFiber,
-    getDisplayNameForFiberID,
+    getDisplayNameForElementID,
     getFiberForNative,
-    getFiberIDForNative,
+    getElementIDForNative,
     getInstanceAndStyle,
     getOwnersList,
     getPathForElement,
     getProfilingData,
     handleCommitFiberRoot,
     handleCommitFiberUnmount,
     handlePostCommitFiberRoot,
-    hasFiberWithId,
+    hasElementWithId,
     inspectElement,
     logElementToConsole,
     patchConsoleForStrictMode,

packages/react-devtools-shared/src/backend/index.js

@@ -9,7 +9,7 @@
 
 import Agent from './agent';
 
-import {attach} from './renderer';
+import {attach} from './fiber/renderer';
 import {attach as attachLegacy} from './legacy/renderer';
 import {hasAssignedBackend} from './utils';
 

packages/react-devtools-shared/src/backend/legacy/renderer.js

@@ -39,7 +39,7 @@ import {decorateMany, forceUpdate, restoreMany} from './utils';
 
 import type {
   DevToolsHook,
-  GetFiberIDForNative,
+  GetElementIDForNative,
   InspectedElementPayload,
   InstanceAndStyle,
   NativeType,
@@ -142,8 +142,8 @@ export function attach(
   const internalInstanceToRootIDMap: WeakMap<InternalInstance, number> =
     new WeakMap();
 
-  let getInternalIDForNative: GetFiberIDForNative =
-    ((null: any): GetFiberIDForNative);
+  let getInternalIDForNative: GetElementIDForNative =
+    ((null: any): GetElementIDForNative);
   let findNativeNodeForInternalID: (id: number) => ?NativeType;
   let getFiberForNative = (node: NativeType) => {
     // Not implemented.
@@ -174,7 +174,7 @@ export function attach(
     };
   }
 
-  function getDisplayNameForFiberID(id: number): string | null {
+  function getDisplayNameForElementID(id: number): string | null {
     const internalInstance = idToInternalInstanceMap.get(id);
     return internalInstance ? getData(internalInstance).displayName : null;
   }
@@ -1085,36 +1085,36 @@ export function attach(
     // Not implemented
   }
 
-  function clearErrorsForFiberID(id: number) {
+  function clearErrorsForElementID(id: number) {
     // Not implemented
   }
 
-  function clearWarningsForFiberID(id: number) {
+  function clearWarningsForElementID(id: number) {
     // Not implemented
   }
 
   function patchConsoleForStrictMode() {}
 
   function unpatchConsoleForStrictMode() {}
 
-  function hasFiberWithId(id: number): boolean {
+  function hasElementWithId(id: number): boolean {
     return idToInternalInstanceMap.has(id);
   }
 
   return {
     clearErrorsAndWarnings,
-    clearErrorsForFiberID,
-    clearWarningsForFiberID,
+    clearErrorsForElementID,
+    clearWarningsForElementID,
     cleanup,
     getSerializedElementValueByPath,
     deletePath,
     flushInitialOperations,
     getBestMatchForTrackedPath,
-    getDisplayNameForFiberID,
+    getDisplayNameForElementID,
     getFiberForNative,
-    getFiberIDForNative: getInternalIDForNative,
+    getElementIDForNative: getInternalIDForNative,
     getInstanceAndStyle,
-    findNativeNodesForFiberID: (id: number) => {
+    findNativeNodesForElementID: (id: number) => {
       const nativeNode = findNativeNodeForInternalID(id);
       return nativeNode == null ? null : [nativeNode];
     },
@@ -1124,7 +1124,7 @@ export function attach(
     handleCommitFiberRoot,
     handleCommitFiberUnmount,
     handlePostCommitFiberRoot,
-    hasFiberWithId,
+    hasElementWithId,
     inspectElement,
     logElementToConsole,
     overrideError,

packages/react-devtools-shared/src/backend/profilingHooks.js

@@ -35,7 +35,7 @@ import {
   REACT_TOTAL_NUM_LANES,
   SCHEDULING_PROFILER_VERSION,
 } from 'react-devtools-timeline/src/constants';
-import {describeFiber} from './DevToolsFiberComponentStack';
+import {describeFiber} from './fiber/DevToolsFiberComponentStack';
 
 // Add padding to the start/stop time of the profile.
 // This makes the UI nicer to use.