DOM X-ray

(function (doc) {
    var parent = doc.documentElement,
        rect = parent.getBoundingClientRect(),
        canvas = doc.createElement("canvas"),
        context = canvas.getContext("2d"),
        max = 0, rects = [];

    canvas.width = rect.width;
    canvas.height = rect.height;

    context.fillStyle = "#000";
    context.fillRect(0, 0, rect.width, rect.height);

    getRects(parent, max);

    function getRects (element, level) {
        if (element.nodeType != 1) return;

        if (level > max) {
            max = level;
        }
        rect = element.getBoundingClientRect();
        if (!rects[level]) {
            rects[level] = [];
        }
        rects[level].push(rect);

        var l = element.childNodes.length;
        for (var i = 0; i < l; i++) {
            getRects(element.childNodes[i], level + 1);
        }
    }

    var l = rects.length, rect_level;

    for (var i = 0; i < l; i++) {
        rect_level = rects[i];
        var length = rect_level.length;
        var shade = Math.round((1/max)*i*255);
        context.fillStyle = "rgb(" + shade + ", " + shade + ", " + shade + ")";
        for (var j = 0; j < length; j++) {
            context.fillRect(rect_level[j].left, rect_level[j].top, rect_level[j].width, rect_level[j].height);
        }
    }
  
    canvas.style.position = "absolute";
    canvas.style.top = 0;
    canvas.style.left = 0;
    canvas.style.zIndex = 1000000;
    canvas.style.opacity = 0.85;
    canvas.onclick = function () {
        parent.removeChild(canvas);
    };

    parent.appendChild(canvas);

}(document));