Skip to content

Commit 718eca2

Browse files
nagisanagisa
committed
page: style improvements
1 parent b57fdf6 commit 718eca2

File tree

3 files changed

+109
-16
lines changed

3 files changed

+109
-16
lines changed

‎index.html

Lines changed: 35 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,30 +5,52 @@
55
<title>Debugger for NEAR Protocol Contracts</title>
66
<meta name="description" content="A web-based tool for debugging contracts written for NEAR Protocol">
77
<script async type="module" src="./loader.js"></script>
8+
<link rel="stylesheet" type="text/css" href="./neardebug.css">
89
</head>
910
<body>
10-
<h2><center>
11+
<header>
12+
<h2>
1113
A basic debugger for NEAR Contracts (prototype ver.)
12-
</center></h2>
13-
<form id="contract_form">
14+
</h2>
15+
16+
<p>
17+
Here you can execute and debug in your browser contracts meant to run on the NEAR protocol.
18+
Use the browser built-in developer tools (often available via <kbd>Ctrl</kbd>/<kbd>Cmd</kbd>
19+
<kbd>Shift</kbd><kbd>I</kbd>): log messages and errors will show up in the console and you
20+
can use the debugger to step through the contract code.
21+
</p>
22+
23+
<p>
24+
The debugging experience will differ between browsers. For instance Chromium supports DWARF
25+
debug info. Contracts built from Rust source will embed such debug info into the
26+
<code>.wasm</code> file, for example, so long as debug info is enabled. This would then allow
27+
debugging Rust code and not the underlying WebAssembly!
28+
</p>
29+
30+
<p>
31+
<code>window.contract</code> in the console will allow you to explore some specifics of the
32+
contract runtime throughout the execution of the contract.
33+
</p>
34+
</header>
1435

15-
<label for="contract">Contract WASM: <input type="file" id="contract" /></label>
16-
<label for="methods">Method <select id="methods"></select></label>
1736

18-
<div>
19-
<input type="submit" id="execute" value="Execute!" />
20-
</div>
37+
<form id="contract_form">
38+
39+
<label for="contract">Contract WASM </label>
40+
<input type="file" name="contract" id="contract" />
41+
<label for="methods">Method </label>
42+
<select id="methods" name="method"></select>
43+
<input type="submit" id="execute" value="Execute!" disabled />
2144

2245
<h3>Context</h3>
2346

24-
<label for="attached_deposit"> Attached Deposit (u128): <input type="text" id="attached_deposit" placeholder="0" /></label>
25-
<label for="input"> Input (bytes): <textarea id="input" placeholder="">{}</textarea></label>
47+
<label for="attached_deposit"> Attached Deposit (u128)</label>
48+
<input type="text" name="attached_deposit" id="attached_deposit" placeholder="0" />
49+
<label for="input"> Input (bytes)</label>
50+
<textarea id="input" name="input" placeholder="">{}</textarea>
2651

2752
<h3>State</h3>
2853

29-
<button id="storage_button" action="none">Log Storage to Console (window.contractStorage)</button>
30-
3154
</form>
32-
3355
</body>
3456
</html>

‎loader.js

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -119,11 +119,13 @@ import init, { b64encode, list_methods, prepare_contract, Logic, Context, init_p
119119
}
120120

121121
async function on_contract_change(element) {
122+
const button = document.querySelector("#execute");
123+
const method_selector = document.querySelector("#methods");
124+
button.disabled = true;
125+
method_selector.innerHTML = "";
122126
if (element.files.length > 0) {
123127
const buffer = await element.files[0].arrayBuffer();
124128
const callable_methods = list_methods(new Uint8Array(buffer));
125-
const method_selector = document.querySelector("#methods");
126-
method_selector.innerHTML = "";
127129
for (const method of callable_methods) {
128130
const option = document.createElement("option");
129131
option.innerText = method;
@@ -134,7 +136,7 @@ import init, { b64encode, list_methods, prepare_contract, Logic, Context, init_p
134136
} else {
135137
await load(undefined);
136138
}
137-
window.contract
139+
button.disabled = false;
138140
}
139141

140142
async function on_load() {

‎neardebug.css

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
html, body {
2+
max-width: 1000px;
3+
margin: 0 auto;
4+
padding: 0;
5+
}
6+
7+
header h2 {
8+
text-align: center;
9+
}
10+
11+
header {
12+
border-bottom: 1px dotted;
13+
}
14+
15+
kbd {
16+
border: 2px solid;
17+
border-radius: 5px;
18+
padding: 0 2px;
19+
}
20+
21+
#contract_form {
22+
margin-top: 1em;
23+
display: grid;
24+
row-gap: 5px;
25+
grid-template-columns: 50ex auto;
26+
grid-column: 2;
27+
}
28+
29+
#contract_form label {
30+
font-weight: bold;
31+
text-align: right;
32+
padding-right: 1ex;
33+
}
34+
35+
#execute {
36+
width: 100%;
37+
height: 3em;
38+
grid-column-start: 1;
39+
grid-column-end: 3;
40+
}
41+
42+
#contract_form h3 {
43+
width: 100%;
44+
grid-column-start: 1;
45+
grid-column-end: 3;
46+
text-align: center;
47+
}
48+
49+
50+
/* Colors */
51+
html {
52+
background: #fff;
53+
color: #333;
54+
}
55+
56+
kbd, header {
57+
border-color: #aaa;
58+
}
59+
60+
@media (prefers-color-scheme: dark) {
61+
html {
62+
background: #000;
63+
color: #ddd;
64+
}
65+
kbd, header {
66+
border-color: #666;
67+
}
68+
69+
}

0 commit comments

Comments
 (0)