Bug 1558248 - Don't clear the completion text when it starts with the typed letters. r=fvsch.

We were clearing the completion text all the time to prevent
a visual glitch while typing (See Bug 1491776). But since we
are now waiting for 75ms before calling the autocomplete
function (which triggers the autocompletion text update), we
have a flash of the completion text, which isn't ideal.
In this patch, we check if the typed letters match the begining
of the completion text, and if they do, we don't clear the
completion text.
In the same time, we set the completion text in absolute position
so it doesn't jump when the new letter is added in the CodeMirror
document.
Finally, we change how the Editor pipe events from CodeMirror to
include parameters, so we can use them in JsTerm.

Differential Revision: https://phabricator.services.mozilla.com/D36163

--HG--
extra : moz-landing-system : lando

devtools/client/shared/sourceeditor/editor.js

@@ -429,7 +429,7 @@ Editor.prototype = {
       "scroll",
     ];
     for (const eventName of pipedEvents) {
-      cm.on(eventName, () => this.emit(eventName));
+      cm.on(eventName, (...args) => this.emit(eventName, ...args));
     }
 
     cm.on("change", () => {

devtools/client/themes/webconsole.css

@@ -541,6 +541,14 @@ textarea.jsterm-input-node:focus {
 .jsterm-cm .cm-auto-complete-shadow-text::after {
   content: attr(title);
   color: var(--theme-comment);
+  /* This is important for the completion text not to move while the user is typing */
+  /* See Bugs 1491776 & 1558248 */
+  position: absolute;
+}
+
+.jsterm-cm .CodeMirror-hscrollbar {
+  /* We never want to see the horizontal scrollbar */
+  display: none !important;
 }
 
 /* Security styles */

devtools/client/webconsole/components/Input/JSTerm.js

@@ -905,10 +905,22 @@ class JSTerm extends Component {
    * Even handler for the "beforeChange" event fired by codeMirror. This event is fired
    * when codeMirror is about to make a change to its DOM representation.
    */
-  _onBeforeChange() {
-    // clear the completionText before the change is done to prevent a visual glitch.
-    // See Bug 1491776.
-    this.setAutoCompletionText("");
+  _onBeforeChange(cm, change) {
+    // If the user did not type a character that matches the completion text, then we
+    // clear it before the change is done to prevent a visual glitch.
+    // See Bugs 1491776 & 1558248.
+    const { from, to, origin, text } = change;
+    const completionText = this.getAutoCompletionText();
+
+    const addedCharacterMatchCompletion =
+      from.line === to.line &&
+      from.ch === to.ch &&
+      origin === "+input" &&
+      completionText.startsWith(text.join(""));
+
+    if (!completionText || change.canceled || !addedCharacterMatchCompletion) {
+      this.setAutoCompletionText("");
+    }
   }
 
   /**