web-console 1.0.4 → 2.0.0.beta1

data/lib/action_dispatch/templates/rescues/_request_and_response.html.erb

@@ -0,0 +1,34 @@
+<% unless @exception.blamed_files.blank? %>
+  <% if (hide = @exception.blamed_files.length > 8) %>
+    <a href="#" onclick="return toggleTrace()">Toggle blamed files</a>
+  <% end %>
+  <pre id="blame_trace" <%='style="display:none"' if hide %>><code><%= @exception.describe_blame %></code></pre>
+<% end %>
+
+<%
+  clean_params = @request.filtered_parameters.clone
+  clean_params.delete("action")
+  clean_params.delete("controller")
+
+  request_dump = clean_params.empty? ? 'None' : clean_params.inspect.gsub(',', ",\n")
+
+  def debug_hash(object)
+    object.to_hash.sort_by { |k, _| k.to_s }.map { |k, v| "#{k}: #{v.inspect rescue $!.message}" }.join("\n")
+  end unless self.class.method_defined?(:debug_hash)
+%>
+
+<h2 style="margin-top: 30px">Request</h2>
+<p><b>Parameters</b>:</p> <pre><%= request_dump %></pre>
+
+<div class="details">
+  <div class="summary"><a href="#" onclick="return toggleSessionDump()">Toggle session dump</a></div>
+  <div id="session_dump" style="display:none"><pre><%= debug_hash @request.session %></pre></div>
+</div>
+
+<div class="details">
+  <div class="summary"><a href="#" onclick="return toggleEnvDump()">Toggle env dump</a></div>
+  <div id="env_dump" style="display:none"><pre><%= debug_hash @request.env.slice(*@request.class::ENV_METHODS) %></pre></div>
+</div>
+
+<h2 style="margin-top: 30px">Response</h2>
+<p><b>Headers</b>:</p> <pre><%= defined?(@response) ? @response.headers.inspect.gsub(',', ",\n") : 'None' %></pre>

data/lib/action_dispatch/templates/rescues/_request_and_response.text.erb

@@ -0,0 +1,23 @@
+<%
+  clean_params = @request.filtered_parameters.clone
+  clean_params.delete("action")
+  clean_params.delete("controller")
+
+  request_dump = clean_params.empty? ? 'None' : clean_params.inspect.gsub(',', ",\n")
+
+  def debug_hash(object)
+    object.to_hash.sort_by { |k, _| k.to_s }.map { |k, v| "#{k}: #{v.inspect rescue $!.message}" }.join("\n")
+  end unless self.class.method_defined?(:debug_hash)
+%>
+
+Request parameters
+<%= request_dump %>
+
+Session dump
+<%= debug_hash @request.session %>
+
+Env dump
+<%= debug_hash @request.env.slice(*@request.class::ENV_METHODS) %>
+
+Response headers
+<%= defined?(@response) ? @response.headers.inspect.gsub(',', ",\n") : 'None' %>

data/lib/action_dispatch/templates/rescues/_source.erb

