Extension point for capturing metrics

[jakejscott]

Something like this:

<script type="text/javascript">

    $(document).on("justice:metrics", function (event, metrics) {
        console.log(metrics);
        $.ajax({
            type: "POST",
            url: "/api/metrics",
            data: JSON.stringify(metrics),
            dataType: "application/json",
            success: function (result) {
                console.log(result);
            }
        });
    });

    Justice.init({
        metrics: {
            TTFB: { budget: 200 },
            domInteractive: { budget: 250 },
            domComplete: { budget: 800 },
            firstPaint: { budget: 1000 },
            pageLoad: { budget: 2000 },
            requests: { budget: 6 },
        },
        warnThreshold: 0.8,
        showFPS: true,
        chartType: 'spline'
    });

</script>

And in seriouslyInit publish metrics:

function seriouslyInit(opts) {
        timing = window.performance.timing;
        options = mergeOptions(opts);
        setActiveMetrics(options, activeMetrics, availableMetrics);
        renderUI();
        fpsRenderer = getFpsRenderer(options.chartType);
        window.requestAnimationFrame(tick);

        var metrics = [];
        for (var k in activeMetrics) {
            var metric = activeMetrics[k];
            metrics.push({
                id: metric.id,
                label: metric.label,
                unitLabel: metric.unitLabel,
                value: metric.collector()
            });
        }

        $(document).trigger("justice:metrics", [metrics]);
    }