Push ltkyqkoottkz

web/debugger.html

@@ -18,14 +18,18 @@
     }
 
     body {
+        margin: 0;
         flex: 1;
         display: flex;
         flex-direction: column;
-        gap: 8px;
+        min-width: 0;
     }
 
-    section.panel {
+    section {
         padding: 1ex;
+        background: var(--gray);
+        border-right: 1px solid black;
+        border-bottom: 1px solid black;
     }
 
     /* memory */
@@ -46,13 +50,11 @@
         outline: solid 1px red;
     }
 
-
     .error {
         color: red;
     }
 
     .code {
-        padding: 1ex;
         background: white;
         width: 80ex;
     }

web/debugger/break.tsx

@@ -1,5 +1,4 @@
 import * as preact from 'preact';
-import { h } from 'preact';
 import * as wasm from '../glue/pkg/glue';
 import { Labels } from './labels';
 import { MemoryView, Number } from './memory';
@@ -137,10 +136,10 @@ export class BreakpointsComponent extends preact.Component<BreakpointsComponent.
       );
     }
     return (
-      <section>
+      <div>
         {rows}
         <AddComponent onAccept={(text) => this.add(text)} />
-      </section>
+      </div>
     );
   }
 }

web/debugger/code.tsx

@@ -1,5 +1,4 @@
 import * as preact from 'preact';
-import { Fragment, h } from 'preact';
 import { Instruction } from '../glue/pkg/glue';
 import { Labels } from './labels';
 import { MemoryView, Number } from './memory';
@@ -53,11 +52,9 @@ export class Code extends preact.Component<Code.Props> {
       );
     });
     return (
-      <section class='code'>
-        <code class='disassembly'>
-          {instrs}
-        </code>
-      </section>
+      <code class='disassembly'>
+        {instrs}
+      </code>
     );
   }
 }

web/debugger/ddraw.tsx

@@ -0,0 +1,52 @@
+import * as preact from 'preact';
+import * as wasm from '../glue/pkg/glue';
+import { MemoryView, Number } from './memory';
+
+namespace DirectDraw {
+  export interface Props extends MemoryView {
+    surfaces: wasm.SurfaceDebug[];
+  }
+  export interface State {
+    hover?: wasm.SurfaceDebug;
+  }
+}
+export class DirectDraw extends preact.Component<DirectDraw.Props, DirectDraw.State> {
+  canvasContainer = (parent: HTMLElement | null) => {
+    if (!parent) return;
+    parent.appendChild(this.state.hover!.canvas);
+  };
+
+  render() {
+    const rows = this.props.surfaces.map((surface) => {
+      return (
+        <tr
+          onMouseEnter={() => this.setState({ hover: surface })}
+          onMouseLeave={() => this.setState({ hover: undefined })}
+        >
+          <td style={{ textAlign: 'right' }}>
+            <Number digits={8} {...this.props}>{surface.ptr}</Number>
+          </td>
+          <td style={{ textAlign: 'right' }}>{surface.width}</td>
+          <td style={{ textAlign: 'right' }}>{surface.height}</td>
+          <td style={{ textAlign: 'right' }}>{surface.bytes_per_pixel}</td>
+          <td style={{ textAlign: 'right' }}>{surface.primary ? 'yes' : 'no'}</td>
+        </tr>
+      );
+    });
+    return (
+      <div style={{ flex: 1, minHeight: 0 }}>
+        <table>
+          <tr>
+            <th>ptr</th>
+            <th>width</th>
+            <th>height</th>
+            <th>bytes_per_pixel</th>
+            <th>primary</th>
+          </tr>
+          {rows}
+        </table>
+        {this.state.hover && <div ref={this.canvasContainer} />}
+      </div>
+    );
+  }
+}

web/debugger/debugger.tsx

@@ -1,10 +1,10 @@
 import * as preact from 'preact';
-import { Fragment, h } from 'preact';
 import * as emulator from '../emulator';
 import { Instruction } from '../glue/pkg/glue';
 import { EmulatorComponent } from '../web';
 import { BreakpointsComponent } from './break';
 import { Code } from './code';
+import { DirectDraw } from './ddraw';
 import { Labels, parseCSV } from './labels';
 import { Mappings } from './mappings';
 import { Memory, MemoryView, Number } from './memory';
