web-console 2.3.0 → 4.2.0

data/lib/web_console/templates/console.js.erb

@@ -44,13 +44,221 @@ function CommandStorage() {
   }
 }
 
+function Autocomplete(_words, prefix) {
+  this.words = prepareWords(_words);
+  this.current = -1;
+  this.left = 0; // [left, right)
+  this.right = this.words.length;
+  this.confirmed = false;
+
+  function createSpan(label, className) {
+    var el = document.createElement('span');
+    addClass(el, className);
+    el.innerText = label;
+    return el;
+  }
+
+  function prepareWords(words) {
+    // convert into an object with priority and element
+    var res = new Array(words.length);
+    for (var i = 0, ind = 0; i < words.length; ++i) {
+      res[i] = new Array(words[i].length);
+      for (var j = 0; j < words[i].length; ++j) {
+        res[i][j] = {
+          word: words[i][j],
+          priority: i,
+          element: createSpan(words[i][j], 'trimmed keyword')
+        };
+      }
+    }
+    // flatten and sort by alphabetical order to refine incrementally
+    res = flatten(res);
+    res.sort(function(a, b) { return a.word == b.word ? 0 : (a.word < b.word ? -1 : 1); });
+    for (var i = 0; i < res.length; ++i) res[i].element.dataset.index = i;
+    return res;
+  }
+
+  this.view = document.createElement('pre');
+  addClass(this.view, 'auto-complete console-message');
+  this.view.appendChild(this.prefix = createSpan('...', 'trimmed keyword'));
+  this.view.appendChild(this.stage = document.createElement('span'));
+  this.elements = this.stage.children;
+  this.view.appendChild(this.suffix = createSpan('...', 'trimmed keyword'));
+
+  this.refine(prefix || '');
+}
+
+Autocomplete.prototype.getSelectedWord = function() {
+  return this.lastSelected && this.lastSelected.innerText;
+};
+
+Autocomplete.prototype.onFinished = function(callback) {
+  this.onFinishedCallback = callback;
+  if (this.confirmed) callback(this.confirmed);
+};
+
+Autocomplete.prototype.onKeyDown = function(ev) {
+  var self = this;
+  if (!this.elements.length) return;
+
+  function move(nextCurrent) {
+    if (self.lastSelected) removeClass(self.lastSelected, 'selected');
+    addClass(self.lastSelected = self.elements[nextCurrent], 'selected');
+    self.trim(self.current, true);
+    self.trim(nextCurrent, false);
+    self.current = nextCurrent;
+  }
+
+  switch (ev.keyCode) {
+    case 69:
+      if (ev.ctrlKey) {
+        move(this.current + 1 >= this.elements.length ? 0 : this.current + 1);
+        return true;
+      }
+      return false;
+    case 9: // Tab
+      if (ev.shiftKey) { // move back
+        move(this.current - 1 < 0 ? this.elements.length - 1 : this.current - 1);
+      } else { // move next
+        move(this.current + 1 >= this.elements.length ? 0 : this.current + 1);
+      }
+      return true;
+    case 13: // Enter
+      this.finish();
+      return true;
+    case 27: // Esc
+      this.cancel();
+      return true;
+    case 37: case 38: case 39: case 40: // disable using arrow keys on completing
+      return true;
+  }
+
+  return false;
+};
+
+Autocomplete.prototype.trim = function(from, needToTrim) {
+  var self = this;
+  var num = 5;
+
+  if (this.elements.length > num) {
+    (0 < from ? removeClass : addClass)(this.prefix, 'trimmed');
+    (from + num < this.elements.length ? removeClass : addClass)(this.suffix, 'trimmed');
+  } else {
+    addClass(this.prefix, 'trimmed');
+    addClass(this.suffix, 'trimmed');
+  }
+
+  function iterate(x) {
+    for (var i = 0; i < num; ++i, ++x) if (0 <= x && x < self.elements.length) {
+      toggleClass(self.elements[x], 'trimmed');
+    }
+  }
+
+  var toggleClass = needToTrim ? addClass : removeClass;
+  if (from < 0) {
+    iterate(0);
+  } else if (from + num - 1 >= this.elements.length) {
+    iterate(this.elements.length - num);
+  } else {
+    iterate(from);
+  }
+};
+
+Autocomplete.prototype.refine = function(prefix) {
+  if (this.confirmed) return;
+  var inc = !this.prev || (prefix.length >= this.prev.length);
+  this.prev = prefix;
+  var self = this;
+
+  function remove(parent, child) {
+    if (parent == child.parentNode) parent.removeChild(child);
+  }
+
+  function toggle(el) {
+    return inc ? remove(self.stage, el) : self.stage.appendChild(el);
+  }
+
+  function startsWith(str, prefix) {
+    return !prefix || str.substr(0, prefix.length) === prefix;
+  }
+
+  function moveRight(l, r) {
+    while (l < r && inc !== startsWith(self.words[l].word, prefix)) toggle(self.words[l++].element);
+    return l;
+  }
+
+  function moveLeft(l, r) {
+    while (l < r - 1 && inc !== startsWith(self.words[r-1].word, prefix)) toggle(self.words[--r].element);
+    return r;
+  }
+
+  self.trim(self.current, true); // reset trimming
+
+  // Refine the range of words having same prefix
+  if (inc) {
+    self.left = moveRight(self.left, self.right);
+    self.right = moveLeft(self.left, self.right);
+  } else {
+    self.left = moveLeft(-1, self.left);
+    self.right = moveRight(self.right, self.words.length);
+  }
+
+  // Render elements with sorting by scope groups
+  var words = this.words.slice(this.left, this.right);
+  words.sort(function(a, b) { return a.priority == b.priority ? (a.word < b.word ? -1 : 1) : (a.priority < b.priority ? -1 : 1); });
+  removeAllChildren(this.elements);
+  for (var i = 0; i < words.length; ++i) {
+    this.stage.appendChild(words[i].element);
+  }
+
+  // Keep a previous selected element if the refined range includes the element
+  if (this.lastSelected && this.left <= this.lastSelected.dataset.index && this.lastSelected.dataset.index < this.right) {
+    this.current = Array.prototype.indexOf.call(this.elements, this.lastSelected);
+    this.trim(this.current, false);
+  } else {
+    if (this.lastSelected) removeClass(this.lastSelected, 'selected');
+    this.lastSelected = null;
+    this.current = -1;
+    this.trim(0, false);
+  }
+
+  if (self.left + 1 == self.right) {
+    self.current = 0;
+    self.finish();
+  } else if (self.left == self.right) {
+    self.cancel();
+  }
+};
+
+Autocomplete.prototype.finish = function() {
+  if (0 <= this.current && this.current < this.elements.length) {
+    this.confirmed = this.elements[this.current].innerText;
+    if (this.onFinishedCallback) this.onFinishedCallback(this.confirmed);
+    this.removeView();
+  } else {
+    this.cancel();
+  }
+};
+
+Autocomplete.prototype.cancel = function() {
+  if (this.onFinishedCallback) this.onFinishedCallback();
+  this.removeView();
+};
+
+Autocomplete.prototype.removeView = function() {
+  if (this.view.parentNode) this.view.parentNode.removeChild(this.view);
+  removeAllChildren(this.view);
+}
+
 // HTML strings for dynamic elements.
