diff --git a/lib/web_console/templates/_inner_console_markup.html.erb b/lib/web_console/templates/_inner_console_markup.html.erb
index 51700ea9..0b3af79f 100644
--- a/lib/web_console/templates/_inner_console_markup.html.erb
+++ b/lib/web_console/templates/_inner_console_markup.html.erb
@@ -1,6 +1,7 @@
diff --git a/lib/web_console/templates/console.js.erb b/lib/web_console/templates/console.js.erb
index 6b8021bc..166b9920 100644
--- a/lib/web_console/templates/console.js.erb
+++ b/lib/web_console/templates/console.js.erb
@@ -374,6 +374,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 = this.getCookie('console_minimized')
+ if(consoleMinimized === null) {
+ this.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 +418,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';
+ _this.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 +461,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;
@@ -493,6 +518,37 @@ REPLConsole.prototype.newPromptBox = function() {
this.scrollToBottom();
};
+/**
+ * Finds the value of cookie with the given name. Returns null if not found.
+ */
+REPLConsole.prototype.getCookie = function(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;
+}
+
+/**
+ * Sets a cookie with the given name and value. If daysToExpire is not
+ */
+REPLConsole.prototype.setCookie = function(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;
+}
+
/**
* Remove the caret from the prompt box,
* mainly before adding a new prompt box.
diff --git a/lib/web_console/templates/style.css.erb b/lib/web_console/templates/style.css.erb
index 4e80780f..bff82f49 100644
--- a/lib/web_console/templates/style.css.erb
+++ b/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;
+}
\ No newline at end of file