Remove Perf and Network tabs from Element Inspector (#54868)

Summary:
Pull Request resolved: #54868

Now that Network Inspection is shipped in 0.83, remove both of these tabs (which offered primitive Network functionality) from the in-app Element Inspector (where these previously remained for the Legacy Arch only).

Changelog:
[General][Removed] - Legacy Arch: Remove Perf and Network tabs from in-app Element Inspector. See [RFC0777](https://github.com/react-native-community/discussions-and-proposals/blob/main/proposals/0777-remove-legacy-element-inspector-features.md)

Reviewed By: javache

Differential Revision: D89048795

fbshipit-source-id: 2bf6db880b0cdd606b51f0502ab5725f28ee0d72

Author: huntie

packages/react-native/src/private/devsupport/devmenu/elementinspector/Inspector.js

@@ -39,10 +39,6 @@ const InspectorPanel = require('./InspectorPanel').default;
 const {useState} = React;
 
 type PanelPosition = 'top' | 'bottom';
-type SelectedTab =
-  | 'elements-inspector'
-  | 'network-profiling'
-  | 'performance-profiling';
 
 export type InspectedElementFrame = TouchedViewDataAtPoint['frame'];
 export type InspectedElement = $ReadOnly<{
@@ -62,8 +58,7 @@ function Inspector({
   onRequestRerenderApp,
   reactDevToolsAgent,
 }: Props): React.Node {
-  const [selectedTab, setSelectedTab] =
-    useState<?SelectedTab>('elements-inspector');
+  const [inspecting, setInspecting] = useState<boolean>(true);
 
   const [panelPosition, setPanelPosition] = useState<PanelPosition>('bottom');
   const [inspectedElement, setInspectedElement] =
@@ -137,18 +132,8 @@ function Inspector({
     );
   };
 
-  const setInspecting = (enabled: boolean) => {
-    setSelectedTab(enabled ? 'elements-inspector' : null);
-    setInspectedElement(null);
-  };
-
-  const setPerfing = (enabled: boolean) => {
-    setSelectedTab(enabled ? 'performance-profiling' : null);
-    setInspectedElement(null);
-  };
-
-  const setNetworking = (enabled: boolean) => {
-    setSelectedTab(enabled ? 'network-profiling' : null);
+  const handleSetInspecting = (enabled: boolean) => {
+    setInspecting(enabled);
     setInspectedElement(null);
   };
 
@@ -164,7 +149,7 @@ function Inspector({
 
   return (
     <View style={styles.container} pointerEvents="box-none">
-      {selectedTab === 'elements-inspector' && (
+      {inspecting && (
         <InspectorOverlay
           inspected={inspectedElement}
           onTouchPoint={onTouchPoint}
@@ -174,18 +159,14 @@ function Inspector({
       <SafeAreaView style={[styles.panelContainer, panelContainerStyle]}>
         <InspectorPanel
           devtoolsIsOpen={!!reactDevToolsAgent}
-          inspecting={selectedTab === 'elements-inspector'}
-          perfing={selectedTab === 'performance-profiling'}
-          setPerfing={setPerfing}
-          setInspecting={setInspecting}
+          inspecting={inspecting}
+          setInspecting={handleSetInspecting}
           inspected={inspectedElement}
           hierarchy={elementsHierarchy}
           selection={selectionIndex}
           setSelection={setSelection}
           touchTargeting={PressabilityDebug.isEnabled()}
           setTouchTargeting={setTouchTargeting}
-          networking={selectedTab === 'network-profiling'}
-          setNetworking={setNetworking}
         />
       </SafeAreaView>
     </View>

packages/react-native/src/private/devsupport/devmenu/elementinspector/InspectorPanel.js

@@ -23,20 +23,14 @@ const View = require('../../../../../Libraries/Components/View/View').default;
 const StyleSheet =
   require('../../../../../Libraries/StyleSheet/StyleSheet').default;
 const Text = require('../../../../../Libraries/Text/Text').default;
-const PerformanceOverlay = require('../perfmonitor/PerformanceOverlay').default;
 const ElementProperties = require('./ElementProperties').default;
-const NetworkOverlay = require('./NetworkOverlay').default;
 
 type Props = $ReadOnly<{
   devtoolsIsOpen: boolean,
   inspecting: boolean,
   setInspecting: (val: boolean) => void,
-  perfing: boolean,
-  setPerfing: (val: boolean) => void,
   touchTargeting: boolean,
   setTouchTargeting: (val: boolean) => void,
-  networking: boolean,
-  setNetworking: (val: boolean) => void,
   hierarchy?: ?ElementsHierarchy,
   selection?: ?number,
   setSelection: number => mixed,
@@ -67,10 +61,6 @@ class InspectorPanel extends React.Component<Props> {
           />
         </ScrollView>
       );
-    } else if (this.props.perfing) {
-      contents = <PerformanceOverlay />;
-    } else if (this.props.networking) {
-      contents = <NetworkOverlay />;
     } else {
       contents = <View style={styles.waiting}>{this.renderWaiting()}</View>;
     }
@@ -83,22 +73,6 @@ class InspectorPanel extends React.Component<Props> {
             pressed={this.props.inspecting}
             onClick={this.props.setInspecting}
           />
-          {global.RN$Bridgeless === true ? null : (
-            // These Inspector Panel sub-features are removed under the New Arch.
-            // See https://github.com/react-native-community/discussions-and-proposals/pull/777
-            <>
-              <InspectorPanelButton
-                title={'Perf'}
-                pressed={this.props.perfing}
-                onClick={this.props.setPerfing}
-              />
-              <InspectorPanelButton
-                title={'Network'}
-                pressed={this.props.networking}
-                onClick={this.props.setNetworking}
-              />
-            </>
-          )}
           <InspectorPanelButton
             title={'Touchables'}
             pressed={this.props.touchTargeting}