Merge pull request #2420 from WPO-Foundation/fix-2406

Fix 2406-  improve form usability in create experiments

Author: scottjehl

www/assets/css/pagestyle2.css

@@ -1090,6 +1090,11 @@ h4.experiments_list_hed-recs {
   margin: 0;
 }
 
+.experiment_description_go-multi label.experiment_pair_check:not(:has(input:checked)) + label:not(.experiment_pair_value-add) {
+  height: 3em;
+  overflow: hidden;
+}
+
 .experiment_description_go > label.experiment_pair_value {
   border-left: 0;
   margin-left: 0;
@@ -1104,6 +1109,7 @@ h4.experiments_list_hed-recs {
   overflow: hidden;
   text-indent: -999px;
   display: inline-block;
+  position: absolute;
 }
 
 .experiment_pair_value_addbtn {
@@ -1135,11 +1141,14 @@ h4.experiments_list_hed-recs {
 .experiment_description_go > label.experiment_pair_value-visible span {
   font-weight: 500;
   text-transform: initial;
+  position: relative;
+  max-width: 50%;
 }
 
 .experiment_description_go > label.experiment_pair_value-visible span em {
   font-size: 0.8em;
   color: #222;
+  display: block;
 }
 
 .experiment_description_go
@@ -1149,7 +1158,8 @@ h4.experiments_list_hed-recs {
   flex: 1 1 auto;
 }
 
-.experiment_description_go > label.experiment_pair_value input {
+.experiment_description_go > label.experiment_pair_value input,
+.experiment_description_go > label.experiment_pair_value textarea {
   width: 14em;
   margin: 0;
   padding: 1.45em;
@@ -1159,6 +1169,26 @@ h4.experiments_list_hed-recs {
   line-height: 1;
 }
 
+.experiment_description_go > label.experiment_pair_value textarea {
+  width: calc(100% - 4em);
+  display: block;
+  box-sizing: border-box;
+  margin: 0 1em 1em 3em;
+  padding: 1em;
+  height: 10em;
+  border: 0;
+  max-width: none;
+  line-height: 1.6;
+  white-space: nowrap;
+  overflow: auto;
+}
+
+.experiment_description_go > label.experiment_pair_value textarea:focus {
+  outline: none;
+  background: #fafafa;
+  border: 1px solid #ccc;
+}
+
 .experiments_foot {
   display: flex;
   justify-content: flex-end;

www/experiments.php

@@ -325,14 +325,14 @@ function observationHTML($parts)
                                         $out .= <<<EOT
                                         </div>
                                         <div class="experiment_description_go experiment_description_go-multi">
-                                        <label class="experiment_pair_check"><input type="checkbox" name="recipes[]" value="{$expNum}-{$exp->expvar}">Run with:</label>
+                                        <label class="experiment_pair_check"><input type="checkbox" name="recipes[]" value="{$expNum}-{$exp->expvar}">Run this Experiment with:</label>
                                         EOT;
                                         $addmore = $exp->addmore ? ' experiment_pair_value-add' : '';
 
                                         foreach ($exp->expfields as $field) {
                                             if ($field->type === "text") {
                                                 $out .= <<<EOT
-                                                <label class="experiment_pair_value-visible {$addmore}"><span>{$field->label}: </span><input type="{$field->type}" name="{$expNum}-{$exp->expvar}[]"></label>
+                                                <label class="experiment_pair_value-visible {$addmore}"><span>{$field->label} </span><input type="{$field->type}" name="{$expNum}-{$exp->expvar}[]"></label>
                                                 EOT;
                                             } else {
                                                 $out .= <<<EOT
@@ -348,11 +348,12 @@ function observationHTML($parts)
                                     }
                                 } elseif ($exp->expvar && !$exp->expval && $textinput) {
                                     if ($experimentEnabled) {
+                                        $placeholderEncodedVal = htmlentities('<script src="https://example.com/test.js"></script>');
                                         $out .= <<<EOT
                                         </div>
-                                        <div class="experiment_description_go">
-                                        <label class="experiment_pair_check"><input type="checkbox" name="recipes[]" value="{$expNum}-{$exp->expvar}">Run with:</label>
-                                        <label class="experiment_pair_value"><span>Value: </span><input type="text" name="{$expNum}-{$exp->expvar}[]" placeholder="experiment value..."></label>
+                                        <div class="experiment_description_go experiment_description_go-multi">
+                                        <label class="experiment_pair_check"><input type="checkbox" name="recipes[]" value="{$expNum}-{$exp->expvar}">Run this Experiment with:</label>
+                                        <label class="experiment_pair_value"><span>Value: </span><textarea name="{$expNum}-{$exp->expvar}[]" placeholder="{$placeholderEncodedVal}"></textarea></label>
 
                                         </div>
                                         EOT;

www/experiments/custom.inc

@@ -3,7 +3,7 @@
 $category = "Custom";
 $assessment[$category]["opportunities"][] = array(
     "title" =>  "Add HTML to document",
-    "desc" =>  "These experiments allow you to add arbitrary html to a page, which can for example, enable to you test the impact of adding script tags.",
+    "desc" =>  "These experiments allow you to add arbitrary html to a page, which can for example, enable to you test the impact of adding scripts, 3rd-party tags, or resource hints.",
     "examples" =>  array(),
     "experiments" =>  array(
         (object) [