page: style improvements

near · Feb 11, 2025 · 718eca2 · 718eca2
1 parent b57fdf6
commit 718eca2
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -5,30 +5,52 @@
     <title>Debugger for NEAR Protocol Contracts</title>
     <meta name="description" content="A web-based tool for debugging contracts written for NEAR Protocol">
     <script async type="module" src="./loader.js"></script>
+    <link rel="stylesheet" type="text/css" href="./neardebug.css">
 </head>
 <body>
-    <h2><center>
+    <header>
+    <h2>
     A basic debugger for NEAR Contracts (prototype ver.)
-    </center></h2>
-    <form id="contract_form">
+    </h2>
+
+    <p>
+    Here you can execute and debug in your browser contracts meant to run on the NEAR protocol.
+    Use the browser built-in developer tools (often available via <kbd>Ctrl</kbd>/<kbd>Cmd</kbd>
+    <kbd>Shift</kbd><kbd>I</kbd>): log messages and errors will show up in the console and you
+    can use the debugger to step through the contract code.
+    </p>
+
+    <p>
+    The debugging experience will differ between browsers. For instance Chromium supports DWARF
+    debug info. Contracts built from Rust source will embed such debug info into the
+    <code>.wasm</code> file, for example, so long as debug info is enabled. This would then allow
+    debugging Rust code and not the underlying WebAssembly!
+    </p>
+
+    <p>
+    <code>window.contract</code> in the console will allow you to explore some specifics of the
+    contract runtime throughout the execution of the contract.
+    </p>
+    </header>
 
-    <label for="contract">Contract WASM: <input type="file" id="contract" /></label>
-    <label for="methods">Method <select id="methods"></select></label>
 
-    <div>
-    <input type="submit" id="execute" value="Execute!" />
-    </div>
+    <form id="contract_form">
+
+    <label for="contract">Contract WASM </label>
+    <input type="file" name="contract" id="contract" />
+    <label for="methods">Method </label>
+    <select id="methods" name="method"></select>
+    <input type="submit" id="execute" value="Execute!" disabled />
 
     <h3>Context</h3>
 
-    <label for="attached_deposit"> Attached Deposit (u128): <input type="text" id="attached_deposit" placeholder="0" /></label>
-    <label for="input"> Input (bytes): <textarea id="input" placeholder="">{}</textarea></label>
+    <label for="attached_deposit"> Attached Deposit (u128)</label>
+    <input type="text" name="attached_deposit" id="attached_deposit" placeholder="0" />
+    <label for="input"> Input (bytes)</label>
+    <textarea id="input" name="input" placeholder="">{}</textarea>
 
     <h3>State</h3>
 
-    <button id="storage_button" action="none">Log Storage to Console (window.contractStorage)</button>
-
     </form>
-
 </body>
 </html>
diff --git a/loader.js b/loader.js
@@ -119,11 +119,13 @@ import init, { b64encode, list_methods, prepare_contract, Logic, Context, init_p
     }
 
     async function on_contract_change(element) {
+        const button = document.querySelector("#execute");
+        const method_selector = document.querySelector("#methods");
+        button.disabled = true;
+        method_selector.innerHTML = "";
         if (element.files.length > 0) {
             const buffer = await element.files[0].arrayBuffer();
             const callable_methods = list_methods(new Uint8Array(buffer));
-            const method_selector = document.querySelector("#methods");
-            method_selector.innerHTML = "";
             for (const method of callable_methods) {
                 const option = document.createElement("option");
                 option.innerText = method;
@@ -134,7 +136,7 @@ import init, { b64encode, list_methods, prepare_contract, Logic, Context, init_p
         } else {
             await load(undefined);
         }
-        window.contract
+        button.disabled = false;
     }
 
     async function on_load() {

diff --git a/neardebug.css b/neardebug.css
@@ -0,0 +1,69 @@
+html, body {
+    max-width: 1000px;
+    margin: 0 auto;
+    padding: 0;
+}
+
+header h2 {
+    text-align: center;
+}
+
+header {
+    border-bottom: 1px dotted;
+}
+
+kbd {
+    border: 2px solid;
+    border-radius: 5px;
+    padding: 0 2px;
+}
+
+#contract_form {
+    margin-top: 1em;
+    display: grid;
+    row-gap: 5px;
+    grid-template-columns: 50ex auto;
+    grid-column: 2;
+}
+
+#contract_form label {
+    font-weight: bold;
+    text-align: right;
+    padding-right: 1ex;
+}
+
+#execute {
+    width: 100%;
+    height: 3em;
+    grid-column-start: 1;
+    grid-column-end: 3;
+}
+
+#contract_form h3 {
+    width: 100%;
+    grid-column-start: 1;
+    grid-column-end: 3;
+    text-align: center;
+}
+
+
+/* Colors */
+html {
+    background: #fff;
+    color: #333;
+}
+
+kbd, header {
+    border-color: #aaa;
+}
+
+@media (prefers-color-scheme: dark) {
+    html {
+        background: #000;
+        color: #ddd;
+    }
+    kbd, header {
+        border-color: #666;
+    }
+
+}