Outline matches (#1091)

* added the search overlay to add the overlays

* add codemirror selection styling, update regexp to replace empty string

* fix lint issues

* use outline instead of border

* add the opaque, so the on same line a outlined together

* add detailed comments

public/js/lib/codemirror-mozilla.css

@@ -125,6 +125,13 @@ selector in floating-scrollbar-light.css across all platforms. */
   background-repeat: repeat-x;
 }
 
+.cm-selecting {
+  background: none;
+  outline-width: 1px;
+  outline-style: solid;
+  outline-color: var(--theme-comment);
+}
+
 /* CodeMirror dialogs styling */
 
 .CodeMirror-dialog {

public/js/utils/source-search.js

@@ -12,6 +12,7 @@
  */
 function SearchState() {
   this.posFrom = this.posTo = this.query = null;
+  this.overlay = null;
 }
 
 /**
@@ -32,6 +33,47 @@ function getSearchCursor(cm, query, pos) {
     typeof query == "string" && query == query.toLowerCase());
 }
 
+/**
+ * This returns a mode object used by CoeMirror's addOverlay function
+ * to parse and style tokens in the file.
+ * The mode object contains a tokenizer function (token) which takes
+ * a character stream as input, advances it past a token, and returns
+ * a style for that token. For more details see
+ * https://codemirror.net/doc/manual.html#modeapi
+ *
+ * @memberof utils/source-search
+ * @static
+ */
+function searchOverlay(query) {
+  // escape special characters
+  query = query.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
+  query = new RegExp(query === "" ? "(?!\s*.*)" : query, "g");
+  return {
+    token: function(stream) {
+      query.lastIndex = stream.pos;
+      let match = query.exec(stream.string);
+      if (match && match.index == stream.pos) {
+        stream.pos += match[0].length || 1;
+        return "selecting";
+      } else if (match) {
+        stream.pos = match.index;
+      } else {
+        stream.skipToEnd();
+      }
+    }
+  };
+}
+
+/**
+ * @memberof utils/source-search
+ * @static
+ */
+function startSearch(cm, state, query) {
+  cm.removeOverlay(state.overlay);
+  state.overlay = searchOverlay(query);
+  cm.addOverlay(state.overlay, { opaque: true });
+}
+
 /**
  * If there's a saved search, selects the next results.
  * Otherwise, creates a new search and selects the first
@@ -53,7 +95,7 @@ function doSearch(ctx, rev, query) {
     if (state.query) {
       return;
     }
-
+    startSearch(cm, state, query);
     state.query = query;
     state.posFrom = state.posTo = { line: 0, ch: 0 };
     searchNext(ctx, rev);
@@ -100,7 +142,7 @@ function clearSearch(cm) {
   if (!state.query) {
     return;
   }
-
+  cm.removeOverlay(state.overlay);
   state.query = null;
 }