Merge pull request #490 from BetterErrors/feature/hide-live-shell-hint-after-use

Hide "live shell" hint after console has been used

Author: RobinDaugherty

lib/better_errors/templates/main.erb

@@ -611,17 +611,6 @@
         margin: 10px 0;
     }
 
-    .sub:before {
-        content: '';
-        display: block;
-        width: 100%;
-        height: 4px;
-
-        border-radius: 2px;
-        background: rgba(0, 150, 200, 0.05);
-        box-shadow: 1px 1px 0 rgba(255, 255, 255, 0.7), inset 0 0 0 1px rgba(0, 0, 0, 0.04), inset 2px 2px 2px rgba(0, 0, 0, 0.07);
-    }
-
     .sub h3 {
         color: #39a;
         font-size: 1.1em;
@@ -849,15 +838,31 @@
         this.inputElement   = this.container.querySelector("input");
         this.outputElement  = this.container.querySelector("pre");
 
+        this.hasUsedConsole = document.cookie.split('; ').find(function(cookie) {
+            return cookie.startsWith('BetterErrors-has-used-console=');
+        });
+        if (this.hasUsedConsole) {
+            this.hideConsoleHint();
+        }
+
         var self = this;
         this.inputElement.onkeydown = function(ev) {
             self.onKeyDown(ev);
+            if (!self.hasUsedConsole) {
+                self.hideConsoleHint();
+                self.hasUsedConsole = true;
+                document.cookie = "BetterErrors-has-used-console=true;path=/;max-age=31536000;samesite"
+            }
         };
 
         this.setPrompt(">>");
 
         REPL.all[this.index] = this;
-    }
+    };
+
+    REPL.prototype.hideConsoleHint = function() {
+        document.querySelector('#live-shell-hint').style["display"] = "none";
+    };
 
     REPL.prototype.focus = function() {
         this.inputElement.focus();

lib/better_errors/templates/variable_info.erb

@@ -25,7 +25,7 @@
 </header>
 
 <% if BetterErrors.binding_of_caller_available? && @frame.frame_binding %>
-    <div class="hint">
+    <div class="hint" id='live-shell-hint'>
         This is a live shell. Type in here.
     </div>