Redesign REPL

Shorter prompt. Individual results as their own element with a heading and more visual dilineation for each.
BetterErrors · Jun 28, 2018 · 56a0ab3 · 56a0ab3
1 parent b1f707d
commit 56a0ab3
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 62 deletions.
diff --git a/lib/better_errors/repl/basic.rb b/lib/better_errors/repl/basic.rb
@@ -6,12 +6,12 @@ def initialize(binding, _exception)
       end
 
       def send_input(str)
-        [execute(str), ">>", ""]
+        [execute(str), ">", ""]
       end
 
     private
       def execute(str)
-        "=> #{@binding.eval(str).inspect}\n"
+        "=> #{CGI.escapeHTML(@binding.eval(str).inspect)}\n"
       rescue Exception => e
         "!! #{e.inspect rescue e.class.to_s rescue "Exception"}\n"
       end

diff --git a/lib/better_errors/repl/pry.rb b/lib/better_errors/repl/pry.rb
@@ -64,10 +64,10 @@ def prompt
         if indent = @pry.instance_variable_get(:@indent) and !indent.indent_level.empty?
           ["..", indent.indent_level]
         else
-          [">>", ""]
+          [">", ""]
         end
       rescue
-        [">>", ""]
+        [">", ""]
       end
 
     private

diff --git a/lib/better_errors/templates/main.css b/lib/better_errors/templates/main.css
@@ -373,7 +373,7 @@ ul.frames .icon.application:before {
  * Monospace
  * --------------------------------------------------------------------- */
 
-pre, code, .be-repl input, .be-repl .command-line span, textarea, .code_linenums, .title .name,
+pre, code, .be-repl .command-line input, .be-repl .command-line .prompt, .be-repl .output .command, textarea, .code_linenums, .title .name,
 ul.frames li .method {
   font-family: menlo, lucida console, monospace;
 }
@@ -436,7 +436,6 @@ ul.frames li .method {
 
 .code, .be-console, .unavailable {
   background: #fff;
-  padding: 5px;
 }
 
 .code_linenums{
@@ -506,35 +505,65 @@ p.unavailable:before {
   animation: highlight 400ms linear 1;
 }
 
+h3 {
+  background-color: #38a;
+  color: white;
+  padding: 4px;
+  font-size: 8pt;
+  margin-top: 1rem;
+
+  -webkit-font-smoothing: antialiased;
+}
+
 /* REPL shell */
 .be-console {
-  padding: 0 1px 10px 1px;
-  border-bottom-left-radius: 2px;
-  border-bottom-right-radius: 2px;
 }
 
-.be-console pre {
-  padding: 10px 10px 0 10px;
-  max-height: 400px;
+.be-console .output {
+  max-height: 15rem;
   overflow-x: none;
   overflow-y: auto;
-  margin-bottom: -3px;
+
+  padding: 8px;
+  margin-bottom: 8px;
+  border-bottom: 1px solid #ccc;
+}
+.be-console .output:not(.used) {
+  padding-bottom: 0;
+  border-bottom: 0;
+  margin-bottom: 0;
+}
+@media screen and (min-height: 800px) {
+  .be-console .output {
+    max-height: 25rem;
+  }
+}
+
+.be-console .output pre, .be-console .output h4 {
+  font-size: 9pt;
   word-wrap: break-word;
   white-space: pre-wrap;
+  width: 100%;
+}
+.be-console .output h4 {
+  background-color: #ddd;
+  padding: 5px 0;
+  margin-top: 10px;
 }
 
 /* .command-line > span + input */
 .be-console .command-line {
   display: table;
-  width: 100%;
 }
 
-.be-console .command-line span,
+.be-console .command-line .prompt,
 .be-console .command-line input {
   display: table-cell;
+  line-height: 12px;
+  font-size: 9pt;
 }
 
-.be-console .command-line span {
+.be-console .command-line .prompt {
   width: 1%;
   padding-right: 5px;
   padding-left: 10px;
@@ -563,26 +592,10 @@ p.unavailable:before {
   padding-left: 20px;
 }
 
-.hint:before {
-  content: '\25b2';
-  margin-right: 5px;
-  opacity: 0.5;
-}
-
 /* ---------------------------------------------------------------------
  * Variable infos
  * --------------------------------------------------------------------- */
 
-.variables h3 {
-  background-color: #38a;
-  color: white;
-  padding: 4px;
-  font-size: 8pt;
-  margin-top: 1rem;
-
-  -webkit-font-smoothing: antialiased;
-}
-
 .variables h4 {
   margin-top: 5px;
   padding-left: 5px;
@@ -646,3 +659,34 @@ nav.sidebar:hover::-webkit-scrollbar-thumb {
 .code:hover::-webkit-scrollbar-thumb {
   background: #888;
 }
+
+.bold {
+  font-weight: bold;
+}
+.black {
+  color: black;
+}
+.red {
+  color: red;
+}
+.green {
+  color: green;
+}
+.yellow {
+  color: yellow;
+}
+.blue {
+  color: blue;
+}
+.magenta {
+  color: magenta;
+}
+.cyan {
+  color: cyan;
+}
+.white {
+  color: white;
+}
+.green {
+  color: green;
+}
diff --git a/lib/better_errors/templates/main.erb b/lib/better_errors/templates/main.erb
@@ -130,14 +130,14 @@
 
         this.promptElement  = this.container.querySelector(".command-line .prompt");
         this.inputElement   = this.container.querySelector("input");
-        this.outputElement  = this.container.querySelector("pre");
+        this.outputElement  = this.container.querySelector(".output");
 
         var self = this;
         this.inputElement.onkeydown = function(ev) {
             self.onKeyDown(ev);
         };
 
-        this.setPrompt(">>");
+        this.setPrompt(">");
 
         REPL.all[this.index] = this;
     }
@@ -164,24 +164,28 @@
         }
     };
 
-    REPL.prototype.writeRawOutput = function(output) {
-        this.outputElement.innerHTML += output;
-        this.outputElement.scrollTop = this.outputElement.scrollHeight;
+    REPL.prototype.writeErrorOutput = function(error) {
+      this.writeOutput("<pre class='error'>" + error + "</pre>");
     };
 
-    REPL.prototype.writeOutput = function(output) {
-        this.writeRawOutput(escapeHTML(output));
+    REPL.prototype.writeResultOutput = function(prompt, command, result) {
+        this.writeOutput("<h4 class='command'>" + prompt + " "  + command + "</h4>");
+        this.writeOutput("<pre class='result'>" + result + "</pre>");
+    };
+
+    REPL.prototype.writeOutput = function(content) {
+      this.outputElement.className = "output used";
+      this.outputElement.innerHTML += content;
+      this.outputElement.scrollTop = this.outputElement.scrollHeight;
     };
 
     REPL.prototype.sendInput = function(line) {
         var self = this;
         apiCall("eval", { "index": this.index, source: line }, function(response) {
             if(response.error) {
-                self.writeOutput(response.error + "\n");
+                self.writeErrorOutput(response.error);
             }
-            self.writeOutput(self._prompt + " ");
-            self.writeRawOutput(response.highlighted_input + "\n");
-            self.writeOutput(response.result);
+            self.writeResultOutput(self._prompt, response.highlighted_input, response.result);
             self.setPrompt(response.prompt);
             self.setInput(response.prefilled_input);
         });

diff --git a/lib/better_errors/templates/variable_info.erb b/lib/better_errors/templates/variable_info.erb
@@ -6,23 +6,16 @@
     <div class="code_block clearfix">
         <%== html_formatted_code_block @frame %>
     </div>
-
-    <% if BetterErrors.binding_of_caller_available? && @frame.frame_binding %>
-        <div class="be-repl">
-            <div class="be-console">
-                <pre></pre>
-                <div class="command-line"><span class='prompt'>&gt;&gt;</span> <input tabindex="1"/></div>
-            </div>
-        </div>
-    <% end %>
 </header>
 
 <% if BetterErrors.binding_of_caller_available? && @frame.frame_binding %>
-    <div class="hint">
-        This is a live shell. Type in here.
+    <div class="be-repl">
+        <h3>Console</h3>
+        <div class="be-console">
+            <div class="output"></div>
+            <div class="command-line"><span class='prompt'>&gt;</span> <input tabindex="1"/></div>
+        </div>
     </div>
-
-    <div class="variable_info"></div>
 <% end %>
 
 <% unless BetterErrors.binding_of_caller_available? %>

diff --git a/spec/better_errors/error_page_spec.rb b/spec/better_errors/error_page_spec.rb
@@ -276,7 +276,7 @@ def initialize(message = nil)
             expect(do_eval).to include(
               highlighted_input: /stuff_was_done/,
               prefilled_input: '',
-              prompt: '>>',
+              prompt: '>',
               result: "=> \"response\"\n",
             )
           end
@@ -309,7 +309,7 @@ def initialize(message = nil)
             expect(do_eval).to include(
               highlighted_input: /stuff_was_done/,
               prefilled_input: '',
-              prompt: '>>',
+              prompt: '>',
               result: "=> \"response\"\n",
             )
           end

diff --git a/spec/better_errors/repl/pry_spec.rb b/spec/better_errors/repl/pry_spec.rb
@@ -26,7 +26,7 @@
     it "does line continuation", :aggregate_failures do
       output, prompt, filled = repl.send_input ""
       expect(output).to eq("=> nil\n")
-      expect(prompt).to eq(">>")
+      expect(prompt).to eq(">")
       expect(filled).to eq("")
 
       output, prompt, filled = repl.send_input "def f(x)"
@@ -40,7 +40,7 @@
       else
         expect(output).to eq("=> nil\n")
       end
-      expect(prompt).to eq(">>")
+      expect(prompt).to eq(">")
       expect(filled).to eq("")
     end
 

diff --git a/spec/better_errors/repl/shared_examples.rb b/spec/better_errors/repl/shared_examples.rb
@@ -7,12 +7,12 @@
   it "returns a tuple of output and the new prompt" do
     output, prompt = repl.send_input("1 + 2")
     expect(output).to eq("=> 3\n")
-    expect(prompt).to eq(">>")
+    expect(prompt).to eq(">")
   end
 
   it "doesn't barf if the code throws an exception" do
     output, prompt = repl.send_input("raise Exception")
     expect(output).to include "Exception: Exception"
-    expect(prompt).to eq(">>")
+    expect(prompt).to eq(">")
   end
 end