/*
* @title inspect
* @description クリックした要素を始点にツリーを作る（CSS セレクタ風）
* @include http://*
* @license MIT License
* @require
*/
javascript:({
isChrome: !!window.chrome,
handleEvent: function(event) {
switch (event.type) {
case 'mouseover':
this.target = event.target;
this.highlight();
this.relatedTarget = this.target;
break;
case 'click':
if (event.button != 0)
return;
event.preventDefault();
event.stopPropagation();
var self = this;
setTimeout(function(){
document.removeEventListener('click', self, true);
}, 10);
document.removeEventListener('mouseover', self, false);
self.relatedTarget = self.target;
self.lowlight();
self.tree();
break;
}
},
highlight: function() {
if (this.relatedTarget)
this.lowlight();
this.targetStyle = this.target.getAttribute('style');
this.target.style.outline = 'red 2px solid';
this.target.style.outlineOffset = '2px';
this.target.style.MozOutlineRadius = '6px';
},
lowlight: function() {
if (!this.relatedTarget)
return;
if (this.targetStyle == null && !this.isChrome)
this.relatedTarget.removeAttribute('style');
else
this.relatedTarget.setAttribute('style', this.targetStyle || '');
},
tree: function() {
var tw = document.createTreeWalker(
this.target,
NodeFilter.SHOW_ELEMENT,
null,
false);
var spc = ' ';
var indent = 0;
var resArray = [];
var node = tw.root;
while (node) {
resArray.push(Array(indent+1).join(spc) + getAttr(node));
if (!node.nextElementSibling && !node.firstElementChild)
indent--;
while (node = tw.firstChild()) {
indent++;
resArray.push(Array(indent+1).join(spc) + getAttr(node));
}
node = tw.nextNode();
}
var res = resArray.join('\n');
if (this.isChrome)
res = res.replace(/\[style=\"\"\]/g, '');
alert(res);
function getAttr(elem) {
var attrs = elem.attributes;
var res = elem.localName;
if (elem.hasAttribute('id'))
res += '#' + elem.id;
if (elem.hasAttribute('class'))
res += '.' + elem.className.replace(/^\s+|\s+$/g, '').replace(/\s+/g, '.');
for (var i = 0, a; a = attrs[i]; i++) {
if (a.nodeName === 'id' || a.nodeName === 'class')
continue;
res += '[' + a.nodeName + '="' + a.nodeValue + '"]'
}
return res;
}
},
init: function() {
document.addEventListener('click', this, true);
document.addEventListener('mouseover', this, false);
},
}).init();
