Add more control chars and adjust styles a bit

README.mdown

@@ -33,6 +33,8 @@ Jordi Boggiano - <j.boggiano@seld.be><br />
 Changelog
 ---------
 
+- 1.4.0
+  - Added control-char escaping to make them more visible
 - 1.3.0
   - Added code persistence across sessions in localStorage + a reset button
 - 1.2.3

index.php

@@ -23,7 +23,7 @@ if (!in_array($_SERVER['REMOTE_ADDR'], array('127.0.0.1', '::1'), true)) {
     die('ERR/401 Go Away');
 }
 
-define('PHP_CONSOLE_VERSION', '1.3.0');
+define('PHP_CONSOLE_VERSION', '1.4.0');
 require 'krumo/class.krumo.php';
 
 ini_set('log_errors', 0);

php-console.js

@@ -72,27 +72,44 @@
         if (window.localStorage) {
             localStorage.setItem('phpCode', editor.getSession().getValue());
         }
-        
+
         var controlChars = {
-            'NUL' : /\x00/g,
+            'NUL' : /\x00/g, // Null char
-            'SOH' : /\x01/g,
+            'SOH' : /\x01/g, // Start of Heading
-            'STX' : /\x02/g,
+            'STX' : /\x02/g, // Start of Text
-            'ETX' : /\x03/g,
+            'ETX' : /\x03/g, // End of Text
-            'EOT' : /\x04/g,
+            'EOT' : /\x04/g, // End of Transmission
-            'ENQ' : /\x05/g,
+            'ENQ' : /\x05/g, // Enquiry
-            'ACK' : /\x06/g,
+            'ACK' : /\x06/g, // Acknowledgment
-            'BEL' : /\x07/g,
+            'BEL' : /\x07/g, // Bell
-            'BS'  : /\x08/g,
+            'BS'  : /\x08/g, // Back Space
-            'SUB' : /\x1A/g,
+            'SO'  : /\x0E/g, // Shift Out / X-On
+            'SI'  : /\x0F/g, // Shift In / X-Off
+            'DLE' : /\x10/g, // Data Line Escape
+            'DC1' : /\x11/g, // Device Control 1 (oft. XON)
+            'DC2' : /\x12/g, // Device Control 2
+            'DC3' : /\x13/g, // Device Control 3 (oft. XOFF)
+            'DC4' : /\x14/g, // Device Control 4
+            'NAK' : /\x15/g, // Negative Acknowledgement
+            'SYN' : /\x16/g, // Synchronous Idle
+            'ETB' : /\x17/g, // End of Transmit Block
+            'CAN' : /\x18/g, // Cancel
+            'EM'  : /\x19/g, // End of Medium
+            'SUB' : /\x1A/g, // Substitute
+            'ESC' : /\x1B/g, // Escape
+            'FS'  : /\x1C/g, // File Separator
+            'GS'  : /\x1D/g, // Group Separator
+            'RS'  : /\x1E/g, // Record Separator
+            'US'  : /\x1F/g  // Unit Separator
         };
 
         // eval server-side
         $.post('?js=1', { code: editor.getSession().getValue() }, function (res) {
             if (res.match(/#end-php-console-output#$/)) {
                 var result = res.substring(0, res.length - 24);
-                for (var k in controlChars) {
+                $.each(controlChars, function (identifier, regex) {
-                    result = result.replace(controlChars[k], '<span class="control-char">'+ k +'</span>');
+                    result = result.replace(regex, '<span class="control-char">' + identifier + '</span>');
-                }
+                });
                 $('div.output').html(result);
             } else {
                 $('div.output').html(res + "<br /><br /><em>Script ended unexpectedly.</em>");

styles.css

@@ -19,8 +19,8 @@ a {
 }
 
 .expand {
-	display: block;
+    display: block;
-	margin-bottom: 5px;
+    margin-bottom: 5px;
 }
 
 .output, .input {
@@ -96,11 +96,12 @@ a {
     color: #aaa;
 }
 
-.krumo-root .control-char {
+.control-char {
     background: #000;
     color: #fff;
     margin-left: 2px;
     margin-right: 2px;
-    -webkit-border-radius: 5px;
+    -webkit-border-radius: 3px;
-    border-radius: 5px;
+    border-radius: 3px;
+    padding: 1px 2px;
 }