feat(nimbus): Add opt-in integration with nimbus-devtools

Because:

- nimbus-devtools needs DOM controls to add opt-in support; and
- the pretty-formatted recipe JSON is not actually valid JSON

this commit:

- adds those elements; and
- removes the pretty formatting for recipe JSON.

Fixes #13330

Author: freshstrangemusic

experimenter/experimenter/experiments/models.py

@@ -2185,14 +2185,10 @@ def conclusion_recommendation_labels(self):
     def recipe_json(self):
         from experimenter.experiments.api.v6.serializers import NimbusExperimentSerializer
 
-        return (
-            json.dumps(
-                self.published_dto or NimbusExperimentSerializer(self).data,
-                indent=2,
-                sort_keys=True,
-            )
-            .replace("&&", "\n&&")  # Add helpful newlines to targeting
-            .replace("\\n", "\n")  # Handle hard coded newlines in targeting
+        return json.dumps(
+            self.published_dto or NimbusExperimentSerializer(self).data,
+            indent=2,
+            sort_keys=True,
         )
 
     @property

experimenter/experimenter/nimbus_ui/templates/nimbus_experiments/detail_card_audience.html

@@ -136,8 +136,8 @@ <h4 class="mb-0">
         </td>
       </tr>
       <tr>
-        <th id="recipe-json" class="border-bottom-0">Recipe JSON</th>
-        <td colspan="3" class="border-bottom-0">
+        <th class="border-bottom-0">Recipe JSON</th>
+        <td colspan="3" class="border-bottom-0" data-nimbus-devtools-recipe-json>
           {% include "common/readonly_json.html" with json_content=experiment.recipe_json %}
 
         </td>

experimenter/experimenter/nimbus_ui/templates/nimbus_experiments/launch_controls.html

@@ -193,24 +193,38 @@
       </div>
       {% if experiment.is_desktop %}
         <div class="alert alert-light border my-3">
-          <h5 class="mb-2">Preview URL</h5>
-          <p class="mb-1">
-            <strong> Click the <code>about:studies</code> link below to copy</strong> then paste it in your browser. Ensure you enable <code>nimbus.debug</code> in <code>about:config</code> first.
-          </p>
-          <label for="branch-selector" class="form-label mt-2">Select Branch</label>
-          <select id="branch-selector"
-                  class="form-select mb-3"
-                  onchange="updatePreviewURL()">
-            {% for branch in experiment.branches.all %}
-              <option value="{{ branch.slug }}"
-                      {% if branch == experiment.reference_branch %}selected{% endif %}>{{ branch.name }}</option>
-            {% endfor %}
-          </select>
-          <button class="btn btn-sm" type="button">
-            <code id="preview-url" class="d-block text-danger user-select-all">
-              about:studies?optin_slug={{ experiment.slug }}&optin_branch={{ experiment.reference_branch.slug }}&optin_collection=nimbus-preview
-            </code>
-          </button>
+          <div data-nimbus-devtools-preview-url-pane>
+            <h5 class="mb-2">Preview URL</h5>
+            <p class="mb-1">
+              <strong> Click the <code>about:studies</code> link below to copy</strong> then paste it in your browser. Ensure you enable <code>nimbus.debug</code> in <code>about:config</code> first.
+            </p>
+            <label for="branch-selector" class="form-label mt-2">Select Branch</label>
+            <select id="branch-selector"
+                    class="form-select mb-3"
+                    onchange="updatePreviewURL()">
+              {% for branch in experiment.branches.all %}
+                <option value="{{ branch.slug }}"
+                        {% if branch == experiment.reference_branch %}selected{% endif %}>{{ branch.name }}</option>
+              {% endfor %}
+            </select>
+            <button class="btn btn-sm" type="button">
+              <code id="preview-url" class="d-block text-danger user-select-all">
+                about:studies?optin_slug={{ experiment.slug }}&optin_branch={{ experiment.reference_branch.slug }}&optin_collection=nimbus-preview
+              </code>
+            </button>
+          </div>
+          <div class="d-none" data-nimbus-devtools-opt-in-pane>
+            <h5 class="mb-2">Opt-In for Testing</h5>
+            <select class="form-select mb-3" name="branch">
+              {% for branch in experiment.branches.all %}
+                <option value="{{ branch.slug }}"
+                        {% if branch == experiment.reference_branch %}selected{% endif %}>{{ branch.name }}</option>
+              {% endfor %}
+            </select>
+            <button class="btn btn-primary"
+                    type="button"
+                    data-nimbus-devtools-enroll-button>Enroll</button>
+          </div>
         </div>
       {% endif %}
       <!-- Review Mode Controls -->