web-console 3.5.1 → 4.2.1

data/lib/web_console/templates/console.js.erb

@@ -251,12 +251,14 @@ Autocomplete.prototype.removeView = function() {
 }
 
 // HTML strings for dynamic elements.
-var consoleInnerHtml = <%= render_inlined_string '_inner_console_markup.html' %>;
-var promptBoxHtml = <%= render_inlined_string '_prompt_box_markup.html' %>;
+var consoleInnerHtml = <%= render_inlined_string '_inner_console_markup' %>;
+var promptBoxHtml = <%= render_inlined_string '_prompt_box_markup' %>;
 // CSS
-var consoleStyleCss = <%= render_inlined_string 'style.css' %>;
+var consoleStyleCss = <%= render_inlined_string 'style' %>;
 // Insert a style element with the unique ID
 var styleElementId = 'sr02459pvbvrmhco';
+// Nonce to use for CSP
+var styleElementNonce = '<%= @nonce %>';
 
 // REPLConsole Constructor
 function REPLConsole(config) {
@@ -380,8 +382,13 @@ REPLConsole.prototype.install = function(container) {
     var clientHeightStart   = consoleOuter.clientHeight;
 
     var doDrag = function(e) {
-      container.style.height = (startHeight + startY - e.clientY) + 'px';
+      var height = startHeight + startY - e.clientY;
       consoleOuter.scrollTop = scrollTopStart + (clientHeightStart - consoleOuter.clientHeight);
+      if (height > document.documentElement.clientHeight) {
+        container.style.height = document.documentElement.clientHeight;
+      } else {
+        container.style.height = height + 'px';
+      }
       shiftConsoleActions();
     };
 
@@ -411,6 +418,14 @@ REPLConsole.prototype.install = function(container) {
     }
   }
 
+  var observer = new MutationObserver(function(mutationsList) {
+    for (let mutation of mutationsList) {
+      if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
+        shiftConsoleActions();
+      }
+    }
+  });
+
   // Initialize
   this.container = container;
   this.outer = consoleOuter;
@@ -422,7 +437,7 @@ REPLConsole.prototype.install = function(container) {
 
   findChild(container, 'resizer').addEventListener('mousedown', resizeContainer);
   findChild(consoleActions, 'close-button').addEventListener('click', closeContainer);
-  consoleOuter.addEventListener('DOMNodeInserted', shiftConsoleActions);
+  observer.observe(consoleOuter, { childList: true, subtree: true });
 
   REPLConsole.currentSession = this;
 };
@@ -436,6 +451,9 @@ REPLConsole.prototype.insertCss = function() {
   style.type = 'text/css';
   style.innerHTML = consoleStyleCss;
   style.id = styleElementId;
+  if (styleElementNonce.length > 0) {
+    style.nonce = styleElementNonce;
+  }
   document.getElementsByTagName('head')[0].appendChild(style);
 };
 
@@ -494,7 +512,7 @@ REPLConsole.prototype.getSuggestion = function(keyword) {
     hint.className = 'console-hint';
     hint.dataset.keyword = found;
     hint.innerText = found.substr(self.suggestKeyword.length);
-    // clear hinting information after timeout in a few time 
+    // clear hinting information after timeout in a few time
     if (self.suggestTimeout) clearTimeout(self.suggestTimeout);
     self.suggestTimeout = setTimeout(function() { self.renderInput() }, self.suggestWait);
   }
@@ -603,6 +621,12 @@ REPLConsole.prototype.writeError = function(output) {
   return consoleMessage;
 };
 
