Enyo Inspector Bookmarklet to inspect an Enyo instance by shift-clicking it.

README.md

Add it by visiting http://marklets.com/Enyo+Inspector.aspx

tiqTech.Inspector.js

(function(enyo) {
    if(enyo) {
        function featureHook(event) {
            if( ((event.type === "click" && event.altKey) || (tiqTech.Inspector.liveMode && event.type === "mousemove")) && event.dispatchTarget !== tiqTech.Inspector && event.dispatchTarget.owner !== tiqTech.Inspector) {
                tiqTech.Inspector.setControl(event.dispatchTarget);
            } else if(event.type === "keydown") {
                if(event.altKey && event.which === 76) {
                    tiqTech.Inspector.setLiveMode( !tiqTech.Inspector.getLiveMode());
                }
            }
        }
        
        enyo.dispatcher.features.push(featureHook);
        
        // color scheme from http://www.colourlovers.com/palette/113174/Nom-de-plume
        var css = (function () {/*
            .tiqtech-inspector {
                position:absolute;
                top:5px;
                right:5px;
                height:300px;
                width:400px;
                background:rgba(208,231,153,0.75);
                color: #25271E;
                z-index:10000;
            }
            
            .tiqtech-inspector .ti-header {
                font-weight: bold;
                padding:5px;
            }
            
            .tiqtech-inspector .enyo-scroller {
                top: 30px;
            }
            
            .tiqtech-inspector .ti-content {
                padding:8px;
            }
            
            .tiqtech-inspector .section {
                font-size:smaller;
                font-weight:bold;
                color: #FBEFF4;
                background-color: #D8C358;
                padding:4px;
                border-radius: 8px 0px 8px 0px;
                margin-bottom: 4px;
            }
            
            .tiqtech-property {
                white-space: nowrap;
                padding-left:100px;
                clear:both;
                height: 24px;
                font-size: smaller;
                margin: 4px;
            }
            
            .tiqtech-property > * {
                float: left;
                line-height:24px;
            }
            
            .tiqtech-property .prop {
                margin-left:-100px;
                width: 100px;
                overflow: hidden;
                text-overflow: ellipsis;
                font-weight: bold;
                -background-color: #D8C358;
            }
            
            .tiqtech-property .val {
                min-width:100%;
            }
            
            .tiqtech-property .val > * {
                vertical-align: middle;
            }
            
            .tiqtech-property .val .enyo-input {
                width:100%;
            }
            
            .tiqtech-property .enyo-instance {
                text-decoration: underline;
                cursor: hand; cursor: pointer;
            }
        */}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];
        
        enyo.kind({
            name:"tiqTech.Property",
            classes: "tiqtech-property",
            published: {
                property: "",
                value: ""
            },
            events: {
                onSelectInstance: "",
                onChangeProperty: ""
            },
            components: [
                {name:"prop", classes:"prop"},
                {name:"val", classes:"val", ontap:"valTapped"}
            ],
            create: function() {
                this.inherited(arguments);
                this.propertyChanged();
                this.valueChanged();
            },
            propertyChanged: function() {
                this.$.prop.setContent(this.property);
                this.$.prop.setAttribute("title", this.property);
            },
            valueChanged: function() {
                var v = this.value;
                this.isInstance = v instanceof enyo.instance;
                this.$.val.addRemoveClass("enyo-instance", this.isInstance);
                if(v instanceof Object && !this.isInstance) {
                    try { v = enyo.json.stringify(v); } catch(e) {}
                }

                if(v === true || v === false) {
                    this.$.val.createComponent({kind:"enyo.Checkbox", checked:v, onchange:"checkboxChanged", owner:this});
                } else if(!this.isInstance) {
                    this.$.val.createComponent({kind:"enyo.Input", value:v, onchange:"inputChanged", owner:this});
                } else {
                    this.$.val.setContent(v);
                }
            },
            valTapped: function() {
                if(this.isInstance) {
                    this.doSelectInstance({instance:this.value});
                }
            },
            checkboxChanged: function(inSender, inEvent) {
                this.changeProperty(inSender.getChecked());
            },
            inputChanged: function(inSender, inEvent) {
                try {
                    var v = inSender.getValue();
                    if(this.value instanceof Object) {
                        v = enyo.json.parse(v);
                    }
                    this.changeProperty(v);
                } catch(e) {
                    alert("Invalid JSON");
                }
            },
            changeProperty: function(value) {
                this.value = value;
                this.doChangeProperty({property:this.property, value:this.value});
            }
        });
                
        enyo.singleton({
            name: "tiqTech.Inspector",
            classes: "tiqtech-inspector",
            published: {
                control: "",
                liveMode: false
            },
            handlers: {
                onSelectInstance: "selectInstance",
                onChangeProperty: "propertyChanged"
            },
            components: [
                {tag:"style", content:css, allowHtml:true},
                {classes:"ti-header", components:[
                    {content:"Enyo Inspector", style:"float:left", ontap:"toggle"},
                    {content:"[x]", style:"float:right", ontap:"hide"},
                    {style:"clear:both"}
                ]},
                {name:"scroller", kind:"Scroller", classes:"enyo-fit", components:[
                    {name:"content", classes:"ti-content"}
                ]}
            ],
            create: function() {
                this.inherited(arguments);
                this.controlChanged();
            },
            controlChanged: function() {
                if(!this.hasNode()) {
                    document.body.appendChild(this.render().hasNode());
                }
                
                this.show();
                this.$.content.destroyClientControls();
                if(this.control) {
                    var c$ = [];
                    for(var k in this.getPublished(this.control.ctor)) {
                        c$.push({kind:"tiqTech.Property", property:k, value:this.control[k]});
                    }
                    
                    c$.sort(function(a,b) {
                        var ac = a.property;
                        var bc = b.property;
                        return (ac === bc) ? 0 : (!ac && bc || bc < ac) ? 1 : -1;
                    });
                    
                    c$.unshift({kind:"tiqTech.Property", property:"kind", value:this.control.kindName});
                    c$.unshift({classes:"section", content:"Properties"});
                    
                    c$.push(this.includeControls("Components", this.control.getComponents()));
                    c$.push(this.includeControls("Children", this.control.children));
                    c$.push(this.includeControls("Client Controls", this.control.getClientControls()));
                    
                    this.$.content.createComponents(c$, {owner:this});
                } else {
                    this.$.content.createComponent({content:"Alt-click an Enyo control to view its properties. Alternatively, hit Alt-L to enable live mode to view properties on mouseover"});
                }
                
                this.$.scroller.render();
            },
            getPublished: function(ctor) {
                if(ctor) {
                    return enyo.mixin(enyo.clone(ctor.prototype.published), this.getPublished(ctor.prototype.base));
                } else {
                    return {};
                }
            },
            includeControls: function(label, controls) {
                var comps = [];
                enyo.forEach(controls, function(c) {
                    comps.push({kind:"tiqTech.Property", property:c.name, value:c});
                });
                
                return {components:[
                    {classes:"section", content:label},
                    {components:comps}
                ]};
            },
            selectInstance: function(inSender, inEvent) {
                this.setControl(inEvent.instance);
            },
            propertyChanged: function(inSender, inEvent) {
                enyo.call(this.control, "set"+enyo.cap(inEvent.property), [inEvent.value]);
            },
            toggle: function() {
                this.minimized = !this.minimized;
                this.applyStyle("height", this.minimized ? "30px" : "400px");
            }
        });
    } else {
        alert("Enyo is not loaded on this page");
    }
})(window.enyo);