fix(nimbus): make boolean text more visible in dark mode in codemirror windows (#13596)

Because

- Some text (particularily boolean fields) wasn't visible in dark mode
in any codemirror sections

This commit

- Improves the visibility of the text in dark mode

Fixes #13594

Author: moibra05

experimenter/experimenter/nimbus_ui/static/js/branch_detail.js

@@ -1,8 +1,19 @@
-import { basicSetup } from "codemirror";
-import { EditorView } from "@codemirror/view";
+import {
+  drawSelection,
+  EditorView,
+  highlightSpecialChars,
+  lineNumbers,
+} from "@codemirror/view";
 import { EditorState } from "@codemirror/state";
 import { json, jsonParseLinter } from "@codemirror/lang-json";
 import { linter } from "@codemirror/lint";
+import {
+  HighlightStyle,
+  syntaxHighlighting,
+  defaultHighlightStyle,
+  foldGutter,
+} from "@codemirror/language";
+import { tags } from "@lezer/highlight";
 
 import $ from "jquery";
 
@@ -12,11 +23,20 @@ const setupCodemirroReadOnlyJSON = () => {
   const selector = ".readonly-json";
   const textareas = document.querySelectorAll(selector);
 
+  const highlightStyle = HighlightStyle.define([
+    { tag: tags.bool, color: "#ffaa00ff", themeType: "dark" },
+  ]);
+
   textareas.forEach((textarea) => {
     if (textarea.dataset.is_rendered) return;
     textarea.dataset.is_rendered = true;
     const extensions = [
-      basicSetup,
+      lineNumbers(),
+      drawSelection(),
+      highlightSpecialChars(),
+      foldGutter(),
+      syntaxHighlighting(highlightStyle),
+      syntaxHighlighting(defaultHighlightStyle),
       json(),
       linter(jsonParseLinter()),
       EditorState.readOnly.of(true),

experimenter/experimenter/nimbus_ui/static/js/edit_branches.js

@@ -1,8 +1,29 @@
-import { basicSetup } from "codemirror";
-import { EditorView } from "@codemirror/view";
+import {
+  drawSelection,
+  EditorView,
+  highlightActiveLine,
+  highlightSpecialChars,
+  keymap,
+  lineNumbers,
+} from "@codemirror/view";
 import { json, jsonParseLinter } from "@codemirror/lang-json";
 import { linter } from "@codemirror/lint";
-import { autocompletion } from "@codemirror/autocomplete";
+import { autocompletion, closeBrackets } from "@codemirror/autocomplete";
+import {
+  HighlightStyle,
+  syntaxHighlighting,
+  defaultHighlightStyle,
+  foldGutter,
+  bracketMatching,
+  indentOnInput,
+} from "@codemirror/language";
+import {
+  highlightSelectionMatches,
+  searchKeymap,
+  search,
+} from "@codemirror/search";
+import { defaultKeymap, historyKeymap, history } from "@codemirror/commands";
+import { tags } from "@lezer/highlight";
 import { schemaAutocomplete, schemaLinter } from "./validator.js";
 import $ from "jquery";
 
@@ -12,8 +33,26 @@ const setupCodemirror = (selector, textarea, extraExtensions) => {
     return;
   }
 
+  const highlightStyle = HighlightStyle.define([
+    { tag: tags.bool, color: "#ffaa00ff", themeType: "dark" },
+  ]);
+
   const extensions = [
-    basicSetup,
+    lineNumbers(),
+    drawSelection(),
+    highlightSpecialChars(),
+    foldGutter(),
+    autocompletion(),
+    bracketMatching(),
+    closeBrackets(),
+    highlightSelectionMatches(),
+    indentOnInput(),
+    highlightActiveLine(),
+    syntaxHighlighting(highlightStyle),
+    syntaxHighlighting(defaultHighlightStyle),
+    history(),
+    search(),
+    keymap.of([...defaultKeymap, ...searchKeymap, ...historyKeymap]),
     EditorView.updateListener.of((v) => {
       if (v.docChanged) {
         const value = v.state.doc.toString();

experimenter/experimenter/nimbus_ui/static/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.5.2",
+    "@lezer/highlight": "^1.2.2",
     "bootstrap": "^5.3.3",
     "bootstrap-select": "1.14.0-beta3",
     "codemirror": "^6.0.1",