Tree.js — react Source File

Source Code

/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import * as React from 'react';
import {
  Fragment,
  Suspense,
  startTransition,
  useCallback,
  useContext,
  useEffect,
  useMemo,
  useRef,
  useState,
} from 'react';
import AutoSizer from 'react-virtualized-auto-sizer';
import {FixedSizeList} from 'react-window';
import {TreeDispatcherContext, TreeStateContext} from './TreeContext';
import Icon from '../Icon';
import {SettingsContext} from '../Settings/SettingsContext';
import {BridgeContext, StoreContext, OptionsContext} from '../context';
import ComponentsTreeElement from './Element';
import InspectHostNodesToggle from './InspectHostNodesToggle';
import OwnersStack from './OwnersStack';
import ComponentSearchInput from './ComponentSearchInput';
import SettingsModalContextToggle from 'react-devtools-shared/src/devtools/views/Settings/SettingsModalContextToggle';
import TreeFocusedContext from './TreeFocusedContext';
import {useHighlightHostInstance, useSubscription} from '../hooks';
import {clearErrorsAndWarnings as clearErrorsAndWarningsAPI} from 'react-devtools-shared/src/backendAPI';
import styles from './Tree.css';
import ButtonIcon from '../ButtonIcon';
import Button from '../Button';
import {logEvent} from 'react-devtools-shared/src/Logger';
import {useExtensionComponentsPanelVisibility} from 'react-devtools-shared/src/frontend/hooks/useExtensionComponentsPanelVisibility';
import {ElementTypeActivity} from 'react-devtools-shared/src/frontend/types';
import {useChangeOwnerAction} from './OwnersListContext';
import {useChangeActivitySliceAction} from '../SuspenseTab/ActivityList';
import ActivitySlice from './ActivitySlice';

// Indent for each node at level N, compared to node at level N - 1.
const INDENTATION_SIZE = 10;

function calculateElementOffset(elementDepth: number): number {
  return elementDepth * INDENTATION_SIZE;
}

export type ItemData = {
  isNavigatingWithKeyboard: boolean,
  onElementMouseEnter: (id: number) => void,
  treeFocused: boolean,
  calculateElementOffset: (depth: number) => number,
};

function calculateInitialScrollOffset(
// ... (547 more lines)