Bug 523788: Change the UI of describecomponents.cgi (the "Browse" interface) so that it's clearer and easier to use when browsing.

Patch by Max Kanat-Alexander <mkanat@bugzilla.org> r=LpSolit, a=LpSolit

1 files changed, 31 insertions, 24 deletions

diff --git a/template/en/default/reports/components.html.tmpl b/template/en/default/reports/components.html.tmpl
index 3fe609143..35f656a5a 100644
--- a/template/en/default/reports/components.html.tmpl
+++ b/template/en/default/reports/components.html.tmpl
@@ -16,6 +16,7 @@
   # Rights Reserved.
   #
   # Contributor(s): Bradley Baetz <bbaetz@student.usyd.edu.au>
+  #                 Max Kanat-Alexander <mkanat@bugzilla.org>
   #%]
 
 [%# INTERFACE:
@@ -27,7 +28,10 @@
   Components for [% product.name FILTER html %]
 [% END %]
 
-[% PROCESS global/header.html.tmpl title = title %]
+[% PROCESS global/header.html.tmpl 
+  style_urls = [ "skins/standard/reports.css" ]
+  title = title 
+%]
 
 [% IF Param("useqacontact") %]
   [% numcols = 3 %]
@@ -35,30 +39,38 @@
   [% numcols = 2 %]
 [% END %]
 
+<table cellpadding="0" cellspacing="0" id="components_header_table">
+  <tr>
+    <td class="instructions">
+      Select a component to see open [% terms.bugs %] in that component:
+    </td>
+    <td class="product_container">
+      <h2 class="product_name">[% product.name FILTER html %]</h2>
+      <div class="product_desc">
+        [% product.description FILTER html_light %]
+      </div>
+    </td>
+  </tr>
+</table>
 
-<p><strong>[% product.name FILTER html %]</strong>: 
-  [% product.description FILTER html_light %]</p>
-
-<p><em>Select a component to view open [% terms.bugs %] in that 
-  component:</em></p>
+<h3 class="components_header">Components</h3>
 
-<table>
+<table class="component_table" cellspacing="0" cellpadding="0">
+  <thead>
   <tr>
-    <th align="left">Component</th>
-    <th align="left">Default Assignee</th>
+    <th>&nbsp;</th>
+    <th>Default Assignee</th>
     [% IF Param("useqacontact") %]
-      <th align="left">Default QA Contact</th>
+      <th>Default QA Contact</th>
     [% END %]
   </tr>
+  </thead>
 
+  <tbody>
   [% FOREACH comp = product.components %]
     [% INCLUDE describe_comp %]
   [% END %]
-  <tr>
-    <td colspan="[% numcols %]">
-      <hr>
-    </td>
-  </tr>
+  </tbody>
 </table>
 
 [% PROCESS global/footer.html.tmpl %]
@@ -69,29 +81,24 @@
 
 [% BLOCK describe_comp %]
   <tr>
-    <td colspan="[% numcols %]">
-      <hr>
-    </td>
-  </tr>
-  <tr>
-    <td rowspan="2">
+    <td rowspan="2" class="component_name">
       <a name="[% comp.name FILTER html %]"
          href="buglist.cgi?product=
                [%- product.name FILTER url_quote %]&amp;component=
                [%- comp.name FILTER url_quote %]&amp;resolution=---">
       [% comp.name FILTER html %]</a>
     </td>
-    <td>
+    <td class="component_assignee">
       [% INCLUDE global/user.html.tmpl who = comp.default_assignee %]
     </td>
     [% IF Param("useqacontact") %]
-      <td>
+      <td class="component_qa_contact">
         [% INCLUDE global/user.html.tmpl who = comp.default_qa_contact %]
       </td>
     [% END %]
   </tr>
   <tr>
-    <td colspan="[% numcols - 1 %]">
+    <td colspan="[% numcols - 1 %]" class="component_description">
       [% comp.description FILTER html_light %]
     </td>
   </tr>