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.

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.

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>
+  );
+}