1 | /* |
---|
2 | * Ext JS Library 2.2.1 |
---|
3 | * Copyright(c) 2006-2009, Ext JS, LLC. |
---|
4 | * licensing@extjs.com |
---|
5 | * |
---|
6 | * http://extjs.com/license |
---|
7 | */ |
---|
8 | |
---|
9 | Ext.debug = {}; |
---|
10 | |
---|
11 | (function(){ |
---|
12 | |
---|
13 | var cp; |
---|
14 | |
---|
15 | function createConsole(){ |
---|
16 | |
---|
17 | var scriptPanel = new Ext.debug.ScriptsPanel(); |
---|
18 | var logView = new Ext.debug.LogPanel(); |
---|
19 | var tree = new Ext.debug.DomTree(); |
---|
20 | |
---|
21 | var tabs = new Ext.TabPanel({ |
---|
22 | activeTab: 0, |
---|
23 | border: false, |
---|
24 | tabPosition: 'bottom', |
---|
25 | items: [{ |
---|
26 | title: 'Debug Console', |
---|
27 | layout:'border', |
---|
28 | items: [logView, scriptPanel] |
---|
29 | },{ |
---|
30 | title: 'DOM Inspector', |
---|
31 | layout:'border', |
---|
32 | items: [tree] |
---|
33 | }] |
---|
34 | }); |
---|
35 | |
---|
36 | cp = new Ext.Panel({ |
---|
37 | id: 'x-debug-browser', |
---|
38 | title: 'Console', |
---|
39 | collapsible: true, |
---|
40 | animCollapse: false, |
---|
41 | style: 'position:absolute;left:0;bottom:0;', |
---|
42 | height:200, |
---|
43 | logView: logView, |
---|
44 | layout: 'fit', |
---|
45 | |
---|
46 | tools:[{ |
---|
47 | id: 'close', |
---|
48 | handler: function(){ |
---|
49 | cp.destroy(); |
---|
50 | cp = null; |
---|
51 | Ext.EventManager.removeResizeListener(handleResize); |
---|
52 | } |
---|
53 | }], |
---|
54 | |
---|
55 | items: tabs |
---|
56 | }); |
---|
57 | |
---|
58 | cp.render(document.body); |
---|
59 | |
---|
60 | cp.resizer = new Ext.Resizable(cp.el, { |
---|
61 | minHeight:50, |
---|
62 | handles: "n", |
---|
63 | pinned: true, |
---|
64 | transparent:true, |
---|
65 | resizeElement : function(){ |
---|
66 | var box = this.proxy.getBox(); |
---|
67 | this.proxy.hide(); |
---|
68 | cp.setHeight(box.height); |
---|
69 | return box; |
---|
70 | } |
---|
71 | }); |
---|
72 | |
---|
73 | function handleResize(){ |
---|
74 | cp.setWidth(Ext.getBody().getViewSize().width); |
---|
75 | } |
---|
76 | Ext.EventManager.onWindowResize(handleResize); |
---|
77 | |
---|
78 | handleResize(); |
---|
79 | } |
---|
80 | |
---|
81 | |
---|
82 | Ext.apply(Ext, { |
---|
83 | log : function(){ |
---|
84 | if(!cp){ |
---|
85 | createConsole(); |
---|
86 | } |
---|
87 | cp.logView.log.apply(cp.logView, arguments); |
---|
88 | }, |
---|
89 | |
---|
90 | logf : function(format, arg1, arg2, etc){ |
---|
91 | Ext.log(String.format.apply(String, arguments)); |
---|
92 | }, |
---|
93 | |
---|
94 | dump : function(o){ |
---|
95 | if(typeof o == 'string' || typeof o == 'number' || typeof o == 'undefined' || Ext.isDate(o)){ |
---|
96 | Ext.log(o); |
---|
97 | }else if(!o){ |
---|
98 | Ext.log("null"); |
---|
99 | }else if(typeof o != "object"){ |
---|
100 | Ext.log('Unknown return type'); |
---|
101 | }else if(Ext.isArray(o)){ |
---|
102 | Ext.log('['+o.join(',')+']'); |
---|
103 | }else{ |
---|
104 | var b = ["{\n"]; |
---|
105 | for(var key in o){ |
---|
106 | var to = typeof o[key]; |
---|
107 | if(to != "function" && to != "object"){ |
---|
108 | b.push(String.format(" {0}: {1},\n", key, o[key])); |
---|
109 | } |
---|
110 | } |
---|
111 | var s = b.join(""); |
---|
112 | if(s.length > 3){ |
---|
113 | s = s.substr(0, s.length-2); |
---|
114 | } |
---|
115 | Ext.log(s + "\n}"); |
---|
116 | } |
---|
117 | }, |
---|
118 | |
---|
119 | _timers : {}, |
---|
120 | |
---|
121 | time : function(name){ |
---|
122 | name = name || "def"; |
---|
123 | Ext._timers[name] = new Date().getTime(); |
---|
124 | }, |
---|
125 | |
---|
126 | timeEnd : function(name, printResults){ |
---|
127 | var t = new Date().getTime(); |
---|
128 | name = name || "def"; |
---|
129 | var v = String.format("{0} ms", t-Ext._timers[name]); |
---|
130 | Ext._timers[name] = new Date().getTime(); |
---|
131 | if(printResults !== false){ |
---|
132 | Ext.log('Timer ' + (name == "def" ? v : name + ": " + v)); |
---|
133 | } |
---|
134 | return v; |
---|
135 | } |
---|
136 | }); |
---|
137 | |
---|
138 | })(); |
---|
139 | |
---|
140 | |
---|
141 | Ext.debug.ScriptsPanel = Ext.extend(Ext.Panel, { |
---|
142 | id:'x-debug-scripts', |
---|
143 | region: 'east', |
---|
144 | minWidth: 200, |
---|
145 | split: true, |
---|
146 | width: 350, |
---|
147 | border: false, |
---|
148 | layout:'anchor', |
---|
149 | style:'border-width:0 0 0 1px;', |
---|
150 | |
---|
151 | initComponent : function(){ |
---|
152 | |
---|
153 | this.scriptField = new Ext.form.TextArea({ |
---|
154 | anchor: '100% -26', |
---|
155 | style:'border-width:0;' |
---|
156 | }); |
---|
157 | |
---|
158 | this.trapBox = new Ext.form.Checkbox({ |
---|
159 | id: 'console-trap', |
---|
160 | boxLabel: 'Trap Errors', |
---|
161 | checked: true |
---|
162 | }); |
---|
163 | |
---|
164 | this.toolbar = new Ext.Toolbar([{ |
---|
165 | text: 'Run', |
---|
166 | scope: this, |
---|
167 | handler: this.evalScript |
---|
168 | },{ |
---|
169 | text: 'Clear', |
---|
170 | scope: this, |
---|
171 | handler: this.clear |
---|
172 | }, |
---|
173 | '->', |
---|
174 | this.trapBox, |
---|
175 | ' ', ' ' |
---|
176 | ]); |
---|
177 | |
---|
178 | this.items = [this.toolbar, this.scriptField]; |
---|
179 | |
---|
180 | Ext.debug.ScriptsPanel.superclass.initComponent.call(this); |
---|
181 | }, |
---|
182 | |
---|
183 | evalScript : function(){ |
---|
184 | var s = this.scriptField.getValue(); |
---|
185 | if(this.trapBox.getValue()){ |
---|
186 | try{ |
---|
187 | var rt = eval(s); |
---|
188 | Ext.dump(rt === undefined? '(no return)' : rt); |
---|
189 | }catch(e){ |
---|
190 | Ext.log(e.message || e.descript); |
---|
191 | } |
---|
192 | }else{ |
---|
193 | var rt = eval(s); |
---|
194 | Ext.dump(rt === undefined? '(no return)' : rt); |
---|
195 | } |
---|
196 | }, |
---|
197 | |
---|
198 | clear : function(){ |
---|
199 | this.scriptField.setValue(''); |
---|
200 | this.scriptField.focus(); |
---|
201 | } |
---|
202 | |
---|
203 | }); |
---|
204 | |
---|
205 | Ext.debug.LogPanel = Ext.extend(Ext.Panel, { |
---|
206 | autoScroll: true, |
---|
207 | region: 'center', |
---|
208 | border: false, |
---|
209 | style:'border-width:0 1px 0 0', |
---|
210 | |
---|
211 | log : function(){ |
---|
212 | var markup = [ '<div style="padding:5px !important;border-bottom:1px solid #ccc;">', |
---|
213 | Ext.util.Format.htmlEncode(Array.prototype.join.call(arguments, ', ')).replace(/\n/g, '<br />').replace(/\s/g, ' '), |
---|
214 | '</div>'].join(''); |
---|
215 | |
---|
216 | this.body.insertHtml('beforeend', markup); |
---|
217 | this.body.scrollTo('top', 100000); |
---|
218 | }, |
---|
219 | |
---|
220 | clear : function(){ |
---|
221 | this.body.update(''); |
---|
222 | this.body.dom.scrollTop = 0; |
---|
223 | } |
---|
224 | }); |
---|
225 | |
---|
226 | Ext.debug.DomTree = Ext.extend(Ext.tree.TreePanel, { |
---|
227 | enableDD:false , |
---|
228 | lines:false, |
---|
229 | rootVisible:false, |
---|
230 | animate:false, |
---|
231 | hlColor:'ffff9c', |
---|
232 | autoScroll: true, |
---|
233 | region:'center', |
---|
234 | border:false, |
---|
235 | |
---|
236 | initComponent : function(){ |
---|
237 | |
---|
238 | |
---|
239 | Ext.debug.DomTree.superclass.initComponent.call(this); |
---|
240 | |
---|
241 | // tree related stuff |
---|
242 | var styles = false, hnode; |
---|
243 | var nonSpace = /^\s*$/; |
---|
244 | var html = Ext.util.Format.htmlEncode; |
---|
245 | var ellipsis = Ext.util.Format.ellipsis; |
---|
246 | var styleRe = /\s?([a-z\-]*)\:([^;]*)(?:[;\s\n\r]*)/gi; |
---|
247 | |
---|
248 | function findNode(n){ |
---|
249 | if(!n || n.nodeType != 1 || n == document.body || n == document){ |
---|
250 | return false; |
---|
251 | } |
---|
252 | var pn = [n], p = n; |
---|
253 | while((p = p.parentNode) && p.nodeType == 1 && p.tagName.toUpperCase() != 'HTML'){ |
---|
254 | pn.unshift(p); |
---|
255 | } |
---|
256 | var cn = hnode; |
---|
257 | for(var i = 0, len = pn.length; i < len; i++){ |
---|
258 | cn.expand(); |
---|
259 | cn = cn.findChild('htmlNode', pn[i]); |
---|
260 | if(!cn){ // in this dialog? |
---|
261 | return false; |
---|
262 | } |
---|
263 | } |
---|
264 | cn.select(); |
---|
265 | var a = cn.ui.anchor; |
---|
266 | treeEl.dom.scrollTop = Math.max(0 ,a.offsetTop-10); |
---|
267 | //treeEl.dom.scrollLeft = Math.max(0 ,a.offsetLeft-10); no likey |
---|
268 | cn.highlight(); |
---|
269 | return true; |
---|
270 | } |
---|
271 | |
---|
272 | function nodeTitle(n){ |
---|
273 | var s = n.tagName; |
---|
274 | if(n.id){ |
---|
275 | s += '#'+n.id; |
---|
276 | }else if(n.className){ |
---|
277 | s += '.'+n.className; |
---|
278 | } |
---|
279 | return s; |
---|
280 | } |
---|
281 | |
---|
282 | function onNodeSelect(t, n, last){ |
---|
283 | return; |
---|
284 | if(last && last.unframe){ |
---|
285 | last.unframe(); |
---|
286 | } |
---|
287 | var props = {}; |
---|
288 | if(n && n.htmlNode){ |
---|
289 | if(frameEl.pressed){ |
---|
290 | n.frame(); |
---|
291 | } |
---|
292 | if(inspecting){ |
---|
293 | return; |
---|
294 | } |
---|
295 | addStyle.enable(); |
---|
296 | reload.setDisabled(n.leaf); |
---|
297 | var dom = n.htmlNode; |
---|
298 | stylePanel.setTitle(nodeTitle(dom)); |
---|
299 | if(styles && !showAll.pressed){ |
---|
300 | var s = dom.style ? dom.style.cssText : ''; |
---|
301 | if(s){ |
---|
302 | var m; |
---|
303 | while ((m = styleRe.exec(s)) != null){ |
---|
304 | props[m[1].toLowerCase()] = m[2]; |
---|
305 | } |
---|
306 | } |
---|
307 | }else if(styles){ |
---|
308 | var cl = Ext.debug.cssList; |
---|
309 | var s = dom.style, fly = Ext.fly(dom); |
---|
310 | if(s){ |
---|
311 | for(var i = 0, len = cl.length; i<len; i++){ |
---|
312 | var st = cl[i]; |
---|
313 | var v = s[st] || fly.getStyle(st); |
---|
314 | if(v != undefined && v !== null && v !== ''){ |
---|
315 | props[st] = v; |
---|
316 | } |
---|
317 | } |
---|
318 | } |
---|
319 | }else{ |
---|
320 | for(var a in dom){ |
---|
321 | var v = dom[a]; |
---|
322 | if((isNaN(a+10)) && v != undefined && v !== null && v !== '' && !(Ext.isGecko && a[0] == a[0].toUpperCase())){ |
---|
323 | props[a] = v; |
---|
324 | } |
---|
325 | } |
---|
326 | } |
---|
327 | }else{ |
---|
328 | if(inspecting){ |
---|
329 | return; |
---|
330 | } |
---|
331 | addStyle.disable(); |
---|
332 | reload.disabled(); |
---|
333 | } |
---|
334 | stylesGrid.setSource(props); |
---|
335 | stylesGrid.treeNode = n; |
---|
336 | stylesGrid.view.fitColumns(); |
---|
337 | } |
---|
338 | |
---|
339 | this.loader = new Ext.tree.TreeLoader(); |
---|
340 | this.loader.load = function(n, cb){ |
---|
341 | var isBody = n.htmlNode == document.body; |
---|
342 | var cn = n.htmlNode.childNodes; |
---|
343 | for(var i = 0, c; c = cn[i]; i++){ |
---|
344 | if(isBody && c.id == 'x-debug-browser'){ |
---|
345 | continue; |
---|
346 | } |
---|
347 | if(c.nodeType == 1){ |
---|
348 | n.appendChild(new Ext.debug.HtmlNode(c)); |
---|
349 | }else if(c.nodeType == 3 && !nonSpace.test(c.nodeValue)){ |
---|
350 | n.appendChild(new Ext.tree.TreeNode({ |
---|
351 | text:'<em>' + ellipsis(html(String(c.nodeValue)), 35) + '</em>', |
---|
352 | cls: 'x-tree-noicon' |
---|
353 | })); |
---|
354 | } |
---|
355 | } |
---|
356 | cb(); |
---|
357 | }; |
---|
358 | |
---|
359 | //tree.getSelectionModel().on('selectionchange', onNodeSelect, null, {buffer:250}); |
---|
360 | |
---|
361 | this.root = this.setRootNode(new Ext.tree.TreeNode('Ext')); |
---|
362 | |
---|
363 | hnode = this.root.appendChild(new Ext.debug.HtmlNode( |
---|
364 | document.getElementsByTagName('html')[0] |
---|
365 | )); |
---|
366 | |
---|
367 | } |
---|
368 | }); |
---|
369 | |
---|
370 | |
---|
371 | // highly unusual class declaration |
---|
372 | Ext.debug.HtmlNode = function(){ |
---|
373 | var html = Ext.util.Format.htmlEncode; |
---|
374 | var ellipsis = Ext.util.Format.ellipsis; |
---|
375 | var nonSpace = /^\s*$/; |
---|
376 | |
---|
377 | var attrs = [ |
---|
378 | {n: 'id', v: 'id'}, |
---|
379 | {n: 'className', v: 'class'}, |
---|
380 | {n: 'name', v: 'name'}, |
---|
381 | {n: 'type', v: 'type'}, |
---|
382 | {n: 'src', v: 'src'}, |
---|
383 | {n: 'href', v: 'href'} |
---|
384 | ]; |
---|
385 | |
---|
386 | function hasChild(n){ |
---|
387 | for(var i = 0, c; c = n.childNodes[i]; i++){ |
---|
388 | if(c.nodeType == 1){ |
---|
389 | return true; |
---|
390 | } |
---|
391 | } |
---|
392 | return false; |
---|
393 | } |
---|
394 | |
---|
395 | function renderNode(n, leaf){ |
---|
396 | var tag = n.tagName.toLowerCase(); |
---|
397 | var s = '<' + tag; |
---|
398 | for(var i = 0, len = attrs.length; i < len; i++){ |
---|
399 | var a = attrs[i]; |
---|
400 | var v = n[a.n]; |
---|
401 | if(v && !nonSpace.test(v)){ |
---|
402 | s += ' ' + a.v + '="<i>' + html(v) +'</i>"'; |
---|
403 | } |
---|
404 | } |
---|
405 | var style = n.style ? n.style.cssText : ''; |
---|
406 | if(style){ |
---|
407 | s += ' style="<i>' + html(style.toLowerCase()) +'</i>"'; |
---|
408 | } |
---|
409 | if(leaf && n.childNodes.length > 0){ |
---|
410 | s+='><em>' + ellipsis(html(String(n.innerHTML)), 35) + '</em></'+tag+'>'; |
---|
411 | }else if(leaf){ |
---|
412 | s += ' />'; |
---|
413 | }else{ |
---|
414 | s += '>'; |
---|
415 | } |
---|
416 | return s; |
---|
417 | } |
---|
418 | |
---|
419 | var HtmlNode = function(n){ |
---|
420 | var leaf = !hasChild(n); |
---|
421 | this.htmlNode = n; |
---|
422 | this.tagName = n.tagName.toLowerCase(); |
---|
423 | var attr = { |
---|
424 | text : renderNode(n, leaf), |
---|
425 | leaf : leaf, |
---|
426 | cls: 'x-tree-noicon' |
---|
427 | }; |
---|
428 | HtmlNode.superclass.constructor.call(this, attr); |
---|
429 | this.attributes.htmlNode = n; // for searching |
---|
430 | if(!leaf){ |
---|
431 | this.on('expand', this.onExpand, this); |
---|
432 | this.on('collapse', this.onCollapse, this); |
---|
433 | } |
---|
434 | }; |
---|
435 | |
---|
436 | |
---|
437 | Ext.extend(HtmlNode, Ext.tree.AsyncTreeNode, { |
---|
438 | cls: 'x-tree-noicon', |
---|
439 | preventHScroll: true, |
---|
440 | refresh : function(highlight){ |
---|
441 | var leaf = !hasChild(this.htmlNode); |
---|
442 | this.setText(renderNode(this.htmlNode, leaf)); |
---|
443 | if(highlight){ |
---|
444 | Ext.fly(this.ui.textNode).highlight(); |
---|
445 | } |
---|
446 | }, |
---|
447 | |
---|
448 | onExpand : function(){ |
---|
449 | if(!this.closeNode && this.parentNode){ |
---|
450 | this.closeNode = this.parentNode.insertBefore(new Ext.tree.TreeNode({ |
---|
451 | text:'</' + this.tagName + '>', |
---|
452 | cls: 'x-tree-noicon' |
---|
453 | }), this.nextSibling); |
---|
454 | }else if(this.closeNode){ |
---|
455 | this.closeNode.ui.show(); |
---|
456 | } |
---|
457 | }, |
---|
458 | |
---|
459 | onCollapse : function(){ |
---|
460 | if(this.closeNode){ |
---|
461 | this.closeNode.ui.hide(); |
---|
462 | } |
---|
463 | }, |
---|
464 | |
---|
465 | render : function(bulkRender){ |
---|
466 | HtmlNode.superclass.render.call(this, bulkRender); |
---|
467 | }, |
---|
468 | |
---|
469 | highlightNode : function(){ |
---|
470 | //Ext.fly(this.htmlNode).highlight(); |
---|
471 | }, |
---|
472 | |
---|
473 | highlight : function(){ |
---|
474 | //Ext.fly(this.ui.textNode).highlight(); |
---|
475 | }, |
---|
476 | |
---|
477 | frame : function(){ |
---|
478 | this.htmlNode.style.border = '1px solid #0000ff'; |
---|
479 | //this.highlightNode(); |
---|
480 | }, |
---|
481 | |
---|
482 | unframe : function(){ |
---|
483 | //Ext.fly(this.htmlNode).removeClass('x-debug-frame'); |
---|
484 | this.htmlNode.style.border = ''; |
---|
485 | } |
---|
486 | }); |
---|
487 | |
---|
488 | return HtmlNode; |
---|
489 | }(); |
---|
490 | |
---|
491 | |
---|