-var consoleInnerHtml = <%= render_inlined_string '_inner_console_markup.html' %>;
-var promptBoxHtml = <%= render_inlined_string '_prompt_box_markup.html' %>;
+var consoleInnerHtml = <%= render_inlined_string '_inner_console_markup' %>;
+var promptBoxHtml = <%= render_inlined_string '_prompt_box_markup' %>;
 // CSS
-var consoleStyleCss = <%= render_inlined_string 'style.css' %>;
+var consoleStyleCss = <%= render_inlined_string 'style' %>;
 // Insert a style element with the unique ID
 var styleElementId = 'sr02459pvbvrmhco';
+// Nonce to use for CSP
+var styleElementNonce = '<%= @nonce %>';
 
 // REPLConsole Constructor
 function REPLConsole(config) {
@@ -62,6 +270,7 @@ function REPLConsole(config) {
   this.prompt = getConfig('promptLabel', ' >>');
   this.mountPoint = getConfig('mountPoint');
   this.sessionId = getConfig('sessionId');
+  this.autocomplete = false;
 }
 
 REPLConsole.prototype.getSessionUrl = function(path) {
@@ -73,6 +282,16 @@ REPLConsole.prototype.getSessionUrl = function(path) {
   return parts.join('/').replace(/([^:]\/)\/+/g, '$1');
 };
 
+REPLConsole.prototype.contextRequest = function(keyword, callback) {
+  putRequest(this.getSessionUrl(), 'context=' + getContext(keyword), function(xhr) {
+    if (xhr.status == 200) {
+      callback(null, JSON.parse(xhr.responseText));
+    } else {
+      callback(xhr.statusText);
+    }
+  });
+};
+
 REPLConsole.prototype.commandHandle = function(line, callback) {
   var self = this;
   var params = 'input=' + encodeURIComponent(line);
@@ -92,7 +311,7 @@ REPLConsole.prototype.commandHandle = function(line, callback) {
 
   function getErrorText(xhr) {
     if (!xhr.status) {
-      return "<%= t 'errors.connection_refused' %>";
+      return "Connection Refused";
     } else {
       return xhr.status + ' ' + xhr.statusText;
     }
@@ -163,8 +382,13 @@ REPLConsole.prototype.install = function(container) {
     var clientHeightStart   = consoleOuter.clientHeight;
 
     var doDrag = function(e) {
-      container.style.height = (startHeight + startY - e.clientY) + 'px';
+      var height = startHeight + startY - e.clientY;
       consoleOuter.scrollTop = scrollTopStart + (clientHeightStart - consoleOuter.clientHeight);
+      if (height > document.documentElement.clientHeight) {
+        container.style.height = document.documentElement.clientHeight;
+      } else {
+        container.style.height = height + 'px';
+      }
       shiftConsoleActions();
     };
 
@@ -194,17 +418,26 @@ REPLConsole.prototype.install = function(container) {
     }
   }
 
+  var observer = new MutationObserver(function(mutationsList) {
+    for (let mutation of mutationsList) {
+      if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
+        shiftConsoleActions();
+      }
+    }
+  });
+
   // Initialize
   this.container = container;
   this.outer = consoleOuter;
   this.inner = findChild(this.outer, 'console-inner');
   this.clipboard = findChild(container, 'clipboard');
+  this.suggestWait = 1500;
   this.newPromptBox();
   this.insertCss();
 
   findChild(container, 'resizer').addEventListener('mousedown', resizeContainer);
   findChild(consoleActions, 'close-button').addEventListener('click', closeContainer);
-  consoleOuter.addEventListener('DOMNodeInserted', shiftConsoleActions);
+  observer.observe(consoleOuter, { childList: true, subtree: true });
 
   REPLConsole.currentSession = this;
 };
@@ -218,6 +451,9 @@ REPLConsole.prototype.insertCss = function() {
   style.type = 'text/css';
   style.innerHTML = consoleStyleCss;
   style.id = styleElementId;
+  if (styleElementNonce.length > 0) {
+    style.nonce = styleElementNonce;
+  }
   document.getElementsByTagName('head')[0].appendChild(style);
 };
 
@@ -267,10 +503,63 @@ REPLConsole.prototype.removeCaretFromPrompt = function() {
   this.setInput(this._input, -1);
 };
 
+REPLConsole.prototype.getSuggestion = function(keyword) {
+  var self = this;
+
+  function show(found) {
+    if (!found) return;
+    var hint = self.promptDisplay.childNodes[1];
+    hint.className = 'console-hint';
+    hint.dataset.keyword = found;
+    hint.innerText = found.substr(self.suggestKeyword.length);
+    // clear hinting information after timeout in a few time
+    if (self.suggestTimeout) clearTimeout(self.suggestTimeout);
+    self.suggestTimeout = setTimeout(function() { self.renderInput() }, self.suggestWait);
+  }
+
+  function find(context) {
+    var k = self.suggestKeyword;
+    for (var i = 0; i < context.length; ++i) if (context[i].substr(0, k.length) === k) {
+      if (context[i] === k) return;
+      return context[i];
+    }
+  }
+
+  function request(keyword, callback) {
+    self.contextRequest(keyword, function(err, res) {
+      if (err) throw new Error(err);
+      var c = flatten(res['context']);
+      c.sort();
+      callback(c);
+    });
+  }
+
+  self.suggestKeyword = keyword;
+  var input = getContext(keyword);
+  if (keyword.length - input.length < 3) return;
+
+  if (self.suggestInput !== input) {
+    self.suggestInput = input;
+    request(keyword, function(c) {
+      show(find(self.suggestContext = c));
+    });
+  } else if (self.suggestContext) {
+    show(find(self.suggestContext));
+  }
+};
+
+REPLConsole.prototype.getHintKeyword = function() {
+  var hint = this.promptDisplay.childNodes[1];
+  return hint.className === 'console-hint' && hint.dataset.keyword;
+};
+
 REPLConsole.prototype.setInput = function(input, caretPos) {
+  if (input == null) return; // keep value if input is undefined
   this._caretPos = caretPos === undefined ? input.length : caretPos;
   this._input = input;
+  if (this.autocomplete) this.autocomplete.refine(this.getCurrentWord());
   this.renderInput();
+  if (!this.autocomplete && input.length == this._caretPos) this.getSuggestion(this.getCurrentWord());
 };
 
 /**
@@ -292,9 +581,8 @@ REPLConsole.prototype.renderInput = function() {
   // Clear the current input.
   removeAllChildren(this.promptDisplay);
 
-  var promptCursor = document.createElement('span');
-  promptCursor.className = "console-cursor";
   var before, current, after;
+  var center = document.createElement('span');
 
   if (this._caretPos < 0) {
     before = this._input;
@@ -310,9 +598,12 @@ REPLConsole.prototype.renderInput = function() {
   }
 
   this.promptDisplay.appendChild(document.createTextNode(before));
-  promptCursor.appendChild(document.createTextNode(current));
-  this.promptDisplay.appendChild(promptCursor);
+  this.promptDisplay.appendChild(center);
   this.promptDisplay.appendChild(document.createTextNode(after));
+
+  var hint = this.autocomplete && this.autocomplete.getSelectedWord();
+  addClass(center, hint ? 'console-hint' : 'console-cursor');
+  center.appendChild(document.createTextNode(hint ? hint.substr(this.getCurrentWord().length) : current));
 };
 
 REPLConsole.prototype.writeOutput = function(output) {
@@ -330,6 +621,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;
 
@@ -340,6 +637,30 @@ REPLConsole.prototype.onEnterKey = function() {
   this.commandHandle(input);
 };
 
+REPLConsole.prototype.onTabKey = function() {
+  var self = this;
+
+  var hintKeyword;
+  if (hintKeyword = self.getHintKeyword()) {
+    self.swapCurrentWord(hintKeyword);
+    return;
+  }
+
+  if (self.autocomplete) return;
+  self.autocomplete = new Autocomplete([]);
+
+  self.contextRequest(self.getCurrentWord(), function(err, obj) {
+    if (err) return self.autocomplete = false;
+    self.autocomplete = new Autocomplete(obj['context'], self.getCurrentWord());
+    self.inner.appendChild(self.autocomplete.view);
+    self.autocomplete.onFinished(function(word) {
+      self.swapCurrentWord(word);
+      self.autocomplete = false;
+    });
+    self.scrollToBottom();
+  });
+};
+
 REPLConsole.prototype.onNavigateHistory = function(offset) {
   var command = this.commandStorage.navigate(offset) || "";
   this.setInput(command);
@@ -349,54 +670,102 @@ REPLConsole.prototype.onNavigateHistory = function(offset) {
  * Handle control keys like up, down, left, right.
  */
 REPLConsole.prototype.onKeyDown = function(ev) {
+  if (this.autocomplete && this.autocomplete.onKeyDown(ev)) {
+    this.renderInput();
+    ev.preventDefault();
+    ev.stopPropagation();
+    return;
+  }
+
   switch (ev.keyCode) {
-    case 13:
-      // Enter key
+    case 65: // Ctrl-A
+      if (ev.ctrlKey) {
+        this.setInput(this._input, 0);
+        ev.preventDefault();
+      }
+      break;
+
+    case 69: // Ctrl-E
+      if (ev.ctrlKey) {
+        this.onTabKey();
+        ev.preventDefault();
+      }
+      break;
+
+    case 87: // Ctrl-W
+      if (ev.ctrlKey) {
+        this.deleteWord();
+        ev.preventDefault();
+      }
+      break;
+
+    case 85: // Ctrl-U
+      if (ev.ctrlKey) {
+        this.deleteLine();
+        ev.preventDefault();
+      }
+      break;
+
+    case 69: // Ctrl-E
+      if (ev.ctrlKey) {
+        this.onTabKey();
+        ev.preventDefault();
+      }
+      break;
+
+    case 80: // Ctrl-P
+      if (! ev.ctrlKey) break;
+
+    case 78: // Ctrl-N
+      if (! ev.ctrlKey) break;
+
+    case 9: // Tab
+      this.onTabKey();
+      ev.preventDefault();
+      break;
+
+    case 13: // Enter key
       this.onEnterKey();
       ev.preventDefault();
       break;
-    case 80:
-      // Ctrl-P
-      if (! ev.ctrlKey) break;
-    case 38:
-      // Up arrow
+
+    case 38: // Up arrow
       this.onNavigateHistory(-1);
       ev.preventDefault();
       break;
-    case 78:
-      // Ctrl-N
-      if (! ev.ctrlKey) break;
-    case 40:
-      // Down arrow
+
+    case 40: // Down arrow
       this.onNavigateHistory(1);
       ev.preventDefault();
       break;
-    case 37:
-      // Left arrow
+
+    case 37: // Left arrow
       var caretPos = this._caretPos > 0 ? this._caretPos - 1 : this._caretPos;
       this.setInput(this._input, caretPos);
       ev.preventDefault();
       break;
-    case 39:
-      // Right arrow
+
+    case 39: // Right arrow
       var length = this._input.length;
       var caretPos = this._caretPos < length ? this._caretPos + 1 : this._caretPos;
       this.setInput(this._input, caretPos);
       ev.preventDefault();
       break;
-    case 8:
-      // Delete
+
+    case 8: // Delete
       this.deleteAtCurrent();
       ev.preventDefault();
       break;
+
     default:
       break;
   }
 
   if (ev.ctrlKey || ev.metaKey) {
-    // Set focus to our clipboard in case they hit the "v" key
-    this.clipboard.focus();
     if (ev.keyCode == 86) {
+      // Set focus to our clipboard when they hit the "v" key
+      this.clipboard.focus();
+
       // Pasting to clipboard doesn't happen immediately,
       // so we have to wait for a while to get the pasted text.
       var _this = this;
@@ -404,7 +773,7 @@ REPLConsole.prototype.onKeyDown = function(ev) {
         _this.addToInput(_this.clipboard.value);
         _this.clipboard.value = "";
         _this.clipboard.blur();
-      }, 10);
+      }, 100);
     }
   }
 
@@ -416,7 +785,7 @@ REPLConsole.prototype.onKeyDown = function(ev) {
  */
 REPLConsole.prototype.onKeyPress = function(ev) {
   // Only write to the console if it's a single key press.
-  if (ev.ctrlKey || ev.metaKey) { return; }
+  if (ev.ctrlKey && !ev.altKey || ev.metaKey) { return; }
   var keyCode = ev.keyCode || ev.which;
   this.insertAtCurrent(String.fromCharCode(keyCode));
   ev.stopPropagation();
@@ -432,6 +801,52 @@ REPLConsole.prototype.deleteAtCurrent = function() {
     var before = this._input.substring(0, caretPos);
     var after = this._input.substring(this._caretPos, this._input.length);
     this.setInput(before + after, caretPos);
+
+    if (!this._input) {
+      this.autocomplete && this.autocomplete.cancel();
+      this.autocomplete = false;
+    }
+  }
+};
+
+/**
+ * Deletes the current line.
+ */
+REPLConsole.prototype.deleteLine = function() {
+  if (this._caretPos > 0) {
+    this.setInput("", 0);
+
+    if (!this._input) {
+      this.autocomplete && this.autocomplete.cancel();
+      this.autocomplete = false;
+    }
+  }
+};
+
+/**
+ * Deletes the current word.
+ */
+REPLConsole.prototype.deleteWord = function() {
+  if (this._caretPos > 0) {
+    var i = 1, current = this._caretPos;
+    while (this._input[current - i++] == " ");
+
+    var deleteIndex = 0;
+    for (; current - i > 0; i++) {
+      if (this._input[current - i] == " ") {
+        deleteIndex = current - i;
+        break;
+      }
+    }
+
+    var before = this._input.substring(0, deleteIndex);
+    var after = this._input.substring(current, this._input.length);
+    this.setInput(before + after, deleteIndex);
+
+    if (!this._input) {
+      this.autocomplete && this.autocomplete.cancel();
+      this.autocomplete = false;
+    }
   }
 };
 
@@ -444,15 +859,49 @@ REPLConsole.prototype.insertAtCurrent = function(char) {
   this.setInput(before + char + after, this._caretPos + 1);
 };
 
+REPLConsole.prototype.swapCurrentWord = function(next) {
+  function right(s, pos) {
+    var x = s.indexOf(' ', pos);
+    return x === -1 ? s.length : x;
+  }
+
+  function swap(s, pos) {
+    return s.substr(0, s.lastIndexOf(' ', pos) + 1) + next + s.substr(right(s, pos))
+  }
+
+  if (!next) return;
+  var swapped = swap(this._input, this._caretPos);
+  this.setInput(swapped, this._caretPos + swapped.length - this._input.length);
+};
+
+REPLConsole.prototype.getCurrentWord = function() {
+  return (function(s, pos) {
+    var left = s.lastIndexOf(' ', pos);
+    if (left === -1) left = 0;
+    var right = s.indexOf(' ', pos)
+    if (right === -1) right = s.length - 1;
+    return s.substr(left, right - left + 1).replace(/^\s+|\s+$/g,'');
+  })(this._input, this._caretPos);
+};
+
 REPLConsole.prototype.scrollToBottom = function() {
   this.outer.scrollTop = this.outer.scrollHeight;
 };
 
-// Change the binding of the console
-REPLConsole.prototype.switchBindingTo = function(frameId, callback) {
+// Change the binding of the console.
+REPLConsole.prototype.switchBindingTo = function(frameId, exceptionObjectId, callback) {
   var url = this.getSessionUrl('trace');
   var params = "frame_id=" + encodeURIComponent(frameId);
-  postRequest(url, params, callback);
+
+  if (exceptionObjectId) {
+    params = params + "&exception_object_id=" + encodeURIComponent(exceptionObjectId);
+  }
+
+  var _this = this;
+  postRequest(url, params, function() {
+    var text = "Context has changed to: " + callback();
+    _this.writeNotification(text);
+  });
 };
 
 /**
@@ -488,7 +937,6 @@ REPLConsole.request = function request(method, url, params, callback) {
   xhr.open(method, url, true);
   xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
   xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
-  xhr.setRequestHeader("Accept", "<%= Mime::WEB_CONSOLE_V2 %>");
   xhr.send(params);
 
   xhr.onreadystatechange = function() {
@@ -514,7 +962,7 @@ function addClass(el, className) {
     for (var i = 0; i < el.length; ++ i) {
       addClass(el[i], className);
     }
-  } else {
+  } else if (!hasClass(el, className)) {
     el.className += " " + className;
   }
 }
@@ -562,3 +1010,15 @@ if (typeof exports === 'object') {
 } else {
   window.REPLConsole = REPLConsole;
 }
+
+// Split string by module operators of ruby
+function getContext(s) {
+  var methodOp = s.lastIndexOf('.');
+  var moduleOp = s.lastIndexOf('::');
+  var x = methodOp > moduleOp ? methodOp : moduleOp;
+  return x !== -1 ? s.substr(0, x) : '';
+}
+
+function flatten(arrays) {
+  return Array.prototype.concat.apply([], arrays);
+}