Bug 57842: On enter_bug.cgi, show component description when it is selected - Patch by Frédéric Buclin <LpSolit@gmail.com> r/a=mkanat

2 files changed, 137 insertions, 115 deletions

diff --git a/skins/standard/global.css b/skins/standard/global.css
index d7765dc88..3c49deefe 100644
--- a/skins/standard/global.css
+++ b/skins/standard/global.css
@@ -356,10 +356,22 @@ div.user_match {
     vertical-align: top;
     font-weight: bold;
 }
-.field_value {
+.field_value, form#Create th, form#Create td {
     vertical-align: top;
 }
 
+form#Create th {
+    text-align: right;
+}
+
+form#Create .comment {
+    vertical-align: top;
+    overflow: auto;
+    color: green;
+    margin: 0 0.5em;
+    padding: 0.3em;
+}
+
 #keyword-chooser {
     padding: 10px;
     position: absolute;
diff --git a/template/en/default/bug/create/create.html.tmpl b/template/en/default/bug/create/create.html.tmpl
index fa6b7b020..cfbd2a819 100644
--- a/template/en/default/bug/create/create.html.tmpl
+++ b/template/en/default/bug/create/create.html.tmpl
@@ -21,6 +21,7 @@
   #                 Marc Schumann <wurblzap@gmail.com>
   #                 Akamai Technologies <bugzilla-dev@akamai.com>
   #                 Max Kanat-Alexander <mkanat@bugzilla.org>
+  #                 Frédéric Buclin <LpSolit@gmail.com>
   #%]
 
 [% PROCESS "global/field-descs.none.tmpl" %]
@@ -40,6 +41,7 @@ var initialowners = new Array([% product.components.size %]);
 var last_initialowner;
 var initialccs = new Array([% product.components.size %]);
 var components = new Array([% product.components.size %]);
+var comp_desc = new Array([% product.components.size %]);
 var flags = new Array([% product.components.size %]);
 [% IF Param("useqacontact") %]
     var initialqacontacts = new Array([% product.components.size %]);
@@ -48,6 +50,7 @@ var flags = new Array([% product.components.size %]);
 [% count = 0 %]
 [%- FOREACH c = product.components %]
     components[[% count %]] = "[% c.name FILTER js %]";
+    comp_desc[[% count %]] = "[% c.description FILTER html_light FILTER js %]";
     initialowners[[% count %]] = "[% c.default_assignee.login FILTER js %]";
     [% flag_list = [] %]
     [% FOREACH f = c.flag_types.bug %]
@@ -101,6 +104,7 @@ function set_assign_to() {
         }
 
         document.getElementById('initial_cc').innerHTML = initialccs[index];
+        document.getElementById('comp_desc').innerHTML = comp_desc[index];
 
         [% IF Param("useqacontact") %]
             var contact = initialqacontacts[index];
