Improved Browser Paint Events Bookmarklet

John Resig posted today about a nifty new feature available in Firefox nightlies, browser paint events. He also posted an example script and bookmarklet called TrackPaint. He goes into greater depth in his post, so I won’t bother here.

I wanted something more “real-time” and closer to the Quartz Debug utility included with the Mac OS X developer tools (which essentially provides this feature for all of OS X), so I present my modified bookmarklet and code:

// modified from John Resig’s example: http://ejohn.org/apps/paint/track.js
(function(){
    var container;
    
    window.addEventListener("MozAfterPaint", log, false);
    
    if ( document.body )
        bind();
    else
        window.addEventListener("load", bind, false);
        
    function bind()
    {
        container = document.createElement("div");
        document.body.appendChild(container);
    }

    function log(e)
    {
        window.removeEventListener("MozAfterPaint", log, false);

        var rects = e.clientRects;

        for ( var i = 0; i < rects.length; i++ ) {
            var rect = rects[i];
            var div = document.createElement("div");

            with (div.style) {
                background = "red";
                opacity = "0.1";
                position = "absolute";
                top = rect.top + "px";
                left = rect.left + "px";
                width = (rect.right – rect.left) + "px";
                height = (rect.bottom – rect.top) + "px";
            }

            container.appendChild(div);
        }
        
        window.setTimeout(function() {
            while (container.firstChild)
                container.removeChild(container.firstChild);
            
            window.setTimeout(function() {
                window.addEventListener("MozAfterPaint", log, false);
            }, 0);
        }, 100);
    }
})();

Rather than recording each event and displaying them when you click, this version immediately disables the MozAfterPaint event listener (to avoid the recursion issue), shows the translucent red divs, waits 100 ms, removes the rectangles, and re-enables the MozAfterPaint event listener.

It will miss some events during the 100 ms flash, but overall it seems to work pretty well. You could modify it to re-enable the event listener between adding and removing the divs, but I’m not sure it’s worth the effort.

YouTube Fullscreen Bookmarklet

I find it incredibly annoying when an embedded YouTube video can’t be made fullscreen, and I have to switch to YouTube.com just to watch it.

So, I wrote this simple little bookmarklet which modifies the embed code for any YouTube videos to allow fullscreen. It could also easily be made into a user script for GreaseMonkey, etc, to perform the modifications automatically.

Bookmarklet

Source:

var os = document.getElementsByTagName("object");
for (var i = 0; i < os.length; i++)
{
    var o = os[i].cloneNode(true);
    o.innerHTML = ‘<param name="allowFullScreen" value="true"></param>’ + o.innerHTML;
    for (var j = 0; j < o.childNodes.length; j++)
    {
        if (o.childNodes[j].name == "movie")
            o.childNodes[j].value += "&fs=1";
        else if (o.childNodes[j].nodeName.toUpperCase() == "EMBED") {
            o.childNodes[j].src += "&fs=1";
            o.childNodes[j].setAttribute("allowfullscreen", "true");
        }
    }
    os[i].parentNode.replaceChild(o, os[i]);
}

Try it out on this page (I’m too lazy to actually make it fullscreen).

Note that currently it doesn’t actually check to make sure it’s a YouTube video that it’s modifying, so it might stomp all over other types of embeds.