whistle
Version:
HTTP, HTTP2, HTTPS, Websocket debugging proxy
78 lines (76 loc) • 2.47 kB
HTML
<html data-theme="light">
<head>
<meta charset="UTF-8">
<meta name="google" value="notranslate">
<link rel="shortcut icon" href="img/favicon.ico?v=2016" />
<title>Whistle Editor</title>
<style>
[data-theme="dark"]:root { color-scheme: dark; }
html, body, .main {padding: 0; margin: 0; height: 100%; overflow: hidden;}
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-button{ width:10px;height:1px; }
::-webkit-scrollbar-thumb{ background-clip:padding-box; background-color:rgba(0,0,0,.5); border-radius:8px; min-height: 30px;}
::-webkit-scrollbar-thumb:hover{ background-clip:padding-box; background-color:rgba(0,0,0,.7); border-radius:8px;}
::-webkit-scrollbar-track,::-webkit-scrollbar-thumb { border-left:2px solid transparent; border-right:2px solid transparent;}
::-webkit-scrollbar-track:hover{ background-clip:padding-box; background-color:rgba(0,0,0,.15);}
textarea {resize: none; display: block; padding: 6px; font-size: 12px; width: 100%; height: 100%; border: none; box-sizing: border-box; font-family: consolas, monospace;}
</style>
</head>
<body style="overscroll-behavior-x: none;">
<div class="main">
<textarea id="editor"></textarea>
</div>
<script>
var editor = document.getElementById('editor');
var theme = 'light';
var getInitCallback = function() {
try {
var cb = window.parent._initWhistleTextEditor_;
if (typeof cb === 'function') {
return cb;
}
} catch (e) {}
};
var init = getInitCallback();
if (!init && window.getValue) {
var value = getValue();
if (value) {
editor.value = window.name = value;
} else {
editor.value = window.name;
}
} else {
editor.value = window.name;
window.setValue = function(value) {
editor.value = value;
};
init && init(window);
}
window.getEditorValue = function() {
return editor.value;
};
var setTheme = function() {
if (init) {
return;
}
var curTheme;
if (typeof window.getWhistleTheme === 'function') {
curTheme = window.getWhistleTheme();
setTimeout(setTheme, 1600);
} else {
curTheme = location.hash.slice(1);
}
if (curTheme === theme || (curTheme !== 'dark' && curTheme !== 'light')) {
return;
}
theme = curTheme;
document.documentElement.setAttribute('data-theme', theme);
if (location.hash.slice(1) || theme === 'dark') {
location.hash = theme;
}
};
setTheme();
</script>
</body>
</html>