add minimizable console

lib/web_console/templates/_inner_console_markup.html.erb

@@ -1,6 +1,7 @@
 <div class='resizer layer'></div>
 <div class='console-outer layer'>
   <div class='console-actions'>
+    <div class='minimize-button button' title='close'>-</div>
     <div class='close-button button' title='close'>x</div>
   </div>
   <div class='console-inner'></div>

lib/web_console/templates/console.js.erb

@@ -1,3 +1,29 @@
+function getCookie(name) {
+  var cookieValue = null;
+  var cookies = document.cookie.split(";");
+
+  for (var i = 0; i < cookies.length; i++) {
+    var cookie = cookies[i].trim();
+    if (cookie.startsWith(name + "=")) {
+      cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
+      break;
+    }
+  }
+  return cookieValue;
+}
+
+function setCookie(name, value, daysToExpire) {
+  var cookieString = name + "=" + encodeURIComponent(value);
+
+  if (daysToExpire) {
+    var expirationDate = new Date();
+    expirationDate.setDate(expirationDate.getDate() + daysToExpire);
+    cookieString += "; expires=" + expirationDate.toUTCString();
+  }
+  document.cookie = cookieString;
+}
+
+
 /**
  * Constructor for command storage.
  * It uses localStorage if available. Otherwise fallback to normal JS array.
@@ -374,6 +400,19 @@ REPLConsole.prototype.install = function(container) {
   addClass(container.getElementsByClassName('button'), 'border-box');
   addClass(consoleActions, 'pos-fixed pos-right');
 
+  var minimizedConsole = document.createElement('div')
+  minimizedConsole.className = 'minimized-console';
+  minimizedConsole.innerText = '</>'
+  document.body.appendChild(minimizedConsole);
+
+  var consoleMinimized = getCookie('console_minimized')
+  if(consoleMinimized === null) {
+    setCookie('console_minimized', 'false', 1);
+  } 
+
+  container.style.display = consoleMinimized === 'true' ? 'none' : 'block';
+  minimizedConsole.style.display = consoleMinimized === 'true' ? 'block' : 'none';
+
   // Make the console resizable.
   function resizeContainer(ev) {
     var startY              = ev.clientY;
@@ -405,6 +444,17 @@ REPLConsole.prototype.install = function(container) {
     container.parentNode.removeChild(container);
   }
 
+   function minimizeContainer(ev) {
+    var isMinimized = container.style.display === 'none'
+    container.style.display = isMinimized ? 'block' : 'none';
+    minimizedConsole.style.display = isMinimized ? 'none' : 'block';
+    setCookie('console_minimized', isMinimized ? 'false' : 'true', 1);
+  }
+
+  minimizedConsole.addEventListener('click', function(ev) {
+    minimizeContainer(ev);
+  });
+
   var shifted = false;
   function shiftConsoleActions() {
     if (consoleOuter.scrollHeight > consoleOuter.clientHeight) {
@@ -437,6 +487,7 @@ REPLConsole.prototype.install = function(container) {
 
   findChild(container, 'resizer').addEventListener('mousedown', resizeContainer);
   findChild(consoleActions, 'close-button').addEventListener('click', closeContainer);
+  findChild(consoleActions, 'minimize-button').addEventListener('click', minimizeContainer);
   observer.observe(consoleOuter, { childList: true, subtree: true });
 
   REPLConsole.currentSession = this;

lib/web_console/templates/style.css.erb

@@ -36,7 +36,7 @@
   padding: 0;
   margin: 0;
   background: none repeat scroll 0% 0% #333;
-  z-index: 9999;
+  z-index: 2147483647;
 }
 
 .console .console-outer {
@@ -141,6 +141,10 @@
   background: #966;
 }
 
+.console .button.minimize-button:hover {
+  background: #966;
+}
+
 .console .clipboard {
   height: 0px;
   padding: 0px;
@@ -180,3 +184,25 @@
 .console.full-screen .close-button {
   display: none;
 }
+
+.console.full-screen .minimize-button {
+  display: none;
+}
+
+.minimized-console {
+  position: fixed;   
+  right: 50%;
+  display: none;
+  bottom: 0px;
+  background-color: #333;
+  border-top-right-radius: 2px;
+  border-top-left-radius: 2px;
+  padding: 1px 10px;
+  font-size: 11px;
+  color: #fff;
+  z-index: 2147483647;
+}
+
+.minimized-console:hover {
+  background: #966;
+}