var dx = {
open : function()
{
var spacer = "<font color='blue'><strong> | </strong></font>";
var q = document.getElementsByTagName('*');
var k = q.length;
var active_x = '';
var el = [];
container = document.createElement('div');
container.style.position = 'absolute';
container.style.top = 20 + 'px';
container.style.left = 20 + 'px';
container.style.width = window.innerWidth /2 + 'px';
container.style.height = window.innerHeight /3 + 'px';
container.style.zIndex = 1000;
container.style.backgroundColor = 'rgba(255,255,255,0.9)';
container.style.border = '1px solid';
container.id='dx_container_v_88661_92701uniq.9';
document.body.appendChild(container);
var hd = document.createElement('div');
hd.style.position = 'absolute';
hd.style.top = 5 + 'px';
hd.style.left = 10 + 'px';
hd.style.height = 15 + 'px';
hd.style.fontFamily = "‘Lucida Console’, Monaco, monospace";
hd.style.fontSize = '70%';
container.appendChild(hd);
var itemstore = document.createElement('div');
itemstore.style.top = 21 + 'px';
itemstore.style.left = 10 + 'px';
itemstore.style.position = 'absolute';
itemstore.style.width = container.offsetWidth -25 + 'px';
itemstore.style.height = container.offsetHeight - 10 - 21*2 + 'px';
itemstore.style.overflow = 'scroll';
container.appendChild(itemstore);
cnv = document.createElement('canvas');
cnv.style.position = 'absolute';
cnv.style.left = 2 + 'px';
cnv.style.top = 10 + 'px';
cnv.height = k*17-5;
cnv.width = 30;
itemstore.appendChild(cnv);
var changer = document.createElement('div');
changer.style.position = 'absolute';
changer.style.left = 10 + 'px';
changer.style.bottom = 2 + 'px';
changer.style.width = container.offsetWidth-25 + 'px';
changer.style.height = 18 + 'px';
container.appendChild(changer);
var idf = document.createElement('input');
idf.type='text';
idf.placeholder = 'Id';
idf.style.position = 'absolute';
idf.style.top = 0;idf.style.left = 0;
idf.style.fontSize = '60%';
idf.style.height = 7 + 'px';
idf.style.width = 100 + 'px';
idf.style.fontFamily = "‘Lucida Console’, Monaco, monospace";
changer.appendChild(idf);
var clf = document.createElement('input');
clf.type='text';
clf.placeholder = 'Class';
clf.style.position='absolute';
clf.style.top = 0;clf.style.left = idf.offsetWidth + 5 + 'px';
clf.style.fontSize = '60%';
clf.style.height = 7 + 'px';
clf.style.width = 100 + 'px';
clf.style.fontFamily = "‘Lucida Console’, Monaco, monospace";
changer.appendChild(clf);
var evf = document.createElement('input');
evf.type='text';
evf.placeholder = 'Eval';
evf.style.position='absolute';
evf.style.top = 0;evf.style.left = clf.offsetLeft + clf.offsetWidth + 5 + 'px';
evf.style.fontSize = '60%';
evf.style.height = 7 + 'px';
evf.style.width = 100 + 'px';
clf.style.fontFamily = "‘Lucida Console’, Monaco, monospace";
changer.appendChild(evf);
idf.onkeyup = function(e)
{
active_x.id = idf.value;
hd.innerHTML = "ID='"+active_x.id+"'"+spacer+"Class='"+active_x.className+"'"+spacer+'Children='+active_x.children.length+spacer+"Parent Node='"+active_x.parentNode.tagName+"'"+spacer;
}
clf.onkeyup = function(e)
{
active_x.className = clf.value;
hd.innerHTML = "ID='"+active_x.id+"'"+spacer+"Class='"+active_x.className+"'"+spacer+'Children='+active_x.children.length+spacer+"Parent Node='"+active_x.parentNode.tagName+"'"+spacer;
}
evf.onkeypress = function(e)
{
if(e.keyCode == 13)
{
var query = evf.value;
eval("active_x"+query);
hd.innerHTML = "ID='"+active_x.id+"'"+spacer+"Class='"+active_x.className+"'"+spacer+'Children='+active_x.children.length+spacer+"Parent Node='"+active_x.parentNode.tagName+"'"+spacer; ;
}
}
window.onresize = function(e)
{
container.style.top = 20 + 'px';
container.style.left = 20 + 'px';
container.style.width = window.innerWidth /2 + 'px';
container.style.height = window.innerHeight /3 + 'px';
itemstore.style.width = container.offsetWidth -25 + 'px';
itemstore.style.height = container.offsetHeight - 10 - 21*2 + 'px';
changer.style.width = container.offsetWidth-25 + 'px';
for(var i=0;i<=k-1;i++){el[i].style.width = itemstore.offsetWidth-20-10 + 'px';}
};
for(var i=0;i<=k-1;i++)
{
el[i] = document.createElement('div');
el[i].style.position = 'absolute';
el[i].style.top = 10+ i*17 + 'px';
el[i].style.height = 15 + 'px';
el[i].style.width = itemstore.offsetWidth-20-10 + 'px';
el[i].style.cursor = 'pointer';
el[i].style.textAlign = 'center';
el[i].style.fontFamily = "‘Lucida Console’, Monaco, monospace";
el[i].style.fontSize = '60%';
el[i].innerHTML = '< ' +q[i].tagName.toLowerCase() + '>';
el[i].onmouseover = function(e){e.target.style.backgroundColor='rgba(128,128,128,0.5)';e.target.style.color='white';q[parseInt(e.target.id)].style.border = '1px solid black';}
el[i].onmouseout = function(e){e.target.style.backgroundColor='inherit';e.target.style.color='black';q[parseInt(e.target.id)].style.border = 'inherit';}
el[i].onclick = function(e){
active_x=q[parseInt(e.target.id)];
idf.value=q[parseInt(e.target.id)].id;
clf.value=q[parseInt(e.target.id)].className;1
e.target.innerHTML = '* '+'< ' +q[parseInt(e.target.id)].tagName.toLowerCase() + '>'+' *';
for(var d=0;d<=k-1;d++){if(d!=parseInt(e.target.id))el[d].innerHTML='< ' +q[d].tagName.toLowerCase() + '>';}
var ctx = cnv.getContext('2d');
var child = e.target.offsetTop-3;
var passtru = false;
for(var i=0;i<=el.length-1;i++){if(q[i] == q[e.target.id].parentNode){parent=el[i].offsetTop-3;passtru=true;break;}}
cnv.width = cnv.width;
if(passtru)
{
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.moveTo(10,child);
ctx.lineTo(1,child);
ctx.moveTo(10,parent);
ctx.lineTo(1,parent);
ctx.moveTo(1,parent);
ctx.lineTo(1,child);
ctx.stroke();
ctx.closePath();
}
var kids = [];
for(var b=0;b<=q[parseInt(e.target.id)].children.length-1;b++)
{
for(var m=0;m<=k-1;m++)
{
if(q[m] == q[parseInt(e.target.id)].children[b]){kids.push(el[m].offsetTop-3);}
}
}
var ctx = cnv.getContext('2d');
ctx.beginPath();
for(var i=0;i<=kids.length-1;i++)
{
ctx.strokeStyle='red';
ctx.moveTo(30,kids[i]);
ctx.lineTo(20,kids[i]);
ctx.moveTo(20,kids[i]);
ctx.lineTo(20,kids[i+1]);
ctx.moveTo(20,kids[i+1]);
}
ctx.stroke();
ctx.closePath();
hd.innerHTML = "ID='"+q[parseInt(e.target.id)].id+"'"+spacer+"Class='"+q[parseInt(e.target.id)].className+"'"+spacer+'Children='+q[parseInt(e.target.id)].children.length+spacer+"Parent Node='"+q[parseInt(e.target.id)].parentNode.tagName+"'"+spacer;}
el[i].id = i.toString();
}
for(var c=0;c<=el.length-1;c++){itemstore.appendChild(el[c]);}
},
kill : function(){document.body.removeChild(container);},
count : document.getElementsByTagName('*').length
}
Comments