Wire up some more

frida · Sep 21, 2024 · 5136e67 · 5136e67
1 parent 83c7439
commit 5136e67
Show file tree

Hide file tree

Showing 8 changed files with 153 additions and 8 deletions.
diff --git a/apps/tracer/index.html b/apps/tracer/index.html
@@ -8,7 +8,6 @@
   </head>
   <body>
     <div id="root"></div>
-    <script src="/hello.js"></script>
     <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>
diff --git a/apps/tracer/src/App.css b/apps/tracer/src/App.css
@@ -44,6 +44,30 @@
     position: absolute !important;
 }
 
+.bottom-tabs {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+
+.bp5-tab-list {
+    padding-left: 5px;
+}
+
+.bp5-tab:focus {
+    outline: 0;
+}
+
+.bottom-tab-panel {
+    display: flex;
+    margin-top: 5px;
+    flex: 1;
+}
+
 .event-view {
     flex: 1;
 }
+
+.disassembly-view {
+    flex: 1;
+}
diff --git a/apps/tracer/src/App.tsx b/apps/tracer/src/App.tsx
@@ -1,5 +1,6 @@
 import "./App.css";
 import AddTargetsDialog from "./AddTargetsDialog.tsx";
+import DisassemblyView from "./DisassemblyView.tsx";
 import EventView from "./EventView.tsx";
 import HandlerEditor from "./HandlerEditor.tsx";
 import HandlerList from "./HandlerList.tsx";
@@ -17,6 +18,8 @@ import {
     Callout,
     Button,
     ButtonGroup,
+    Tabs,
+    Tab,
 } from "@blueprintjs/core";
 import { useEffect, useState } from "react";
 import { Resplit } from 'react-resplit';
@@ -132,6 +135,18 @@ export default function App() {
         />
         : null;
 
+    const eventView = (
+        <EventView
+            events={events}
+            highlightedIndex={highlightedEventIndex}
+            onActivate={handleEventActivation}
+        />
+    );
+
+    const disassemblyView = (
+        <DisassemblyView />
+    );
+
     return (
         <>
             <Resplit.Root className="app-content" direction="vertical">
@@ -145,7 +160,7 @@ export default function App() {
                             onHandlerSelect={handleHandlerSelection}
                         />
                         <ButtonGroup className="target-actions" vertical={true} minimal={true} alignText="left">
-                            <Button intent="success" icon="add" onClick={() => setAddingTargets(true)}>Add</Button>
+                        <Button intent="success" icon="add" onClick={() => setAddingTargets(true)}>Add</Button>
                             {(spawnedProgram !== null) ? <Button intent="danger" icon="reset" onClick={handleRespawnRequest}>Respawn</Button> : null}
                         </ButtonGroup>
                     </section>
@@ -177,11 +192,10 @@ export default function App() {
                 </Resplit.Pane>
                 <Resplit.Splitter className="app-splitter" order={1} size="5px" />
                 <Resplit.Pane className="bottom-area" order={2} initialSize="0.3fr">
-                    <EventView
-                        events={events}
-                        highlightedIndex={highlightedEventIndex}
-                        onActivate={handleEventActivation}
-                    />
+                    <Tabs className="bottom-tabs" defaultSelectedTabId="events" renderActiveTabPanelOnly={true} animate={false}>
+                        <Tab id="events" title="Events" panel={eventView} panelClassName="bottom-tab-panel" />
+                        <Tab id="disassembly" title="Disassembly" panel={disassemblyView} panelClassName="bottom-tab-panel" />
+                    </Tabs>
                 </Resplit.Pane>
             </Resplit.Root>
             <AddTargetsDialog

diff --git a/apps/tracer/src/DisassemblyView.css b/apps/tracer/src/DisassemblyView.css
@@ -0,0 +1,7 @@
+.disassembly-view {
+    padding: 5px;
+    font-family: monospace;
+    font-size: 10px;
+    background-color: #1e1e1e;
+    color: #e4e4e4;
+}
diff --git a/apps/tracer/src/DisassemblyView.tsx b/apps/tracer/src/DisassemblyView.tsx
@@ -0,0 +1,38 @@
+import "./DisassemblyView.css";
+import loadR2 from "./r2.js";
+import { useRef } from "react";
+import { useStayAtBottom } from "react-stay-at-bottom";
+
+let r2Output = "";
+
+export default function DisassemblyView() {
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    useStayAtBottom(containerRef, {
+        initialStay: true,
+        autoStay: true
+    });
+
+    return (
+        <div ref={containerRef} className="disassembly-view" dangerouslySetInnerHTML={{__html: r2Output}} />
+    );
+}
+
+async function start() {
+    const r2 = await loadR2();
+
+    const _run = r2.cwrap("run", "number", ["string"]);
+
+    const rawResult = _run("x");
+    try {
+        const result = r2.UTF8ToString(rawResult);
+        r2Output = result;
+    } finally {
+        r2._free(rawResult)
+    }
+}
+
+start()
+    .catch(e => {
+        console.error("Unable to load r2:", e);
+    });
diff --git a/apps/tracer/src/r2.d.ts b/apps/tracer/src/r2.d.ts
@@ -0,0 +1,44 @@
+// TypeScript bindings for emscripten-generated code.  Automatically generated at compile time.
+declare namespace RuntimeExports {
+    /**
+     * @param {string=} returnType
+     * @param {Array=} argTypes
+     * @param {Object=} opts
+     */
+    function cwrap(ident: any, returnType?: string | undefined, argTypes?: any[] | undefined, opts?: any | undefined): any;
+    /**
+     * Given a pointer 'ptr' to a null-terminated UTF8-encoded string in the
+     * emscripten HEAP, returns a copy of that string as a Javascript String object.
+     *
+     * @param {number} ptr
+     * @param {number=} maxBytesToRead - An optional length that specifies the
+     *   maximum number of bytes to read. You can omit this parameter to scan the
+     *   string until the first 0 byte. If maxBytesToRead is passed, and the string
+     *   at [ptr, ptr+maxBytesToReadr[ contains a null byte in the middle, then the
+     *   string will cut short at that byte index (i.e. maxBytesToRead will not
+     *   produce a string of exact length [ptr, ptr+maxBytesToRead[) N.B. mixing
+     *   frequent uses of UTF8ToString() with and without maxBytesToRead may throw
+     *   JS JIT optimizations off, so it is worth to consider consistently using one
+     * @return {string}
+     */
+    function UTF8ToString(ptr: number, maxBytesToRead?: number | undefined): string;
+    let HEAPF32: any;
+    let HEAPF64: any;
+    let HEAP_DATA_VIEW: any;
+    let HEAP8: any;
+    let HEAPU8: any;
+    let HEAP16: any;
+    let HEAPU16: any;
+    let HEAP32: any;
+    let HEAPU32: any;
+    let HEAP64: any;
+    let HEAPU64: any;
+}
+interface WasmModule {
+  _main(_0: number, _1: number): number;
+  _run(_0: number): number;
+  _free(_0: number): void;
+}
+
+export type MainModule = WasmModule & typeof RuntimeExports;
+export default function MainModuleFactory (options?: unknown): Promise<MainModule>;
diff --git a/apps/tracer/src/r2.js b/apps/tracer/src/r2.js
diff --git a/apps/tracer/vite.config.ts b/apps/tracer/vite.config.ts
@@ -15,7 +15,10 @@ export default defineConfig({
     },
     server: {
         proxy: {
-            "^/hello.*": "http://localhost:8000",
+            "^/src/r2\\.wasm": {
+                target: "http://localhost:8000",
+                rewrite: (path) => path.replace(/^\/src/, ""),
+            },
         }
     },
 });