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

5 files changed, 125 insertions, 28 deletions

diff --git a/skins/contrib/Dusk/.cvsignore b/skins/contrib/Dusk/.cvsignore
index f1761a004..0cbfb97f0 100644
--- a/skins/contrib/Dusk/.cvsignore
+++ b/skins/contrib/Dusk/.cvsignore
@@ -9,6 +9,7 @@ help.css
 panel.css
 params.css
 release-notes.css
+reports.css
 show_bug.css
 show_multiple.css
 summarize-time.css
diff --git a/skins/standard/IE-fixes.css b/skins/standard/IE-fixes.css
index bfd525ba2..f7e95f990 100755..100644
--- a/skins/standard/IE-fixes.css
+++ b/skins/standard/IE-fixes.css
@@ -18,6 +18,10 @@
      word-wrap: break-word;
 }
 
+.component_table {
+    margin-top: .5em;
+}
+
 #footer #useful-links li {
     padding-bottom: 0.8ex;
 }
diff --git a/skins/standard/reports.css b/skins/standard/reports.css
new file mode 100644
index 000000000..1856bd96e
--- /dev/null
+++ b/skins/standard/reports.css
@@ -0,0 +1,89 @@
+/* The contents of this file are subject to the Mozilla Public
+  * License Version 1.1 (the "License"); you may not use this file
+  * except in compliance with the License. You may obtain a copy of
+  * the License at http://www.mozilla.org/MPL/
+  *
+  * Software distributed under the License is distributed on an "AS
+  * IS" basis, WITHOUT WARRANTY OF ANY KIND, either express or
+  * implied. See the License for the specific language governing
+  * rights and limitations under the License.
+  *
+  * The Original Code is the Bugzilla Bug Tracking System.
+  *
+  * The Initial Developer of the Original Code is Everything Solved, 
+  * Inc. Portions created by the Initial Developer are Copyright (C)
+  * 2009 the Initial Developer. All Rights Reserved.
+  *
+  * Contributor(s): 
+  *   Max Kanat-Alexander <mkanat@bugzilla.org>
+  */
+
+/* describecomponents.cgi */
+
+#components_header_table {
+  margin-bottom: 1em;
+}
+
+.product_container {
+  width: 65%;
+}
+
+.product_name {
+  margin: 0;
+}
+
+.product_desc {
+  /* This is padding instead of margin because it looks better 
+   * with the scrollbar. */
+  padding: 0 2em;
+  font-style: italic;
+  max-height: 5em;
+  overflow: auto;
+}
+
+.instructions {
+  font-weight: bold;
+  font-size: 105%;
+  padding-right: 1em;
+}
+
+.components_header {
+  margin: 0;
+  font-size: 140%;
+}
+
+.component_table {
+  margin-top: -1em;
+  margin-left: 2em;
+}
+
+.component_table thead th {
+  padding-right: 1em;
+  vertical-align: bottom;
+  text-align: left;
+}
+
+.component_table td {
+  border-bottom: 1px dotted gray;
+}
+
+.component_table td.component_assignee,
+.component_table td.component_qa_contact
+{
+  border: none;
+  padding-top: .5em;
+}
+
+.component_name {
+  font-size: 115%;
+  font-weight: bold;
+  padding-right: 1em;
+  vertical-align: middle;
+  min-width: 8em;
+}
+
+.component_description {
+  padding-bottom: .5em;
+  color: #333;
+}
+
diff --git a/template/en/default/filterexceptions.pl b/template/en/default/filterexceptions.pl
index 198521649..c4d0c064f 100644
--- a/template/en/default/filterexceptions.pl
+++ b/template/en/default/filterexceptions.pl
@@ -92,10 +92,6 @@
   'request.attach_id', 
 ],
 
-'reports/components.html.tmpl' => [
-  'numcols',
-],
-
 'reports/duplicates-table.html.tmpl' => [
   'column.name', 
   'column.description',
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>