@ethicdevs/react-global-state-hooks-debugger
Version:
A small websocket based debugger for use with the react-global-state-hooks library
294 lines (249 loc) • 7.29 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>RGSH-Debugger UI</title>
<style>
html,
body {
min-width: 100vw;
width: 100%;
max-width: 100vw;
min-height: 100vh;
height: 100%;
margin: 0;
padding: 0;
font-family: monospace;
font-size: 14px;
background-color: #171717;
color: #ffffff;
overflow-x: hidden;
overflow-y: hidden;
}
* {
box-sizing: border-box;
}
#head {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
height: 40px;
max-width: 100%;
padding: 8px;
}
#head > #logo {
font-size: 18px;
font-weight: bold;
}
#head > #ws-ready-state {
margin-left: 24px;
}
#main-area {
height: calc(100% - 80px);
}
#filters {
height: 40px;
}
.row {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: flex-start;
width: 100%;
border-top: 2px solid #333333;
}
.row > div {
flex: 1;
height: 100%;
max-width: 100%;
position: relative;
padding: 8px;
overflow-y: auto;
overflow-x: hidden;
}
.row > div:last-child {
border-left: 2px solid #333333;
}
#filters > div {
padding: 3px 8px;
}
#filters > div > input {
width: 100%;
height: 32px;
background: none;
border: none;
border-bottom: 2px solid #333333;
color: #ffffff;
}
.row > div > .row-title {
display: flex;
flex-flow: row nowrap;
justify-content: flex-end;
align-items: center;
height: 24px;
margin-bottom: 4px;
padding: 4px 8px;
position: sticky;
top: 0;
right: 0;
z-index: 11000;
background-color: #222222;
border: 1.5px solid #333333;
color: #d6d6d6;
font-size: 12px;
}
/* Unless fixed, hidden */
.row > div > .row-title > .left {
display: none;
}
.row > div > .row-title > .left > a {
margin-left: 12px;
font-weight: bold;
text-decoration: none;
color: #d6d6d6;
cursor: pointer;
}
.row > div > .row-title > .left > a:hover {
color: white;
}
.row > div > .row-title > .right {
margin-left: 24px;
}
pre {
margin: 2px 0 16px 0;
white-space: break-spaces;
word-break: break-all;
}
</style>
<style>
.CompCssDJsonViewTree .w-caret-right {
transform: rotate(-90deg);
width: 0.9rem;
height: 0.9rem;
display: inline-block;
vertical-align: middle;
background-size: contain;
filter: invert(1);
background-position: center center;
background-repeat: no-repeat;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACJSURBVEhL7ZC9CYBADEbP2iEEp7JxAPdwBZex02EcQ/0iBCzC/ZlTkDx4RYrLC+cMwzB+QQ1bRRtYwSAbPJQdoRe6bIbS41x32MEg9NULlJakStEBRqMRT44yFF+htDRkdpTJiT+OMilxtSgTE1ePMr54sSgjxYtHmXv8tShD8Qn212QYxnc4dwKskJKEHrOFUQAAAABJRU5ErkJggg==");
}
.CompCssDJsonViewTree .w-caret-down {
display: inline-block;
width: 0.9rem;
height: 0.9rem;
display: inline-block;
vertical-align: middle;
filter: invert(1);
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAACJSURBVEhL7ZC9CYBADEbP2iEEp7JxAPdwBZex02EcQ/0iBCzC/ZlTkDx4RYrLC+cMwzB+QQ1bRRtYwSAbPJQdoRe6bIbS41x32MEg9NULlJakStEBRqMRT44yFF+htDRkdpTJiT+OMilxtSgTE1ePMr54sSgjxYtHmXv8tShD8Qn212QYxnc4dwKskJKEHrOFUQAAAABJRU5ErkJggg==");
}
.CompCssDJsonViewTree .wjv-line {
display: flex;
justify-content: flex-start;
}
.CompCssDJsonViewTree .wjv-caret-icon {
width: 18px;
text-align: center;
cursor: pointer;
}
.CompCssDJsonViewTree .wjv-empty-icon {
/* width: 18px; */
padding: 0px 9px;
}
.CompCssDJsonViewTree .wjv-json-type {
margin-right: 4px;
margin-left: 4px;
}
.CompCssDJsonViewTree .wjv-json-key {
color: #fffff;
margin-right: 4px;
margin-left: 4px;
}
.CompCssDJsonViewTree .wjv-json-index {
margin-right: 4px;
margin-left: 4px;
}
.CompCssDJsonViewTree .wjv-json-separator {
color: #bdbdbd;
}
.CompCssDJsonViewTree .wjv-json-value {
margin-left: 8px;
}
.CompCssDJsonViewTree .wjv-json-number {
color: #ffab40;
}
.CompCssDJsonViewTree .wjv-json-boolean {
color: #e040fb;
}
.CompCssDJsonViewTree .wjv-json-string {
color: #9ccc65;
}
.CompCssDJsonViewTree .wjv-json-function {
color: #536dfe;
}
.CompCssDJsonViewTree .wjv-json-size {
margin-right: 4px;
margin-left: 4px;
}
.CompCssDJsonViewTree .wjv-json-hide {
display: none;
}
</style>
</head>
<body>
<header id="head">
<div id="logo">RGSH-Debugger</div>
<div id="ws-ready-state">not connected yet</div>
</header>
<div id="main-area" class="row">
<div id="actions-dispatch">
<div class="row-title">
<div class="left">
<a id="btn-action-toggle-folding">Fold/unfold all</a>
</div>
<div class="right">
<span>Actions Dispatch</span>
<span id="dispatched-actions-counter">(0)</span>
</div>
</div>
<div id="actions-dispatch-wrapper"></div>
</div>
<div id="state-updates">
<div class="row-title">
<div class="left">
<a id="btn-state-toggle-diff-mode">
Diff Mode: <span id="state-diff-mode">Off</span>
</a>
<a id="btn-state-toggle-folding">Fold/unfold all</a>
</div>
<div class="right">
<span>State Updates</span>
<span id="state-updates-counter">(0)</span>
</div>
</div>
<div id="state-updates-wrapper"></div>
</div>
</div>
<div id="filters" class="row">
<div id="actions-dispatch">
<input
id="input-filter-actions"
type="text"
placeholder="i.e. `^action/FETCH_(.*)_FAILURE$` or `$.payload.auth.currentUser.uid`"
/>
</div>
<div id="state-updates">
<input
id="input-filter-state"
type="text"
placeholder="i.e. `$.payload.auth.currentUser.preferences[*].notifications`"
/>
</div>
</div>
<script type="module" src="/rgsh-debugger-ui.js"></script>
</body>
</html>