Fix WhatChanged scrolling out of view in profiler

Previously, WhatChanged and InspectedElementBadges were rendered inside
the same scrollable Content div as the commit list. When a component
had many render timestamps, scrolling down to pick one caused the
"what changed" context to scroll out of view, requiring the user to
scroll back up to see it.

While the profiler already exposes render details via hover tooltips on
fibers, those are transient and pointer-dependent. This change
introduces a sticky header section at the top of the Content div that
holds the current-commit summary, badges, and WhatChanged. The section
is collapsible (click or Enter/Space) so users can reclaim vertical
space for the commit list when needed. The commit list now sits below
the sticky header as a sibling, so it scrolls independently while the
summary remains always visible.

References:
- https://github.com/facebook/react/blob/main/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js#L130-L147

Author: kurtddanielbigtas

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementBadges.css

@@ -1,8 +1,9 @@
 .Root {
   user-select: none;
-  display: inline-flex;
-}
-
-.Root *:not(:first-child) {
-  margin-left: 0.25rem;
+  flex: 1 1 auto; 
+  min-width: 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: start;
+  gap: 0.25rem;
 }

packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css

@@ -7,10 +7,69 @@
   border-bottom: 1px solid var(--color-border);
 }
 
+.StickyHeader {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 0.5rem 0;
+  background: var(--color-background);
+}
+
+.StickyHeader::after {
+  content: "";
+  position: absolute;
+  inset-inline: -0.5rem;
+  bottom: 0;
+  height: 1px;
+  background: var(--color-border);
+}
+
+.HeaderRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  user-select: none;
+  border-radius: 4px;
+  padding: 0.25rem 0;
+}
+
+.HeaderRow:hover .RenderSummary {
+  text-decoration: underline;
+}
+
+.HeaderRow:focus-visible {
+  background: var(--color-button-background-focus);
+  outline: none;
+}
+
+.HeaderRowControls {
+  flex: 0 0 auto;
+}
+
+.RenderSummary {
+  flex: 1;
+  min-width: 0;
+  color: var(--color-text-secondary);
+}
+
+.CurrentRenderInfo strong {
+  color: var(--color-text-primary);
+}
+
+.CollapsibleContent {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
 .Content {
-  padding: 0.5rem;
+  padding: 0 0.5rem 0.5rem;
   user-select: none;
-  overflow-y: auto;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;

packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js

@@ -19,6 +19,7 @@ import ButtonIcon from '../ButtonIcon';
 import InspectedElementBadges from '../Components/InspectedElementBadges';
 
 import styles from './SidebarSelectedFiberInfo.css';
+import StickyCollapsibleHeader from './StickyCollapsibleHeader';
 
 export default function SidebarSelectedFiberInfo(): React.Node {
   const {profilerStore} = useContext(StoreContext);
@@ -114,6 +115,18 @@ export default function SidebarSelectedFiberInfo(): React.Node {
     );
   }
 
+  let selectedCommitTime = 0;
+  let selectedCommitDuration = 0;
+
+  if (selectedCommitIndex !== null && rootID !== null) {
+    const commitData = profilerStore.getCommitData(
+      ((rootID: any): number),
+      selectedCommitIndex,
+    );
+    selectedCommitTime = commitData.timestamp;
+    selectedCommitDuration = commitData.duration;
+  }
+
   return (
     <Fragment>
       <div className={styles.Toolbar}>
@@ -127,14 +140,24 @@ export default function SidebarSelectedFiberInfo(): React.Node {
           <ButtonIcon type="close" />
         </Button>
       </div>
-      <div className={styles.Content} onKeyDown={handleKeyDown} tabIndex={0}>
-        {node != null && (
-          <InspectedElementBadges
-            hocDisplayNames={node.hocDisplayNames}
-            compiledWithForget={node.compiledWithForget}
-          />
-        )}
-        <WhatChanged fiberID={((selectedFiberID: any): number)} />
+      <div className={styles.Content} onKeyDown={handleKeyDown}>
+        <StickyCollapsibleHeader
+          summary={
+            <span className={styles.CurrentRenderInfo}>
+              <strong>
+                {formatTime(selectedCommitTime)}s for{' '}
+                {formatDuration(selectedCommitDuration)}ms
+              </strong>
+            </span>
+          }>
+          {node != null && (
+            <InspectedElementBadges
+              hocDisplayNames={node.hocDisplayNames}
+              compiledWithForget={node.compiledWithForget}
+            />
+          )}
+          <WhatChanged fiberID={((selectedFiberID: any): number)} />
+        </StickyCollapsibleHeader>
         {listItems.length > 0 && (
           <div>
             <label className={styles.Label}>Rendered at: </label>

packages/react-devtools-shared/src/devtools/views/Profiler/StickyCollapsibleHeader.js

@@ -0,0 +1,63 @@
+/**
+ * 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 {useState} from 'react';
+
+import ButtonIcon from '../ButtonIcon';
+
+import styles from './SidebarSelectedFiberInfo.css';
+
+type Props = {
+  summary: React.Node,
+  children: React.Node,
+};
+
+export default function StickyCollapsibleHeader({
+  summary,
+  children,
+}: Props): React.Node {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  const toggleCollapsedVal = () =>
+    setIsCollapsed(prevIsCollapsed => !prevIsCollapsed);
+
+  // $FlowFixMe[missing-local-annot]
+  const handleKeyDown = event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      // Prevent the browser from scrolling down when Space is pressed
+      if (event.key === ' ') {
+        event.preventDefault();
+      }
+      toggleCollapsedVal();
+    }
+  };
+
+  return (
+    <div className={styles.StickyHeader}>
+      <div
+        className={styles.HeaderRow}
+        onClick={toggleCollapsedVal}
+        tabIndex={0}
+        role="button"
+        aria-expanded={!isCollapsed}
+        onKeyDown={handleKeyDown}>
+        <div className={styles.RenderSummary}>{summary}</div>
+
+        <div className={styles.HeaderRowControls}>
+          <ButtonIcon type={isCollapsed ? 'expanded' : 'collapsed'} />
+        </div>
+      </div>
+
+      {!isCollapsed && (
+        <div className={styles.CollapsibleContent}>{children}</div>
+      )}
+    </div>
+  );
+}