debug.js

来自「php绿色服务器,让大家试用greenamp」· JavaScript 代码 · 共 734 行 · 第 1/2 页

/*
 * Ext JS Library 1.0.1
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * [e-mail]
 * 
 * http://www.extjs.com/license
 */

/*
 * These functions are only included in -debug files
 *
*/Ext.debug = {
    init : function(){
        var CP = Ext.ContentPanel;
        var bd = Ext.get(document.body);

        // create the dialog
        var dlg = new Ext.LayoutDialog('x-debug-browser', {
            autoCreate:true,
            width:800,
            height:450,
            title: 'Ext Debug Console & Inspector',
            proxyDrag:true,
            shadow:true,
            center:{alwaysShowTabs:true},
            constraintoviewport:false
        });

        // prevent dialog events from bubbling
        dlg.el.swallowEvent('click');

        // build the layout
        var mainLayout = dlg.getLayout();
        mainLayout.beginUpdate();

        // create the nested layouts
        var clayout = mainLayout.add('center',
            new Ext.debug.InnerLayout('x-debug-console', 400, {
                title: 'Debug Console'
            }
        ));

        var ilayout = mainLayout.add('center',
            new Ext.debug.InnerLayout('x-debug-inspector', 250, {
                title: 'DOM Inspector'
            }
        ));

        var scriptPanel = clayout.add('east', new CP({
            autoCreate:{
                tag: 'div', children: [
                    {tag: 'div'},
                    {tag:'textarea'}
                ]
            },
            fitContainer:true,
            fitToFrame:true,
            title:'Script Console',
            autoScroll: Ext.isGecko, // hideous block for firefox missing cursor AND bad sizing textareas
            setSize : function(w, h){
                Ext.ContentPanel.prototype.setSize.call(this, w, h);
                if(Ext.isGecko && Ext.isStrict){
                    var s = this.adjustForComponents(w, h);
                    this.resizeEl.setSize(s.width-2, s.height-2);
                }
            }
        }));
        var sel = scriptPanel.el;
        var script = sel.child('textarea');
        scriptPanel.resizeEl = script;
        var sctb = scriptPanel.toolbar = new Ext.Toolbar(sel.child('div'));
        sctb.add({
            text: 'Run',
            handler: function(){
                var s = script.dom.value;
                if(trap.checked){
                    try{
                        var rt = eval(s);
                        Ext.debug.dump(rt === undefined? '(no return)' : rt);
                    }catch(e){
                        Ext.debug.log(e.message || e.descript);
                    }
                }else{
                    var rt = eval(s);
                    Ext.debug.dump(rt === undefined? '(no return)' : rt);
                }
            }
        }, {
            text: 'Clear',
            handler: function(){
                script.dom.value = '';
                script.dom.focus();
            }
        });

        var trap = Ext.DomHelper.append(sctb.el, {tag:'input', type:'checkbox', checked: 'checked'});
        trap.checked = true;
        sctb.add('-', trap, 'Trap Errors');


        var stylesGrid = new Ext.grid.PropertyGrid(bd.createChild(), {
            nameText: 'Style',
            enableCtxMenu: false,
            enableColumnResize: false
        });

        var stylePanel = ilayout.add('east', new Ext.GridPanel(stylesGrid,
            {title: '(No element selected)'}));

        stylesGrid.render();

        // hide the header
        stylesGrid.getView().mainHd.setDisplayed(false);

        clayout.tbar.add({
            text: 'Clear',
            handler: function(){
                Ext.debug.console.jsonData = [];
                Ext.debug.console.refresh();
            }
        });

        var treeEl = ilayout.main.getEl();
        // create main inspector toolbar
        var tb = ilayout.tbar;

        var inspectIgnore, inspecting;

        function inspectListener(e, t){
            if(!inspectIgnore.contains(e.getPoint())){
                findNode(t);
            }
        }

        function stopInspecting(e, t){
            if(!inspectIgnore.contains(e.getPoint())){
                inspect.toggle(false);
                if(findNode(t) !== false){
                    e.stopEvent();
                }
            }
        }

        function stopInspectingEsc(e, t){
            if(e.getKey() == e.ESC){
                inspect.toggle(false);
            }
        }

        var inspect = tb.addButton({
            text: 'Inspect',
            enableToggle: true,
            pressed:false,
            toggleHandler: function(n, pressed){
                var d = Ext.get(document);
                if(pressed){
                    d.on('mouseover', inspectListener, window, {buffer:50});
                    d.on('mousedown', stopInspecting);
                    d.on('keydown', stopInspectingEsc);
                    inspectIgnore = dlg.el.getRegion();
                    inspecting = true;
                }else{
                    d.un('mouseover', inspectListener);
                    d.un('mousedown', stopInspecting);
                    d.on('keydown', stopInspectingEsc);
                    inspecting = false;
                    var n = tree.getSelectionModel().getSelectedNode();
                    if(n && n.htmlNode){
                        onNodeSelect(tree, n, false);
                    }
                }
            }
        });

        tb.addSeparator();

        var frameEl = tb.addButton({
            text: 'Highlight Selection',
            enableToggle: true,
            pressed:false,
            toggleHandler: function(n, pressed){
                var n = tree.getSelectionModel().getSelectedNode();
                if(n && n.htmlNode){
                    n[pressed ? 'frame' : 'unframe']();
                }
            }
        });

        tb.addSeparator();

        var reload = tb.addButton({
            text: 'Refresh Children',
            disabled:true,
            handler: function(){
                var n = tree.getSelectionModel().getSelectedNode();
                if(n && n.reload){
                    n.reload();
                }
            }
        });

        tb.add( '-', {
            text: 'Collapse All',
            handler: function(){
                tree.root.collapse(true);
            }
        });

        // perform the main layout
        mainLayout.endUpdate();

        mainLayout.getRegion('center').showPanel(0);

        stylesGrid.on('propertychange', function(s, name, value){
            var node = stylesGrid.treeNode;
            if(styles){
                node.htmlNode.style[name] = value;
            }else{
                node.htmlNode[name] = value;
            }
            node.refresh(true);
        });

        // Create the style toolbar
        var stb = new Ext.Toolbar(stylesGrid.view.getHeaderPanel(true));

        var swap = stb.addButton({
            text: 'DOM Attributes',
            menu: {
                items: [
                    new Ext.menu.CheckItem({id:'dom', text:'DOM Attributes', checked: true, group:'xdb-styles'}),
                    new Ext.menu.CheckItem({id:'styles', text:'CSS Properties', group:'xdb-styles'})
                ]
            }
        });

        swap.menu.on('click', function(){
            styles = swap.menu.items.get('styles').checked;
            showAll[styles? 'show' : 'hide']();
            swap.setText(styles ? 'CSS Properties' : 'DOM Attributes');
            var n = tree.getSelectionModel().getSelectedNode();
            if(n){
                onNodeSelect(tree, n);
            }
        });
        
        var addStyle = stb.addButton({
            text: 'Add',
            disabled: true,
            handler: function(){
                Ext.MessageBox.prompt('Add Property', 'Property Name:', function(btn, v){
                    // store.store is disgusting TODO: clean up the API
                    var store = stylesGrid.store.store;
                    if(btn == 'ok' && v && !store.getById(v)){
                        var r = new Ext.grid.PropertyRecord({name:v, value: ''}, v);
                        store.add(r);
                        stylesGrid.startEditing(store.getCount()-1, 1);
                    }
                });
            }
        });

        var showAll = stb.addButton({
            text: 'Computed Styles',
            hidden: true,
            pressed: false,
            enableToggle: true,
            toggleHandler: function(){
                var n = tree.getSelectionModel().getSelectedNode();
                if(n){
                    onNodeSelect(tree, n);
                }
            }
        });

        // tree related stuff
        var styles = false, hnode;
        var nonSpace = /^\s*$/;
        var html = Ext.util.Format.htmlEncode;
        var ellipsis = Ext.util.Format.ellipsis;
        var styleRe = /\s?([a-z\-]*)\:([^;]*)(?:[;\s\n\r]*)/gi;

        function findNode(n){
            if(!n || n.nodeType != 1 || n == document.body || n == document){
                return false;
            }
            var pn = [n], p = n;
            while((p = p.parentNode) && p.nodeType == 1 && p.tagName.toUpperCase() != 'HTML'){
                pn.unshift(p);
            }
            var cn = hnode;
            for(var i = 0, len = pn.length; i < len; i++){
                cn.expand();
                cn = cn.findChild('htmlNode', pn[i]);
                if(!cn){ // in this dialog?
                    return false;
                }
            }
            cn.select();
            var a = cn.ui.anchor;
            treeEl.dom.scrollTop = Math.max(0 ,a.offsetTop-10);
            //treeEl.dom.scrollLeft = Math.max(0 ,a.offsetLeft-10); no likey
            cn.highlight();
            return true;
        }

        function nodeTitle(n){
            var s = n.tagName;
            if(n.id){
                s += '#'+n.id;
            }else if(n.className){
                s += '.'+n.className;
            }
            return s;
        }

        function onNodeSelect(t, n, last){
            if(last && last.unframe){
                last.unframe();
            }
            var props = {};
            if(n && n.htmlNode){
                if(frameEl.pressed){
                    n.frame();
                }
                if(inspecting){
                    return;
                }
                addStyle.enable();
                reload.setDisabled(n.leaf);
                var dom = n.htmlNode;
                stylePanel.setTitle(nodeTitle(dom));
                if(styles && !showAll.pressed){
                    var s = dom.style ? dom.style.cssText : '';
                    if(s){
                        var m;
                        while ((m = styleRe.exec(s)) != null){
                            props[m[1].toLowerCase()] = m[2];
                        }
                    }
                }else if(styles){
                    var cl = Ext.debug.cssList;
                    var s = dom.style, fly = Ext.fly(dom);
                    if(s){
                        for(var i = 0, len = cl.length; i<len; i++){
                            var st = cl[i];
                            var v = s[st] || fly.getStyle(st);
                            if(v != undefined && v !== null && v !== ''){
                                props[st] = v;
                            }
                        }
                    }
                }else{
                    for(var a in dom){
                        var v = dom[a];
                        if((isNaN(a+10)) && v != undefined && v !== null && v !== '' && !(Ext.isGecko && a[0] == a[0].toUpperCase())){
                            props[a] = v;
                        }
                    }
                }
            }else{
                if(inspecting){
                    return;
                }
                addStyle.disable();
                reload.disabled();
            }