Pretty-print objects in playground inspector (#4601)

crystal-lang · Jan 14, 2018 · c7cc787 · c7cc787
1 parent d7c9551
commit c7cc787
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/spec/compiler/crystal/tools/playground_spec.cr b/spec/compiler/crystal/tools/playground_spec.cr
@@ -47,10 +47,10 @@ describe Playground::Agent do
   it "should send json messages and return inspected value" do
     agent = TestAgent.new(".", 32)
     agent.i(1) { 5 }.should eq(5)
-    agent.last_message.should eq(%({"tag":32,"type":"value","line":1,"value":"5","value_type":"Int32"}))
+    agent.last_message.should eq(%({"tag":32,"type":"value","line":1,"value":"5","html_value":"5","value_type":"Int32"}))
     x, y = 3, 4
     agent.i(1, ["x", "y"]) { {x, y} }.should eq({3, 4})
-    agent.last_message.should eq(%({"tag":32,"type":"value","line":1,"value":"{3, 4}","value_type":"Tuple(Int32, Int32)","data":{"x":"3","y":"4"}}))
+    agent.last_message.should eq(%({"tag":32,"type":"value","line":1,"value":"{3, 4}","html_value":"{3, 4}","value_type":"Tuple(Int32, Int32)","data":{"x":"3","y":"4"}}))
   end
 end
 

diff --git a/src/compiler/crystal/tools/playground/agent.cr b/src/compiler/crystal/tools/playground/agent.cr
@@ -25,6 +25,7 @@ class Crystal::Playground::Agent
     send "value" do |json|
       json.field "line", line
       json.field "value", safe_to_value(value)
+      json.field "html_value", safe_to_html_value(value)
       json.field "value_type", typeof(value).to_s
 
       if names && value.is_a?(Tuple)
@@ -45,10 +46,18 @@ class Crystal::Playground::Agent
     to_value(value) rescue "(error)"
   end
 
+  def safe_to_html_value(value)
+    to_html_value(value) rescue "(error)"
+  end
+
   def to_value(value)
     value.inspect
   end
 
+  def to_html_value(value)
+    HTML.escape(value.pretty_inspect)
+  end
+
   private def send(message_type)
     message = JSON.build do |json|
       json.object do

diff --git a/src/compiler/crystal/tools/playground/public/session.js b/src/compiler/crystal/tools/playground/public/session.js
@@ -190,7 +190,7 @@ Playground.Inspector = function(session, line) {
       row.append($("<td>").text(message.data[labels[j]]));
     }
 
-    row.append($("<td>").text(message.value));
+    row.append($("<td>").html("<pre><code>" + message.html_value + "</code></pre>"));
     row.append($("<td>").text(message.value_type));
     tableBody.append(row);
   }