Subversion Repositories Applications.papyrus

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
1318 alexandre_ 1
<html>
2
<head>
3
<title>Deep Debugger</title>
4
<script>
5
 
6
var tableRows = {};
7
var tableCels = {};
8
var tableObjs = {};
9
var tablesBuilt = {};
10
var tableShows = {};
11
var tableHides = {};
12
 
13
// IE: nodes w/id need to be redeclared or getElementById is b0rked
14
var frame = null;
15
 
16
window.onload = function(){
17
	// if IE loads this page too quickly (instantly) then
18
	// window.debugVar might not have been set
19
	window.setTimeout(startMeUp, 100);
20
}
21
 
22
function startMeUp(){
23
	frame = document.getElementById('frame');
24
	// GET string
25
	var index = location.search.split("=").pop();
26
	var debugObj = window.opener.dojo.debugDeep;
27
	var debugVar = debugObj.debugVars[index] || window.debugVar;
28
	buildTable('root', frame, debugVar);
29
}
30
 
31
function buildTable(path, parent, obj){
32
	var keys = [];
33
	var vals = [];
34
	for(var prop in obj){
35
		keys.push(prop);
36
		try {
37
			vals[prop] = obj[prop];
38
		} catch(E) {
39
			vals[prop] = 'ERROR: ' + E.message;
40
		}
41
	}
42
	keys.sort(keySorter);
43
 
44
	if (!keys.length){
45
 
46
		var div = document.createElement('div');
47
		div.appendChild(document.createTextNode('Object has no properties.'));
48
 
49
		parent.appendChild(div);
50
		return;
51
	}
52
 
53
 
54
	var t = document.createElement('table');
55
	t.border = "1";
56
 
57
	var tb = document.createElement('tbody');
58
	t.appendChild(tb);
59
 
60
 
61
	for(var i = 0; i < keys.length; i++) {
62
		buildTableRow(path+'-'+keys[i], tb, keys[i], vals[keys[i]]);
63
	}
64
 
65
	if (path == 'root'){
66
		//t.style.width = '90%';
67
	}
68
	t.style.width = '100%';
69
 
70
	parent.appendChild(t);
71
 
72
	tablesBuilt[path] = true;
73
}
74
 
75
function buildTableRow(path, tb, name, value) {
76
 
77
	var simpleType = typeof(value);
78
	var createSubrow = (simpleType == 'object');
79
	var complexType = simpleType;
80
 
81
	if (simpleType == 'object'){
82
		var cls = getConstructorClass(value);
83
		if (cls){
84
			if (cls == 'Object'){
85
			}else if (cls == 'Array'){
86
				complexType = 'array';
87
			}else{
88
				complexType += ' ('+cls+')';
89
			}
90
		}
91
	}
92
 
93
/*var tr1 = document.createElement('tr');
94
	var td1 = document.createElement('td');
95
	var td2 = document.createElement('td');
96
	var td3 = document.createElement('td');
97
	var td4 = document.createElement('td');*/
98
 
99
	var row = tb.rows.length;
100
	var tr1 = tb.insertRow(row++);
101
	var td1 = tr1.insertCell(0);
102
	var td2 = tr1.insertCell(1);
103
	var td3 = tr1.insertCell(2);
104
	var td4 = tr1.insertCell(3);
105
 
106
	tr1.style.verticalAlign = 'top';
107
	td1.style.verticalAlign = 'middle';
108
 
109
	td1.className = 'propPlus';
110
	td2.className = 'propName';
111
	td3.className = 'propType';
112
	td4.className = 'propVal';
113
 
114
	//tr1.appendChild(td1);
115
	//tr1.appendChild(td2);
116
	//tr1.appendChild(td3);
117
	//tr1.appendChild(td4);
118
 
119
	if (createSubrow){
120
		var img1 = document.createElement('img');
121
		img1.width = 9;
122
		img1.height = 9;
123
		img1.src = 'arrow_show.gif';
124
		var a1 = document.createElement('a');
125
		a1.appendChild(img1);
126
		a1.href = '#';
127
		a1.onclick = function(){ showTableRow(path); return false; };
128
 
129
		var img2 = document.createElement('img');
130
		img2.width = 9;
131
		img2.height = 9;
132
		img2.src = 'arrow_hide.gif';
133
		var a2 = document.createElement('a');
134
		a2.appendChild(img2);
135
		a2.href = '#';
136
		a2.onclick = function(){ hideTableRow(path); return false; };
137
		a2.style.display = 'none';
138
 
139
		tableShows[path] = a1;
140
		tableHides[path] = a2;
141
 
142
		td1.appendChild(a1);
143
		td1.appendChild(a2);
144
	}else{
145
		var img = document.createElement('img');
146
		img.width = 9;
147
		img.height = 9;
148
		img.src = 'spacer.gif';
149
 
150
		td1.appendChild(img);
151
	}
152
 
153
	td2.appendChild(document.createTextNode(name));
154
	td3.appendChild(document.createTextNode(complexType));
155
	td4.appendChild(buildPreBlock(value));
156
 
157
	//tb.appendChild(tr1);
158
 
159
	if (createSubrow){
160
		var tr2 = tb.insertRow(row++);
161
		var td5 = tr2.insertCell(0);
162
		var td6 = tr2.insertCell(1);
163
 
164
		//var tr2 = document.createElement('tr');
165
		//var td5 = document.createElement('td');
166
		//var td6 = document.createElement('td');
167
 
168
		td5.innerHTML = '&nbsp;';
169
		//td6.innerHTML = '&nbsp;';
170
 
171
		td6.colSpan = '3';
172
 
173
		tr2.appendChild(td5);
174
		tr2.appendChild(td6);
175
 
176
		tr2.style.display = 'none';
177
 
178
		tb.appendChild(tr2);
179
 
180
		tableRows[path] = tr2;
181
		tableCels[path] = td6;
182
		tableObjs[path] = value;
183
	}
184
}
185
 
