Modify UI of Log4Javascript

Question

I have log4javascript setup so that it displays a log as follows:

However, I would like to get rid off some stuff, and instead would like the UI to be as below:

How can this be done? I am using the InPageAppender

Answer 1

Not easily, I'm afraid. log4javascript doesn't provide any options to do this and the log4javascript console is embedded in an iframe making customization of the CSS difficult. I'll add a configuration option for this in log4javascript 2.0.

You could create your own simplified appender but that would require a little work. A simpler alternative is to remove the UI you don't want using the appender's load event:

var appender = new log4javascript.InPageAppender();
appender.addEventListener("load", function() {
    // Find appender's iframe element
    var iframes = document.getElementsByTagName("iframe");
    for (var i = 0, len = iframes.length; i < len; ++i) {
        if (iframes[i].id.indexOf("_InPageAppender_") > -1) {
            var iframeDoc = iframes[i].contentDocument || iframes[i].contentWindow.document;
            iframeDoc.getElementById("switchesContainer").style.display = "none";
            iframeDoc.getElementById("commandLine").style.display = "none";
        }
    }
});

Answer 2

I'm not sure if there's a config option, but this jsfiddle might get you started:

HTML

There's a delayed log.debug here to check that hiding of the toolbars doesn't break the logging.

<script src="http://log4javascript.org/js/log4javascript.js"></script>
<script type="text/javascript">
    var log = log4javascript.getLogger("main");
    var appender = new log4javascript.InPageAppender();
    log.addAppender(appender);
    log.debug("This is a debugging message from the log4javascript in-page page");
    setTimeout(function() {
        log.debug("This is a debugging message from the log4javascript in-page page");
    }, 2000);
</script>

JS

This code waits until the log4javascript load event has fired, and then hides the toolbars.

function removeSwitchesContainers() {
    var iframes = document.querySelectorAll("iframe");
    iframes = Array.prototype.slice.call(iframes);
    iframes.filter(function (iframe) {
        return iframe.id && iframe.id.match(/log4javascript_\d+_\d+_InPageAppender_\d+/);
    });
    if (iframes.length < 1) {
        return;
    }
    var iframe = iframes[0];
    var sc = iframe.contentWindow.document.querySelectorAll("#switchesContainer");
    sc = Array.prototype.slice.call(sc);
    sc.forEach(function (switchesContainer) {
        switchesContainer.style.display = "none";
    });
}

log4javascript.addEventListener("load", removeSwitchesContainers);