[docs] Add feature summaries for RNDT Network and Performance panels (facebook#4928)

Author: huntie

docs/react-native-devtools.md

@@ -7,7 +7,7 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import con
 
 React Native DevTools is our modern debugging experience for React Native. Purpose-built from the ground up, it aims to be fundamentally more integrated, correct, and reliable than previous debugging methods.
 
-![React Native DevTools opened to the "Welcome" pane](/docs/assets/debugging-rndt-welcome.jpg)
+![React Native DevTools opened to the "Welcome" pane](/docs/assets/debugging-rndt-welcome-083.jpg)
 
 React Native DevTools is designed for debugging React app concerns, and not to replace native tools. If you want to inspect React Native’s underlying platform layers (for example, while developing a Native Module), please use the debugging tools available in Android Studio and Xcode (see [Debugging Native Code](/docs/debugging-native-code)).
 
@@ -79,6 +79,70 @@ Breakpoints are a fundamental tool in your debugging toolkit!
 - Use a `debugger;` statement to quickly set a breakpoint from your text editor. This will reach the device immediately via Fast Refresh.
 - There are multiple kinds of breakpoints! For example, [Conditional Breakpoints and Logpoints](https://developer.chrome.com/docs/devtools/javascript/breakpoints#overview).
 
+### Network <div className="label primary">Since 0.83</div>
+
+![A network request in the React Native DevTools Network panel](/docs/assets/debugging-rndt-network.jpg)
+
+The Network panel allows you to view and inspect the network requests made by your app. Logged requests provide detailed metadata such as timings and headers sent/received, as well as response previews.
+
+Network requests are recorded automatically when DevTools is open. We support most features from Chrome, with some exceptions. See more below.
+
+<details>
+<summary><strong>💡 Network event coverage, Expo support</strong></summary>
+
+**Which network events are captured?**
+
+Today, we record all network calls through `fetch()`, `XMLHttpRequest`, and `<Image>` — with support for custom networking libraries, such as Expo Fetch, coming later.
+
+**Expo Network differences**
+
+Because of this, apps using Expo will continue to see the "Expo Network" panel — a separate implementation by the Expo framework which will log these additional request sources but has slightly reduced features.
+
+- Coverage for Expo-specific network events.
+- No request initiator support.
+- No Performance panel integration.
+
+We're working with Expo to integrate Expo Fetch and third party networking libraries with our new Network inspection pipeline in future releases.
+
+**Unimplemented features**
+
+At launch, these are the features we don't yet support in React Native:
+
+- WebSocket events
+- Network response mocking
+- Simulated network throttling
+
+</details>
+
+<details>
+<summary><strong>💡 Response previews buffer size</strong></summary>
+
+If you are inspecting a large volume of response data, please note that response previews are cached in an on-device buffer with a maximum size of 100MB. This means we may evict response previews (but not metadata) if the cache becomes too large, oldest request first.
+
+</details>
+
+#### Useful tips
+
+- Use the Initiator tab to see the call stack of where a network request was initiated in your app.
+- Network events will also be shown in the Network track in the Performance panel.
+
+### Performance <div className="label primary">Since 0.83</div>
+
+![A performance trace in the React Native DevTools Performance panel](/docs/assets/debugging-rndt-performance.jpg)
+
+Performance tracing allows you to record a performance session within your app to understand how your JavaScript code is running and what operations took the most time. In React Native, we show JavaScript execution, React Performance tracks, Network events, and custom [User Timings](https://developer.mozilla.org/en-US/docs/Web/API/Performance_API/User_timing), rendered in a single performance timeline.
+
+#### Useful tips
+
+- Use [Annotations](https://developer.chrome.com/docs/devtools/performance/annotations) to label and mark up a performance trace — useful before [downloading and sharing](https://developer.chrome.com/docs/devtools/performance/save-trace) with a teammate.
+- Use the [`PerformanceObserver` API](./global-PerformanceObserver.md) in your app to observe performance events at runtime — useful if you want to capture performance telemetry.
+
+#### Learn more
+
+- [React Performance tracks](https://react.dev/reference/dev-tools/react-performance-tracks)
+- [Performance APIs > User Timings | MDN](https://developer.mozilla.org/en-US/docs/Web/API/Performance_API/User_timing)
+- ["Debug Like a Senior — React Native Performance Panel" | Software Mansion](https://blog.swmansion.com/react-native-debugging-new-performance-panel-in-react-native-0-83-21ca90871f6d)
+
 ### Memory
 
 ![Inspecting a heap snapshot in the Memory panel](/docs/assets/debugging-rndt-memory.jpg)

website/src/css/customTheme.scss

@@ -1901,6 +1901,10 @@ td .color-box {
   }
 
   /* Label variants */
+  &.primary {
+    background: var(--ifm-color-primary);
+  }
+
   &.android {
     background: #a4c936;