Greasemonkey Firefox Script + Colorizes the logs + Displays screenshots inline

Mozilla Try Log Enhancer

// ==UserScript==
// @name        Mozilla Try Log Enhancer
// @namespace   http://code4fun.de
// @include     https://tbpl.mozilla.org/php/getParsedLog.php*
// @version     1
// ==/UserScript==

window.addEventListener ("load", init, false);

let match_screenshot = 'SCREENSHOT: ';
let classes = {
    'WARNING': 'warning',
    'TEST-UNEXPECTED-FAIL': 'fail',
    'TEST-PASS': 'pass',
    'TEST-INFO': 'info',
    'TEST-START': [/(.*)(TEST-START)(.*)\n/g, '<span class="line-start">$1<span class="tag start">$2</span>$3</span>'],
    'SCREENSHOT:': 'screenshot-tag' 
}

function init () {
    add_style();
    let pres = document.querySelectorAll('body > pre');
    let images = []
    for (let pre of pres) {
        let html = pre.innerHTML;
        let pos = 0;
        while ((pos = html.indexOf(match_screenshot, pos)) > -1) {
            let id = screenshot_id(images.length);
            let line_start = html.lastIndexOf("\n", pos) + 1;
            let line_end = html.indexOf("\n", pos);
            let img_src = html.slice(pos + match_screenshot.length, line_end);
            let link = '<a href="#'+id+'">'+img_src.slice(0, 32)+'...</a>';
            let line = html.slice(line_start, pos + match_screenshot.length) + link;
            line = '<span class="screenshot">' + line + '</span>';
            html = html.slice(0, line_start) + line + html.slice(line_end);
            pos = line_start + line.length;
            images.push('<div><img src="'+img_src+'" id="'+id+'" alt="ID: '+id+'" /></div>');
        }
        for (let str in classes) {
            let reg, replace;
            if (Array.isArray(classes[str])) {
                [reg, replace] = classes[str];
            } else {
                reg = new RegExp(str, 'g');
                replace = '<span class="tag '+classes[str]+'">'+str+'</span>';
            }
            html = html.replace(reg, replace);
        }
        pre.innerHTML = html;

    }
    document.body.innerHTML = document.body.innerHTML + images.join("\n");
}

function screenshot_id (number) {
    return 'screenshot-' + number;
}

function add_style () {
    GM_addStyle(
//        'pre [id^="error"] { background:lightpink; }' +
//        '.screenshot { background:lightblue; }' +
        'a { color:#0044cc; }' +
        'a:hover {text-decoration: none;}' +
        '.tag { font-weight:bold; }' +
        '.screenshot-tag { color:blue; }' +
        '.fail { color:red; }' +
        '.warning { color:orange; }' +
        '.pass { color:green; }' +
        '.info {}' +
        '.line-start { display:block; background:yellow; }' +
        '.start { color:purple; }'
    );
}