tracer: Fix UI layout with many handlers

frida · Sep 19, 2024 · 58759c4 · 58759c4
1 parent ab9ed88
commit 58759c4
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 57 deletions.
diff --git a/apps/tracer/package.json b/apps/tracer/package.json
@@ -15,7 +15,7 @@
     "monaco-editor": "^0.51.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-resizable": "^3.0.5",
+    "react-resplit": "^1.3.2-alpha.0",
     "react-scroll-to-bottom": "^4.2.0",
     "react-use-websocket": "^4.8.1",
     "use-debounce": "^10.0.3"

diff --git a/apps/tracer/src/App.css b/apps/tracer/src/App.css
@@ -1,6 +1,18 @@
+.app-content {
+    flex: 1;
+}
+
 .top-area {
     display: flex;
-    flex: 1;
+    overflow: hidden;
+}
+
+.app-splitter {
+    border-top: 5px groove #ef6456;
+}
+
+.bottom-area {
+    display: flex;
 }
 
 .navigation-area {
@@ -11,6 +23,7 @@
 
 .handler-list {
     flex: 1;
+    overflow: scroll;
 }
 
 .target-actions {
@@ -31,20 +44,6 @@
     position: absolute !important;
 }
 
-.event-area {
-    display: flex;
-}
-
-.event-area-handle {
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    height: 5px;
-    border-top: 5px groove #ef6456;
-    cursor: ns-resize;
-}
-
 .event-view {
     flex: 1;
 }
diff --git a/apps/tracer/src/App.tsx b/apps/tracer/src/App.tsx
@@ -1,5 +1,4 @@
 import "./App.css";
-import "react-resizable/css/styles.css";
 import AddTargetsDialog from "./AddTargetsDialog.tsx";
 import EventView from "./EventView.tsx";
 import HandlerEditor from "./HandlerEditor.tsx";
@@ -20,7 +19,7 @@ import {
     ButtonGroup,
 } from "@blueprintjs/core";
 import { useEffect, useState } from "react";
-import { ResizableBox } from "react-resizable";
+import { Resplit } from 'react-resplit';
 import useWebSocket, { ReadyState } from "react-use-websocket";
 
 export default function App() {
@@ -121,42 +120,45 @@ export default function App() {
 
     return (
         <>
-            <section className="top-area">
-                <section className="navigation-area">
-                    <HandlerList
-                        handlers={handlers}
-                        selectedScope={selectedScope}
-                        onScopeSelect={scope => setSelectedScope(scope)}
-                        selectedHandler={selectedHandler}
-                        onHandlerSelect={handleHandlerSelection}
-                    />
-                    <ButtonGroup className="target-actions" vertical={true} minimal={true} alignText="left">
-                        <Button intent="success" icon="add" onClick={() => setAddingTargets(true)}>Add</Button>
-                        {(spawnedProgram !== null) ? <Button intent="danger" icon="reset" onClick={handleRespawnRequest}>Respawn</Button> : null}
-                    </ButtonGroup>
-                </section>
-                <section className="work-area">
-                    {connectionError}
-                    <ButtonGroup minimal={true}>
-                        <Button
-                            icon="rocket-slant"
-                            disabled={draftedCode === handlerCode}
-                            onClick={() => deploy(draftedCode)}
-                        >
-                            Deploy
-                        </Button>
-                    </ButtonGroup>
-                    <HandlerEditor
-                        handlerId={selectedHandler}
-                        handlerCode={handlerCode}
-                        onChange={setDraftedCode}
-                        onSave={deploy}
-                    />
-                </section>
-            </section>
-            <ResizableBox className="event-area" axis="y" height={300} resizeHandles={["n"]} handle={<div className="event-area-handle" />}>
-                <EventView events={events} onActivate={handleEventActivation} />
-            </ResizableBox>
+            <Resplit.Root className="app-content" direction="vertical">
+                <Resplit.Pane className="top-area" order={0} initialSize="0.7fr">
+                    <section className="navigation-area">
+                        <HandlerList
+                            handlers={handlers}
+                            selectedScope={selectedScope}
+                            onScopeSelect={scope => setSelectedScope(scope)}
+                            selectedHandler={selectedHandler}
+                            onHandlerSelect={handleHandlerSelection}
+                        />
+                        <ButtonGroup className="target-actions" vertical={true} minimal={true} alignText="left">
+                            <Button intent="success" icon="add" onClick={() => setAddingTargets(true)}>Add</Button>
+                            {(spawnedProgram !== null) ? <Button intent="danger" icon="reset" onClick={handleRespawnRequest}>Respawn</Button> : null}
+                        </ButtonGroup>
+                    </section>
+                    <section className="work-area">
+                        {connectionError}
+                        <ButtonGroup minimal={true}>
+                            <Button
+                                icon="rocket-slant"
+                                disabled={draftedCode === handlerCode}
+                                onClick={() => deploy(draftedCode)}
+                            >
+                                Deploy
+                            </Button>
+                        </ButtonGroup>
+                        <HandlerEditor
+                            handlerId={selectedHandler}
+                            handlerCode={handlerCode}
+                            onChange={setDraftedCode}
+                            onSave={deploy}
+                        />
+                    </section>
+                </Resplit.Pane>
+                <Resplit.Splitter className="app-splitter" order={1} size="5px" />
+                <Resplit.Pane className="bottom-area" order={2} initialSize="0.3fr">
+                    <EventView events={events} onActivate={handleEventActivation} />
+                </Resplit.Pane>
+            </Resplit.Root>
             <AddTargetsDialog
                 isOpen={addingTargets}
                 stagedItems={stagedItems}

diff --git a/apps/tracer/src/EventView.css b/apps/tracer/src/EventView.css
@@ -1,11 +1,9 @@
 .event-view {
-    border-top: 5px groove #ef6456;
     background-color: #1e1e1e;
     color: #e4e4e4;
 }
 
 .event-items {
-    height: 200px;
     padding: 5px;
     font-family: monospace;
     font-size: 10px;

diff --git a/apps/tracer/src/index.css b/apps/tracer/src/index.css
@@ -4,7 +4,6 @@ html, body, #root {
 
 #root {
     display: flex;
-    flex-direction: column;
 }
 
 .ansi-cyan {
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,7 +4,6 @@ html, body, #root { @@
     #root {
         display: flex;
-        flex-direction: column;
     }
     .ansi-cyan {
@@ Expand Down @@