Init vscode app... Starting to kinda work for debugging.

NateAGeek · May 1, 2022 · bd87779 · bd87779
1 parent 21d984f
commit bd87779
Show file tree

Hide file tree

Showing 9 changed files with 235 additions and 142 deletions.
diff --git a/webview/src/MemoryViewer.module.css b/webview/src/MemoryViewer.module.css
@@ -1,2 +1,8 @@
 .MemoryViewer {
+  display: flex;
+  flex-direction: column;
+  margin-left: 4px;
+  margin-right: 4px;
+  overflow: hidden;
+  height: 100vh;
 }
diff --git a/webview/src/MemoryViewer.tsx b/webview/src/MemoryViewer.tsx
@@ -1,18 +1,37 @@
-import { createSignal, onMount } from 'solid-js';
-import MemoryViewerData from './componenets/MemoryViewerData';
+import { createEffect, createSignal } from 'solid-js';
+import MemoryViewerBufferTable from './componenets/MemoryViewerBufferTable';
 import MemoryViewerHeader from './componenets/MemoryViewerHeader';
 // import { VSCodeAPI } from '.';
 import styles from './MemoryViewer.module.css';
 
 export default function MemoryViewer() {
+  const [bytes, setBytes] = createSignal(Array.from({length:  (8 * 100)}, _ => Math.floor(
+    Math.random() * 255
+  )));
+
+  createEffect(() => {
+    console.log("bytes", bytes());
+  });
+
   return (
     <div class={styles.MemoryViewer}>
-      <div style={{
-        "overflow-x": 'scroll'
-      }}>
-        <MemoryViewerHeader/>
-        <MemoryViewerData/>
-      </div>
+      <MemoryViewerHeader/>
+      <MemoryViewerBufferTable
+        startAddress={0}
+        bytes={bytes()}
+        onScrollBottom={() => {
+          console.log('scroll bottom');
+          setBytes([...bytes(), ...Array.from({length:  (8 * 100)}, _ => Math.floor(
+            Math.random() * 255
+          ))]);
+        }}
+        onScrollTop={() => {
+          console.log('scroll top');
+          setBytes([...Array.from({length:  (8 * 100)}, _ => Math.floor(
+            Math.random() * 255
+          )), ...bytes()]);
+        }}
+      />
     </div>
   );
 };

