Scope Variable visualizer

<!-- Example inserting visualizer in OneUI -->
<xe:applicationLayout id="oneUILayout1">
		<xe:this.facets>
			<xp:panel xp:key="MastFooter">
				<xp:section id="programmerSection"
					rendered="#{javascript: @IsMember('Programmer',@Explode(@Implode(context.getUser().getRoles(),';'),';[]'));}">
					<xc:debugScope></xc:debugScope>
				</xp:section>
			</xp:panel>
...

<!-- Custom control for all scopes -->
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom">
	<xp:this.resources><xp:styleSheet href="/scope.css"></xp:styleSheet></xp:this.resources>
	<xp:panel id="panelScope">
		<xc:debugApplicationScope></xc:debugApplicationScope>
		<xc:debugSessionScope></xc:debugSessionScope>
		<xc:debugViewScope></xc:debugViewScope>
		<xc:debugRequestScope></xc:debugRequestScope>
	</xp:panel>
</xp:view>

<!-- Custom control application scope (other scopes follow similar code) -->
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
	<xp:section id="applicationScopeSection" header="applicationScope variables" initClosed="true">
		<xp:panel id="panelApplicationScope" styleClass="scopeContainer">
			<xp:repeat id="repeat1" rows="100" var="scopeData">
				<xp:this.value><![CDATA[#{javascript:return applicationScope.keySet();}]]></xp:this.value>
				<xp:panel styleClass="scopePanel">
					<xp:text escape="true" id="computedField1" value="#{javascript:scopeData}" styleClass="scopeName"></xp:text>
					<xp:br></xp:br>
					<xp:repeat id="repeat2" rows="100" var="varData">
						<xp:this.value><![CDATA[#{javascript:var sd = new Array (applicationScope.get(scopeData));return sd;}]]></xp:this.value>
						<xp:text escape="true" id="computedField2">
							<xp:this.value><![CDATA[#{javascript:
try{if(typeof varData=='object'){return toJson(varData);}else{return varData;}}catch(err){return null;}
}]]></xp:this.value>
						</xp:text>
						<xp:br></xp:br>
					</xp:repeat>
				</xp:panel>
			</xp:repeat>
		</xp:panel>
	</xp:section>
</xp:view>

<!-- scope.css sample  -->
.scopeVarTable{vertical-align:top;}
.scopeVarLabel{color:grey;font-weight:bold;}
.scopeVarText{color:grey;font-weight:normal;}
.scopeContainer{border:1px solid grey;}
.scopePanel:hover{background-color:gold;}
.scopePanel{display:inline-block;width:auto;padding:0px;margin:0px;background-color:Aqua;vertical-align:top;border:1px solid grey;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;zoom:1;*display:inline;}
.scopeName{margin:1px;padding:1px;font-weight:bold;}