Show binding changes (#263)

* fix typo * fix some grammar on README * removed extra selected class insertion, add new notification component * refactor notification to be above the last prompt * re-arranged some code and renamed binding to context * remove console-notifications * refactor writeOutput and writeError to same function with type, add write(notification) * fix new Error * refactored code again * removed unused findLastChild function * small cosmetic changes
rails · Jun 11, 2018 · 9758124 · 9758124
1 parent dbe0996
commit 9758124
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 10 deletions.
diff --git a/lib/web_console/templates/console.js.erb b/lib/web_console/templates/console.js.erb
@@ -603,6 +603,12 @@ REPLConsole.prototype.writeError = function(output) {
   return consoleMessage;
 };
 
+REPLConsole.prototype.writeNotification = function(output) {
+  var consoleMessage = this.writeOutput(output);
+  addClass(consoleMessage, "notification-message");
+  return consoleMessage;
+};
+
 REPLConsole.prototype.onEnterKey = function() {
   var input = this._input;
 
@@ -864,11 +870,16 @@ REPLConsole.prototype.scrollToBottom = function() {
   this.outer.scrollTop = this.outer.scrollHeight;
 };
 
-// Change the binding of the console
+// Change the binding of the console.
 REPLConsole.prototype.switchBindingTo = function(frameId, callback) {
   var url = this.getSessionUrl('trace');
   var params = "frame_id=" + encodeURIComponent(frameId);
-  postRequest(url, params, callback);
+
+  var _this = this;
+  postRequest(url, params, function() {
+    var text = "Context has changed to: " + callback();
+    _this.writeNotification(text);
+  });
 };
 
 /**

diff --git a/lib/web_console/templates/error_page.js.erb b/lib/web_console/templates/error_page.js.erb
@@ -11,19 +11,17 @@ for (var i = 0; i < traceFrames.length; i++) {
 
     // Change the binding of the console.
     changeBinding(frameId, function() {
-      if (selectedFrame) {
-        selectedFrame.className = selectedFrame.className.replace("selected", "");
-      }
-
-      target.className += " selected";
+      // Rails already handles toggling the select class
       selectedFrame = target;
+      return target.innerHTML;
     });
 
     // Change the extracted source code
     changeSourceExtract(frameId);
   });
 }
 
+// Change the binding of the current session and prompt the user.
 function changeBinding(frameId, callback) {
   REPLConsole.currentSession.switchBindingTo(frameId, callback);
 }

diff --git a/lib/web_console/templates/style.css.erb b/lib/web_console/templates/style.css.erb
@@ -10,7 +10,8 @@
 .console .console-inner { font-family: monospace; font-size: 11px; width: 100%; height: 100%; overflow: none; background: #333; }
 .console .console-prompt-box { color: #FFF; }
 .console .console-message { color: #1AD027; margin: 0; border: 0; white-space: pre-wrap; background-color: #333; padding: 0; }
-.console .console-message.error-message { color: #fc9; }
+.console .console-message.error-message { color: #FC9; }
+.console .console-message.notification-message { color: #99F; }
 .console .console-message.auto-complete { word-break: break-all; }
 .console .console-message.auto-complete .keyword { margin-right: 11px; }
 .console .console-message.auto-complete .keyword.selected { background: #FFF; color: #000; }
@@ -21,8 +22,8 @@
 .console .resizer { background: #333; width: 100%; height: 4px; cursor: ns-resize; }
 .console .console-actions { padding-right: 3px; }
 .console .console-actions .button { float: left; }
-.console .button { cursor: pointer; border-radius: 1px; font-family: monospace; font-size: 13px; width: 14px; height: 14px; line-height: 14px; text-align: center; color: #ccc; }
-.console .button:hover { background: #666; color: #fff; }
+.console .button { cursor: pointer; border-radius: 1px; font-family: monospace; font-size: 13px; width: 14px; height: 14px; line-height: 14px; text-align: center; color: #CCC; }
+.console .button:hover { background: #666; color: #FFF; }
 .console .button.close-button:hover { background: #966; }
 .console .clipboard { height: 0px; padding: 0px; margin: 0px; width: 0px; margin-left: -1000px; }
 .console .console-prompt-label { display: inline; color: #FFF; background: none repeat scroll 0% 0% #333; border: 0; padding: 0; }