Bug 1196969: Custom fields whose visibility depend on the product are…

… not displayed/hidden correctly

r=gerv a=sgreen

js/field.js

@@ -522,6 +522,31 @@ function handleVisControllerValueChange(e, args) {
     if (selected) {
         YAHOO.util.Dom.removeClass(label_container, 'bz_hidden_field');
         YAHOO.util.Dom.removeClass(field_container, 'bz_hidden_field');
+        /* If a custom field such as a textarea field contains some text, then
+         * its content is visible by default as a readonly field (assuming that
+         * the field is displayed). But if such a custom field contains no text,
+         * then it's not displayed at all and an (edit) link is displayed instead.
+         * This is problematic if the custom field is mandatory, because at least
+         * Firefox complains that you must enter a value, but is unable to point
+         * to the custom field because this one is hidden, and so the user has
+         * to guess what the web browser is talking about, which is confusing.
+         * So in that case, we display the custom field automatically instead of
+         * the (edit) link, so that the user can enter some text in it.
+         */
+        var field_readonly = document.getElementById(controlled_id + '_readonly');
+
+        if (!field_readonly) {
+            var field_input = document.getElementById(controlled_id + '_input');
+            var edit_container =
+                document.getElementById(controlled_id + '_edit_container');
+
+            if (field_input) {
+                YAHOO.util.Dom.removeClass(field_input, 'bz_default_hidden');
+            }
+            if (edit_container) {
+                YAHOO.util.Dom.addClass(edit_container, 'bz_hidden_field');
+            }
+        }
         // Restore the 'required' attribute for mandatory fields.
         if (field.getAttribute('data-required') == "true") {
             field.setAttribute('required', 'true');

template/en/default/bug/edit.html.tmpl

@@ -230,20 +230,12 @@
     [%#  PRODUCT  #%]
     [%#############%]
     <tr id="field_tablerow_product">
-      [% INCLUDE "bug/field-label.html.tmpl"
-         field = bug_fields.product
-         desc_url = 'describecomponents.cgi'
-         value = bug.product
-        %]
-      <td class="field_value" id="field_container_product">
-        [% INCLUDE "global/product-select.html.tmpl"
-           id    => "product"
-           name  => "product"
-           value => bug.product
-           products => bug.choices.product
-           isselect => bug.check_can_change_field('product', 0, 1)
-         %]
-       </td>
+      [% INCLUDE bug/field.html.tmpl
+          bug = bug, field = bug_fields.product, value = bug.product
+          override_legal_values = bug.choices.product
+          desc_url = "describecomponents.cgi"
+          editable = bug.check_can_change_field('product', 0, 1)
+      %]
     </tr>
 
     [%# Classification is here so that it can be used in value controllers

template/en/default/bug/field.html.tmpl

@@ -91,6 +91,12 @@
         </script>
     [% CASE [ constants.FIELD_TYPE_SINGLE_SELECT 
               constants.FIELD_TYPE_MULTI_SELECT ] %]
+      [%# The 'product' field needs its own template if classifications are enabled. %]
+      [% IF field.name == "product" AND Param('useclassification') %]
+        [% INCLUDE "global/product-select.html.tmpl"
+                   id = "product", name = "product", value = value
+                   products = override_legal_values %]
+      [% ELSE %]
         <input type="hidden" id="[% field.name FILTER html %]_dirty">
         <select id="[% field.name FILTER html %]" 
                 name="[% field.name FILTER html %]" 
@@ -141,22 +147,24 @@
         [% IF field.type == constants.FIELD_TYPE_MULTI_SELECT %]
           <input type="hidden" name="defined_[% field.name FILTER html %]">
         [% END %]
+      [% END %]
 
-        <script type="text/javascript">
+      <script type="text/javascript">
         <!--
           initHidingOptionsForIE('[% field.name FILTER js %]');
           [%+ INCLUDE "bug/field-events.js.tmpl"
                       field = field, product = bug.product_obj %]
         //-->
-        </script>
+      </script>
 
-     [% CASE constants.FIELD_TYPE_TEXTAREA %]
+    [% CASE constants.FIELD_TYPE_TEXTAREA %]
        <div id="[% field.name FILTER html %]_edit_container" class="bz_default_hidden">
          <div>
              (<a href="#" id="[% field.name FILTER html %]_edit_action">edit</a>)
          </div>
          [% IF value %]
-           <pre class="field_textarea_readonly">[% value FILTER html %]</pre>
+           <pre id="[% field.name FILTER html %]_readonly"
+                class="field_textarea_readonly">[% value FILTER html %]</pre>
          [% END %]
        </div>
        <div id="[% field.name FILTER html %]_input">
@@ -173,7 +181,7 @@
                            '',
                            true);
        </script>
-     [% CASE constants.FIELD_TYPE_BUG_URLS %]
+    [% CASE constants.FIELD_TYPE_BUG_URLS %]
        [% IF bug.id && value.size %]
          <ul class="bug_urls">
          [% FOREACH bug_url = value %]