Bug 1664531 - Adds placeholder text to the CodeMirror instances used to create conditional breakpoints and logpoints r=bomsy

Before this patch the CodeMirror instance used to create Conditional Breakpoints and Logpoints did not have placeholder text.

This patch adds placeholder text to this CodeMirror instance by:

1. Adding the CodeMirror addon responsible for creating placeholder text.
2. Updating `webpack.config.js`.
3. Regenerating `codemirror.bundle.js`.
4. Matching the color of the placholder text in these CodeMirror instances to the color of placeholder text in the rest of the Debugger.

{F2456834}

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

devtools/client/debugger/src/components/Editor/ConditionalPanel.css

@@ -32,3 +32,8 @@
 .conditional-breakpoint-panel .CodeMirror {
   margin: 6px 10px;
 }
+
+.conditional-breakpoint-panel .CodeMirror pre.CodeMirror-placeholder {
+  /* Match the color of the placeholder text to existing inputs in the Debugger */
+  color: var(--theme-text-color-alt);
+}

devtools/client/shared/sourceeditor/codemirror/addon/display/placeholder.js

@@ -0,0 +1,63 @@
+// CodeMirror, copyright (c) by Marijn Haverbeke and others
+// Distributed under an MIT license: https://codemirror.net/LICENSE
+
+(function(mod) {
+  if (typeof exports == "object" && typeof module == "object") // CommonJS
+    mod(require("../../lib/codemirror"));
+  else if (typeof define == "function" && define.amd) // AMD
+    define(["../../lib/codemirror"], mod);
+  else // Plain browser env
+    mod(CodeMirror);
+})(function(CodeMirror) {
+  CodeMirror.defineOption("placeholder", "", function(cm, val, old) {
+    var prev = old && old != CodeMirror.Init;
+    if (val && !prev) {
+      cm.on("blur", onBlur);
+      cm.on("change", onChange);
+      cm.on("swapDoc", onChange);
+      onChange(cm);
+    } else if (!val && prev) {
+      cm.off("blur", onBlur);
+      cm.off("change", onChange);
+      cm.off("swapDoc", onChange);
+      clearPlaceholder(cm);
+      var wrapper = cm.getWrapperElement();
+      wrapper.className = wrapper.className.replace(" CodeMirror-empty", "");
+    }
+
+    if (val && !cm.hasFocus()) onBlur(cm);
+  });
+
+  function clearPlaceholder(cm) {
+    if (cm.state.placeholder) {
+      cm.state.placeholder.parentNode.removeChild(cm.state.placeholder);
+      cm.state.placeholder = null;
+    }
+  }
+  function setPlaceholder(cm) {
+    clearPlaceholder(cm);
+    var elt = cm.state.placeholder = document.createElement("pre");
+    elt.style.cssText = "height: 0; overflow: visible";
+    elt.style.direction = cm.getOption("direction");
+    elt.className = "CodeMirror-placeholder CodeMirror-line-like";
+    var placeHolder = cm.getOption("placeholder")
+    if (typeof placeHolder == "string") placeHolder = document.createTextNode(placeHolder)
+    elt.appendChild(placeHolder)
+    cm.display.lineSpace.insertBefore(elt, cm.display.lineSpace.firstChild);
+  }
+
+  function onBlur(cm) {
+    if (isEmpty(cm)) setPlaceholder(cm);
+  }
+  function onChange(cm) {
+    var wrapper = cm.getWrapperElement(), empty = isEmpty(cm);
+    wrapper.className = wrapper.className.replace(" CodeMirror-empty", "") + (empty ? " CodeMirror-empty" : "");
+
+    if (empty) setPlaceholder(cm);
+    else clearPlaceholder(cm);
+  }
+
+  function isEmpty(cm) {
+    return (cm.lineCount() === 1) && (cm.getLine(0) === "");
+  }
+});

devtools/client/shared/sourceeditor/webpack.config.js

@@ -38,6 +38,7 @@ module.exports = (env, argv) => {
       "./codemirror/addon/fold/xml-fold.js",
       "./codemirror/addon/fold/foldgutter.js",
       "./codemirror/addon/runmode/runmode.js",
+      "./codemirror/addon/display/placeholder.js",
       "./codemirror/lib/codemirror.js",
     ],
     optimization: {