Skip to content

Add sticky header to SidebarSelectedFiberInfo #36244

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Kertsu wants to merge 1 commit into
base: main
Choose a base branch
from
+127 −16
Open

Add sticky header to SidebarSelectedFiberInfo #36244

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 6 additions & 5 deletions packages/react-devtools-shared/src/devtools/views/Components/InspectedElementBadges.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
63 changes: 61 additions & 2 deletions packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
69 changes: 60 additions & 9 deletions packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
*/

import * as React from 'react';
import {Fragment, useContext, useEffect, useRef} from 'react';
import {Fragment, useContext, useEffect, useRef, useState} from 'react';

import WhatChanged from './WhatChanged';
import {ProfilerContext} from './ProfilerContext';
Expand All @@ -32,6 +32,7 @@ export default function SidebarSelectedFiberInfo(): React.Node {
} = useContext(ProfilerContext);
const {profilingCache} = profilerStore;
const selectedListItemRef = useRef<HTMLElement | null>(null);
const [collapsed, setCollapsed] = useState(false);

useEffect(() => {
const selectedElement = selectedListItemRef.current;
Expand Down Expand Up @@ -114,6 +115,29 @@ 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;
}

// $FlowFixMe[missing-local-annot]
const handleHeaderKeyDown = event => {
if (event.key === 'Enter' || event.key === ' ') {
// Prevent the browser from scrolling down when Space is pressed
if (event.key === ' ') {
event.preventDefault();
}
setCollapsed(prevCollapsedVal => !prevCollapsedVal);
}
};

return (
<Fragment>
<div className={styles.Toolbar}>
Expand All @@ -127,14 +151,41 @@ 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}>
<div className={styles.StickyHeader}>
<div
className={styles.HeaderRow}
onClick={() => setCollapsed(prevCollapsedVal => !prevCollapsedVal)}
tabIndex={0}
role="button"
aria-expanded={!collapsed}
onKeyDown={handleHeaderKeyDown}>
<div className={styles.RenderSummary}>
<span className={styles.CurrentRenderInfo}>
<strong>
{formatTime(selectedCommitTime)}s for{' '}
{formatDuration(selectedCommitDuration)}ms
</strong>
</span>
</div>

<div className={styles.HeaderRowControls}>
<ButtonIcon type={collapsed ? 'expanded' : 'collapsed'} />
</div>
</div>

{!collapsed && (
<div className={styles.CollapsibleContent}>
{node != null && (
<InspectedElementBadges
hocDisplayNames={node.hocDisplayNames}
compiledWithForget={node.compiledWithForget}
/>
)}
<WhatChanged fiberID={((selectedFiberID: any): number)} />
</div>
)}
</div>
{listItems.length > 0 && (
<div>
<label className={styles.Label}>Rendered at: </label>
Expand Down