Experimental support for highlighting that the error location is offs…

…creen, when you mouseover an error message.
brownplt · Apr 15, 2014 · c515f75 · c515f75
1 parent a695405
commit c515f75
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 0 deletions.
diff --git a/img/down-arrow.png b/img/down-arrow.png
diff --git a/img/up-arrow.png b/img/up-arrow.png
diff --git a/src/web/editor.css b/src/web/editor.css
@@ -344,6 +344,34 @@ body {
   font-family: monospace; 
 }
 
+.warning-upper {
+   position: absolute;
+   top: 0;
+   width: 100%;
+   text-align: center;
+   display:none;
+   background: -moz-linear-gradient(top,  rgba(221,44,44,1) 0%, rgba(145,78,78,0) 50%); /* FF3.6+ */
+   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(221,44,44,1)), color-stop(50%,rgba(145,78,78,0))); /* Chrome,Safari4+ */
+   background: -webkit-linear-gradient(top,  rgba(221,44,44,1) 0%,rgba(145,78,78,0) 50%); /* Chrome10+,Safari5.1+ */
+   background: -o-linear-gradient(top,  rgba(221,44,44,1) 0%,rgba(145,78,78,0) 50%); /* Opera 11.10+ */
+   background: -ms-linear-gradient(top,  rgba(221,44,44,1) 0%,rgba(145,78,78,0) 50%); /* IE10+ */
+   background: linear-gradient(to bottom,  rgba(221,44,44,1) 0%,rgba(145,78,78,0) 50%); /* W3C */
+}
+
+.warning-lower {
+   background: -moz-linear-gradient(top,  rgba(145,78,78,0) 50%, rgba(221,44,44,1) 100%); /* FF3.6+ */
+   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(145,78,78,0)), color-stop(100%,rgba(221,44,44,1))); /* Chrome,Safari4+ */
+   background: -webkit-linear-gradient(top,  rgba(145,78,78,0) 50%,rgba(221,44,44,1) 100%); /* Chrome10+,Safari5.1+ */
+   background: -o-linear-gradient(top,  rgba(145,78,78,0) 50%,rgba(221,44,44,1) 100%); /* Opera 11.10+ */
+   background: -ms-linear-gradient(top,  rgba(145,78,78,0) 50%,rgba(221,44,44,1) 100%); /* IE10+ */
+   background: linear-gradient(to bottom,  rgba(145,78,78,0) 50%,rgba(221,44,44,1) 100%); /* W3C */
+   position: absolute;
+   bottom: 0;
+   width: 100%;
+   text-align: center;
+   display:none;
+}
+
 .topbar {
   position: fixed;
   width: 100%;

diff --git a/src/web/error-ui.js b/src/web/error-ui.js
@@ -67,17 +67,34 @@ define(["js/ffi-helpers", "trove/srcloc", "trove/error", "compiler/compile-struc
         // CLICK to *cycle* through locations
         var marks = [];
         elt.on("mouseenter", function() {
+          var curLoc = locs[locIndex];
+          var view = editor.getScrollInfo();
+          cases(get(srcloc, "Srcloc"), "Srcloc", curLoc, {
+            "builtin": function(_) { },
+            "srcloc": function(source, startL, startC, startCh, endL, endC, endCh) {
+              var charCh = editor.charCoords(cmPosFromSrcloc(curLoc).start, "local");
+              if (view.top > charCh.top) {
+                jQuery(".warning-upper").fadeIn("fast");
+              } else if (view.top + view.clientHeight < charCh.bottom) {
+                jQuery(".warning-lower").fadeIn("fast");
+              }
+            }
+          });
           mapK(locs, highlightSrcloc, function(ms) {
             marks = marks.concat(ms);
           });
         });
         elt.on("mouseleave", function() {
+          jQuery(".warning-upper").fadeOut("fast");
+          jQuery(".warning-lower").fadeOut("fast");
           marks.forEach(function(m) { return m && m.clear(); })
           marks = [];
         });
         var locIndex = 0;
         if (locs.filter(function(e) { return runtime.isObject(e) && get(srcloc, "is-srcloc").app(e); }).length > 0) {
           elt.on("click", function() {
+            jQuery(".warning-upper").fadeOut("fast");
+            jQuery(".warning-lower").fadeOut("fast");
             function gotoNextLoc() {
               var curLoc = locs[locIndex];
               function rotateLoc() { locIndex = (locIndex + 1) % locs.length; }

diff --git a/src/web/repl-ui.js b/src/web/repl-ui.js
@@ -53,6 +53,18 @@ define(["trove/image-lib", "./check-ui", "./error-ui", "./output-ui"], function(
 
     var CM = CodeMirror.fromTextArea(textarea[0], cmOptions);
 
+
+    if (useLineNumbers) {
+      var upperWarning = jQuery("<div>").addClass("warning-upper");
+      var upperArrow = jQuery("<img>").addClass("warning-upper-arrow").attr("src", "./../../img/up-arrow.png");
+      upperWarning.append(upperArrow);
+      CM.display.wrapper.appendChild(upperWarning.get(0));
+      var lowerWarning = jQuery("<div>").addClass("warning-lower");
+      var lowerArrow = jQuery("<img>").addClass("warning-lower-arrow").attr("src", "./../../img/down-arrow.png");
+      lowerWarning.append(lowerArrow);
+      CM.display.wrapper.appendChild(lowerWarning.get(0));
+    }
+
     if(options.runButton) {
       options.runButton.on("click", function() {
         runFun(CM.getValue(), {check: true});