+REPLConsole.prototype.writeNotification = function(output) {
+  var consoleMessage = this.writeOutput(output);
+  addClass(consoleMessage, "notification-message");
+  return consoleMessage;
+};
+
 REPLConsole.prototype.onEnterKey = function() {
   var input = this._input;
 
@@ -654,65 +678,94 @@ REPLConsole.prototype.onKeyDown = function(ev) {
   }
 
   switch (ev.keyCode) {
-    case 69:
-      // Ctrl-E
+    case 65: // Ctrl-A
+      if (ev.ctrlKey) {
+        this.setInput(this._input, 0);
+        ev.preventDefault();
+      }
+      break;
+
+    case 69: // Ctrl-E
+      if (ev.ctrlKey) {
+        this.onTabKey();
+        ev.preventDefault();
+      }
+      break;
+
+    case 87: // Ctrl-W
+      if (ev.ctrlKey) {
+        this.deleteWord();
+        ev.preventDefault();
+      }
+      break;
+
+    case 85: // Ctrl-U
+      if (ev.ctrlKey) {
+        this.deleteLine();
+        ev.preventDefault();
+      }
+      break;
+
+    case 69: // Ctrl-E
       if (ev.ctrlKey) {
         this.onTabKey();
         ev.preventDefault();
       }
       break;
-    case 9:
-      // Tab
+
+    case 80: // Ctrl-P
+      if (! ev.ctrlKey) break;
+
+    case 78: // Ctrl-N
+      if (! ev.ctrlKey) break;
+
+    case 9: // Tab
       this.onTabKey();
       ev.preventDefault();
       break;
-    case 13:
-      // Enter key
+
+    case 13: // Enter key
       this.onEnterKey();
       ev.preventDefault();
       break;
-    case 80:
-      // Ctrl-P
-      if (! ev.ctrlKey) break;
-    case 38:
-      // Up arrow
+
+    case 38: // Up arrow
       this.onNavigateHistory(-1);
       ev.preventDefault();
       break;
-    case 78:
-      // Ctrl-N
-      if (! ev.ctrlKey) break;
-    case 40:
-      // Down arrow
+
+    case 40: // Down arrow
       this.onNavigateHistory(1);
       ev.preventDefault();
       break;
-    case 37:
-      // Left arrow
+
+    case 37: // Left arrow
       var caretPos = this._caretPos > 0 ? this._caretPos - 1 : this._caretPos;
       this.setInput(this._input, caretPos);
       ev.preventDefault();
       break;
-    case 39:
-      // Right arrow
+
+    case 39: // Right arrow
       var length = this._input.length;
       var caretPos = this._caretPos < length ? this._caretPos + 1 : this._caretPos;
       this.setInput(this._input, caretPos);
       ev.preventDefault();
       break;
-    case 8:
-      // Delete
+
+    case 8: // Delete
       this.deleteAtCurrent();
       ev.preventDefault();
       break;
+
     default:
       break;
   }
 
   if (ev.ctrlKey || ev.metaKey) {
-    // Set focus to our clipboard in case they hit the "v" key
-    this.clipboard.focus();
     if (ev.keyCode == 86) {
+      // Set focus to our clipboard when they hit the "v" key
+      this.clipboard.focus();
+
       // Pasting to clipboard doesn't happen immediately,
       // so we have to wait for a while to get the pasted text.
       var _this = this;
@@ -720,7 +773,7 @@ REPLConsole.prototype.onKeyDown = function(ev) {
         _this.addToInput(_this.clipboard.value);
         _this.clipboard.value = "";
         _this.clipboard.blur();
-      }, 10);
+      }, 100);
     }
   }
 