@@ -182,34 +182,23 @@ export class Debugger extends preact.Component<Debugger.Props, Debugger.State> {
     const { emulator, labels } = this.state;
 
     const output = (
-      <div>
-        <code>
-          {this.state.stdout}
-          {this.state.error ? <div class='error'>ERROR: {this.state.error}</div> : null}
-        </code>
-      </div>
+      <code>
+        {this.state.stdout}
+        {this.state.error ? <div class='error'>ERROR: {this.state.error}</div> : null}
+      </code>
     );
 
     if (!emulator) {
       return output;
     }
 
-    // Note: disassemble_json() may cause allocations, invalidating any existing .memory()!
+    // Note: disassemble() may cause allocations, invalidating any existing .memory()!
     let instrs: Instruction[] = [];
-    let code;
     const eip = emulator.emu.eip;
     if (eip == 0xffff_fff0) {
-      code = <section class='code'>(in async)</section>;
+      instrs = [];
     } else {
       instrs = emulator.disassemble(eip);
-      code = (
-        <Code
-          instrs={instrs}
-          labels={labels}
-          {...this.memoryView}
-          runTo={this.runTo}
-        />
-      );
     }
     return (
       <>
@@ -227,66 +216,81 @@ export class Debugger extends preact.Component<Debugger.Props, Debugger.State> {
             {emulator.emu.instr_count} instrs executed | {Math.floor(emulator.looper.stepsPerMs)}/ms
           </div>
         </section>
-        <div style={{ display: 'flex', gap: '8px' }}>
-          {code}
-          <RegistersComponent
-            {...this.memoryView}
-            regs={emulator.emu.regs()}
-          />
-          <Stack
-            {...this.memoryView}
-            labels={labels}
-            emu={emulator.emu}
-          />
+        <div style={{ display: 'flex' }}>
+          <section class='code'>
+            <Code
+              instrs={instrs}
+              labels={labels}
+              {...this.memoryView}
+              runTo={this.runTo}
+            />
+          </section>
+          <section>
+            <RegistersComponent
+              {...this.memoryView}
+              regs={emulator.emu.regs()}
+            />
+          </section>
+          <section style={{ flex: 1, minWidth: 0, overflow: 'auto' }}>
+            <Stack
+              {...this.memoryView}
+              labels={labels}
+              emu={emulator.emu}
+            />
+          </section>
         </div>
-        <Tabs
-          style={{ width: '80ex', flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}
-          tabs={{
-            output: () => output,
+        <section style={{ flex: 1, minHeight: 0, display: 'flex' }}>
+          <Tabs
+            style={{ flex: 1 }}
+            tabs={{
+              output: () => output,
+
+              memory: () => (
+                <Memory
+                  mem={emulator.emu.memory()}
+                  base={this.state.memBase}
+                  highlight={this.state.memHighlight}
+                  jumpTo={(addr) => this.setState({ memBase: Math.max(0, addr) })}
+                />
+              ),
+              mappings: () => (
+                <Mappings
+                  mappings={emulator.mappings()}
+                  highlight={this.state.memHighlight}
+                  {...this.memoryView}
+                />
+              ),
 
-            memory: () => (
-              <Memory
-                mem={emulator.emu.memory()}
-                base={this.state.memBase}
-                highlight={this.state.memHighlight}
-                jumpTo={(addr) => this.setState({ memBase: Math.max(0, addr) })}
-              />
-            ),
-            mappings: () => (
-              <Mappings
-                mappings={emulator.mappings()}
-                highlight={this.state.memHighlight}
-                {...this.memoryView}
-              />
-            ),
+              imports: () => {
+                const labels = emulator.labels();
+                return (
+                  <div style={{ minHeight: 0, flex: 1, overflow: 'auto' }}>
+                    {labels.map(([addr, name]) => (
+                      <div>
+                        <code>
+                          <Number digits={8} {...this.memoryView}>{addr}</Number>: {name}
+                        </code>
+                      </div>
+                    ))}
+                  </div>
+                );
+              },
 
-            imports: () => {
-              const labels = emulator.labels();
-              return (
-                <div style={{ flex: 1, overflow: 'auto' }}>
-                  {labels.map(([addr, name]) => (
-                    <div>
-                      <code>
-                        <Number digits={8} {...this.memoryView}>{addr}</Number>: {name}
-                      </code>
-                    </div>
-                  ))}
-                </div>
-              );
-            },
+              breakpoints: () => (
+                <BreakpointsComponent
+                  breakpoints={emulator.breakpoints}
+                  labels={labels}
+                  highlight={eip}
+                  {...this.memoryView}
+                />
+              ),
 
-            breakpoints: () => (
-              <BreakpointsComponent
-                breakpoints={emulator.breakpoints}
-                labels={labels}
-                highlight={eip}
-                {...this.memoryView}
-              />
-            ),
-          }}
-          selected={this.state.selectedTab}
-          switchTab={(selectedTab) => this.setState({ selectedTab })}
-        />
+              directdraw: () => <DirectDraw surfaces={emulator.emu.direct_draw_surfaces()} {...this.memoryView} />,
+            }}
+            selected={this.state.selectedTab}
+            switchTab={(selectedTab) => this.setState({ selectedTab })}
+          />
+        </section>
       </>
     );
   }

web/debugger/mappings.tsx

@@ -1,5 +1,4 @@
 import * as preact from 'preact';
-import { h } from 'preact';
 import * as wasm from '../glue/pkg/glue';
 import { MemoryView, Number } from './memory';
 import { hex } from './util';
@@ -33,8 +32,8 @@ export class Mappings extends preact.Component<Mappings.Props> {
       );
     });
     return (
-      <section style={{ flex: 1, minHeight: 0, display: 'flex' }}>
-        <table style={{ display: 'block', overflow: 'auto' }}>
+      <div style={{ flex: 1, minHeight: 0, display: 'flex' }}>
+        <table style={{ width: '100%', display: 'block', overflow: 'auto' }}>
           <thead>
             <tr>
               <th>addr</th>
@@ -44,7 +43,7 @@ export class Mappings extends preact.Component<Mappings.Props> {
           </thead>
           <tbody>{rows}</tbody>
         </table>
-      </section>
+      </div>
     );
   }
 }

web/debugger/memory.tsx

@@ -1,5 +1,4 @@
 import * as preact from 'preact';
-import { h } from 'preact';
 import { hex } from './util';
 
 /**
@@ -114,7 +113,7 @@ export class Memory extends preact.Component<Memory.Props> {
     }
 
     return (
-      <section style={{ minHeight: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column', gap: '1ex' }}>
+      <div style={{ minHeight: 0, overflow: 'hidden', display: 'flex', flexDirection: 'column', gap: '1ex' }}>
         <form style={{ display: 'flex', justifyContent: 'center' }} onSubmit={this.onSubmit}>
           <button type='button' onClick={this.onJumpBack}>&lt;</button>
           <input name='addr' size={8} value={hex(this.props.base, 8)} />
@@ -125,7 +124,7 @@ export class Memory extends preact.Component<Memory.Props> {
           <code class='grid'>{hexRows}</code>
           <code>{asciiRows}</code>
         </div>
-      </section>
+      </div>
     );
   }
 }