diff --git a/webview/src/componenets/MemoryViewerBufferTable/index.tsx b/webview/src/componenets/MemoryViewerBufferTable/index.tsx
@@ -0,0 +1,179 @@
+import styles from './styles.module.css';
+
+export interface MemoryViewerBufferTableProps {
+  // rowBufferLength: number
+  startAddress: number,
+  bytes:  number[],
+  onScrollTop: () => void,
+  onScrollBottom: () => void,
+}
+
+function buildBufferLength(rowBufferLength: number) {
+  const headerItems = [];
+  for(let i = 0; i < rowBufferLength; i++) {
+    headerItems.push((
+      <th style={{
+        position: 'sticky',
+        top: 0,
+        "z-index": 998,
+        'padding-left': '4px',
+        'padding-right': '4px',
+        'background-color': 'var(--vscode-sideBar-background)',
+      }}>{i.toString().padStart(2, '0')}</th>
+    ));
+  }
+  return headerItems;
+}
+function buildBufferRows(startAddress: number, bytes: number[], rowBufferLength: number) {
+  const rows = [];
+  for(let addressStep = 0; addressStep < bytes.length; addressStep += rowBufferLength) {
+    rows.push((
+      <MemoryViewerDataRow address={startAddress + addressStep} bytes={bytes.slice(addressStep, addressStep + rowBufferLength)} addressLength={8}/>
+    ));
+  }
+  return rows;
+}
+
+const debounce = function(func: Function, delay: number) {
+  let timer: number;
+  return function () {
+    const context = this;
+    const args = arguments;
+    clearTimeout(timer); 
+    timer = setTimeout(()=> {
+      func.apply(context, args);
+    }, delay);
+  };
+};
+
+export default function MemoryViewerBufferTable(props: MemoryViewerBufferTableProps) {
+  const rowBufferLength = 8;
+  const handleScroll = debounce((event: 
+  UIEvent & {
+    currentTarget: HTMLDivElement;
+    target: Element;
+  }) => {
+    if(event.target.scrollTop >= event.target.scrollHeight - event.target.clientHeight) {
+      props.onScrollBottom();
+    } else if (event.target.scrollTop <= 0) {
+      props.onScrollTop();
+    }
+  }, 250);
+
+  return (
+    <div onScroll={handleScroll} style={{
+      "overflow-y": 'scroll',
+    }}>
+      <div class={""}/>
+    <table style={{
+      "border-spacing": 0,
+    }}>
+      <thead>
+        <tr>
+          <th colspan={100}>
+            <div style={{
+              height: '1px',
+              width: '100%',
+              "background-color": '#424242'
+            }}/>
+          </th>
+        </tr>
+        <tr>
+          <th style={{
+            position: 'sticky',
+            left: 0,
+            top: 0,
+            "z-index": 999,
+            'text-align': 'left',
+            'background-color': 'var(--vscode-sideBar-background)',
+          }} >Address</th>
+          {buildBufferLength(rowBufferLength)}
+          <th style={{
+            position: 'sticky',
+            top: 0,
+            "z-index": 998,
+            'text-align': 'left',
+            'padding-left': '32px',
+            'width': '100%',
+            'background-color': 'var(--vscode-sideBar-background)',
+          }}>Decoded Text</th>
+        </tr>
+        <tr>
+          <td colspan={100}>
+            <div style={{
+              height: '1px',
+              width: '100%',
+              "background-color": '#424242'
+            }}/>
+          </td>
+        </tr>
+      </thead>
+      <tbody>
+        {buildBufferRows(props.startAddress, props.bytes, rowBufferLength)}
+      </tbody>
+    </table>
+    </div>
+  );
+} 
+
+export interface MemoryViewerDataRowProps {
+  address: number,
+  addressLength: number,
+  bytes: Uint8Array,
+}
+
+function MemoryViewerDataRow({
+  address,
+  addressLength,
+  bytes,
+}: MemoryViewerDataRowProps) {
+
+  function buildRowBuffer(bytes: Uint8Array) {
+    const bytesHex: string[] = [];
+    const bytesAscii: string[] = [];
+    return bytes.reduce((acc, byte) => {
+      acc.bytesHex.push(byte.toString(16).padStart(2, '0').toLowerCase());
+      acc.bytesAscii.push(byte >= 33 && byte <= 126 ? String.fromCharCode(byte) : "·");
+      return acc;
+    }, {
+      bytesHex: [],
+      bytesAscii: []
+    } as {
+      bytesHex: string[],
+      bytesAscii: string[]
+    });
+  }
+  const stuff = buildRowBuffer(bytes);
+  return (
+  <tr>
+    <td className='monaco-highlighted-label' style={{
+      position: 'sticky',
+      left: 0,
+      'background-color': 'var(--vscode-sideBar-background)',
+      "font-family": 'var(--vscode-editor-font-family)',
+      "color": '#c586c0'
+    }}>0x{address.toString(16).padStart(addressLength, '0')}:</td>
+    {stuff.bytesHex.map((v, i) => 
+      <td style={{
+        "font-family": 'var(--vscode-editor-font-family)',
+        "text-align": 'center',
+        "font-weight": 100
+      }}>{v}</td>  
+    )}
+    <td style={{
+      "white-space": "nowrap",
+      "padding-left": "32px",
+      "font-weight": 600
+    }}>
+      {stuff.bytesAscii.map((v, i) => (<span style={{
+        display: 'inline-block',
+        "padding-right": i !== stuff.bytesAscii.length-1 ? '16px' : '0px',
+        width: '8px',
+        "text-align": 'center'
+      }}>
+        {v}
+      </span>))}
+    </td>
+  </tr>
+  );
+}
diff --git a/...nenets/MemoryViewerData/styles.module.css → ...MemoryViewerBufferTable/styles.module.css b/...nenets/MemoryViewerData/styles.module.css → ...MemoryViewerBufferTable/styles.module.css
diff --git a/webview/src/componenets/MemoryViewerData/index.tsx b/webview/src/componenets/MemoryViewerData/index.tsx
diff --git a/webview/src/componenets/MemoryViewerHeader/index.tsx b/webview/src/componenets/MemoryViewerHeader/index.tsx
@@ -6,11 +6,22 @@ export interface MemoryViewerHeaderProps {
 
 export default function MemoryViewerHeader({}: MemoryViewerHeaderProps) {
   return (
-    <div>
-      <vscode-text-field placeholder="Enter Address..."/>
+    <div style={{
+      'display': 'flex',
+      'flex-direction': 'row',
+      "margin-top": '4px',
+      "margin-bottom": '4px',
+    }}>
+      <vscode-text-field style={{
+        flex: '1',
+        "margin-right": '4px',
+      }} placeholder="Enter Hex Address or Variable Name..."/>
       <vscode-button appearance="icon" aria-label="Confirm">
 	      <span class="codicon codicon-refresh"></span>
       </vscode-button>
+      <vscode-button appearance="icon" aria-label="Confirm">
+	      <span class="codicon codicon-settings"></span>
+      </vscode-button>
     </div>
   );
 }
diff --git a/webview/src/index.css b/webview/src/index.css
@@ -3,6 +3,7 @@ body {
   padding: 0;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  overflow: hidden;
 }
 :root {
   --vscode-font-family: "Segoe WPC", "Segoe UI", sans-serif;