1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
<!DOCTYPE html>
<html>
<head>
<title>0 A.D. Javascript Debugger</title>
<link rel="stylesheet" type="text/css" href="js/lib/jquery.easyui/themes/bootstrap/easyui.css" />
<link rel="stylesheet" type="text/css" href="js/lib/jquery.easyui/themes/icon.css" />
<link href="debugger.css" rel="stylesheet" />
<script type="text/javascript" src="js/lib/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/lib/jquery.easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/lib/ace/ace.js" charset="utf-8"></script>
<script type="text/javascript" src="js/src/debugger.js"></script>
</head>
<body class="easyui-layout">
<div data-options="region:'west',split:true" title="Files" style="width:250px;">
<table id="files" class="easyui-datagrid"
data-options="singleSelect:true, fit:true, toolbar:'#tb_filepath', border:false ">
<thead>
<tr>
<th data-options="field:'file_path',width:300">File Path</th>
</tr>
</thead>
</table>
</div>
<div id="tb_filepath" style="padding:5px;height:auto">
<div>
Find: <input id="file_search" class="easyui-validatebox">
</div>
</div>
<div data-options="region:'east',split:true" title="Actions" style="width:200px;">
<a href="" id="step" class="easyui-linkbutton" style="margin:2px">Step (F5)</a> <br>
<a href="" id="step_into" class="easyui-linkbutton" style="margin:2px">Step into (F6)</a> <br>
<a href="" id="step_out" class="easyui-linkbutton" style="margin:2px">Step out (F7)</a> <br>
<a href="" id="continue" class="easyui-linkbutton" style="margin:2px">Continue (F8)</a> <br>
<a href="" id="continue_thread" class="easyui-linkbutton" style="margin:2px">Continue thread (F9)</a> <br>
<a href="" id="break" class="easyui-linkbutton" style="margin:2px">Break (F10)</a> <br>
</div>
<div id="filePanel" data-options="region:'center'" title="File">
<div style="position: relative; width: 100%; height: 100%;">
<div id="editor" style="position: absolute; top: 0; right: 0; bottom: 0; left: 0;"></div>
</div>
</div>
<div data-options="region:'south',split:true, noheader:true, border:false" title="Debug" style="height:250px;">
<div class="easyui-layout" data-options="fit:true">
<div data-options="region:'west',split:true" title="Threads" style="width:400px;">
<table id="threads" class="easyui-datagrid"
data-options="idField:'id',singleSelect:true, fit:true, border:false, rowStyler:threadRowStyler">
<thead>
<tr>
<th data-options="field:'id',width:30">ID</th>
<th data-options="field:'scriptInterface'">Script Interface</th>
<th data-options="field:'breakFile'">Break File</th>
<th data-options="field:'breakLine'">Break Line</th>
</tr>
</thead>
</table>
</div>
<div data-options="region:'center'" title="Call Stack" >
<table id="call_stack" class="easyui-datagrid"
data-options="idField:'id',singleSelect:true, fit:true, border:false">
<thead>
<tr>
<th data-options="field:'id',width:30">-</th>
<th data-options="field:'location'">Location</th>
</tr>
</thead>
</table>
</div>
<div data-options="region:'east',split:true, noheader:true, border:false" style="width:600px;">
<table id="vars" class="easyui-treegrid"
data-options="idField:'id',treeField:'name', fit:true" title="Values">
<thead>
<tr>
<th data-options="field:'name',width:180">Name</th>
<th data-options="field:'value',width:300">Value</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<script>
var editor = ace.edit("editor");
//editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");
editor.setReadOnly(true);
editor.on("guttermousedown", function(e){
var target = e.domEvent.target;
if (target.className.indexOf("ace_gutter-cell") == -1)
return;
if (!editor.isFocused())
return;
if (e.clientX > 25 + target.getBoundingClientRect().left)
return;
var row = e.getDocumentPosition().row
var isBreakpoint = toggleBreakpointAt(row + 1, function (success, isBreakpoint) {
if(success) {
if (isBreakpoint) {
e.editor.session.setBreakpoint(row)
} else {
e.editor.session.clearBreakpoint(row)
}
}
});
e.stop()
});
</script>
</body>
</html>
|