@@ -160,11 +164,10 @@ function handleWantsAttachment(wants_attachment) {
 <input type="hidden" name="product" value="[% product.name FILTER html %]">
 <input type="hidden" name="token" value="[% token FILTER html %]">
 
-<table cellspacing="2" cellpadding="0" border="0">
-
+<table cellspacing="4" cellpadding="2" border="0">
+<tbody>
   <tr>
-    <td>&nbsp;</td>
-    <td colspan="3">
+    <td colspan="4">
     [%# Migration note: The following file corresponds to the old Param
       # 'entryheaderhtml'
       #%]
@@ -173,39 +176,23 @@ function handleWantsAttachment(wants_attachment) {
   </tr>
 
   <tr>
-    <td>&nbsp;</td>
-    <td colspan="3">&nbsp;</td>
+    <td colspan="4">&nbsp;</td>
   </tr>
 
   <tr>
-    <td align="right" valign="top"><strong>Reporter:</strong></td>
-    <td valign="top">[% user.login FILTER html %]</td>
+    <th>Product:</th>
+    <td width="10%">[% product.name FILTER html %]</td>
 
-    <td align="right" valign="top"><strong>Product:</strong></td>
-    <td valign="top">[% product.name FILTER html %]</td>
+    <th>Reporter:</th>
+    <td width="100%">[% user.login FILTER html %]</td>
   </tr>
 
   [%# We can't use the select block in these two cases for various reasons. %]
   <tr>
-    <td align="right" valign="top">
-      <strong>Version:</strong>
-    </td>
-    <td>
-      <select name="version" size="5">
-        [%- FOREACH v = version %]
-          <option value="[% v FILTER html %]"
-            [% " selected=\"selected\"" IF v == default.version %]>[% v FILTER html -%]
-          </option>
-        [%- END %]
-      </select>
-    </td>
-
-    <td align="right" valign="top">
-      <strong>
-        <a href="describecomponents.cgi?product=[% product.name FILTER url_quote %]">
-          Component</a>:
-      </strong>
-    </td>
+    <th>
+      <a href="describecomponents.cgi?product=[% product.name FILTER url_quote %]">
+      Component</a>:
+    </th>
     <td>
       <select name="component" onchange="set_assign_to();" size="5">
         [%- FOREACH c = product.components %]
@@ -216,22 +203,59 @@ function handleWantsAttachment(wants_attachment) {
         [%- END %]
       </select>
     </td>
-  </tr>
 
-  <tr>
-    <td>&nbsp;</td>
-    <td colspan="3">&nbsp;</td>
+    <td colspan="2">
+      [%# Enclose the fieldset in a nested table so that its width changes based
+        # on the length on the component description. %]
+      <table>
+        <tr>
+          <td>
+            <fieldset>
+              <legend>Component Description</legend>
+              <div id="comp_desc" class="comment">Select a component to read its description.</div>
+            </fieldset>
+          </td>
+        </tr>
+      </table>
+    </td>
   </tr>
 
   <tr>
+    <th rowspan="3">Version:</th>
+    <td rowspan="3">
+      <select name="version" size="5">
+        [%- FOREACH v = version %]
+          <option value="[% v FILTER html %]"
+            [% ' selected="selected"' IF v == default.version %]>[% v FILTER html -%]
+          </option>
+        [%- END %]
+      </select>
+    </td>
+
     [% sel = { description => 'Severity', name => 'bug_severity' } %]
     [% INCLUDE select %]
+  </tr>
 
+  <tr>
     [% sel = { description => 'Platform', name => 'rep_platform' } %]
     [% INCLUDE select %]
   </tr>
 
   <tr>
+    [% sel = { description => 'OS', name => 'op_sys' } %]
+    [% INCLUDE select %]
+  </tr>
+</tbody>
+
+<tbody class="expert_fields">
+  <tr>
+    [% IF Param('usetargetmilestone') && Param('letsubmitterchoosemilestone') %]
+      [% sel = { description => 'Target Milestone', name => 'target_milestone' } %]
+      [% INCLUDE select %]
+    [% ELSE %]
+      <td colspan="2">&nbsp;</td>
+    [% END %]
+
     [% IF Param('letsubmitterchoosepriority') %]
       [% sel = { description => 'Priority', name => 'priority' } %]
       [% INCLUDE select %]
@@ -240,41 +264,52 @@ function handleWantsAttachment(wants_attachment) {
         <input type="hidden" name="priority" value="[% default.priority FILTER html %]">
       </td>
     [% END %]
-
-    [% sel = { description => 'OS', name => 'op_sys' } %]
-    [% INCLUDE select %]
   </tr>
+</tbody>
 
-  [% IF Param('usetargetmilestone') && Param('letsubmitterchoosemilestone') %]
+[% IF !Param('defaultplatform') || !Param('defaultopsys') %]
+  <tbody>
     <tr>
-      [% sel = { description => 'Target Milestone', name => 'target_milestone' } %]
-      [% INCLUDE select %]
-      <td colspan="2">&nbsp;</td>
+      <th>&nbsp;</th>
+      <td colspan="3" class="comment">
+        We've made a guess at your
+        [% IF Param('defaultplatform') %]
+          operating system. Please check it
+        [% ELSIF Param('defaultopsys') %]
+          platform. Please check it
+        [% ELSE %]
+          operating system and platform. Please check them
+        [% END %]
+        and, if we got it wrong, email [% Param('maintainer') %].
+      </td>
     </tr>
-  [% END %]
+  </tbody>
+[% END %]
 
+<tbody class="expert_fields">
   <tr>
-    <td>&nbsp;</td>
-    <td colspan="3">&nbsp;</td>
+    <td colspan="4">&nbsp;</td>
   </tr>
 
   <tr>
 [% IF bug_status.size <= 1 %]
   <input type="hidden" name="bug_status" 
          value="[% default.bug_status FILTER html %]">
-    <td align="right" valign="top"><strong>Initial State:</strong></td>
-    <td valign="top">[% get_status(default.bug_status) FILTER html %]</td>
+    <th>Initial State:</th>
+    <td>[% get_status(default.bug_status) FILTER html %]</td>
 [% ELSE %]
     [% sel = { description => 'Initial State', name => 'bug_status' } %]
     [% INCLUDE select %]
 [% END %]
+
     <td>&nbsp;</td>
     [%# Calculate the number of rows we can use for flags %]
     [% num_rows = 6 + (Param("useqacontact") ? 1 : 0) +
                       (user.in_group(Param('timetrackinggroup')) ? 3 : 0) +
                       (Param("usebugaliases") ? 1 : 0)
     %]
-    <td rowspan="[% num_rows FILTER html %]" valign="top">
+
+    <td rowspan="[% num_rows FILTER html %]">
       [% IF product.flag_types.bug.size > 0 %]
         [% PROCESS "flag/list.html.tmpl" flag_types = product.flag_types.bug
                                          any_flags_requesteeble = 1
@@ -285,11 +320,7 @@ function handleWantsAttachment(wants_attachment) {
   </tr>
 
   <tr>
-    <td align="right">
-      <strong>
-        <a href="page.cgi?id=fields.html#assigned_to">Assign To</a>:
-      </strong>
-    </td>
+    <th><a href="page.cgi?id=fields.html#assigned_to">Assign To</a>:</th>
     <td colspan="2">
       [% INCLUDE global/userselect.html.tmpl
          name => "assigned_to"
@@ -304,7 +335,7 @@ function handleWantsAttachment(wants_attachment) {
   
 [% IF Param("useqacontact") %]
     <tr>
-      <td align="right"><strong>QA Contact:</strong></td>
+      <th>QA Contact:</th>
       <td colspan="2">
       [% INCLUDE global/userselect.html.tmpl
          name => "qa_contact"
@@ -319,7 +350,7 @@ function handleWantsAttachment(wants_attachment) {
 [% END %]
 
   <tr>
-    <td align="right"><strong>Cc:</strong></td>
+    <th>CC:</th>
     <td colspan="2">
       [% INCLUDE global/userselect.html.tmpl
          name => "cc"
@@ -332,7 +363,7 @@ function handleWantsAttachment(wants_attachment) {
   </tr>
 
   <tr>
-    <th align="right">Default CC:</th>
+    <th>Default CC:</th>
     <td colspan="2">
       <div id="initial_cc">
           <!-- This has to happen after everything above renders,
@@ -344,19 +375,18 @@ function handleWantsAttachment(wants_attachment) {
   </tr>
   
   <tr>
-    <td>&nbsp;</td>
-    <td colspan="2"></td>
+    <td colspan="3">&nbsp;</td>
   </tr>
 
 [% IF user.in_group(Param('timetrackinggroup')) %]
   <tr>
-    <td align="right"><strong>Estimated Hours:</strong></td>
+    <th>Estimated Hours:</th>
     <td colspan="2">
       <input name="estimated_time" size="6" maxlength="6" value="0.0">
     </td>
   </tr>
   <tr>
-    <td align="right"><strong>Deadline:</strong></td>
+    <th>Deadline:</th>
     <td colspan="2">
       <input name="deadline" size="10" maxlength="10" value="[% deadline FILTER html %]">
       <small>(YYYY-MM-DD)</small>
@@ -364,14 +394,13 @@ function handleWantsAttachment(wants_attachment) {
   </tr>
 
   <tr>
-    <td>&nbsp;</td>
-    <td colspan="2"></td>
+    <td colspan="3">&nbsp;</td>
   </tr>
 [% END %]
 
 [% IF Param("usebugaliases") %]
   <tr>
-    <td align="right"><strong>Alias:</strong></td>
+    <th>Alias:</th>
     <td colspan="2">
       <input name="alias" size="20">
     </td>
@@ -379,31 +408,37 @@ function handleWantsAttachment(wants_attachment) {
 [% END %]
 
   <tr>
-    <td align="right"><strong>URL:</strong></td>
+    <th>URL:</th>
     <td colspan="2">
       <input name="bug_file_loc" size="60"
              value="[% bug_file_loc FILTER html %]">
     </td>
   </tr>
+</tbody>
 
+<tbody>
   [% USE Bugzilla %]
-  [% FOREACH field = Bugzilla.get_fields({ obsolete => 0, custom => 1, 
+  [% custom_fields = Bugzilla.get_fields({ obsolete => 0, custom => 1,
                                            enter_bug => 1 }) %]
+
+  [% FOREACH field = custom_fields %]
     [% SET value = ${field.name} IF ${field.name}.defined %]
     <tr>
-      [% PROCESS bug/field.html.tmpl editable=1 value_span=2 %]
+      [% PROCESS bug/field.html.tmpl editable=1 value_span=3 %]
     </tr>
   [% END %]
 
   <tr>
-    <td align="right"><strong>Summary:</strong></td>
+    <th>Summary:</th>
     <td colspan="2">
       <input name="short_desc" size="60" value="[% short_desc FILTER html %]"
              maxlength="255">
     </td>
+    <td>&nbsp;</td>
   </tr>
 
-  <tr><td align="right" valign="top"><strong>Description:</strong></td>
+  <tr>
+    <th>Description:</th>
     <td colspan="3">
       [% defaultcontent = BLOCK %]
         [% IF cloned_bug_id %]
@@ -429,7 +464,7 @@ function handleWantsAttachment(wants_attachment) {
 
   [% IF Param("insidergroup") && user.in_group(Param("insidergroup")) %]
     <tr>
-      <td></td>
+      <th>&nbsp;</th>
       <td colspan="3">
         &nbsp;&nbsp;
         <input type="checkbox" id="commentprivacy" name="commentprivacy"
@@ -440,9 +475,11 @@ function handleWantsAttachment(wants_attachment) {
       </td>
     </tr>
   [% END %]
+</tbody>
 
+<tbody class="expert_fields">
   <tr>
-    <th align="right" valign="top">Attachment:</th>
+    <th>Attachment:</th>
     <td colspan="3">
       <script type="text/javascript">
         <!--
@@ -479,38 +516,33 @@ function handleWantsAttachment(wants_attachment) {
   [% IF user.in_group('editbugs', product.id) %]
     [% IF use_keywords %]
       <tr>
-        <td align="right" valign="top">
-          <strong>
-            <a href="describekeywords.cgi">Keywords</a>:
-          </strong>
-        </td>
+        <th><a href="describekeywords.cgi">Keywords</a>:</th>
         <td colspan="3">
           <input id="keywords" name="keywords" size="60" value="[% keywords FILTER html %]" onfocus="this.chooser.open();"> (optional)
         </td>
       </tr>
     [% END %]
+
     <tr>
-      <td align="right">
-        <strong>Depends on:</strong>
-      </td>
-      <td>
+      <th>Depends on:</th>
+      <td colspan="3">
         <input name="dependson" accesskey="d" value="[% dependson FILTER html %]">
       </td>
     </tr>
     <tr>
-      <td align="right">
-        <strong>Blocks:</strong>
-      </td>
-      <td>
+      <th>Blocks:</th>
+      <td colspan="3">
         <input name="blocked" accesskey="b" value="[% blocked FILTER html %]">
       </td>
     </tr>
   [% END %]
+</tbody>
 
+<tbody>
+  [% IF group.size %]
   <tr>
-    <td></td>
+    <th>&nbsp;</th>
     <td colspan="3">
-    [% IF group.size %]
       <br>
         <strong>
           Only users in all of the selected groups can view this [% terms.bug %]:
@@ -530,46 +562,27 @@ function handleWantsAttachment(wants_attachment) {
           [% " checked=\"checked\"" IF g.checked %]>
           <label for="bit-[% g.bit %]">[% g.description FILTER html_light %]</label><br>
       [% END %]
-      <br>
-    [% END %]
     </td>
   </tr>
+  [% END %]
 
   [%# Form controls for entering additional data about the bug being created. %]
   [% Hook.process("form") %]
 
   <tr>
-    <td></td>
+    <th>&nbsp;</th>
     <td colspan="3">
-      <input type="submit" id="commit" value="    Commit    "
+      <input type="submit" id="commit" value="Commit"
              onclick="if (this.form.short_desc.value == '')
              { alert('Please enter a summary sentence for this [% terms.bug %].');
                return false; } return true;">
       &nbsp;&nbsp;&nbsp;&nbsp;
       <input type="submit" name="maketemplate" id="maketemplate"
-             value="Remember values as bookmarkable template">
+             value="Remember values as bookmarkable template"
+             class="expert_fields">
     </td>
   </tr>
-
-[% UNLESS (Param('defaultplatform') && Param('defaultopsys')) %]
-  <tr>
-    <td></td>
-    <td colspan="3">
-      <br>
-      We've made a guess at your
-  [% IF Param('defaultplatform') %]
-      operating system. Please check it
-  [% ELSIF Param('defaultopsys') %]
-      platform. Please check it
-  [% ELSE %]
-      operating system and platform. Please check them
-  [% END %]
-      and, if we got it wrong, email
-      [%+ Param('maintainer') %].
-    </td>
-  </tr>
-[% END %]
-
+</tbody>
   </table>
   <input type="hidden" name="form_name" value="enter_bug">
 </form>
@@ -591,12 +604,9 @@ function handleWantsAttachment(wants_attachment) {
 
 [% BLOCK select %]
   [% IF sel.description %]
-  <td align="right">
-    <strong>
-      <a href="page.cgi?id=fields.html#[% sel.name %]">
-        [% sel.description %]</a>:
-    </strong>
-  </td>
+    <th>
+      <a href="page.cgi?id=fields.html#[% sel.name %]">[% sel.description %]</a>:
+    </th>
   [% END %]
 
   <td>