| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> | |
| <head> | |
| <title>log4javascript</title> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <!-- Make IE8 behave like IE7, having gone to all the trouble of making IE work --> | |
| <meta http-equiv="X-UA-Compatible" content="IE=7" /> | |
| <script type="text/javascript"> | |
| //<![CDATA[ | |
| var loggingEnabled = true; | |
| var messagesBeforeDocLoaded = []; | |
| function toggleLoggingEnabled() { | |
| setLoggingEnabled($("enableLogging").checked); | |
| } | |
| function setLoggingEnabled(enable) { | |
| loggingEnabled = enable; | |
| } | |
| function scrollToLatestEntry() { | |
| var l = getLogContainer(); | |
| if (typeof l.scrollTop != "undefined") { | |
| var latestLogEntry = l.lastChild; | |
| if (latestLogEntry) { | |
| l.scrollTop = l.scrollHeight; | |
| } | |
| } | |
| } | |
| function log(logLevel, formattedMessage) { | |
| if (loggingEnabled) { | |
| if (loaded) { | |
| doLog(logLevel, formattedMessage); | |
| } else { | |
| messagesBeforeDocLoaded.push([logLevel, formattedMessage]); | |
| } | |
| } | |
| } | |
| function doLog(logLevel, formattedMessage) { | |
| var logEntry = document.createElement("div"); | |
| logEntry.appendChild(document.createTextNode(formattedMessage)); | |
| logEntry.className = "logentry " + logLevel.name; | |
| getLogContainer().appendChild(logEntry); | |
| scrollToLatestEntry(); | |
| } | |
| function mainPageReloaded() { | |
| var separator = document.createElement("div"); | |
| separator.className = "separator"; | |
| separator.innerHTML = " "; | |
| getLogContainer().appendChild(separator); | |
| } | |
| var loaded = false; | |
| var logLevels = ["DEBUG", "INFO", "WARN", "ERROR", "FATAL"]; | |
| window.onload = function() { | |
| setLogContainerHeight(); | |
| toggleLoggingEnabled(); | |
| for (var i = 0; i < messagesBeforeDocLoaded.length; i++) { | |
| doLog(messagesBeforeDocLoaded[i][0], messagesBeforeDocLoaded[i][1]); | |
| } | |
| messagesBeforeDocLoaded = []; | |
| loaded = true; | |
| // Workaround to make sure log div starts at the correct size | |
| setTimeout(setLogContainerHeight, 20); | |
| }; | |
| function getLogContainer() { | |
| return $("log"); | |
| } | |
| function clearLog() { | |
| getLogContainer().innerHTML = ""; | |
| } | |
| /* ------------------------------------------------------------------------- */ | |
| // Other utility functions | |
| // Syntax borrowed from Prototype library | |
| function $(id) { | |
| return document.getElementById(id); | |
| } | |
| function getWindowHeight() { | |
| if (window.innerHeight) { | |
| return window.innerHeight; | |
| } else if (document.documentElement && document.documentElement.clientHeight) { | |
| return document.documentElement.clientHeight; | |
| } else if (document.body) { | |
| return document.body.clientHeight; | |
| } | |
| return 0; | |
| } | |
| function getChromeHeight() { | |
| return $("toolbar").offsetHeight; | |
| } | |
| function setLogContainerHeight() { | |
| var windowHeight = getWindowHeight(); | |
| $("body").style.height = getWindowHeight() + "px"; | |
| getLogContainer().style.height = "" + | |
| Math.max(0, windowHeight - getChromeHeight()) + "px"; | |
| } | |
| window.onresize = function() { | |
| setLogContainerHeight(); | |
| }; | |
| //]]> | |
| </script> | |
| <style type="text/css"> | |
| body { | |
| background-color: white; | |
| color: black; | |
| padding: 0; | |
| margin: 0; | |
| font-family: tahoma, verdana, arial, helvetica, sans-serif; | |
| overflow: hidden; | |
| } | |
| div#toolbar { | |
| border-top: solid #ffffff 1px; | |
| border-bottom: solid #aca899 1px; | |
| background-color: #f1efe7; | |
| padding: 3px 5px; | |
| font-size: 68.75%; | |
| } | |
| div#toolbar input.button { | |
| padding: 0 5px; | |
| font-size: 100%; | |
| } | |
| div#log { | |
| font-family: Courier New, Courier; | |
| font-size: 75%; | |
| width: 100%; | |
| overflow: auto; | |
| clear: both; | |
| } | |
| *.logentry { | |
| overflow: visible; | |
| white-space: pre; | |
| } | |
| *.TRACE { | |
| color: #666666; | |
| } | |
| *.DEBUG { | |
| color: green; | |
| } | |
| *.INFO { | |
| color: #000099; | |
| } | |
| *.WARN { | |
| color: #999900; | |
| } | |
| *.ERROR { | |
| color: red; | |
| } | |
| *.FATAL { | |
| color: #660066; | |
| } | |
| div#log div.separator { | |
| background-color: #cccccc; | |
| margin: 5px 0; | |
| line-height: 1px; | |
| } | |
| </style> | |
| </head> | |
| <body id="body"> | |
| <div id="toolbar"> | |
| Options: | |
| <input type="checkbox" id="enableLogging" onclick="toggleLoggingEnabled()" class="stateful" checked="checked" title="Enable/disable logging" /><label for="enableLogging" id="enableLoggingLabel">Enable logging</label> | |
| <input type="button" id="clearButton" value="Clear" onclick="clearLog()" class="stateful button" title="Clear all log messages" /> | |
| <input type="button" id="closeButton" value="Close" onclick="window.close()" class="stateful button" title="Close the window" /> | |
| </div> | |
| <div id="log" class="TRACE DEBUG INFO WARN ERROR FATAL"></div> | |
| </body> | |
| </html> |