diff --git a/README.markdown b/README.markdown index ae958bca..fe9197dc 100644 --- a/README.markdown +++ b/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 diff --git a/lib/web_console/context.rb b/lib/web_console/context.rb index ead093b3..af87503e 100644 --- a/lib/web_console/context.rb +++ b/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. diff --git a/lib/web_console/templates/_markup.html.erb b/lib/web_console/templates/_markup.html.erb index 96d48769..f9cf15b0 100644 --- a/lib/web_console/templates/_markup.html.erb +++ b/lib/web_console/templates/_markup.html.erb @@ -1,5 +1,7 @@ -
-
+
+
+
+
\ No newline at end of file diff --git a/lib/web_console/templates/console.js.erb b/lib/web_console/templates/console.js.erb index 108f91ff..8e0d308e 100644 --- a/lib/web_console/templates/console.js.erb +++ b/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(); diff --git a/lib/web_console/templates/error_page.js.erb b/lib/web_console/templates/error_page.js.erb index 9fc91d26..293ccbc8 100644 --- a/lib/web_console/templates/error_page.js.erb +++ b/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); - }); -}); +} \ No newline at end of file diff --git a/lib/web_console/templates/main.js.erb b/lib/web_console/templates/main.js.erb index 4e4a0284..f3123f31 100644 --- a/lib/web_console/templates/main.js.erb +++ b/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); + }); +}); diff --git a/lib/web_console/templates/regular_page.js.erb b/lib/web_console/templates/regular_page.js.erb index bee20147..ee422442 100644 --- a/lib/web_console/templates/regular_page.js.erb +++ b/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 \ No newline at end of file diff --git a/lib/web_console/templates/style.css.erb b/lib/web_console/templates/style.css.erb index 4e80780f..084569e9 100644 --- a/lib/web_console/templates/style.css.erb +++ b/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; } diff --git a/lib/web_console/version.rb b/lib/web_console/version.rb index 7178afa1..66e31769 100644 --- a/lib/web_console/version.rb +++ b/lib/web_console/version.rb @@ -1,5 +1,5 @@ # frozen_string_literal: true module WebConsole - VERSION = "4.2.0" + VERSION = "4.2.1" end diff --git a/lib/web_console/view.rb b/lib/web_console/view.rb index 57f1ad33..585cf09e 100644 --- a/lib/web_console/view.rb +++ b/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"]) diff --git a/test/web_console/middleware_test.rb b/test/web_console/middleware_test.rb index b545e78c..fcc364f3 100644 --- a/test/web_console/middleware_test.rb +++ b/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