mirror of
https://github.com/classilla/tenfourfox.git
synced 2026-03-12 13:42:03 +00:00
148 lines
4.5 KiB
HTML
148 lines
4.5 KiB
HTML
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
|
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="./codemirror.css">
|
|
<link rel="stylesheet" href="./main.css">
|
|
<script src="./codemirror-compressed.js"></script>
|
|
<views>
|
|
<section class="task cm-s-default">
|
|
<pre class="request "></pre>
|
|
<pre class="response"><span class="one"></span><span class="two"></span><span class="three"></span></pre>
|
|
</section>
|
|
</views>
|
|
</head>
|
|
<body>
|
|
<pre class="input"></pre>
|
|
</body>
|
|
<script>
|
|
function debounce(fn, ms) {
|
|
var id;
|
|
return function(...args) {
|
|
clearTimeout(id);
|
|
id = setTimeout(fn, ms, ...args);
|
|
};
|
|
}
|
|
|
|
function Try(fn) {
|
|
return function(...args) {
|
|
try { return fn(...args); }
|
|
catch (error) { return null; }
|
|
};
|
|
}
|
|
|
|
var parse = Try(JSON.parse);
|
|
|
|
var CommandHistory = {
|
|
init: function() {
|
|
this._state = {};
|
|
this._state.els = document.querySelectorAll("body > section.task > .request");
|
|
this._state.idx = this._state.els.length;
|
|
},
|
|
get prev() {
|
|
if (!!this._state.els && this._state.idx > 0) {
|
|
this._state.idx--;
|
|
return this._state.els[this._state.idx].textContent;
|
|
}
|
|
|
|
return "";
|
|
},
|
|
get next() {
|
|
if (!!this._state.els && this._state.idx < this._state.els.length-1) {
|
|
this._state.idx++;
|
|
return this._state.els[this._state.idx].textContent;
|
|
}
|
|
|
|
return "";
|
|
}
|
|
}
|
|
|
|
function cmdHistory(fn, editor) {
|
|
editor.setValue(fn());
|
|
document.querySelector(".input").scrollIntoView();
|
|
}
|
|
|
|
var cmdHistoryNext = cmdHistory.bind(null, () => CommandHistory.next);
|
|
var cmdHistoryBack = cmdHistory.bind(null, () => CommandHistory.prev);
|
|
|
|
function send(editor) {
|
|
var input = editor.getWrapperElement().parentNode;
|
|
var code = editor.getValue().trim();
|
|
var packet = parse(code);
|
|
if (packet) {
|
|
var task = document.querySelector("views .task").cloneNode(true);
|
|
var request = task.querySelector(".request");
|
|
var response = task.querySelector(".response");
|
|
|
|
input.parentNode.insertBefore(task, input);
|
|
|
|
CodeMirror.runMode(JSON.stringify(packet, 2, 2),
|
|
"application/json",
|
|
request);
|
|
response.classList.add("pending");
|
|
|
|
editor.setValue("");
|
|
|
|
document.querySelector(".input").scrollIntoView();
|
|
|
|
port.postMessage(packet);
|
|
}
|
|
}
|
|
|
|
var editor = CodeMirror(document.querySelector(".input"), {
|
|
autofocus: true,
|
|
mode: "application/json",
|
|
matchBrackets: true,
|
|
value: '{"to": "root", "type": "requestTypes"}',
|
|
extraKeys: {"Cmd-Enter": send,
|
|
"Ctrl-Enter": send,
|
|
"Cmd-Down": cmdHistoryNext,
|
|
"Ctrl-Down": cmdHistoryNext,
|
|
"Cmd-Up": cmdHistoryBack,
|
|
"Ctrl-Up": cmdHistoryBack}
|
|
});
|
|
editor.on("change", debounce(function(editor) {
|
|
var input = editor.getWrapperElement().parentNode;
|
|
if (parse(editor.getValue().trim())) {
|
|
input.classList.remove("invalid");
|
|
} else {
|
|
input.classList.add("invalid");
|
|
}
|
|
}, 800));
|
|
</script>
|
|
<script>
|
|
window.addEventListener("message", event => {
|
|
window.port = event.ports[0];
|
|
port.onmessage = onMessage;
|
|
});
|
|
|
|
var onMessage = (event) => {
|
|
var packet = event.data;
|
|
var code = JSON.stringify(packet, 2, 2);
|
|
|
|
var input = document.querySelector(".input");
|
|
var response = document.querySelector(".task .response.pending");
|
|
|
|
if (!response) {
|
|
message = document.querySelector("views .task").cloneNode(true);
|
|
response = message.querySelector(".response");
|
|
response.classList.add("message");
|
|
|
|
input.parentNode.insertBefore(message, input);
|
|
}
|
|
|
|
if (packet.error) {
|
|
response.classList.add("error");
|
|
}
|
|
|
|
CodeMirror.runMode(code, "application/json", response);
|
|
response.classList.remove("pending");
|
|
|
|
document.querySelector(".input").scrollIntoView();
|
|
|
|
CommandHistory.init();
|
|
};
|
|
</script>
|
|
</html>
|