Remove horizontal splitters, just use disclosure boxes.

Author: mstange

src/components/calltree/Butterfly.css

@@ -44,3 +44,17 @@
   > .layout-splitter::before {
   inset: -3px 0;
 }
+
+.functionListTreeWrapper {
+  display: flex;
+  flex-flow: column nowrap;
+}
+
+.functionListTreeWrapper .treeRowToggleButton {
+  display: none;
+}
+
+.butterflyWings {
+  display: flex;
+  flex-flow: column nowrap;
+}

src/components/calltree/ProfileFunctionListView.tsx

@@ -24,21 +24,21 @@ export const ProfileFunctionListView = () => (
     <StackSettings hideInvertCallstack />
     <TransformNavigator />
     <div className="butterflyWrapper">
-      <SplitterLayout percentage secondaryInitialSize={50}>
-        <FunctionList />
-        <SplitterLayout percentage vertical secondaryInitialSize={50}>
-          <SplitterLayout percentage vertical secondaryInitialSize={50}>
-            <DisclosureBox label="Self" initialOpen={false}>
-              <SelfWing />
-            </DisclosureBox>
-            <DisclosureBox label="Callers">
-              <UpperWing />
-            </DisclosureBox>
-          </SplitterLayout>
-          <DisclosureBox label="Callees" initialOpen={false}>
+      <SplitterLayout percentage secondaryInitialSize={40}>
+        <div className="functionListTreeWrapper">
+          <FunctionList />
+        </div>
+        <div className="butterflyWings">
+          <DisclosureBox label="Descendants">
+            <UpperWing />
+          </DisclosureBox>
+          <DisclosureBox label="Ancestors" initialOpen={false}>
             <LowerWing />
           </DisclosureBox>
-        </SplitterLayout>
+          <DisclosureBox label="Self" initialOpen={false}>
+            <SelfWing />
+          </DisclosureBox>
+        </div>
       </SplitterLayout>
     </div>
   </div>