i_love_element

マウスを使うのは邪道と知りつつも firebug の inspect ぽいことができないかとおもってやってみた。結論はできたんだけど視覚的にここを指してますよってうまく出せないので保留。 highlight をうまく消せない。てか css の操作は難があるぽいので他の方法見つけないといけないんだけど firebug のソース ( http://fbug.googlecode.com/svn/trunk/content/firebug/inspector.js ) 見てみたら div で edge 作って append してるぽいんだよね。位置は position: absolute; で指定してんのかな ? そのうちパクろう。今はなみずの量に反比例して思考能力がない。

( function () {

function highlight(element) {
    let originalColor = element.style.borderColor || '';
    let originalStyle = element.style.borderStyle || '';
    let originalWidth = element.style.borderWidth || '';
    element.style.borderColor = '#0080ff';
    element.style.borderStyle = 'solid';
    element.style.borderWidth = '3px';
    element.addEventListener(
        'mouseout',
        function () {
            element.style.borderColor = originalColor;
            element.style.borderStyle = originalStyle;
            element.style.borderWidth = originalWidth;
            element.removeEventListener('mouseout', arguments.callee, false);
        },
        false
    );
}

function elementInfo(event) {
    let element = event.target;
    let attributes = [a.name + '="' + a.value + '"' for (a in util.Array.iterator(element.attributes))].join(' ');
    let str = '<' + element.localName.toLowerCase() + (attributes ? ' ' + attributes : '') + '>';
    highlight(element);
    liberator.echo(str, commandline.FORCE_SINGLELINE);
}

commands.addUserCommand(
    ['mouse'],
    'mouse',
    function () { window.addEventListener('mousemove', elementInfo, false); },
    {}
);
commands.addUserCommand(
    ['nomouse'],
    'mouse',
    function () { window.removeEventListener('mousemove', elementInfo, false); },
    {}
);
} )()