jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix bottom panel and make it resizable

Browse Source 
Summary: The bottom panel got broken during the virtualisation+ panel refactor, we need to tell the tree how much height is taken by the panel so it can size itself accordingly.

Reviewed By: lblasa

Differential Revision: D48313766

fbshipit-source-id: 849886101eb0869cc068fd0ad6dc1d053233043e
This commit is contained in:
Luke De Feo
2023-08-21 04:24:16 -07:00
committed by Facebook GitHub Bot
parent 2d217575bb
commit 4912b3f47e
2 changed files with 80 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
desktop/plugins/public/ui-debugger/components/main.tsx
View File

@@ -53,6 +53,8 @@ export function Component() {
setBottomPanelComponent(undefined);
};
const [bottomPanelHeight, setBottomPanelHeight] = useState(400);
if (showPerfStats)
return (
<PerfStats
@@ -106,49 +108,62 @@ export function Component() {
return (
<QueryClientProvider client={queryClient}>
<Layout.Horizontal
grow
style={{
borderRadius: theme.borderRadius,
backgroundColor: theme.backgroundWash,
}}>
<Layout.Container
<Layout.Container grow>
<Layout.Horizontal
grow
style={{
borderRadius: theme.borderRadius,
backgroundColor: theme.backgroundDefault,
backgroundColor: theme.backgroundWash,
}}>
<TreeControls />
<Tree2 nodes={nodes} rootId={rootId} />
</Layout.Container>
<Layout.Container
grow
style={{
borderRadius: theme.borderRadius,
backgroundColor: theme.backgroundDefault,
}}>
<TreeControls />
<Tree2
additionalHeightOffset={
bottomPanelComponent != null ? bottomPanelHeight : 0
}
nodes={nodes}
rootId={rootId}
/>
</Layout.Container>
<ResizablePanel
position="right"
minWidth={200}
width={visualiserWidth + theme.space.large}
maxWidth={800}
onResize={(width) => {
instance.uiActions.setVisualiserWidth(width);
}}
gutter>
<Visualization2D
width={visualiserWidth}
nodes={nodes}
onSelectNode={instance.uiActions.onSelectNode}
/>
</ResizablePanel>
<DetailSidebar width={350}>
<Inspector
os={instance.os}
metadata={metadata}
nodes={nodes}
showExtra={openBottomPanelWithContent}
/>
</DetailSidebar>
<BottomPanel dismiss={dismissBottomPanel}>
{bottomPanelComponent}
</BottomPanel>
</Layout.Horizontal>
<ResizablePanel
position="right"
minWidth={200}
width={visualiserWidth + theme.space.large}
maxWidth={800}
onResize={(width) => {
instance.uiActions.setVisualiserWidth(width);
}}
gutter>
<Visualization2D
width={visualiserWidth}
nodes={nodes}
onSelectNode={instance.uiActions.onSelectNode}
/>
</ResizablePanel>
<DetailSidebar width={350}>
<Inspector
os={instance.os}
metadata={metadata}
nodes={nodes}
showExtra={openBottomPanelWithContent}
/>
</DetailSidebar>
</Layout.Horizontal>
{bottomPanelComponent && (
<BottomPanel
height={bottomPanelHeight}
setHeight={setBottomPanelHeight}
dismiss={dismissBottomPanel}>
{bottomPanelComponent}
</BottomPanel>
)}
</Layout.Container>
</QueryClientProvider>
);
}
@@ -166,8 +181,15 @@ export function Centered(props: {children: React.ReactNode}) {
type BottomPanelProps = {
dismiss: () => void;
children: React.ReactNode;
height: number;
setHeight: (height: number) => void;
};
export function BottomPanel({dismiss, children}: BottomPanelProps) {
export function BottomPanel({
dismiss,
children,
height,
setHeight,
}: BottomPanelProps) {
const bottomPanelRef = useRef<any>(null);
useEffect(() => {
@@ -191,9 +213,15 @@ export function BottomPanel({dismiss, children}: BottomPanelProps) {
if (!children) {
return <></>;
}
return (
<div ref={bottomPanelRef}>
<ResizablePanel position="bottom" minHeight={200} height={400} gutter>
<ResizablePanel
position="bottom"
minHeight={200}
height={height}
onResize={(_, height) => setHeight(height)}
gutter>
<Layout.ScrollContainer>{children}</Layout.ScrollContainer>
<div style={{margin: 10}}>
<Button type="ghost" style={{float: 'right'}} onClick={dismiss}>

16
desktop/plugins/public/ui-debugger/components/tree/Tree.tsx
View File

@@ -55,7 +55,9 @@ export type TreeNode = ClientNode & {
export function Tree2({
nodes,
rootId,
additionalHeightOffset,
}: {
additionalHeightOffset: number;
nodes: Map<Id, ClientNode>;
rootId: Id;
}) {
@@ -139,16 +141,22 @@ export function Tree2({
isUsingKBToScrollUtill,
);
const initialHeightOffset = useRef<number | null>(null);
useLayoutEffect(() => {
//the grand parent gets its size correclty via flex box, we use its initial
//position to size the scroll parent ref for react virtual, It uses vh which accounts for window size changes
//However if we dynamically add content above or below we may need to revisit this approach
const boundingClientRect = grandParentRef?.current?.getBoundingClientRect();
parentRef.current!!.style.height = `calc(100vh - ${
boundingClientRect!!.top
}px - ${window.innerHeight - boundingClientRect!!.bottom}px )`;
}, []);
if (initialHeightOffset.current == null) {
//it is important to capture the initial height offset as we dont want to consider them again if elements are added dynamically later
initialHeightOffset.current =
boundingClientRect!!.top +
(window.innerHeight - boundingClientRect!!.bottom) -
additionalHeightOffset;
}
parentRef.current!!.style.height = `calc(100vh - ${initialHeightOffset.current}px - ${additionalHeightOffset}px )`;
}, [additionalHeightOffset]);
useLayoutEffect(() => {
//scroll width is the width of the element including overflow, we grab the scroll width