Wire up some more

frida · Sep 11, 2024 · f00583f · f00583f
1 parent 96dde25
commit f00583f
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 12 deletions.
diff --git a/frida_tools/tracer.py b/frida_tools/tracer.py
@@ -304,7 +304,8 @@ async def _handle_websocket_connection(self, websocket: websockets.asyncio.serve
 
                 while True:
                     message = json.loads(await websocket.recv())
-                    if message["type"] == "load-handler":
+                    mtype = message["type"]
+                    if mtype == "load-handler":
                         target, source = self._handlers[message["id"]]
                         await websocket.send(
                             json.dumps(
@@ -314,6 +315,11 @@ async def _handle_websocket_connection(self, websocket: websockets.asyncio.serve
                                 }
                             )
                         )
+                    elif mtype == "save-handler":
+                        target, source = self._handlers[message["id"]]
+                        Path(source).write_text(message["code"], encoding="utf-8")
+                    else:
+                        print("TODO:", message)
             except:
                 # TODO: Remove this:
                 import traceback

diff --git a/ui/tracer/src/App.css b/ui/tracer/src/App.css
@@ -2,6 +2,6 @@
     min-width: 140px;
 }
 
-.editor {
+.work-area {
     flex: 1;
-}
+}
diff --git a/ui/tracer/src/App.tsx b/ui/tracer/src/App.tsx
@@ -1,15 +1,24 @@
 import "./App.css";
-import { Tree, TreeNodeInfo } from "@blueprintjs/core";
-import Monaco from "monaco-editor";
+import {
+    Button,
+    ButtonGroup,
+    Divider,
+    Tree,
+    TreeNodeInfo
+} from "@blueprintjs/core";
+import type monaco from "monaco-editor";
 import Editor from "@monaco-editor/react";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import useWebSocket from "react-use-websocket";
 
 function App() {
     const [handlers, setHandlers] = useState<Handler[]>([]);
     const [selectedScope, setSelectedScope] = useState("");
     const [selectedHandler, setSelectedHandler] = useState(-1);
+    const [editor, setEditor] = useState<monaco.editor.IStandaloneCodeEditor | null>(null);
+    const [monaco, setMonaco] = useState<any>(null);
     const [handlerCode, setHandlerCode] = useState("");
+    const [handlerDirty, setHandlerDirty] = useState(false);
     const { sendJsonMessage, lastJsonMessage } = useWebSocket<TracerMessage>("ws://localhost:1337" /* window.location.origin */);
 
     const scopes = handlers.reduce((result, { scope }) => result.add(scope), new Set<string>());
@@ -33,7 +42,7 @@ function App() {
         };
     });
 
-    function onNodeClick(node: TreeNodeInfo) {
+    function handleNodeClick(node: TreeNodeInfo) {
         if (typeof node.id === "string") {
             setSelectedScope((selectedScope !== node.id) ? node.id : "");
         } else {
@@ -42,12 +51,53 @@ function App() {
         }
     }
 
-    const editorOptions: Monaco.editor.IStandaloneEditorConstructionOptions = {
+    function handleNodeExpand(node: TreeNodeInfo) {
+        setSelectedScope(node.id as string);
+    }
+
+    function handleNodeCollapse() {
+        setSelectedScope("");
+    }
+
+    function handleDeployClick() {
+        const code = editor!.getValue();
+        setHandlerCode(code);
+        setHandlerDirty(false);
+        sendJsonMessage({ type: "save-handler", id: selectedHandler, code });
+    }
+
+    const editorOptions: monaco.editor.IStandaloneEditorConstructionOptions = {
         automaticLayout: true,
         readOnly: selectedHandler === -1,
         readOnlyMessage: { value: "Cannot edit without a handler selected" },
     };
 
+    function handleEditorDidMount(editor: monaco.editor.IStandaloneCodeEditor, monaco: any) {
+        setEditor(editor);
+        setMonaco(monaco);
+    }
+
+    function handleEditorValidation() {
+        setHandlerDirty(editor!.getValue() !== handlerCode);
+    }
+
+    useEffect(() => {
+        if (monaco === null) {
+            return;
+        }
+
+        const handler = editor!.onKeyDown(e => {
+            if (e.ctrlKey && e.keyCode === monaco.KeyCode.KeyS) {
+                handleDeployClick();
+                e.preventDefault();
+            }
+        });
+
+        return () => {
+            handler.dispose();
+        };
+    }, [selectedHandler, editor, monaco]);
+
     useEffect(() => {
         if (lastJsonMessage === null) {
             return;
@@ -69,8 +119,33 @@ function App() {
 
     return (
         <>
-            <Tree className="handlers" contents={handlerNodes} onNodeClick={onNodeClick} />
-            <Editor className="editor" value={handlerCode} height="100%" language="typescript" theme="vs-dark" options={editorOptions} beforeMount={onMonacoLoaded} />
+            <Tree
+                className="handlers"
+                contents={handlerNodes}
+                onNodeClick={handleNodeClick}
+                onNodeExpand={handleNodeExpand}
+                onNodeCollapse={handleNodeCollapse}
+                />
+            <Divider />
+            <div className="work-area">
+                <ButtonGroup minimal={true}>
+                    <Button
+                        icon="rocket-slant"
+                        disabled={selectedHandler === -1 || !handlerDirty}
+                        onClick={handleDeployClick}>Deploy</Button>
+                </ButtonGroup>
+                <Editor
+                    className="editor"
+                    value={handlerCode}
+                    height="100%"
+                    language="typescript"
+                    theme="vs-dark"
+                    options={editorOptions}
+                    beforeMount={handleEditorWillMount}
+                    onMount={handleEditorDidMount}
+                    onValidate={handleEditorValidation}
+                    />
+            </div>
         </>
     );
 }
@@ -104,7 +179,7 @@ function labelFromScope(scope: string) {
     return scope.substring(dirsepIndex + 1);
 }
 
-async function onMonacoLoaded(monaco: any) {
+async function handleEditorWillMount(monaco: any) {
     const typingsResponse = await fetch("https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/master/types/frida-gum/index.d.ts");
     const typingsContent = await typingsResponse.text();
     monaco.languages.typescript.typescriptDefaults.addExtraLib(typingsContent + `

diff --git a/ui/tracer/src/index.css b/ui/tracer/src/index.css
@@ -4,5 +4,4 @@ html, body, #root {
 
 #root {
     display: flex;
-    padding: 15px 0;
 }
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,5 +4,4 @@ html, body, #root { @@
     #root {
         display: flex;
-        padding: 15px 0;
     }