From 551a10bbf510e5b18490df92d06043cdf9f4bea9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ond=C5=99ej=20Hru=C5=A1ka?= <ondra@ondrovo.com>
Date: Sun, 20 Sep 2015 19:48:36 +0200
Subject: [PATCH] now shows fatal error message (if possible)

---
 index.php      |  14 ++-
 php-console.js | 260 ++++++++++++++++++++++++-------------------------
 styles.css     | 184 +++++++++++++++++-----------------
 3 files changed, 239 insertions(+), 219 deletions(-)

diff --git a/index.php b/index.php
index 72f4119..360e67d 100644
--- a/index.php
+++ b/index.php
@@ -1,6 +1,16 @@
 <?php
-ini_set('log_errors', 0);
-ini_set('display_errors', 1);
+
+/**
+ * PHP Sandbox: https://github.com/MightyPork/php-sandbox
+ */
+ 
+ini_set('log_errors', false);
+ini_set('display_errors', true);
+ini_set('display_startup_errors', true);
+ini_set('display_not_found_reason', true);
+ini_set('display_exceptions', true);
+ini_set('html_errors', false);
+
 error_reporting(E_ALL | E_STRICT);
 
 // --- Handle config ---
diff --git a/php-console.js b/php-console.js
index 9bf2fa4..b579d9e 100644
--- a/php-console.js
+++ b/php-console.js
@@ -15,134 +15,134 @@
  * Source on Github http://github.com/MightyPork/php-sandbox
  */
 (function (require, $, ace) {
-    "use strict";
-
-    var updateStatusBar, handleSubmit, initializeAce, handleAjaxError, options, editor;
-
-    options = {
-        tabsize: 4,
-        editor: 'editor'
-    };
-
-    /**
-     * updates the text of the status bar
-     */
-    updateStatusBar = function (e) {
-        var cursor_position = editor.getCursorPosition();
-        $('.statusbar .position').text('Line: ' + (1 + cursor_position.row) + ', Column: ' + cursor_position.column);
-    };
-
-    /**
-     * does an async request to eval the php code and displays the result
-     */
-    handleSubmit = function (e) {
-        e.preventDefault();
-        //$('div.output').html('<img src="loader.gif" class="loader" alt="" /> Loading ...'); /* loader sucks */
-
-        // store session
-        if (window.localStorage) {
-            localStorage.setItem('phpCode', editor.getSession().getValue());
-        }
-
-        // eval server-side
-        $.post('?js=1', { code: editor.getSession().getValue() }, function (res, status, jqXHR) {
-            var mem = jqXHR.getResponseHeader("X-Memory-Usage") || "",
-                rendertime = jqXHR.getResponseHeader("X-Rendertime") || "";
-
-            if (mem || rendertime) {
-                $('.statusbar .runtime-info').text('Memory usage: '+ mem + ' MB, Rendertime: ' + rendertime + 'ms');
-            } else {
-                $('.statusbar .runtime-info').text('');
-            }
-
-            if (res.match(/#end-php-console-output#$/)) {
-                var result = res.substring(0, res.length - 24);
-                $('div.output').text(result); // or html?
-            } else {
-                $('div.output').text(res + "\n\n*** Script ended unexpectedly. ***");
-            }
-        });
-    };
-
-    handleAjaxError = function (event, jqxhr, settings, exception) {
-        $('div.output').html("<em>Error occured while posting your code.</em>");
-    };
-
-    initializeAce = function () {
-        var PhpMode, code, storedCode;
-
-        code = $('#' + options.editor).text();
-
-        // reload last session
-        if (window.localStorage && code.match(/(<\?php)?\s*/)) {
-            storedCode = localStorage.getItem('phpCode');
-            if (storedCode) {
-                code = storedCode;
-            }
-        }
-
-        $('#' + options.editor).replaceWith('<div id="' + options.editor + '" class="' + options.editor + '"></div>');
-        $('#' + options.editor).text(code);
-
-        editor = ace.edit(options.editor);
-
-        editor.focus();
-        editor.gotoLine(3, 0);
-        editor.setTheme("ace/theme/monokai");
-        editor.setOptions({
-            showPrintMargin: false,
-            fontSize: '18px',
-            enableBasicAutocompletion: true,
-            fontFamily: 'Source Code Pro'
-        });
-
-        // set mode
-        PhpMode = require("ace/mode/php").Mode;
-        editor.getSession().setMode(new PhpMode());
-
-        // tab size
-        if (options.tabsize) {
-            editor.getSession().setTabSize(options.tabsize);
-            editor.getSession().setUseSoftTabs(true);
-        } else {
-            editor.getSession().setUseSoftTabs(false);
-        }
-
-        // events
-        editor.getSession().selection.on('changeCursor', updateStatusBar);
-
-        // reset button
-        if (window.localStorage) {
-            $('.statusbar .reset').on('click', function (e) {
-                editor.getSession().setValue('<?php\n\n');
-                editor.focus();
-                editor.gotoLine(3, 0);
-                window.localStorage.setItem('phpCode', '');
-                e.preventDefault();
-            });
-        }
-
-        // commands
-        editor.commands.addCommand({
-            name: 'submitForm',
-            bindKey: {
-                win: 'Ctrl-Return|Alt-Return',
-                mac: 'Command-Return|Alt-Return'
-            },
-            exec: function (editor) {
-                $('form').submit();
-            }
-        });
-    };
-
-    $.console = function (settings) {
-        $.extend(options, settings);
-
-        $(function () {
-            $(document).ready(initializeAce);
-            $(document).ajaxError(handleAjaxError);
-
-            $('form').submit(handleSubmit);
-        });
-    };
+	"use strict";
+
+	var updateStatusBar, handleSubmit, initializeAce, handleAjaxError, options, editor;
+
+	options = {
+		tabsize: 4,
+		editor: 'editor'
+	};
+
+	/**
+	 * updates the text of the status bar
+	 */
+	updateStatusBar = function (e) {
+		var cursor_position = editor.getCursorPosition();
+		$('.statusbar .position').text('Line: ' + (1 + cursor_position.row) + ', Column: ' + cursor_position.column);
+	};
+
+	/**
+	 * does an async request to eval the php code and displays the result
+	 */
+	handleSubmit = function (e) {
+		e.preventDefault();
+		//$('div.output').html('<img src="loader.gif" class="loader" alt="" /> Loading ...'); /* loader sucks */
+
+		// store session
+		if (window.localStorage) {
+			localStorage.setItem('phpCode', editor.getSession().getValue());
+		}
+
+		// eval server-side
+		$.post('?js=1', {code: editor.getSession().getValue()}, function (res, status, jqXHR) {
+			var mem = jqXHR.getResponseHeader("X-Memory-Usage") || "",
+				rendertime = jqXHR.getResponseHeader("X-Rendertime") || "";
+
+			if (mem || rendertime) {
+				$('.statusbar .runtime-info').text('Memory usage: ' + mem + ' MB, Rendertime: ' + rendertime + 'ms');
+			} else {
+				$('.statusbar .runtime-info').text('');
+			}
+
+			if (res.match(/#end-php-console-output#$/)) {
+				var result = res.substring(0, res.length - 24);
+				$('div.output').text(result); // or html?
+			} else {
+				$('div.output').text(res + "\n\n*** Script ended unexpectedly. ***");
+			}
+		});
+	};
+
+	handleAjaxError = function (event, jqxhr, settings, exception) {
+		$('div.output').html("<em>Error occured while posting your code.</em>" + jqxhr.responseText);
+	};
+
+	initializeAce = function () {
+		var PhpMode, code, storedCode;
+
+		code = $('#' + options.editor).text();
+
+		// reload last session
+		if (window.localStorage && code.match(/(<\?php)?\s*/)) {
+			storedCode = localStorage.getItem('phpCode');
+			if (storedCode) {
+				code = storedCode;
+			}
+		}
+
+		$('#' + options.editor).replaceWith('<div id="' + options.editor + '" class="' + options.editor + '"></div>');
+		$('#' + options.editor).text(code);
+
+		editor = ace.edit(options.editor);
+
+		editor.focus();
+		editor.gotoLine(3, 0);
+		editor.setTheme("ace/theme/monokai");
+		editor.setOptions({
+			showPrintMargin: false,
+			fontSize: '18px',
+			enableBasicAutocompletion: true,
+			fontFamily: 'Source Code Pro'
+		});
+
+		// set mode
+		PhpMode = require("ace/mode/php").Mode;
+		editor.getSession().setMode(new PhpMode());
+
+		// tab size
+		if (options.tabsize) {
+			editor.getSession().setTabSize(options.tabsize);
+			editor.getSession().setUseSoftTabs(true);
+		} else {
+			editor.getSession().setUseSoftTabs(false);
+		}
+
+		// events
+		editor.getSession().selection.on('changeCursor', updateStatusBar);
+
+		// reset button
+		if (window.localStorage) {
+			$('.statusbar .reset').on('click', function (e) {
+				editor.getSession().setValue('<?php\n\n');
+				editor.focus();
+				editor.gotoLine(3, 0);
+				window.localStorage.setItem('phpCode', '');
+				e.preventDefault();
+			});
+		}
+
+		// commands
+		editor.commands.addCommand({
+			name: 'submitForm',
+			bindKey: {
+				win: 'Ctrl-Return|Alt-Return',
+				mac: 'Command-Return|Alt-Return'
+			},
+			exec: function (editor) {
+				$('form').submit();
+			}
+		});
+	};
+
+	$.console = function (settings) {
+		$.extend(options, settings);
+
+		$(function () {
+			$(document).ready(initializeAce);
+			$(document).ajaxError(handleAjaxError);
+
+			$('form').submit(handleSubmit);
+		});
+	};
 }(ace.require, jQuery, ace));
diff --git a/styles.css b/styles.css
index 6350f1f..4f23f45 100644
--- a/styles.css
+++ b/styles.css
@@ -1,155 +1,165 @@
 body, textarea, input {
-    font-size: 12px;
-    font-family: monospace "Source Code Pro";
+	font-size: 12px;
+	font-family: "Source Code Pro", monospace;
 }
 
 body {
-    background: #191A16;
-    color: #F0F0F0;
+	background: #191A16;
+	color: #F0F0F0;
 
-    margin: 0;
-    padding: 0;
-    width: 100%;
-    height:100%;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    display: flex;
-    flex-direction: column;
+	margin: 0;
+	padding: 0;
+	width: 100%;
+	height:100%;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	display: flex;
+	flex-direction: column;
 
-    overflow:hidden;
+	overflow:hidden;
 }
 
 /* ace-editor requires to define styles by id (specificity) */
 .editor#editor {
-    /** /
-    width: 80%;
-    left: 20%;
-    /**/
-    width: 100%;
-    /**/
+	/** /
+	width: 80%;
+	left: 20%;
+	/**/
+	width: 100%;
+	/**/
 
-    position: relative;
-    flex: 1 1 auto;
+	position: relative;
+	flex: 1 1 auto;
 }
 
 .console-wrapper {
-    flex: 1 1 auto;
-    display: flex;
+	flex: 1 1 auto;
+	display: flex;
 }
 
 .footer-wrapper {
-    flex: 0 1 auto;
+	flex: 0 1 auto;
 }
 
 a {
-    color: #88f;
+	color: #88f;
 }
 
 .expand {
-    display: block;
-    margin-bottom: 5px;
+	display: block;
+	margin-bottom: 5px;
 }
 
 .output, .input {
 }
 
 .output-wrapper, .input-wrapper {
-    flex: 1 1 50%;
-    position: relative;
+	flex: 1 1 50%;
+	position: relative;
 }
 
 .output {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    overflow: auto;
-    padding: 0 5px;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	overflow: auto;
+	padding: 0 5px;
 
-    font-size: 18px;
+	font-size: 18px;
 
-    white-space: pre-wrap;       /* CSS 3 */
-    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
-    white-space: -pre-wrap;      /* Opera 4-6 */
-    white-space: -o-pre-wrap;    /* Opera 7 */
-    word-wrap: break-word;       /* Internet Explorer 5.5+ */
+	white-space: pre-wrap;	   /* CSS 3 */
+	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+	white-space: -pre-wrap;	  /* Opera 4-6 */
+	white-space: -o-pre-wrap;	/* Opera 7 */
+	word-wrap: break-word;	   /* Internet Explorer 5.5+ */
+}
+
+.output h1 {
+	margin: .5em 0 0 0;
+}
+
+.output p, .output pre {
+	margin: .5em 0;
+	-webkit-margin-before: 0;
+	-webkit-margin-after: 0;
 }
 
 .input-wrapper {
-    border-right: 4px solid #686860;
+	border-right: 4px solid #686860;
 }
 
 .input-wrapper form {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    display: flex;
-    flex-direction: column;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	display: flex;
+	flex-direction: column;
 }
 
 .input {
-    flex: 1 1 auto;
-    display: flex;
+	flex: 1 1 auto;
+	display: flex;
 }
 
 .statusbar {
-    padding: 3px 5px;
-    background: #686860;
-    text-shadow: 0 -1px 1px black;
-    height: 20px;
-    line-height: 20px;
-    position:relative;
-    color:white;
+	padding: 3px 5px;
+	background: #686860;
+	text-shadow: 0 -1px 1px black;
+	height: 20px;
+	line-height: 20px;
+	position:relative;
+	color:white;
 }
 
 .statusbar .runtime-info {
-    text-align: right;
-    float: right;
-    clear: right;
-    /*width: 350px;*/
-    padding-right: 90px;
+	text-align: right;
+	float: right;
+	clear: right;
+	/*width: 350px;*/
+	padding-right: 90px;
 }
 
 input[type=submit] {
-    position: absolute;
-    right: 0;
-    height: 26px;
-    margin: 0;
-    top:0;
-    width: 80px;
+	position: absolute;
+	right: 0;
+	height: 26px;
+	margin: 0;
+	top:0;
+	width: 80px;
 }
 
 
 .output img.loader {
-    display:none;/*it's ugly*/
+	display:none;/*it's ugly*/
 }
 
 .help {
-    width: 33%;
-    float: left;
-    white-space: pre;
+	width: 33%;
+	float: left;
+	white-space: pre;
 }
 
 .footer {
-    width: 100%;
-    clear: left;
-    text-align: center;
-    color: #aaa;
+	width: 100%;
+	clear: left;
+	text-align: center;
+	color: #aaa;
 }
 .footer a {
-    color: #aaa;
+	color: #aaa;
 }
 
 .control-char {
-    background: #000;
-    color: #fff;
-    margin-left: 2px;
-    margin-right: 2px;
-    -webkit-border-radius: 3px;
-    border-radius: 3px;
-    padding: 1px 2px;
+	background: #000;
+	color: #fff;
+	margin-left: 2px;
+	margin-right: 2px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+	padding: 1px 2px;
 }