@@ -732,7 +785,7 @@ REPLConsole.prototype.onKeyDown = function(ev) {
  */
 REPLConsole.prototype.onKeyPress = function(ev) {
   // Only write to the console if it's a single key press.
-  if (ev.ctrlKey || ev.metaKey) { return; }
+  if (ev.ctrlKey && !ev.altKey || ev.metaKey) { return; }
   var keyCode = ev.keyCode || ev.which;
   this.insertAtCurrent(String.fromCharCode(keyCode));
   ev.stopPropagation();
@@ -756,6 +809,47 @@ REPLConsole.prototype.deleteAtCurrent = function() {
   }
 };
 
+/**
+ * Deletes the current line.
+ */
+REPLConsole.prototype.deleteLine = function() {
+  if (this._caretPos > 0) {
+    this.setInput("", 0);
+
+    if (!this._input) {
+      this.autocomplete && this.autocomplete.cancel();
+      this.autocomplete = false;
+    }
+  }
+};
+
+/**
+ * Deletes the current word.
+ */
+REPLConsole.prototype.deleteWord = function() {
+  if (this._caretPos > 0) {
+    var i = 1, current = this._caretPos;
+    while (this._input[current - i++] == " ");
+
+    var deleteIndex = 0;
+    for (; current - i > 0; i++) {
+      if (this._input[current - i] == " ") {
+        deleteIndex = current - i;
+        break;
+      }
+    }
+
+    var before = this._input.substring(0, deleteIndex);
+    var after = this._input.substring(current, this._input.length);
+    this.setInput(before + after, deleteIndex);
+
+    if (!this._input) {
+      this.autocomplete && this.autocomplete.cancel();
+      this.autocomplete = false;
+    }
+  }
+};
+
 /**
  * Insert a character at the current position.
  */
@@ -794,11 +888,20 @@ REPLConsole.prototype.scrollToBottom = function() {
   this.outer.scrollTop = this.outer.scrollHeight;
 };
 
-// Change the binding of the console
-REPLConsole.prototype.switchBindingTo = function(frameId, callback) {
+// Change the binding of the console.
+REPLConsole.prototype.switchBindingTo = function(frameId, exceptionObjectId, callback) {
   var url = this.getSessionUrl('trace');
   var params = "frame_id=" + encodeURIComponent(frameId);
-  postRequest(url, params, callback);
+
+  if (exceptionObjectId) {
+    params = params + "&exception_object_id=" + encodeURIComponent(exceptionObjectId);
+  }
+
+  var _this = this;
+  postRequest(url, params, function() {
+    var text = "Context has changed to: " + callback();
+    _this.writeNotification(text);
+  });
 };
 
 /**
@@ -832,9 +935,8 @@ REPLConsole.request = function request(method, url, params, callback) {
   var xhr = new REPLConsole.XMLHttpRequest();
 
   xhr.open(method, url, true);
-  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-  xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
-  xhr.setRequestHeader("Accept", "<%= Mime[:web_console_v2] %>");
+  xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
+  xhr.setRequestHeader("x-requested-with", "XMLHttpRequest");
   xhr.send(params);
 
   xhr.onreadystatechange = function() {

data/lib/web_console/templates/error_page.js.erb

@@ -8,15 +8,13 @@ for (var i = 0; i < traceFrames.length; i++) {
     e.preventDefault();
     var target = e.target;
     var frameId = target.dataset.frameId;
+    var exceptionObjectId = target.dataset.exceptionObjectId;
 
     // Change the binding of the console.
-    changeBinding(frameId, function() {
-      if (selectedFrame) {
-        selectedFrame.className = selectedFrame.className.replace("selected", "");
-      }
-
-      target.className += " selected";
+    changeBinding(frameId, exceptionObjectId, function() {
+      // Rails already handles toggling the select class
       selectedFrame = target;
+      return target.innerHTML;
     });
 
     // Change the extracted source code
@@ -24,8 +22,9 @@ for (var i = 0; i < traceFrames.length; i++) {
   });
 }
 
-function changeBinding(frameId, callback) {
-  REPLConsole.currentSession.switchBindingTo(frameId, callback);
+// Change the binding of the current session and prompt the user.
+function changeBinding(frameId, exceptionObjectId, callback) {
+  REPLConsole.currentSession.switchBindingTo(frameId, exceptionObjectId, callback);
 }
 
 function changeSourceExtract(frameId) {

data/lib/web_console/templates/index.html.erb

@@ -6,3 +6,7 @@
 <% only_on_error_page do %>
   <%= render_javascript 'error_page' %>
 <% end %>
+
+<% only_on_regular_page do %>
+  <%= render_javascript 'regular_page' %>
+<% end %>

data/lib/web_console/templates/layouts/inlined_string.erb

@@ -1 +1 @@
-"<%= j yield %>"
+`<%= j yield %>`

data/lib/web_console/templates/layouts/javascript.erb

@@ -1,4 +1,4 @@
-<script type="text/javascript" data-template="<%= @template %>">
+<script type="text/javascript" data-template="<%= @template %>" nonce="<%= @nonce %>">
 (function() {
   <%= yield %>
 }).call(this);

data/lib/web_console/templates/regular_page.js.erb

@@ -0,0 +1,24 @@
+// 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);
+  });
+});

data/lib/web_console/templates/style.css.erb

@@ -1,33 +1,182 @@
-.console .pos-absolute { position: absolute; }
-.console .pos-fixed { position: fixed; }
-.console .pos-right { right: 0; }
-.console .border-box { box-sizing: border-box; }
-.console .layer { width: 100%; height: 100%; }
-.console .layer.console-outer { z-index: 1; }
-.console .layer.resizer { z-index: 2; }
-.console { position: fixed; left: 0; bottom: 0; width: 100%; height: 148px; padding: 0; margin: 0; background: none repeat scroll 0% 0% #333; z-index: 9999; }
-.console .console-outer { overflow: auto; padding-top: 4px; }
-.console .console-inner { font-family: monospace; font-size: 11px; width: 100%; height: 100%; overflow: none; background: #333; }
-.console .console-prompt-box { color: #FFF; }
-.console .console-message { color: #1AD027; margin: 0; border: 0; white-space: pre-wrap; background-color: #333; padding: 0; }
-.console .console-message.error-message { color: #fc9; }
-.console .console-message.auto-complete { word-break: break-all; }
-.console .console-message.auto-complete .keyword { margin-right: 11px; }
-.console .console-message.auto-complete .keyword.selected { background: #FFF; color: #000; }
-.console .console-message.auto-complete .hidden { display: none; }
-.console .console-message.auto-complete .trimmed { display: none; }
-.console .console-hint { color: #096; }
-.console .console-focus .console-cursor { background: #FEFEFE; color: #333; font-weight: bold; }
-.console .resizer { background: #333; width: 100%; height: 4px; cursor: ns-resize; }
-.console .console-actions { padding-right: 3px; }
-.console .console-actions .button { float: left; }
-.console .button { cursor: pointer; border-radius: 1px; font-family: monospace; font-size: 13px; width: 14px; height: 14px; line-height: 14px; text-align: center; color: #ccc; }
-.console .button:hover { background: #666; color: #fff; }
-.console .button.close-button:hover { background: #966; }
-.console .clipboard { height: 0px; padding: 0px; margin: 0px; width: 0px; margin-left: -1000px; }
-.console .console-prompt-label { display: inline; color: #FFF; background: none repeat scroll 0% 0% #333; border: 0; padding: 0; }
-.console .console-prompt-display { display: inline; color: #FFF; background: none repeat scroll 0% 0% #333; border: 0; padding: 0; }
-.console.full-screen { height: 100%; }
-.console.full-screen .console-outer { padding-top: 3px; }
-.console.full-screen .resizer { display: none; }
-.console.full-screen .close-button { display: none; }
+.console .pos-absolute {
+  position: absolute;
+}
+
+.console .pos-fixed {
+  position: fixed;
+}
+
+.console .pos-right {
+  right: 0;
+}
+
+.console .border-box {
+  box-sizing: border-box;
+}
+
+.console .layer {
+  width: 100%;
+  height: 100%;
+}
+
+.console .layer.console-outer {
+  z-index: 1;
+}
+
+.console .layer.resizer {
+  z-index: 2;
+}
+
+.console {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 148px;
+  padding: 0;
+  margin: 0;
+  background: none repeat scroll 0% 0% #333;
+  z-index: 9999;
+}
+
+.console .console-outer {
+  overflow: auto;
+  padding-top: 4px;
+}
+
+.console .console-inner {
+  font-family: monospace;
+  font-size: 11px;
+  width: 100%;
+  height: 100%;
+  overflow: unset;
+  background: #333;
+}
+
+.console .console-prompt-box {
+  color: #fff;
+}
+
+.console .console-message {
+  color: #1ad027;
+  margin: 0;
+  border: 0;
+  white-space: pre-wrap;
+  background-color: #333;
+  padding: 0;
+}
+
+.console .console-message.error-message {
+  color: #fc9;
+}
+
+.console .console-message.notification-message {
+  color: #99f;
+}
+
+.console .console-message.auto-complete {
+  word-break: break-all;
+}
+
+.console .console-message.auto-complete .keyword {
+  margin-right: 11px;
+}
+
+.console .console-message.auto-complete .keyword.selected {
+  background: #fff;
+  color: #000;
+}
+
+.console .console-message.auto-complete .hidden {
+  display: none;
+}
+
+.console .console-message.auto-complete .trimmed {
+  display: none;
+}
+
+.console .console-hint {
+  color: #096;
+}
+
+.console .console-focus .console-cursor {
+  background: #fefefe;
+  color: #333;
+  font-weight: bold;
+}
+
+.console .resizer {
+  background: #333;
+  width: 100%;
+  height: 4px;
+  cursor: ns-resize;
+}
+
+.console .console-actions {
+  padding-right: 3px;
+}
+
+.console .console-actions .button {
+  float: left;
+}
+
+.console .button {
+  cursor: pointer;
+  border-radius: 1px;
+  font-family: monospace;
+  font-size: 13px;
+  width: 14px;
+  height: 14px;
+  line-height: 14px;
+  text-align: center;
+  color: #ccc;
+}
+
+.console .button:hover {
+  background: #666;
+  color: #fff;
+}
+
+.console .button.close-button:hover {
+  background: #966;
+}
+
+.console .clipboard {
+  height: 0px;
+  padding: 0px;
+  margin: 0px;
+  width: 0px;
+  margin-left: -1000px;
+}
+
+.console .console-prompt-label {
+  display: inline;
+  color: #fff;
+  background: none repeat scroll 0% 0% #333;
+  border: 0;
+  padding: 0;
+}
+
+.console .console-prompt-display {
+  display: inline;
+  color: #fff;
+  background: none repeat scroll 0% 0% #333;
+  border: 0;
+  padding: 0;
+}
+
+.console.full-screen {
+  height: 100%;
+}
+
+.console.full-screen .console-outer {
+  padding-top: 3px;
+}
+
+.console.full-screen .resizer {
+  display: none;
+}
+
+.console.full-screen .close-button {
+  display: none;
+}

data/lib/web_console/testing/erb_precompiler.rb

@@ -1,5 +1,7 @@
-require 'web_console/testing/helper'
-require 'web_console/testing/fake_middleware'
+# frozen_string_literal: true
+
+require "web_console/testing/helper"
+require "web_console/testing/fake_middleware"
 
 module WebConsole
   module Testing
@@ -8,7 +10,7 @@ module WebConsole
       def initialize(path)
         @erb  = ERB.new(File.read(path))
         @view = FakeMiddleware.new(
-          view_path: Helper.gem_root.join('lib/web_console/templates'),
+          view_path: Helper.gem_root.join("lib/web_console/templates"),
         ).view
       end
 

data/lib/web_console/testing/fake_middleware.rb

@@ -1,14 +1,16 @@
-require 'action_view'
-require 'web_console'
-require 'web_console/testing/helper'
-Mime = { web_console_v2: 'fake' }
+# frozen_string_literal: true
+
+require "action_view"
+require "action_dispatch" # This is needed to use Mime::Type
+require "web_console"
+require "web_console/testing/helper"
 
 module WebConsole
   module Testing
     class FakeMiddleware
-      I18n.load_path.concat(Dir[Helper.gem_root.join('lib/web_console/locales/*.yml')])
+      I18n.load_path.concat(Dir[Helper.gem_root.join("lib/web_console/locales/*.yml")])
 
-      DEFAULT_HEADERS = { "Content-Type" => "application/javascript" }
+      DEFAULT_HEADERS = { Rack::CONTENT_TYPE => "application/javascript" }
 
       def initialize(opts)
         @headers        = opts.fetch(:headers, DEFAULT_HEADERS)
@@ -17,18 +19,21 @@ module WebConsole
       end
 
       def call(env)
-        [ 200, @headers, [ render(req_path(env)) ] ]
+        body = render(req_path(env))
+        @headers[Rack::CONTENT_LENGTH] = body.bytesize.to_s
+
+        [ 200, @headers, [ body ] ]
       end
 
       def view
-        @view = View.new(@view_path)
+        @view = View.with_empty_template_cache.with_view_paths(@view_path)
       end
 
       private
 
         # extract target path from REQUEST_PATH
         def req_path(env)
-          env["REQUEST_PATH"].match(@req_path_regex)[1]
+          File.basename(env["REQUEST_PATH"].match(@req_path_regex)[1], ".*")
         end
 
         def render(template)

data/lib/web_console/testing/helper.rb

@@ -1,8 +1,10 @@
+# frozen_string_literal: true
+
 module WebConsole
   module Testing
     module Helper
       def self.gem_root
-        Pathname(File.expand_path('../../../../', __FILE__))
+        Pathname(File.expand_path("../../../../", __FILE__))
       end
     end
   end

data/lib/web_console/version.rb

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