Extremely rough debugger UI mock.
This commit is contained in:
Ben Vanik
parent
2cb5c97052
commit
597e196940
|
|
@ -40,3 +40,21 @@ var DebugClient = function(endpoint) {
|
||||||
|
|
||||||
|
|
||||||
var client = new DebugClient('ws://127.0.0.1:6200');
|
var client = new DebugClient('ws://127.0.0.1:6200');
|
||||||
|
|
||||||
|
|
||||||
|
var myTextArea = document.querySelector('.debugger-fnview-textarea');
|
||||||
|
var myCodeMirror = CodeMirror.fromTextArea(myTextArea, {
|
||||||
|
mode: 'javascript',
|
||||||
|
theme: 'default',
|
||||||
|
indentUnit: 2,
|
||||||
|
tabSize: 2,
|
||||||
|
|
||||||
|
lineNumbers: true,
|
||||||
|
firstLineNumber: 0,
|
||||||
|
lineNumberFormatter: function(line) {
|
||||||
|
return String('0x00000000' + line);
|
||||||
|
},
|
||||||
|
gutters: [],
|
||||||
|
|
||||||
|
//readOnly: true,
|
||||||
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,446 @@
|
||||||
<!doctype html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Xenia Debugger</title>
|
<title>Xenia Debugger</title>
|
||||||
<script src="debugger.js"></script>
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
|
||||||
|
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
|
||||||
|
<style>
|
||||||
|
.full-width {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.app-main {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
min-width: 900px;
|
||||||
|
min-height: 350px;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
}
|
||||||
|
.app-header {
|
||||||
|
order: 1;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
align-self: auto;
|
||||||
|
}
|
||||||
|
.app-header .navbar {
|
||||||
|
border-radius: 0;
|
||||||
|
min-height: 0;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-body {
|
||||||
|
order: 2;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
align-self: auto;
|
||||||
|
position: relative;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
.tab-pane {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-console {
|
||||||
|
order: 3;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
align-self: auto;
|
||||||
|
border-top-width: 2px;
|
||||||
|
border-top-style: solid;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
.console-part-log {
|
||||||
|
order: 1;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
align-self: auto;
|
||||||
|
}
|
||||||
|
.console-log-outer {
|
||||||
|
position: relative;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
.console-part-input {
|
||||||
|
order: 2;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
align-self: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
padding-top: 5px;
|
||||||
|
}
|
||||||
|
.console-input-left {
|
||||||
|
order: 1;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
.console-input-middle {
|
||||||
|
order: 2;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
}
|
||||||
|
.console-input-right {
|
||||||
|
order: 3;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.debugger-main {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
}
|
||||||
|
.debugger-header {
|
||||||
|
order: 1;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
align-self: auto;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
.debugger-body {
|
||||||
|
order: 2;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
align-self: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
}
|
||||||
|
.debugger-fnlist {
|
||||||
|
order: 1;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
max-width: 200px;
|
||||||
|
}
|
||||||
|
.debugger-fnlist-header {
|
||||||
|
order: 1;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
.debugger-fnlist-body {
|
||||||
|
order: 2;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
padding: 5px;
|
||||||
|
border-top: 1px solid #ddd;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.debugger-fnlist-list {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
padding: 5px;
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
|
.debugger-fnlist-footer {
|
||||||
|
order: 3;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
.debugger-fnview {
|
||||||
|
order: 2;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
border-left: 2px solid #ddd;
|
||||||
|
border-right: 2px solid #ddd;
|
||||||
|
}
|
||||||
|
.debugger-fnview-header {
|
||||||
|
order: 1;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding: 5px;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
}
|
||||||
|
.debugger-fnview-header-left {
|
||||||
|
order: 1;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
.debugger-fnview-header-name {
|
||||||
|
font-size: 21px;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
.debugger-fnview-header-address {
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
.debugger-fnview-header-right {
|
||||||
|
order: 2;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
.debugger-fnview-body {
|
||||||
|
order: 2;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
border-top: 1px solid #ddd;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
}
|
||||||
|
.debugger-fnview-codeview {
|
||||||
|
order: 1;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.debugger-fnview-codeview .CodeMirror {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.debugger-fnview-graphview {
|
||||||
|
order: 2;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
position: relative;
|
||||||
|
border-left: 1px solid #ddd;
|
||||||
|
min-width: 100px;
|
||||||
|
}
|
||||||
|
.debugger-fnview-footer {
|
||||||
|
order: 3;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
.debugger-tools {
|
||||||
|
order: 3;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column nowrap;
|
||||||
|
min-width: 200px;
|
||||||
|
}
|
||||||
|
.debugger-tools-threads {
|
||||||
|
order: 1;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
.debugger-tools-callstack {
|
||||||
|
order: 2;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
padding: 5px;
|
||||||
|
border-top: 1px solid #ddd;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.debugger-tools-registers {
|
||||||
|
order: 3;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div class="app-main">
|
||||||
|
<div class="app-header">
|
||||||
|
<nav class="navbar navbar-default" role="navigation">
|
||||||
|
<div class="navbar-header">
|
||||||
|
<a class="navbar-brand" href="http://xenia.jp/" target="_blank">Xenia</a>
|
||||||
|
</div>
|
||||||
|
<ul class="nav navbar-nav">
|
||||||
|
<li class="active"><a href="#tab-debugger" data-toggle="tab">Debugger</a></li>
|
||||||
|
<li><a href="#tab-memory" data-toggle="tab">Memory</a></li>
|
||||||
|
<li><a href="#tab-kernel" data-toggle="tab">Kernel</a></li>
|
||||||
|
<li><a href="#tab-gpu" data-toggle="tab">GPU</a></li>
|
||||||
|
<li><a href="#tab-apu" data-toggle="tab">APU</a></li>
|
||||||
|
</ul>
|
||||||
|
<p class="navbar-text navbar-right"></p>
|
||||||
|
<ul class="nav navbar-nav navbar-right">
|
||||||
|
<li class="dropdown">
|
||||||
|
<div class="btn-group navbar-btn">
|
||||||
|
<button type="button" class="btn btn-default">
|
||||||
|
<span class="glyphicon glyphicon-link"></span> Connect
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-default">
|
||||||
|
<span class="glyphicon glyphicon-file"></span> Open
|
||||||
|
</button>
|
||||||
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||||
|
<span class="glyphicon glyphicon-cog"></span> <span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" role="menu">
|
||||||
|
<li><a href="#">Action</a></li>
|
||||||
|
<li><a href="#">Another action</a></li>
|
||||||
|
<li><a href="#">Something else here</a></li>
|
||||||
|
<li class="divider"></li>
|
||||||
|
<li><a href="#">Separated link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p class="navbar-text navbar-right"></p>
|
||||||
|
<p class="navbar-text navbar-right">(status text)</p>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
<div class="app-body tab-content">
|
||||||
|
|
||||||
|
<div class="tab-pane active" id="tab-debugger">
|
||||||
|
<div class="debugger-main">
|
||||||
|
<div class="debugger-header">
|
||||||
|
debug header/toolbar/etc
|
||||||
|
</div>
|
||||||
|
<div class="debugger-body">
|
||||||
|
<div class="debugger-fnlist">
|
||||||
|
<div class="debugger-fnlist-header">
|
||||||
|
<div class="btn-group btn-group-xs full-width">
|
||||||
|
<button type="button" class="btn btn-default dropdown-toggle full-width" data-toggle="dropdown">
|
||||||
|
module_name.xex <span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" role="menu">
|
||||||
|
<li><a href="#">module 1</a></li>
|
||||||
|
<li><a href="#">module 2</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="debugger-fnlist-body">
|
||||||
|
<div class="debugger-fnlist-list">
|
||||||
|
fn<br/>fn<br/>fn
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="debugger-fnlist-footer">
|
||||||
|
<div class="input-group input-group-sm">
|
||||||
|
<span class="input-group-addon">@</span>
|
||||||
|
<input type="text" class="form-control" placeholder="Filter">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="debugger-fnview">
|
||||||
|
<div class="debugger-fnview-header">
|
||||||
|
<div class="debugger-fnview-header-left">
|
||||||
|
<span class="debugger-fnview-header-name">function name</span>
|
||||||
|
<span class="debugger-fnview-header-address">(0x80000000-0x80000000)</span>
|
||||||
|
</div>
|
||||||
|
<div class="debugger-fnview-header-right">
|
||||||
|
<div class="btn-toolbar" role="toolbar">
|
||||||
|
<div class="btn-group btn-group-sm" data-toggle="buttons">
|
||||||
|
<label class="btn btn-default active">
|
||||||
|
<input type="radio" name="options" id="option1"> PPC
|
||||||
|
</label>
|
||||||
|
<label class="btn btn-default">
|
||||||
|
<input type="radio" name="options" id="option2"> HIR
|
||||||
|
</label>
|
||||||
|
<label class="btn btn-default">
|
||||||
|
<input type="radio" name="options" id="option3"> x64
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group btn-group-sm">
|
||||||
|
<button type="button" class="btn btn-default">1</button>
|
||||||
|
<button type="button" class="btn btn-default">2</button>
|
||||||
|
<div class="btn-group btn-group-sm">
|
||||||
|
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
|
||||||
|
Dropdown
|
||||||
|
<span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu">
|
||||||
|
<li><a href="#">Dropdown link</a></li>
|
||||||
|
<li><a href="#">Dropdown link</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="debugger-fnview-body">
|
||||||
|
<div class="debugger-fnview-codeview">
|
||||||
|
<textarea class="debugger-fnview-textarea"></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="debugger-fnview-graphview">
|
||||||
|
graph!
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="debugger-fnview-footer">
|
||||||
|
footer
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="debugger-tools">
|
||||||
|
<div class="debugger-tools-threads">
|
||||||
|
<div class="btn-group btn-group-xs full-width">
|
||||||
|
<button type="button" class="btn btn-default dropdown-toggle full-width" data-toggle="dropdown">
|
||||||
|
thread 0 <span class="caret"></span>
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" role="menu">
|
||||||
|
<li><a href="#">thread 1</a></li>
|
||||||
|
<li><a href="#">thread 2</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="debugger-tools-callstack">
|
||||||
|
callstack
|
||||||
|
</div>
|
||||||
|
<div class="debugger-tools-registers">
|
||||||
|
registers
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tab-pane" id="tab-memory">
|
||||||
|
TODO: memory
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tab-pane" id="tab-kernel">
|
||||||
|
TODO: kernel
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tab-pane" id="tab-gpu">
|
||||||
|
TODO: GPU
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tab-pane" id="tab-apu">
|
||||||
|
TODO: APU
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="app-console navbar-default">
|
||||||
|
<div class="console-part-log">
|
||||||
|
<div class="console-log-outer">
|
||||||
|
log<br/>log<br/>log
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="console-part-input">
|
||||||
|
<div class="console-input-left">
|
||||||
|
</div>
|
||||||
|
<div class="console-input-middle">
|
||||||
|
<div class="input-group input-group-sm">
|
||||||
|
<span class="input-group-addon">@</span>
|
||||||
|
<input type="text" class="form-control" placeholder="Command">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="console-input-right">
|
||||||
|
<div class="btn-group btn-group-sm">
|
||||||
|
<button type="button" class="btn btn-default">A</button>
|
||||||
|
<button type="button" class="btn btn-default">B</button>
|
||||||
|
<button type="button" class="btn btn-default">C</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="https://code.jquery.com/jquery.js"></script>
|
||||||
|
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
|
||||||
|
<script src="http://codemirror.net/lib/codemirror.js"></script>
|
||||||
|
|
||||||
|
<script src="debugger.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue