Enyo Inspector

by Ryan Duffy

JavaScript

enyo.kind({
    name:"ex.App",
    components:[
        {kind:"onyx.Button", content:"abc"},
        {content:"def"},
        {components:[
            {content:"ghi"}
        ]}
    ]
});

new ex.App().renderInto(document.body);

(function() {
    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;
            }
            
...