summary: Add param text case dfn below input

The idea is to provide some guidance with how YAML test cases are supposed
to appear.

This just adds to the massive cluster that is the `entry-form.js'.

* src/current/include/entry-form.xsl (entry-form)[preproc:sym]: Add
    `entry-testcase-dfn' div.
* src/current/scripts/entry-form.js: Invoke `updateParamTestcaseDfn' in
    various event listeners.
  (populateBucket): Invoke `updateParamTestcaseDfn'.
  (updateParamTestcaseDfn, getParamTestcaseDfnElement): New functions.
* src/current/summary.css: Style `.entry-testcase-dfn'.

src/current/include/entry-form.xsl

@@ -179,6 +179,8 @@
     <xsl:if test="number(@dim) gt 0">
       <button class="entry-add">+</button>
     </xsl:if>
+
+    <div class="entry-testcase-dfn"></div>
   </dd>
 </xsl:template>
 

src/current/scripts/entry-form.js

@@ -98,8 +98,10 @@ var client = ( function()
                 // if the name does not match, then we removed the square
                 // brackets, meaning that this is a set
                 bucket[ name ] = ( name === field.name )
-                    ? field.value
-                    : [ field.value ];
+                    ? +field.value
+                    : [ +field.value ];
+
+                updateParamTestcaseDfn( name );
             }
         );
     }
@@ -250,13 +252,16 @@ var client = ( function()
                 toarr.call( row.querySelectorAll( '[name]' ) ).forEach(
                     function( node )
                     {
-                        ref.push( node.value.trim() );
+                        ref.push( +node.value.trim() );
                     }
                 );
             } );
         }
 
         bucket[ name ] = value;
+
+        // update entry dfn
+        updateParamTestcaseDfn( target.name, value );
     } );
 
     // update screen on submit
@@ -313,6 +318,26 @@ var client = ( function()
     } );
 
 
+    function updateParamTestcaseDfn( field_name, value )
+    {
+        const name        = field_name.replace( /\[\]$/, '' );
+        const dfn_element = getParamTestcaseDfnElement( name );
+
+        value = value || bucket[ name ];
+
+        const dfn = name + ': ' + JSON.stringify( value );
+        dfn_element.innerText = dfn;
+    }
+
+
+    function getParamTestcaseDfnElement( name )
+    {
+        return document.querySelectorAll(
+            '#param-input-' + name + ' > .entry-testcase-dfn'
+        )[ 0 ];
+    }
+
+
     function showFinalComments( looksgood, callback )
     {
         final_comments.className += ' show';
@@ -1326,6 +1351,8 @@ var client = ( function()
                     }
                 }
             }
+
+            updateParamTestcaseDfn( field );
         }
 
         form.reset();
@@ -1386,6 +1413,8 @@ var client = ( function()
                     elements[ total++ ].value = fdata[ i ];
                 }
             }
+
+            updateParamTestcaseDfn( field );
         }
 
         // re-allow input

src/current/summary.css

@@ -497,6 +497,12 @@ form.entry-form .entry-add
     clear: left;
 }
 
+form.entry-form .entry-testcase-dfn
+{
+    clear: left;
+    font-family: monospace;
+}
+
 form.entry-form > .foot
 {
 }