@@ -0,0 +1,27 @@
+<% if @extract_sources %>
+  <% @extract_sources.each_with_index do |extract_source, index| %>
+    <div class="source <%="hidden" if index != 0%>" id="frame-source-<%=index%>">
+      <div class="info">
+        Extracted source (around line <strong>#<%= extract_source[:line_number] %></strong>):
+      </div>
+      <div class="data">
+        <table cellpadding="0" cellspacing="0" class="lines">
+            <tr>
+              <td>
+                <pre class="line_numbers">
+                  <% extract_source[:code].keys.each do |line_number| %>
+<span><%= line_number -%></span>
+                  <% end %>
+                </pre>
+              </td>
+<td width="100%">
+<pre>
+<% extract_source[:code].each do |line, source| -%><div class="line<%= " active" if line == extract_source[:line_number] -%>"><%= source -%></div><% end -%>
+</pre>
+</td>
+            </tr>
+        </table>
+      </div>
+    </div>
+  <% end %>
+<% end %>

data/lib/action_dispatch/templates/rescues/_trace.html.erb

@@ -0,0 +1,76 @@
+<%
+   traces = { "Application Trace" => @application_trace,
+              "Framework Trace"   => @framework_trace,
+              "Full Trace"        => @full_trace }
+   names = traces.keys
+%>
+
+<p><code>Rails.root: <%= defined?(Rails) && Rails.respond_to?(:root) ? Rails.root : "unset" %></code></p>
+
+<div id="traces">
+  <% names.each do |name| %>
+    <%
+      show = "show('#{name.gsub(/\s/, '-')}');"
+      hide = (names - [name]).collect {|hide_name| "hide('#{hide_name.gsub(/\s/, '-')}');"}
+    %>
+    <a href="#" onclick="<%= hide.join %><%= show %>; return false;"><%= name %></a> <%= '|' unless names.last == name %>
+  <% end %>
+
+  <% traces.each do |name, trace| %>
+    <div id="<%= name.gsub(/\s/, '-') %>" style="display: <%= (name == "Application Trace") ? 'block' : 'none' %>;">
+      <pre><code><% trace.each do |frame| %><a class="trace-frames" data-frame-id="<%= frame[:id] %>" href="#"><%= frame[:trace] %></a><br><% end %></code></pre>
+    </div>
+  <% end %>
+
+  <script type="text/javascript">
+    var traceFrames = document.getElementsByClassName('trace-frames');
+    var selectedFrame, currentSource = document.getElementById('frame-source-0');
+
+    // Add click listeners for all stack frames
+    for (var i = 0; i < traceFrames.length; i++) {
+      traceFrames[i].addEventListener('click', function(e) {
+        e.preventDefault();
+        var target = e.target;
+        var frame_id = target.dataset.frameId;
+
+        // Change the binding of the console.
+        changeBinding(frame_id, function() {
+          if (selectedFrame) {
+            selectedFrame.className = selectedFrame.className.replace("selected", "");
+          }
+
+          target.className += " selected";
+          selectedFrame = target;
+        });
+
+        // Change the extracted source code
+        changeSourceExtract(frame_id);
+      });
+    }
+
+    function changeBinding(frame_id, callback) {
+      var consoleEl = document.getElementById('console');
+      if (! consoleEl) { return; }
+      var url = consoleEl.dataset.remotePath + "/trace";
+      var params = "frame_id=" + frame_id;
+      var xhr = new XMLHttpRequest();
+      xhr.open("POST", url, true);
+      xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+      xhr.send(params);
+      xhr.onreadystatechange = function() {
+        if(xhr.readyState == 4 && xhr.status == 200) {
+          callback();
+        }
+      }
+    }
+
+    function changeSourceExtract(frame_id) {
+      var el = document.getElementById('frame-source-' + frame_id);
+      if (currentSource && el) {
+        currentSource.className += " hidden";
+        el.className = el.className.replace(" hidden", "");
+        currentSource = el;
+      }
+    }
+  </script>
+</div>

data/lib/action_dispatch/templates/rescues/_trace.text.erb

@@ -0,0 +1,15 @@
+<%
+  traces = { "Application Trace" => @application_trace,
+             "Framework Trace"   => @framework_trace,
+             "Full Trace"        => @full_trace }
+%>
+
+Rails.root: <%= defined?(Rails) && Rails.respond_to?(:root) ? Rails.root : "unset" %>
+
+<% traces.each do |name, trace| %>
+<% if trace.any? %>
+<%= name %>
+<%= trace.join("\n") %>
+
+<% end %>
+<% end %>

data/lib/action_dispatch/templates/rescues/_web_console.html.erb

@@ -0,0 +1,382 @@
+<% if @console_session && @console_session.binding %>
+  <div id="console"
+    data-remote-path='<%= "console/repl_sessions/#{@console_session.id}" %>'
+    data-initial-prompt='<%= @console_session.prompt %>'>
+    <div id="resizer" style="width:100%; height: 3px; cursor: ns-resize;"></div>
+  </div>
+
+  <script type="text/javascript">
+
+    (function() {
+      // DOM helpers
+      function hasClass(el, className) {
+        var regex = new RegExp('(?:^|\\s)' + className + '(?!\\S)', 'g');
+        return el.className.match(regex);
+      }
+
+      function addClass(el, className) {
+        el.className += " " + className;
+      }
+
+      function removeClass(el, className) {
+        var regex = new RegExp('(?:^|\\s)' + className + '(?!\\S)', 'g');
+        el.className = el.className.replace(regex, '');
+      }
+
+      function removeAllChildren(el) {
+        while (el.firstChild) {
+          el.removeChild(el.firstChild);
+        }
+      }
+
+      function escapeHTML(html) {
+        return html.replace(/&/, "&amp;").replace(/</g, "&lt;");
+      }
+
+      // Add CSS styles dynamically. This probably doesnt work for IE <8.
+      var style = document.createElement('style');
+      style.type = 'text/css';
+      style.innerHTML = "#console { position: fixed; bottom: 0; width: 100%; height: 150px; border: 1px solid; padding-bottom: 20px; } " +
+        "#console div.console-inner { height: 100%; overflow: auto; background: #333; padding: 10px; } " +
+        "#console div.console-prompt-box { color: #fff; } " +
+        "#console div.console-message { color: #1ad027; } " +
+        "#console div.console-focus span.console-cursor { background:#fefefe; color:#333; font-weight:bold; }";
+      document.getElementsByTagName('head')[0].appendChild(style);
+
+      /**
+       * Constructor for command storage.
+       * It uses localStorage if available. Otherwise fallback to normal JS array.
+       */
+      function CommandStorage() {
+        this.previousCommands = [];
+        var previousCommandOffset = 0;
+        var hasLocalStorage = typeof window.localStorage !== 'undefined';
+        var STORAGE_KEY = "web_console_previous_commands";
+        var MAX_STORAGE = 100;
+
+        if (hasLocalStorage) {
+          this.previousCommands = JSON.parse(localStorage.getItem(STORAGE_KEY)) || [];
+          previousCommandOffset = this.previousCommands.length;
+        }
+
+        this.addCommand = function(command) {
+          previousCommandOffset = this.previousCommands.push(command);
+
+          if (previousCommandOffset > MAX_STORAGE) {
+            this.previousCommands.splice(0, 1);
+            previousCommandOffset = MAX_STORAGE;
+          }
+
+          if (hasLocalStorage) {
+            localStorage.setItem(STORAGE_KEY, JSON.stringify(this.previousCommands));
+          }
+        };
+
+        this.navigate = function(offset) {
+          previousCommandOffset += offset;
+
+          if (previousCommandOffset < 0) {
+            previousCommandOffset = -1;
+            return null;
+          }
+
+          if (previousCommandOffset >= this.previousCommands.length) {
+            previousCommandOffset = this.previousCommands.length;
+            return null;
+          }
+
+          return this.previousCommands[previousCommandOffset];
+        }
+      }
+
+      // REPLConsole Constructor
+      function REPLConsole(config) {
+        this.commandStorage = new CommandStorage();
+        this.prompt = config && config.promptLabel ? config.promptLabel : ' >>';
+        this.commandHandle = config && config.commandHandle ? config.commandHandle : function() { return this; }
+      }
+
+      REPLConsole.prototype.install = function(container) {
+        var _this = this;
+
+        document.onkeydown = function(ev) {
+          if (_this.focused) { _this.onKeyDown(ev); }
+        };
+
+        document.onkeypress = function(ev) {
+          if (_this.focused) { _this.onKeyPress(ev); }
+        };
+
+        document.addEventListener('mousedown', function(ev) {
+          var el = ev.target || ev.srcElement;
+
+          if (el) {
+            do {
+              if (el === container) {
+                _this.focus();
+                return;
+              }
+            } while (el = el.parentNode);
+
+            _this.blur();
+          }
+        });
+
+        // Render the console.
+        this.inner = document.createElement('div');
+        this.inner.className = "console-inner";
+        this.newPromptBox();
+        container.appendChild(this.inner);
+        this.focus();
+      };
+
+      REPLConsole.prototype.focus = function() {
+        this.focused = true;
+
+        if (! hasClass(this.inner, "console-focus")) {
+          addClass(this.inner, "console-focus");
+        }
+        this.scrollToBottom();
+      };
+
+      REPLConsole.prototype.blur = function() {
+        this.focused = false;
+        removeClass(this.inner, "console-focus");
+      };
+
+      /**
+       * Add a new empty prompt box to the console.
+       */
+      REPLConsole.prototype.newPromptBox = function() {
+        // Remove the caret from previous prompt box if any.
+        if (this.promptInput) {
+          this.removeCaretFromPrompt();
+        }
+
+        var promptBox = document.createElement('div');
+        promptBox.className = "console-prompt-box";
+        var promptLabel = document.createElement('span');
+        promptLabel.className ="console-prompt-label";
+        promptLabel.style.display = "inline";
+        promptLabel.innerHTML = this.prompt;
+        var promptInput = document.createElement('span');
+        promptInput.className = "console-prompt";
+        promptBox.appendChild(promptLabel);
+        promptBox.appendChild(promptInput);
+        this.inner.appendChild(promptBox);
+
+        this.promptLabel = promptLabel;
+        this.promptInput = promptInput;
+        this.setInput("");
+        this.scrollToBottom();
+      };
+
+      /**
+       * Remove the caret from the prompt box,
+       * mainly before adding a new prompt box.
+       * For simplicity, just re-render the prompt box
+       * with caret position -1.
+       */
+      REPLConsole.prototype.removeCaretFromPrompt = function() {
+        this.setInput(this._input, -1);
+      };
+
+      REPLConsole.prototype.setInput = function(input, caretPos) {
+        this._caretPos = caretPos === undefined ? input.length : caretPos;
+        this._input = input;
+        this.renderInput();
+      }
+
+      /**
+       * Render the input prompt. This is called whenever
+       * the user input changes, sometimes not very efficient.
+       */
+      REPLConsole.prototype.renderInput = function() {
+        // Clear the current input.
+        removeAllChildren(this.promptInput);
+
+        var promptCursor = document.createElement('span');
+        promptCursor.className = "console-cursor";
+        var before, current, master;
+
+        if (this._caretPos < 0) {
+          before = this._input;
+          current = after = "";
+        } else if (this._caretPos === this._input.length) {
+          before = this._input;
+          current = "\u00A0";
+          after = "";
+        } else {
+          before = this._input.substring(0, this._caretPos);
+          current = this._input.charAt(this._caretPos);
+          after = this._input.substring(this._caretPos + 1, this._input.length);
+        }
+
+        this.promptInput.appendChild(document.createTextNode(before));
+        promptCursor.appendChild(document.createTextNode(current));
+        this.promptInput.appendChild(promptCursor);
+        this.promptInput.appendChild(document.createTextNode(after));
+      };
+
+      REPLConsole.prototype.writeOutput = function(output) {
+        var consoleMessage = document.createElement('div');
+        consoleMessage.className = "console-message";
+        consoleMessage.innerHTML = escapeHTML(output);
+        this.inner.appendChild(consoleMessage);
+        this.newPromptBox();
+      };
+
+      REPLConsole.prototype.onEnterKey = function() {
+        var input = this._input;
+
+        if(input != "" && input !== undefined) {
+          this.commandStorage.addCommand(input);
+        }
+
+        this.commandHandle(input);
+      };
+
+      REPLConsole.prototype.onNavigateHistory = function(offset) {
+        var command = this.commandStorage.navigate(offset) || "";
+        this.setInput(command);
+      };
+
+      /**
+       * Handle control keys like up, down, left, right.
+       */
+      REPLConsole.prototype.onKeyDown = function(ev) {
+        switch (ev.keyCode) {
+          case 13:
+            // Enter key
+            this.onEnterKey();
+            ev.preventDefault();
+            break;
+          case 80:
+            // Ctrl-P
+            if (! ev.ctrlKey) break;
+          case 38:
+            // Up arrow
+            this.onNavigateHistory(-1);
+            ev.preventDefault();
+            break;
+          case 78:
+            // Ctrl-N
+            if (! ev.ctrlKey) break;
+          case 40:
+            // Down arrow
+            this.onNavigateHistory(1);
+            ev.preventDefault();
+            break;
+          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
+            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
+            this.deleteAtCurrent();
+            ev.preventDefault();
+            break;
+          default:
+            break;
+        }
+
+        ev.stopPropagation();
+      };
+
+      /**
+       * Handle input key press.
+       */
+      REPLConsole.prototype.onKeyPress = function(ev) {
+        var keyCode = ev.keyCode || ev.which;
+        this.insertAtCurrent(String.fromCharCode(keyCode));
+        ev.stopPropagation();
+        ev.preventDefault();
+      };
+
+      /**
+       * Delete a character at the current position.
+       */
+      REPLConsole.prototype.deleteAtCurrent = function() {
+        if (this._caretPos > 0) {
+          var caretPos = this._caretPos - 1;
+          var before = this._input.substring(0, caretPos);
+          var after = this._input.substring(this._caretPos, this._input.length);
+          this.setInput(before + after, caretPos);
+        }
+      };
+
+      /**
+       * Insert a character at the current position.
+       */
+      REPLConsole.prototype.insertAtCurrent = function(char) {
+        var before = this._input.substring(0, this._caretPos);
+        var after = this._input.substring(this._caretPos, this._input.length);
+        this.setInput(before + char + after, this._caretPos + 1);
+      };
+
+      REPLConsole.prototype.scrollToBottom = function() {
+        this.inner.scrollTop = this.inner.scrollHeight;
+      };
+
+      window.REPLConsole = REPLConsole;
+    })();
+
+    // Make the console resizable (not sure if works in all browser)
+    var consoleDiv = document.getElementById('console');
+    var resizer = document.getElementById('resizer');
+
+    var initDrag = function(e) {
+      var startY = e.clientY;
+      var startHeight = parseInt(document.defaultView.getComputedStyle(consoleDiv).height, 10);
+
+      var doDrag = function(e) {
+        consoleDiv.style.height = (startHeight + startY - e.clientY) + 'px';
+      };
+
+      var stopDrag = function(e) {
+        document.documentElement.removeEventListener('mousemove', doDrag, false);
+        document.documentElement.removeEventListener('mouseup', stopDrag, false);
+      };
+
+      document.documentElement.addEventListener('mousemove', doDrag, false);
+      document.documentElement.addEventListener('mouseup', stopDrag, false);
+    }
+
+    resizer.addEventListener('mousedown', initDrag, false);
+
+    // Install the console
+    var consoleDiv = document.getElementById('console');
+    var replConsole = new REPLConsole({
+      promptLabel: consoleDiv.dataset.initialPrompt,
+      commandHandle: function(line) {
+        var _this = this;
+        var xhr = new XMLHttpRequest();
+        var url = consoleDiv.dataset.remotePath;
+        var params = "input=" + line;
+
+        xhr.open("PUT", url, true);
+        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+        xhr.send(params);
+
+        xhr.onreadystatechange = function() {
+          if(xhr.readyState == 4 && xhr.status == 200) {
+            var response = JSON.parse(xhr.responseText);
+            console.log(response.output);
+            _this.writeOutput(response.output);
+          }
+        }
+      }
+    });
+
+    replConsole.install(consoleDiv);
+  </script>
+<% end %>