Kinda getting some of it looking goodish? Need to hook up VSCode and …

…do scrolling
NateAGeek · Apr 1, 2022 · 21d984f · 21d984f
1 parent 10d7e72
commit 21d984f
Show file tree

Hide file tree

Showing 12 changed files with 5,134 additions and 67 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -53,6 +53,7 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
+    "@vscode/codicons": "^0.0.29",
     "@vscode/webview-ui-toolkit": "^0.9.2"
   }
 }
diff --git a/src/MemoryViewerViewProvider.ts b/src/MemoryViewerViewProvider.ts
@@ -36,6 +36,7 @@ export class MemoryViewerViewProvider implements WebviewViewProvider {
     const mainUri = getUri(webview, extensionUri, ["webview", "dist", "assets", "index.js"]);
     const solidVendorUri = getUri(webview, extensionUri, ["webview", "dist", "assets", "vendor.js"]);
     const stylesUri = getUri(webview, extensionUri, ["webview", "dist", "assets", "index.css"]);
+    const codiconsUri = getUri(webview, extensionUri, ['node_modules', '@vscode/codicons', 'dist', 'codicon.css']);
 
     return `
       <!DOCTYPE html>
@@ -47,6 +48,7 @@ export class MemoryViewerViewProvider implements WebviewViewProvider {
           <script type="module" crossorigin src="${mainUri}"></script>
           <link rel="modulepreload" href="${solidVendorUri}">
           <link rel="stylesheet" href="${stylesUri}">
+          <link rel="stylesheet" href="${codiconsUri}">
           <title>Memory Viewer</title>
         </head>
         <body>

diff --git a/tsconfig.json b/tsconfig.json
@@ -3,7 +3,9 @@
     "module": "commonjs",
     "target": "ES2020",
     "outDir": "out",
-    "lib": ["ES2020"],
+    "lib": [
+      "ES2020"
+    ],
     "sourceMap": true,
     "rootDir": "src",
     "strict": true
@@ -13,5 +15,7 @@
     // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
     // "noUnusedParameters": true,  /* Report errors on unused parameters. */
   },
-  "exclude": ["webview"]
-}
+  "exclude": [
+    "./webview/**/*"
+  ]
+}
diff --git a/webview/index.html b/webview/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
-    <title>Solid App</title>
+    <title>Better Memory Viewer</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/webview/src/MemoryViewer.tsx b/webview/src/MemoryViewer.tsx
@@ -1,42 +1,17 @@
-import { createSignal, createEffect } from 'solid-js';
-import { VSCodeAPI } from '.';
+import { createSignal, onMount } from 'solid-js';
+import MemoryViewerData from './componenets/MemoryViewerData';
+import MemoryViewerHeader from './componenets/MemoryViewerHeader';
+// import { VSCodeAPI } from '.';
 import styles from './MemoryViewer.module.css';
 
 export default function MemoryViewer() {
-  const [memory, setMemory] = createSignal('');
-  const [memoryBuffer, setMemoryBuffer] = createSignal('');
-  createEffect(() => {
-    VSCodeAPI.onMessage(message => {
-      console.log("Message from extension:", message.data.data);
-      const hexs = Uint8Array.from(atob(message.data.data), c => c.charCodeAt(0));
-      const hexString = Array.from(hexs).map(c => c.toString(16).padStart(2, '0')).join('|0x');
-      setMemoryBuffer(hexString);
-    });
-  });
-
   return (
     <div class={styles.MemoryViewer}>
       <div style={{
-        "display": 'flex',
-        "align-items": 'center',
+        "overflow-x": 'scroll'
       }}>
-        <span style={{
-          "margin-right": '0.5em',
-        }}>Address:</span>
-        <vscode-text-field onInput={(e) => {
-          setMemory(e.target.value);
-        }}/>
-        <vscode-button onClick={() => {
-          VSCodeAPI.postMessage({
-            command: 'readMemory',
-            address: memory(),
-          });
-        }}>Send Message</vscode-button>
-      </div>
-      <div>
-        {memory()}
-        <h1>Memory Buffer</h1>
-        {memoryBuffer()}
+        <MemoryViewerHeader/>
+        <MemoryViewerData/>
       </div>
     </div>
   );

diff --git a/webview/src/componenets/MemoryViewerData/index.tsx b/webview/src/componenets/MemoryViewerData/index.tsx
@@ -0,0 +1,128 @@
+import styles from './styles.module.css';
+
+export interface MemoryViewerDataProps {
+  // rowBufferLength: number
+}
+
+export default function MemoryViewerData({}: MemoryViewerDataProps) {
+  const rowBufferLength = 8;
+
+  function buildBufferLength(rowBufferLength: number, boldSteps: number) {
+    const headerItems = [];
+    for(let i = 0; i < rowBufferLength; i++) {
+      headerItems.push((
+        <th style={{
+          'padding-left': '4px',
+          'padding-right': '4px',
+        }}>{i.toString().padStart(2, '0')}</th>
+      ));
+    }
+    return headerItems;
+  }
+  const bytes = Uint8Array.from([72, 45, 25, 4, 55, 6, 7, 8]);
+  return (
+    <table style={{
+      "border-spacing": 0,
+    }}>
+      <thead style={{
+
+      }}>
+        <tr>
+          <th style={{
+            position: 'sticky',
+            left: 0,
+            'text-align': 'left',
+            'background-color': 'var(--vscode-sideBar-background)',
+          }} >Address</th>
+          {buildBufferLength(rowBufferLength, 4)}
+          <th style={{
+            'text-align': 'left',
+            'padding-left': '32px',
+
+          }}>Decoded Text</th>
+        </tr>
+        <tr>
+          <td colspan="1000">
+            <div style={{
+              height: '2px',
+              width: '95%',
+              "margin": '2px auto',
+              "background-color": '#CCC'
+            }}/>
+          </td>
+        </tr>
+      </thead>
+      <tbody>
+        <MemoryViewerDataRow address={28} addressLength={8} bytes={bytes}/>
+        <MemoryViewerDataRow address={28 + 8} addressLength={8} bytes={bytes}/>
+        <MemoryViewerDataRow address={28 + 8*2} addressLength={8} bytes={bytes}/>
+        <MemoryViewerDataRow address={28 + 8*3} addressLength={8} bytes={bytes}/>
+        <MemoryViewerDataRow address={28 + 8*4} addressLength={8} bytes={bytes}/>
+        <MemoryViewerDataRow address={28 + 8*5} addressLength={8} bytes={bytes}/>
+        <MemoryViewerDataRow address={28 + 8*6} addressLength={8} bytes={bytes}/>
+        <MemoryViewerDataRow address={28 + 8*7} addressLength={8} bytes={bytes}/>
+        <MemoryViewerDataRow address={28 + 8*8} addressLength={8} bytes={bytes}/>
+      </tbody>
+    </table>
+  );
+} 
+
+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 className='monaco-highlighted-label' 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={{
+        "padding-right": i !== stuff.bytesAscii.length-1 ? '16px' : '0px',
+        "text-align": 'center'
+      }}>
+        {v}
+      </span>))}
+    </td>
+  </tr>
+  );
+}
diff --git a/webview/src/componenets/MemoryViewerData/styles.module.css b/webview/src/componenets/MemoryViewerData/styles.module.css
@@ -0,0 +1,7 @@
+.MemoryViewerData {
+}
+
+.address {
+  position: sticky;
+  left: 0px;
+}
diff --git a/webview/src/componenets/MemoryViewerHeader/index.tsx b/webview/src/componenets/MemoryViewerHeader/index.tsx
@@ -0,0 +1,16 @@
+
+
+export interface MemoryViewerHeaderProps {
+
+}
+
+export default function MemoryViewerHeader({}: MemoryViewerHeaderProps) {
+  return (
+    <div>
+      <vscode-text-field placeholder="Enter Address..."/>
+      <vscode-button appearance="icon" aria-label="Confirm">
+	      <span class="codicon codicon-refresh"></span>
+      </vscode-button>
+    </div>
+  );
+}