Redesign Split Tree and visualiser into panels

Summary: This looks a lot neater and allows us to have separate dedicated visualiser header

Reviewed By: mweststrate

Differential Revision: D47626867

fbshipit-source-id: 843721853e0ff88837afbb9bf3f510a908160d12

desktop/plugins/public/ui-debugger/components/Controls.tsx

@@ -44,7 +44,7 @@ export const Controls: React.FC = () => {
     useState(false);
 
   return (
-    <Layout.Horizontal pad="small" gap="small">
+    <Layout.Horizontal gap="medium" pad="medium">
       <Input
         value={searchTerm}
         onChange={(e) => {

desktop/plugins/public/ui-debugger/components/Visualization2D.tsx

@@ -135,6 +135,8 @@ export const Visualization2D: React.FC<
         //this div is to ensure that the size of the visualiser doesnt change when focusings on a subtree
         style={
           {
+            backgroundColor: theme.backgroundWash,
+            borderRadius: theme.borderRadius,
             overflowY: 'auto',
             overflowX: 'hidden',
             position: 'relative', //this is for the absolutely positioned overlays

desktop/plugins/public/ui-debugger/components/main.tsx

@@ -106,43 +106,49 @@ export function Component() {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <Layout.Container grow padh="small" padv="medium">
-        <Layout.Top>
-          <>
-            <Controls />
-            <Layout.Horizontal grow pad="small">
-              <Tree2 nodes={nodes} rootId={rootId} />
+      <Layout.Horizontal
+        grow
+        style={{
+          borderRadius: theme.borderRadius,
+          backgroundColor: theme.backgroundWash,
+        }}>
+        <Layout.Container
+          grow
+          style={{
+            borderRadius: theme.borderRadius,
+            backgroundColor: theme.backgroundDefault,
+          }}>
+          <Controls />
+          <Tree2 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>
-            </Layout.Horizontal>
-          </>
-          <BottomPanel dismiss={dismissBottomPanel}>
-            {bottomPanelComponent}
-          </BottomPanel>
-        </Layout.Top>
-      </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>
     </QueryClientProvider>
   );
 }

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

@@ -213,6 +213,7 @@ export function Tree2({
           //We use this normal divs flexbox sizing to measure how much vertical space we need for the child div
           ref={grandParentRef}
           style={{
+            paddingLeft: theme.space.medium,
             height: '100%',
             width: '100%',
           }}>