Draft: Some usability improvements, and grammar fixes.

README.markdown

@@ -67,7 +67,7 @@ By default, only requests coming from IPv4 and IPv6 localhosts are allowed.
 `config.web_console.permissions` lets you control which IP's have access to
 the console.
 
-You can allow single IP's or whole networks. Say you want to share your
+You can allow single IPs or whole networks. Say you want to share your
 console with `192.168.0.100`:
 
 ```ruby

lib/web_console/context.rb

@@ -8,7 +8,7 @@ def initialize(binding)
     end
 
     # Extracts entire objects which can be called by the current session unless
-    # the inputs is present.
+    # the input is present.
     #
     # Otherwise, it extracts methods and constants of the object specified by
     # the input.

lib/web_console/templates/_markup.html.erb

@@ -1,5 +1,7 @@
-<div id="console"
-  data-mount-point='<%= @mount_point %>'
-  data-session-id='<%= @session.id %>'
-  data-prompt-label='>> '>
-</div>
+<div id="console-container">
+  <div id="console"
+    data-mount-point='<%= @mount_point %>'
+    data-session-id='<%= @session.id %>'
+    data-prompt-label='>> '>
+  </div>
+</div>

lib/web_console/templates/console.js.erb

@@ -661,6 +661,14 @@ REPLConsole.prototype.onTabKey = function() {
   });
 };
 
+REPLConsole.prototype.moveToBeginning = function() {
+  this.setInput(this._input, 0);
+};
+
+REPLConsole.prototype.moveToEnd = function() {
+  this.setInput(this._input, this._input.length);
+};
+
 REPLConsole.prototype.onNavigateHistory = function(offset) {
   var command = this.commandStorage.navigate(offset) || "";
   this.setInput(command);
@@ -680,14 +688,25 @@ REPLConsole.prototype.onKeyDown = function(ev) {
   switch (ev.keyCode) {
     case 65: // Ctrl-A
       if (ev.ctrlKey) {
-        this.setInput(this._input, 0);
+        // this.setInput(this._input, 0);
+        this.moveToBeginning();
         ev.preventDefault();
       }
       break;
 
+    case 36: // 'Home' key
+      this.moveToBeginning();
+      ev.preventDefault();
+      break;
+
+    case 35: // 'End' key
+      this.moveToEnd();
+      ev.preventDefault();
+      break;
+
     case 69: // Ctrl-E
       if (ev.ctrlKey) {
-        this.onTabKey();
+        this.moveToEnd();
         ev.preventDefault();
       }
       break;
@@ -706,18 +725,16 @@ REPLConsole.prototype.onKeyDown = function(ev) {
       }
       break;
 
-    case 69: // Ctrl-E
-      if (ev.ctrlKey) {
-        this.onTabKey();
-        ev.preventDefault();
-      }
-      break;
 
     case 80: // Ctrl-P
       if (! ev.ctrlKey) break;
+      this.onNavigateHistory(-1);
+      break;
 
     case 78: // Ctrl-N
       if (! ev.ctrlKey) break;
+      this.onNavigateHistory(1);
+      break;
 
     case 9: // Tab
       this.onTabKey();

lib/web_console/templates/error_page.js.erb

@@ -1,8 +1,8 @@
-// Try intercept traces links in Rails 4.2.
+// Try to intercept traces links in Rails 4.2.
 var traceFrames = document.getElementsByClassName('trace-frames');
 var selectedFrame, currentSource = document.getElementById('frame-source-0');
 
-// Add click listeners for all stack frames
+// Add click listeners for all stack frames.
 for (var i = 0; i < traceFrames.length; i++) {
   traceFrames[i].addEventListener('click', function(e) {
     e.preventDefault();
@@ -17,7 +17,7 @@ for (var i = 0; i < traceFrames.length; i++) {
       return target.innerHTML;
     });
 
-    // Change the extracted source code
+    // Change the extracted source code.
     changeSourceExtract(frameId);
   });
 }
@@ -34,36 +34,4 @@ function changeSourceExtract(frameId) {
     el.className = el.className.replace(" hidden", "");
     currentSource = el;
   }
-}
-
-// Push the error page body upwards the size of the console.
-//
-// While, I wouldn't like to do that on every custom page (so I don't screw
-// user's layouts), I think a lot of developers want to see all of the content
-// on the default Rails error page.
-//
-// Since it's quite special as is now, being a bit more special in the name of
-// better user experience, won't hurt.
-document.addEventListener('DOMContentLoaded', function() {
-  var consoleElement = document.getElementById('console');
-  var resizerElement = consoleElement.getElementsByClassName('resizer')[0];
-  var containerElement = document.getElementById('container');
-
-  function setContainerElementBottomMargin(pixels) {
-    containerElement.style.marginBottom = pixels + 'px';
-  }
-
-  var currentConsoleElementHeight = consoleElement.offsetHeight;
-  setContainerElementBottomMargin(currentConsoleElementHeight);
-
-  resizerElement.addEventListener('mousedown', function(event) {
-    function recordConsoleElementHeight(event) {
-      resizerElement.removeEventListener('mouseup', recordConsoleElementHeight);
-
-      var currentConsoleElementHeight = consoleElement.offsetHeight;
-      setContainerElementBottomMargin(currentConsoleElementHeight);
-    }
-
-    resizerElement.addEventListener('mouseup', recordConsoleElementHeight);
-  });
-});
+}

lib/web_console/templates/main.js.erb

@@ -1 +1,30 @@
 REPLConsole.installInto('console');
+
+// Push the page body upwards by the size of the console
+// so it doesn't obscure any of the page content.
+//
+// An event handler is added to adjust the size of the margin
+// whenever the console is resized.
+document.addEventListener('DOMContentLoaded', function() {
+  var consoleElement = document.getElementById('console');
+  var resizerElement = consoleElement.getElementsByClassName('resizer')[0];
+  var consoleContainerElement = document.getElementById('console-container');
+
+  function setConsoleContainerMargin(pixels) {
+    consoleContainerElement.style.marginTop = pixels + 'px';
+  }
+
+  var currentConsoleElementHeight = consoleElement.offsetHeight;
+  setConsoleContainerMargin(currentConsoleElementHeight);
+
+  resizerElement.addEventListener('mousedown', function(event) {
+    function recordConsoleElementHeight(event) {
+      resizerElement.removeEventListener('mouseup', recordConsoleElementHeight);
+
+      var currentConsoleElementHeight = consoleElement.offsetHeight;
+      setConsoleContainerMargin(currentConsoleElementHeight);
+    }
+
+    resizerElement.addEventListener('mouseup', recordConsoleElementHeight);
+  });
+});

lib/web_console/templates/regular_page.js.erb

@@ -1,24 +1 @@
-// Push the error page body upwards the size of the console.
-document.addEventListener('DOMContentLoaded', function() {
-  var consoleElement = document.getElementById('console');
-  var resizerElement = consoleElement.getElementsByClassName('resizer')[0];
-  var bodyElement = document.body;
-
-  function setBodyElementBottomMargin(pixels) {
-    bodyElement.style.marginBottom = pixels + 'px';
-  }
-
-  var currentConsoleElementHeight = consoleElement.offsetHeight;
-  setBodyElementBottomMargin(currentConsoleElementHeight);
-
-  resizerElement.addEventListener('mousedown', function(event) {
-    function recordConsoleElementHeight(event) {
-      resizerElement.removeEventListener('mouseup', recordConsoleElementHeight);
-
-      var currentConsoleElementHeight = consoleElement.offsetHeight;
-      setBodyElementBottomMargin(currentConsoleElementHeight);
-    }
-
-    resizerElement.addEventListener('mouseup', recordConsoleElementHeight);
-  });
-});
+// Nothing here, for now

lib/web_console/templates/style.css.erb

@@ -1,3 +1,8 @@
+#console-container {
+  --console-initial-height: 10rem;
+  margin-top: var(--console-initial-height);
+}
+
 .console .pos-absolute {
   position: absolute;
 }
@@ -32,7 +37,7 @@
   left: 0;
   bottom: 0;
   width: 100%;
-  height: 148px;
+  height: var(--console-initial-height);
   padding: 0;
   margin: 0;
   background: none repeat scroll 0% 0% #333;
@@ -46,7 +51,7 @@
 
 .console .console-inner {
   font-family: monospace;
-  font-size: 11px;
+  font-size: 1rem;
   width: 100%;
   height: 100%;
   overflow: unset;
@@ -124,10 +129,11 @@
   cursor: pointer;
   border-radius: 1px;
   font-family: monospace;
-  font-size: 13px;
-  width: 14px;
-  height: 14px;
-  line-height: 14px;
+  font-size: 1.2rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-right: 1.5rem; /* allow room for scrollbar on right on some browsers */
+  line-height: 1.4rem;
   text-align: center;
   color: #ccc;
 }

lib/web_console/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module WebConsole
-  VERSION = "4.2.0"
+  VERSION = "4.2.1"
 end

lib/web_console/view.rb

@@ -17,9 +17,9 @@ def only_on_regular_page(*args)
 
     # Render JavaScript inside a script tag and a closure.
     #
-    # This one lets write JavaScript that will automatically get wrapped in a
-    # script tag and enclosed in a closure, so you don't have to worry for
-    # leaking globals, unless you explicitly want to.
+    # Allows writing JavaScript that will automatically get wrapped in
+    # a script tag and enclosed in a closure, so we don't have to worry about
+    # leaking globals, unless we explicitly want to.
     def render_javascript(template)
       assign(template: template)
       assign(nonce: @env["action_dispatch.content_security_policy_nonce"])

test/web_console/middleware_test.rb

@@ -64,7 +64,7 @@ def headers
 
       get "/", params: nil
 
-      assert_select "body > #console"
+      assert_select "body > #console-container > #console"
     end
 
     test "render error_page.js from web_console.exception" do