--- a/devtools/client/sourceeditor/editor.js
+++ b/devtools/client/sourceeditor/editor.js
@@ -1267,16 +1267,32 @@ Editor.prototype = {
 
     if (this.config.autocomplete && Services.prefs.getBoolPref(AUTOCOMPLETE)) {
       this.initializeAutoCompletion(this.config.autocompleteOpts);
     } else {
       this.destroyAutoCompletion();
     }
   },
 
+  setAutoCompletionText: function(text) {
+    const cursor = this.getCursor();
+    const cm = editors.get(this);
+    const className = "cm-auto-complete-shadow-text";
+
+    cm.getAllMarks().forEach(mark => {
+      if (mark.className === className) {
+        mark.clear();
+      }
+    });
+
+    if (text) {
+      cm.markText({...cursor, ch: cursor.ch - 1}, cursor, { className, title: text });
+    }
+  },
+
   /**
    * Extends an instance of the Editor object with additional
    * functions. Each function will be called with context as
    * the first argument. Context is a {ed, cm} object where
    * 'ed' is an instance of the Editor object and 'cm' is an
    * instance of the CodeMirror object. Example:
    *
    * function hello(ctx, name) {

--- a/devtools/client/themes/webconsole.css
+++ b/devtools/client/themes/webconsole.css
@@ -377,16 +377,21 @@ textarea.jsterm-input-node:focus {
   border-radius: 0 0 4px 4px;
 }
 
 /* Unset the bottom right radius on the jsterm inputs when the sidebar is visible */
 :root[platform="mac"]  .jsterm-cm .sidebar ~ .jsterm-input-container > .CodeMirror {
   border-bottom-right-radius: 0;
 }
 
+.jsterm-cm .cm-auto-complete-shadow-text::after {
+  content: attr(title);
+  color: var(--theme-comment);
+}
+
 /* Security styles */
 
 .message.security > .indent {
   border-inline-end: solid red 6px;
 }
 
 .message.security.error > .icon::before {
   background-position: -12px -48px;