gecko-dev/browser/devtools/sourceeditor/codemirror

This is the CodeMirror editor packaged for the Mozilla Project. CodeMirror
is a JavaScript component that provides a code editor in the browser. When
a mode is available for the language you are coding in, it will color your
code, and optionally help with indentation.

# Upgrade

Currently used version is 3.20. To upgrade, download a new version of
CodeMirror from the project's page [1] and replace all JavaScript and
CSS files inside the codemirror directory [2].

To confirm the functionality run mochitests for the following components:

 * sourceeditor
 * scratchpad
 * debugger
 * styleditor
 * netmonitor

The sourceeditor component contains imported CodeMirror tests [3].

 * Some tests were commented out because we don't use that functionality
   within Firefox (for example Ruby editing mode). Be careful when updating
   files test/codemirror.html and test/vimemacs.html; they were modified to
   co-exist with Mozilla's testing infrastructure. Basically, vimemacs.html
   is a copy of codemirror.html but only with VIM and Emacs mode tests
   enabled.
 * In cm_comment_test.js comment out fallbackToBlock and fallbackToLine
   tests.
 * The search addon (search.js) was slightly modified to make search
   UI localizable (see patch below).

Other than that, we don't have any Mozilla-specific patches applied to
CodeMirror itself.

# Addons

To install a new CodeMirror addon add it to the codemirror directory,
jar.mn [4] file and editor.js [5]. Also, add it to the License section
below.

# License

The following files in this directory are licensed according to the contents
in the LICENSE file:

 * codemirror.css
 * codemirror.js
 * comment.js
 * activeline.js
 * dialog/dialog.css
 * dialog/dialog.js
 * keymap/emacs.js
 * keymap/vim.js
 * fold/foldcode.js
 * fold/brace-fold.js
 * fold/comment-fold.js
 * fold/xml-fold.js
 * fold/foldgutter.js
 * xml.js
 * css.js
 * javascript.js
 * clike.js
 * htmlmixed.js
 * matchbrackets.js
 * closebrackets.js
 * trailingspace.js
 * search/match-highlighter.js
 * search/search.js
 * search/searchcursor.js
 * test/codemirror.html
 * test/cm_comment_test.js
 * test/cm_driver.js
 * test/cm_mode_javascript_test.js
 * test/cm_mode_test.css
 * test/cm_mode_test.js
 * test/cm_vim_test.js
 * test/cm_emacs_test.js
 * test/cm_test.js

# Localization patches

diff --git a/browser/devtools/sourceeditor/codemirror/search/search.js b/browser/devtools/sourceeditor/codemirror/sea
index 049f72f..df4d95e 100644
--- a/browser/devtools/sourceeditor/codemirror/search/search.js
+++ b/browser/devtools/sourceeditor/codemirror/search/search.js
@@ -58,9 +58,22 @@
     var isRE = query.match(/^\/(.*)\/([a-z]*)$/);
     return isRE ? new RegExp(isRE[1], isRE[2].indexOf("i") == -1 ? "" : "i") : query;
   }
-  var queryDialog =
-    'Search: <input type="text" style="width: 10em"/> <span style="color: #888">(Use /re/ syntax for regexp search)<
+  var queryDialog;
   function doSearch(cm, rev) {
+    if (!queryDialog) {
+      let doc = cm.getWrapperElement().ownerDocument;
+      let inp = doc.createElement("input");
+      let txt = doc.createTextNode(cm.l10n("findCmd.promptMessage"));
+
+      inp.type = "text";
+      inp.style.width = "10em";
+      inp.style.MozMarginStart = "1em";
+
+      queryDialog = doc.createElement("div");
+      queryDialog.appendChild(txt);
+      queryDialog.appendChild(inp);
+    }
+
     var state = getSearchState(cm);
     if (state.query) return findNext(cm, rev);
     dialog(cm, queryDialog, "Search for:", cm.getSelection(), function(query) {

# Footnotes

[1] http://codemirror.net
[2] browser/devtools/sourceeditor/codemirror
[3] browser/devtools/sourceeditor/test/browser_codemirror.js
[4] browser/devtools/jar.mn
[5] browser/devtools/sourceeditor/editor.js