Playground: hightlight line of sidebar inspector on hover

crystal-lang · Mar 31, 2016 · fea2915 · fea2915
1 parent ddd9105
commit fea2915
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/src/compiler/crystal/tools/playground/public/application.css b/src/compiler/crystal/tools/playground/public/application.css
@@ -110,6 +110,10 @@ h4 {
   width: 29px;
 }
 
+.CodeMirror .inspector-hover {
+  background-color: #eee;
+}
+
 .card-plain {
   background: transparent;
   box-shadow: none;

diff --git a/src/compiler/crystal/tools/playground/public/session.js b/src/compiler/crystal/tools/playground/public/session.js
@@ -168,6 +168,13 @@ Playground.Inspector = function(session, line) {
       .css("cursor", "pointer");
   session.sidebarDom.append(this.lineDom);
 
+  var INSPECTOR_HOVER_CLASS = "inspector-hover";
+  this.lineDom.hover(function(){
+    session.editor.addLineClass(line-1, "wrap", INSPECTOR_HOVER_CLASS);
+  }.bind(this), function(){
+    session.editor.removeLineClass(line-1, "wrap", INSPECTOR_HOVER_CLASS);
+  }.bind(this));
+
   this.messages = [];
   this.value_type = null; // null if mismatch. keep value if always the same.