bug(nimbus): line wrap readonly codemirrors

jaredlockhart · jaredlockhart · commit 9f7a3b3c1918 · 2025-11-24T15:48:37.000-08:00
Becuase * Long strings inside JSON values like feature values or JEXL targeting can cause the read only codemirrors to be too wide This commit * Moves all read only codemirror setup into a single file * Adds the codemirror linewrapping extension * Updates the outer element styling to account for fixed width fixes #13977
diff --git a/experimenter/experimenter/nimbus_ui/static/js/branch_detail.js b/experimenter/experimenter/nimbus_ui/static/js/branch_detail.js
@@ -1,80 +1,6 @@
-import { basicSetup } from "codemirror";
-import { EditorView } from "@codemirror/view";
-import { EditorState } from "@codemirror/state";
-import { json, jsonParseLinter } from "@codemirror/lang-json";
-import { linter } from "@codemirror/lint";
-import {
-  themeCompartment,
-  getThemeExtensions,
-  registerView,
-  updateAllViewThemes,
-  observeThemeChanges,
-} from "./theme_utils.js";
-
+import { updateAllViewThemes, observeThemeChanges } from "./theme_utils.js";
 import $ from "jquery";
 
-const VISIBLE_LINE_COUNT = 5;
-
-const setupCodemirroReadOnlyJSON = () => {
-  const selector = ".readonly-json";
-  const textareas = document.querySelectorAll(selector);
-
-  textareas.forEach((textarea) => {
-    if (textarea.dataset.is_rendered) return;
-    textarea.dataset.is_rendered = true;
-    const extensions = [
-      basicSetup,
-      json(),
-      linter(jsonParseLinter()),
-      EditorState.readOnly.of(true),
-      EditorView.editable.of(false),
-      themeCompartment.of(getThemeExtensions()),
-    ];
-
-    const view = new EditorView({
-      doc: textarea.value,
-      extensions,
-      parent: textarea.parentNode,
-    });
-
-    view.dom.style.border = "1px solid #ccc";
-    view.dom.style.maxHeight = "inherit";
-    textarea.parentNode.insertBefore(view.dom, textarea);
-    textarea.style.display = "none";
-
-    registerView(view);
-
-    setupCodemirrorCollapsibleDisplay(textarea);
-
-    return view;
-  });
-};
-
-const setupCodemirrorCollapsibleDisplay = (textarea) => {
-  const lines = textarea.value.split("\n").length;
-
-  if (lines > VISIBLE_LINE_COUNT) {
-    // Removes d-none from both buttons for json views that can be collapsed
-    textarea.parentNode.nextElementSibling?.classList.remove("d-none");
-    textarea.nextElementSibling?.classList.remove("d-none");
-
-    $(".show-btn").on("click", (e) => {
-      e.target.parentNode.classList.add("d-none");
-      e.target.parentNode.nextElementSibling.classList.remove("d-none");
-    });
-
-    $(".hide-btn").on("click", (e) => {
-      e.target.parentNode.classList.add("d-none");
-      e.target.parentNode.previousElementSibling.classList.remove("d-none");
-    });
-  }
-};
-
 $(() => {
-  setupCodemirroReadOnlyJSON();
   observeThemeChanges(updateAllViewThemes);
-
-  document.body.addEventListener("htmx:afterSwap", function () {
-    setupCodemirroReadOnlyJSON();
-  });
 });
