Command: DOM Grabber #3

bard edited this page Sep 13, 2010 · 3 revisions

Grabs a XUL element on mouse click. Element under mouse is highlighted and reported in the title bar.

Usage


    repl> var res = repl.grab();
    repl> /* click an element in the browser... */
    repl> alert(res.event.target);

Code


function grab() {
    if(this._workContext instanceof Ci.nsIDOMWindow)
        var window = this._workContext;
    else
        throw new Error('Not in a window.');

    var prevTitle = window.top.title;
    var prevEl, prevColor;
    function onOver(event) {
        var curEl = event.target;

        window.top.title =
            '<' + curEl.nodeName + '> in ' + curEl.ownerDocument.location.href;

        if(prevEl)
            prevEl.style.backgroundColor = prevColor;

        prevEl = curEl;
        prevColor = curEl.style.backgroundColor;

        curEl.style.backgroundColor = '#E6E5C8';
    };

    var repl = this;
    function onClick(event) {
        result.event = event;
        repl.highlight(event.target);
        event.stopPropagation();
        finished();
    };

    function finished() {
        window.document.removeEventListener('click', onClick, true);
        window.document.removeEventListener('mouseover', onOver, true);
        prevEl.style.backgroundColor = prevColor;
        window.top.title = prevTitle;
    }

    var result = {};
    window.document.addEventListener('click', onClick, true);
    window.document.addEventListener('mouseover', onOver, true);
    return result;
}

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.