Bug 1472954 - Implement one-click component watching on bug modal and component description pages

3 files changed, 51 insertions, 71 deletions

diff --git a/template/en/default/global/header.html.tmpl b/template/en/default/global/header.html.tmpl
index 153137394..a87b2015e 100644
--- a/template/en/default/global/header.html.tmpl
+++ b/template/en/default/global/header.html.tmpl
@@ -305,7 +305,7 @@
             </li>
           [% END %]
           [% IF Param('docs_urlbase') %]
-            <li role="separator" class="dropdown-separator"></li>
+            <li role="separator"></li>
             <li role="presentation">
               <a href="[% docs_urlbase FILTER html %]" role="menuitem" tabindex="-1">Documentation</a>
             </li>
@@ -331,7 +331,7 @@
               <div class="email">[% user.login FILTER html %]</div>
             </div>
           </li>
-          <li role="separator" class="dropdown-separator"></li>
+          <li role="separator"></li>
           <li role="presentation">
             <a href="user_profile" role="menuitem" tabindex="-1">My Profile</a>
           </li>
@@ -343,7 +343,7 @@
             <a href="userprefs.cgi" role="menuitem" tabindex="-1">Preferences</a>
           </li>
           [% IF user.authorizer.can_logout %]
-            <li role="separator" class="dropdown-separator"></li>
+            <li role="separator"></li>
             <li role="presentation">
               <a href="index.cgi?logout=1" role="menuitem" tabindex="-1">Log out</a>
             </li>
diff --git a/template/en/default/reports/components.html.tmpl b/template/en/default/reports/components.html.tmpl
index b2a21ccc1..f8b0f3f80 100644
--- a/template/en/default/reports/components.html.tmpl
+++ b/template/en/default/reports/components.html.tmpl
@@ -17,6 +17,7 @@
   #
   # Contributor(s): Bradley Baetz <bbaetz@student.usyd.edu.au>
   #                 Max Kanat-Alexander <mkanat@bugzilla.org>
+  #                 Kohei Yoshino <kohei.yoshino@gmail.com>
   #%]
 
 [%# INTERFACE:
@@ -29,53 +30,36 @@
   Components for [% product.name FILTER html %]
 [% END %]
 
-[% PROCESS global/header.html.tmpl 
-  style_urls = [ "skins/standard/reports.css" ]
-  title = title 
+[% DEFAULT
+  style_urls = [ "skins/standard/describecomponents.css" ]
+  javascript_urls = []
+  title = title
+  show_default_people = 1
 %]
 
-[% IF Param("useqacontact") %]
-  [% numcols = 3 %]
-[% ELSE %]
-  [% numcols = 2 %]
-[% END %]
-
-<h2>[% mark FILTER html %]</h2>
-
-<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">
-      <span class="product_name">[% product.name FILTER html %]</span>
-      <div class="product_desc">
-        [% product.description FILTER html_light %]
-      </div>
-    </td>
-  </tr>
-</table>
+[% Hook.process('start') %]
 
-<span class="components_header">Components</span>
+[% PROCESS global/header.html.tmpl
+  style_urls = style_urls
+  javascript_urls = javascript_urls
+  title = title
+%]
 
-<table summary="Components table"
-       class="component_table" cellspacing="0" cellpadding="0">
-  <thead>
-  <tr>
-    <th>&nbsp;</th>
-    <th>Default Assignee</th>
-    [% IF Param("useqacontact") %]
-      <th>Default QA Contact</th>
+<section class="product">
+  <header>
+    <h1>[% product.name FILTER html %]</h1>
+    <p>[% product.description FILTER html_light %]</p>
+    [% Hook.process('product_header') %]
+  </header>
+  <div class="instructions">
+    <p>Select a component to see open [% terms.bugs %] in that component:</p>
+  </div>
+  <div class="list">
+    [% FOREACH comp = product.components %]
+      [% INCLUDE describe_comp %]
     [% END %]
-  </tr>
-  </thead>
-
-  <tbody>
-  [% FOREACH comp = product.components %]
-    [% INCLUDE describe_comp %]
-  [% END %]
-  </tbody>
-</table>
+  </div>
+</section>
 
 [% PROCESS global/footer.html.tmpl %]
 
@@ -84,27 +68,24 @@
 [%############################################################################%]
 
 [% BLOCK describe_comp %]
-  <tr id="[% comp.name FILTER html %]"
-      [%- IF comp.name == component_mark %] class="component_hilite"[% END %]>
-    <td rowspan="2" class="component_name">
-      <a name="[% comp.name FILTER html %]" 
-         href="buglist.cgi?product=
-               [%- product.name FILTER uri %]&amp;component=
-               [%- comp.name FILTER uri %]&amp;resolution=---">
-      [% comp.name FILTER html %]</a>
-    </td>
-    <td class="component_assignee">
-      [% INCLUDE global/user.html.tmpl who = comp.default_assignee %]
-    </td>
-    [% IF Param("useqacontact") %]
-      <td class="component_qa_contact">
-        [% INCLUDE global/user.html.tmpl who = comp.default_qa_contact %]
-      </td>
-    [% END %]
-  </tr>
-  <tr[% IF comp.name == component_mark %] class="component_hilite"[% END %]>
-    <td colspan="[% numcols - 1 %]" class="component_description">
-      [% comp.description FILTER html_light %]
-    </td>
-  </tr>
+  <section id="[% comp.name FILTER html %]" class="component[%- IF comp.name == component_mark %] highlight[% END %]">
+    <header>
+      <h2><a href="buglist.cgi?product=[%- product.name FILTER uri %]&amp;component=
+                   [%- comp.name FILTER uri %]&amp;resolution=---">[% comp.name FILTER html %]</a></h2>
+    </header>
+    <div>
+      <p class="description">[% comp.description FILTER html_light %]</p>
+      [% IF show_default_people %]
+      <ul>
+        <li>Assignee: [% INCLUDE global/user.html.tmpl who = comp.default_assignee %]</li>
+        [% IF Param("useqacontact") %]
+        <li>QA: [% INCLUDE global/user.html.tmpl who = comp.default_qa_contact %]</li>
+        [% END %]
+      </ul>
+      [% END %]
+    </div>
+    <footer>
+      [% Hook.process('component_footer', 'reports/components.html.tmpl') %]
+    </footer>
+  </section>
 [% END %]
diff --git a/template/en/default/reports/menu.html.tmpl b/template/en/default/reports/menu.html.tmpl
index 5e19b1209..f5e9c4664 100644
--- a/template/en/default/reports/menu.html.tmpl
+++ b/template/en/default/reports/menu.html.tmpl
@@ -28,7 +28,6 @@
 [% PROCESS global/header.html.tmpl
   title = "Reporting and Charting Kitchen"
   doc_section = "reporting.html"
-  style_urls = ['skins/standard/reports.css']
 %]
 
 <p>
@@ -70,14 +69,14 @@
   <ul>
     [% IF feature_enabled('old_charts') %]
       <li id="old_charts">
-        <strong><a href="reports.cgi">Old Charts</a></strong> - 
+        <strong><a href="reports.cgi">Old Charts</a></strong> -
         plot the status and/or resolution of [% terms.bugs %] against
         time, for each product in your database.
       </li>
     [% END %]
     [% IF feature_enabled('new_charts') AND user.in_group(Param("chartgroup")) %]
       <li id="new_charts">
-        <strong><a href="chart.cgi">New Charts</a></strong> - 
+        <strong><a href="chart.cgi">New Charts</a></strong> -
         plot any arbitrary search against time. Far more powerful.
       </li>
     [% END %]