diff --git a/experimenter/experimenter/nimbus_ui/static/js/codemirror_utils.js b/experimenter/experimenter/nimbus_ui/static/js/codemirror_utils.js
@@ -0,0 +1,73 @@
+import { basicSetup } from "codemirror";
+import { EditorView } from "@codemirror/view";
+import { EditorState } from "@codemirror/state";
+import { json, jsonParseLinter } from "@codemirror/lang-json";
+import { linter } from "@codemirror/lint";
+import {
+  themeCompartment,
+  getThemeExtensions,
+  registerView,
+} from "./theme_utils.js";
+import $ from "jquery";
+
+const VISIBLE_LINE_COUNT = 5;
+
+export const createReadonlyJsonEditor = (textarea) => {
+  if (!textarea || textarea.dataset.is_rendered) return null;
+
+  textarea.dataset.is_rendered = true;
+
+  const extensions = [
+    basicSetup,
+    json(),
+    linter(jsonParseLinter()),
+    EditorState.readOnly.of(true),
+    EditorView.editable.of(false),
+    EditorView.lineWrapping,
+    themeCompartment.of(getThemeExtensions()),
+  ];
+
+  const view = new EditorView({
+    doc: textarea.value,
+    extensions,
+    parent: textarea.parentNode,
+  });
+
+  view.dom.style.border = "1px solid #ccc";
+  view.dom.style.maxHeight = "inherit";
+  textarea.parentNode.insertBefore(view.dom, textarea);
+  textarea.style.display = "none";
+
+  registerView(view);
+
+  return view;
+};
+
+export const setupCodemirrorCollapsibleDisplay = (textarea) => {
+  const lines = textarea.value.split("\n").length;
+
+  if (lines > VISIBLE_LINE_COUNT) {
+    textarea.parentNode.nextElementSibling?.classList.remove("d-none");
+    textarea.nextElementSibling?.classList.remove("d-none");
+
+    $(".show-btn").on("click", (e) => {
+      e.target.parentNode.classList.add("d-none");
+      e.target.parentNode.nextElementSibling.classList.remove("d-none");
+    });
+
+    $(".hide-btn").on("click", (e) => {
+      e.target.parentNode.classList.add("d-none");
+      e.target.parentNode.previousElementSibling.classList.remove("d-none");
+    });
+  }
+};
+
+export const setupReadonlyJsonEditors = () => {
+  const textareas = document.querySelectorAll(".readonly-json");
+  textareas.forEach((textarea) => {
+    const view = createReadonlyJsonEditor(textarea);
+    if (view) {
+      setupCodemirrorCollapsibleDisplay(textarea);
+    }
+  });
+};
diff --git a/experimenter/experimenter/nimbus_ui/static/js/edit_branches.js b/experimenter/experimenter/nimbus_ui/static/js/edit_branches.js
@@ -1,6 +1,5 @@
 import { basicSetup } from "codemirror";
 import { EditorView } from "@codemirror/view";
-import { EditorState } from "@codemirror/state";
 import { json, jsonParseLinter } from "@codemirror/lang-json";
 import { linter } from "@codemirror/lint";
 import { autocompletion } from "@codemirror/autocomplete";
@@ -12,6 +11,7 @@ import {
   updateAllViewThemes,
   observeThemeChanges,
 } from "./theme_utils.js";
+import { setupReadonlyJsonEditors } from "./codemirror_utils.js";
 import $ from "jquery";
 
 const setupCodemirror = (selector, textarea, extraExtensions) => {
@@ -31,6 +31,7 @@ const setupCodemirror = (selector, textarea, extraExtensions) => {
     }),
     json(),
     linter(jsonParseLinter()),
+    EditorView.lineWrapping,
     themeCompartment.of(getThemeExtensions()),
     ...extraExtensions,
   ];
@@ -105,33 +106,6 @@ const setupCodeMirrorLocalizations = () => {
   setupCodemirror(selector, textarea, []);
 };
 
-const initializeSchemaCodeMirror = (textarea) => {
-  if (!textarea || textarea.dataset.is_rendered) return;
-
-  textarea.dataset.is_rendered = true;
-
-  const extensions = [
-    basicSetup,
-    json(),
-    linter(jsonParseLinter()),
-    EditorState.readOnly.of(true),
-    EditorView.editable.of(false),
-    themeCompartment.of(getThemeExtensions()),
-  ];
-
-  const view = new EditorView({
-    doc: textarea.value,
-    extensions,
-    parent: textarea.parentNode,
-  });
-
-  view.dom.style.border = "1px solid #ccc";
-  textarea.parentNode.insertBefore(view.dom, textarea);
-  textarea.style.display = "none";
-
-  registerView(view);
-};
-
 const setupSchemaToggleButtons = () => {
   const form = document.getElementById("branches-form");
   if (!form || form.dataset.schemaToggleSetup) return;
@@ -150,7 +124,7 @@ const setupSchemaToggleButtons = () => {
     container.querySelector(".hide-schema-btn").classList.toggle("d-none");
 
     if (isHidden) {
-      initializeSchemaCodeMirror(schemaDisplay.querySelector(".readonly-json"));
+      setupReadonlyJsonEditors();
     }
   });
 };