186
function showTableRow(path){
187
 
188
	var tr = tableRows[path];
189
	var td = tableCels[path];
190
	var a1 = tableShows[path];
191
	var a2 = tableHides[path];
192
 
193
	if (!tablesBuilt[path]){
194
 
195
		//alert('building table for '+path);
196
		buildTable(path, td, tableObjs[path]);
197
	}
198
 
199
	tr.style.display = 'table-row';
200
 
201
	a1.style.display = 'none';
202
	a2.style.display = 'inline';
203
}
204
 
205
function hideTableRow(path){
206
 
207
	var tr = tableRows[path];
208
	var a1 = tableShows[path];
209
	var a2 = tableHides[path];
210
 
211
	tr.style.display = 'none';
212
 
213
	a1.style.display = 'inline';
214
	a2.style.display = 'none';
215
}
216
 
217
function buildPreBlock(value){
218
 
219
	//
220
	// how many lines ?
221
	//
222
 
223
	var s = ''+value;
224
	s = s.replace("\r\n", "\n");
225
	s = s.replace("\r", "");
226
	var lines = s.split("\n");
227
 
228
 
229
	if (lines.length < 2){
230
 
231
		if (lines[0].length < 60){
232
 
233
			var pre = document.createElement('pre');
234
			pre.appendChild(document.createTextNode(s));
235
			return pre;
236
		}
237
	}
238
 
239
 
240
	//
241
	// multiple lines :(
242
	//
243
 
244
	var preview = lines[0].substr(0, 60) + ' ...';
245
 
246
	var pre1 = document.createElement('pre');
247
	pre1.appendChild(document.createTextNode(preview));
248
	pre1.className = 'clicky';
249
 
250
	var pre2 = document.createElement('pre');
251
	pre2.appendChild(document.createTextNode(s));
252
	pre2.style.display = 'none';
253
	pre2.className = 'clicky';
254
 
255
	pre1.onclick = function(){
256
		pre1.style.display = 'none';
257
		pre2.style.display = 'block';
258
	}
259
 
260
	pre2.onclick = function(){
261
		pre1.style.display = 'block';
262
		pre2.style.display = 'none';
263
	}
264
 
265
	var pre = document.createElement('div');
266
 
267
	pre.appendChild(pre1);
268
	pre.appendChild(pre2);
269
 
270
	return pre;
271
}
272
 
273
function getConstructorClass(obj){
274
 
275
	if (!obj.constructor || !obj.constructor.toString) return;
276
 
277
	var m = obj.constructor.toString().match(/function\s*(\w+)/);
278
 
279
	if (m && m.length == 2) return m[1];
280
 
281
	return null;
282
}
283
 
284
function keySorter(a, b){
285
 
286
	if (a == parseInt(a) && b == parseInt(b)){
287
 
288
		return (parseInt(a) > parseInt(b)) ? 1 : ((parseInt(a) < parseInt(b)) ? -1 : 0);
289
	}
290
 
291
	// sort by lowercase string
292
 
293
	var a2 = String(a).toLowerCase();
294
	var b2 = String(b).toLowerCase();
295
 
296
	return (a2 > b2) ? 1 : ((a2 < b2) ? -1 : 0);
297
}
298
 
299
</script>
300
<style>
301
 
302
body {
303
	font-family: arial, helvetica, sans-serif;
304
}
305
 
306
table {
307
	border-width: 0px;
308
	border-spacing: 1px;
309
	border-collapse: separate;
310
}
311
 
312
td {
313
	border-width: 0px;
314
	padding: 2px;
315
}
316
 
317
img {
318
	border: 0;
319
}
320
 
321
pre {
322
	margin: 0;
323
	padding: 0;
324
	white-space: -moz-pre-wrap;  /* Mozilla, supported since 1999 */
325
	white-space: -pre-wrap;      /* Opera 4 - 6 */
326
	white-space: -o-pre-wrap;    /* Opera 7 */
327
	white-space: pre-wrap;       /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
328
	word-wrap: break-word;       /* IE 5.5+ */
329
}
330
 
331
pre.clicky {
332
	cursor: hand;
333
	cursor: pointer;
334
}
335
 
336
td.propPlus {
337
	width: 9px;
338
	background-color: #ddd;
339
}
340
 
341
td.propName {
342
	background-color: #ddd;
343
}
344
 
345
td.propType {
346
	background-color: #ddd;
347
}
348
 
349
td.propVal {
350
	background-color: #ddd;
351
}
352
 
353
</style>
354
</head>
355
<body>
356
 
357
<h2>Javascript Object Browser</h2>
358
 
359
<div id="frame"></div>
360
 
361
</body>
362
</html>