Always try to keep the console underneath the website content (#257)

I was reluctant to do this until now, but hey, even if it break your
layouts, it's for development error chasing, right? Shouldn't make you
that mad to open issues? 🤔

Author: gsamokovarov

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 %>

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);
+  });
+});

lib/web_console/view.rb

@@ -10,6 +10,11 @@ def only_on_error_page(*args)
       yield if Thread.current[:__web_console_exception].present?
     end
 
+    # Execute a block only on regular, non-error, pages.
+    def only_on_regular_page(*args)
+      yield if Thread.current[:__web_console_binding].present?
+    end
+
     # Render JavaScript inside a script tag and a closure.
     #
     # This one lets write JavaScript that will automatically get wrapped in a