diff --git a/experimenter/experimenter/nimbus_ui/static/js/features_page.js b/experimenter/experimenter/nimbus_ui/static/js/features_page.js
@@ -29,6 +29,7 @@ const setupMergeViews = () => {
           json(),
           EditorView.editable.of(false),
           EditorState.readOnly.of(true),
+          EditorView.lineWrapping,
         ],
       },
       b: {
@@ -38,6 +39,7 @@ const setupMergeViews = () => {
           json(),
           EditorView.editable.of(false),
           EditorState.readOnly.of(true),
+          EditorView.lineWrapping,
         ],
       },
       parent: container,
diff --git a/experimenter/experimenter/nimbus_ui/static/js/index.js b/experimenter/experimenter/nimbus_ui/static/js/index.js
@@ -7,6 +7,7 @@ import * as $ from "jquery";
 import * as bootstrap from "bootstrap";
 import "htmx.org";
 import "bootstrap-select";
+import { setupReadonlyJsonEditors } from "./codemirror_utils.js";
 
 window.bootstrap = bootstrap;
 const setupThemeSwitcher = () => {
@@ -96,12 +97,14 @@ $(() => {
   setupToasts();
   setupSlugCopyToast();
   setupHTMXLoadingOverlay();
+  setupReadonlyJsonEditors();
 
   document.body.addEventListener("htmx:afterSwap", function () {
     $(".selectpicker").selectpicker();
     setupTooltips();
     setupToasts();
     setupSlugCopyToast();
+    setupReadonlyJsonEditors();
   });
 
   // To support HTMX onchange updates on selectpicker, we need to
diff --git a/experimenter/experimenter/nimbus_ui/templates/nimbus_experiments/detail.html b/experimenter/experimenter/nimbus_ui/templates/nimbus_experiments/detail.html
@@ -345,8 +345,12 @@ <h4>Audience</h4>
                   <i class="fa-solid fa-plus"></i> Show more
                 </button>
               </td>
-              <td colspan="3" id="preview-recipe-json" class="expanded-json d-none">
-                <textarea class="readonly-json">{{ experiment.recipe_json }}</textarea>
+              <td colspan="3"
+                  id="preview-recipe-json"
+                  class="expanded-json d-none mw-0">
+                <div class="text-break">
+                  <textarea class="readonly-json w-100">{{ experiment.recipe_json }}</textarea>
+                </div>
                 <button class="btn btn-outline-primary btn-sm mt-2 d-block hide-btn d-none">
                   <i class="fa-solid fa-minus"></i> Show less
                 </button>
@@ -386,8 +390,10 @@ <h4>Localizations</h4>
               </tr>
               <tr>
                 <th>Localizations JSON</th>
-                <td colspan="3">
-                  <textarea class="readonly-json">{{ experiment.localizations|default:"null" }}</textarea>
+                <td colspan="3" class="mw-0">
+                  <div class="mw-100 overflow-auto">
+                    <textarea class="readonly-json">{{ experiment.localizations|default:"null" }}</textarea>
+                  </div>
                 </td>
               </tr>
             </tbody>
diff --git a/experimenter/experimenter/nimbus_ui/templates/nimbus_experiments/detail_branch.html b/experimenter/experimenter/nimbus_ui/templates/nimbus_experiments/detail_branch.html
@@ -47,10 +47,9 @@ <h6>
             </td>
             <td colspan="3"
                 id="preview-recipe-json"
-                class="expanded-json d-none"
-                style="max-width: 0">
+                class="expanded-json d-none mw-0">
               <div class="text-break">
-                <textarea class="readonly-json w-100" style="word-break: break-all;">{{ feature_value.value }}</textarea>
+                <textarea class="readonly-json w-100">{{ feature_value.value }}</textarea>
               </div>
               <button class="btn btn-outline-primary btn-sm mt-2 d-block hide-btn d-none">
                 <i class="fa-solid fa-minus"></i> Show less
diff --git a/experimenter/experimenter/nimbus_ui/templates/nimbus_experiments/edit_branches.html b/experimenter/experimenter/nimbus_ui/templates/nimbus_experiments/edit_branches.html
@@ -169,7 +169,7 @@ <h4>Branches</h4>
                               <i class="fa-solid fa-chevron-up"></i> Hide feature schema
                             </button>
                             <div id="schema-{{ forloop.parentloop.counter0 }}-{{ forloop.counter0 }}"
-                                 class="schema-display d-none mt-2">
+                                 class="schema-display d-none mt-2 mw-100 overflow-auto">
                               <textarea class="readonly-json">{{ branch_feature_values_form.instance.unversioned_schema }}</textarea>
                             </div>
                           </div>
