Bug 251656: Redesign dependency tree, part 1: fix the tree itself - Patch by André Batosti <batosti@async.com.br> r=myk r=LpSolit a=justdave

2 files changed, 109 insertions, 111 deletions

diff --git a/template/en/default/bug/dependency-tree.html.tmpl b/template/en/default/bug/dependency-tree.html.tmpl
index 8b5ecd59c..8fd0c18e6 100644
--- a/template/en/default/bug/dependency-tree.html.tmpl
+++ b/template/en/default/bug/dependency-tree.html.tmpl
@@ -19,6 +19,7 @@
   # Contributor(s): Tobias Burnus <burnus@net-b.de>
   #                 Ville Skyttä <ville.skytta@iki.fi>
   #                 Myk Melez <myk@mozilla.org>
+  #                 André Batosti <batosti@async.com.br>
   #%]
 
 [% PROCESS global/variables.none.tmpl %]
@@ -26,136 +27,135 @@
 [% filtered_desc = blocked_tree.$bugid.summary FILTER html %]
 [% PROCESS global/header.html.tmpl
    title = "Dependency tree for $terms.Bug $bugid"
-   h1    = "Dependency tree for <a href=\"show_bug.cgi?id=$bugid\">$terms.Bug $bugid</a>"
+   h1    = "Dependency tree for 
+            <a href=\"show_bug.cgi?id=$bugid\">$terms.Bug $bugid</a>"
+   javascript_urls = ["js/expanding-tree.js"]
+   style_urls = ["skins/standard/dependency-tree.css"]
    h2    = filtered_desc
 %]
 
 [% PROCESS depthControlToolbar %]
-
-[%# Display the tree of bugs that this bug depends on. %]
-<h3>
-  [% IF hide_resolved %]
-    Open [% terms.bugs %]
-  [% ELSE %]
-    [% terms.Bugs %]
-  [% END %] 
-  that <a href="show_bug.cgi?id=[% bugid %]">[% terms.bug %] [%+ bugid %]</a> 
-  depends on</h3>
-[% IF dependson_ids.size > 0 %]
-  (
-  [% IF maxdepth -%]Up to [% maxdepth %] level[% "s" IF maxdepth > 1 %] deep | [% END %]
-  <a href="buglist.cgi?bug_id=[% dependson_ids.join(",") %]">view as [% terms.bug %] list</a>
-  [% IF canedit && dependson_ids.size > 1 %]
-    | <a href="buglist.cgi?bug_id=[% dependson_ids.join(",") %]&amp;tweak=1">change several</a>
-  [% END %])
-  [% INCLUDE display_tree tree=dependson_tree bug_id=bugid %]
-[% ELSE %]
-  </h3>
-  <p>None</p>
-[% END %]
-
-[%# Display the tree of bugs that this bug blocks. %]
-<h3>
-  [% IF hide_resolved %]
-    Open [% terms.bugs %]
-  [% ELSE %]
-    [% terms.Bugs %]
-  [% END %] 
-  that <a href="show_bug.cgi?id=[% bugid %]">[% terms.bug %] [%+ bugid %]</a> 
-  blocks</h3>
-[% IF blocked_ids.size > 0 %]
-  (
-  [% IF maxdepth -%]Up to [% maxdepth %] level[% "s" IF maxdepth > 1 %] deep | [% END %]
-  <a href="buglist.cgi?bug_id=[% blocked_ids.join(",") %]">view as [% terms.bug %] list</a>
-  [% IF canedit && blocked_ids.size > 1 %]
-    | <a href="buglist.cgi?bug_id=[% blocked_ids.join(",") %]&amp;tweak=1">change several</a>
-  [% END %])
-  [% INCLUDE display_tree tree=blocked_tree bug_id=bugid %]
-[% ELSE %]
-  </h3>
-  <p>None</p>
-[% END %]
+  
+[% INCLUDE tree_section ids=dependson_ids type=1 %]
+ 
+[% INCLUDE tree_section ids=blocked_ids type=2 %] 
 
 [% PROCESS depthControlToolbar %]
 
+[% PROCESS global/footer.html.tmpl %]
+
 [%###########################################################################%]
-[%# Block to display a tree                                                 #%]
+[%# Tree-drawing blocks                                                     #%]
 [%###########################################################################%]
 
+[% BLOCK tree_section %]
+  [%# INTERFACE
+    #   - ids: a list of bug IDs to be displayed as children
+    #   - type: the type of tree. 1 = depends on, 2 = blockeds
+    # GLOBALS
+    #   - seen: Maintains a global hash of bugs that have been displayed
+    #%]
+  [% global.seen = {} %]
+  [%# Display the tree of bugs that this bug depends on. %]
+  <h3>
+    [% ids.size %] 
+    [% IF hide_resolved %]
+      Open [% terms.bugs %]
+    [% ELSE %]
+      [% terms.Bugs %]
+    [%- END %] 
+    that <a href="show_bug.cgi?id=[% bugid %]">[% terms.bug %] [%+ bugid %]</a> 
+    [% IF type == 1 %]
+        [% tree_name = "dependson_tree" %]
+        depends on
+    [% ELSIF type == 2 %]
+        [% tree_name = "blocked_tree" %]
+        blocks
+    [% END %]
+  </h3>
+  [% IF ids.size > 0 %]
+    ([% IF maxdepth -%]Up to [% maxdepth %] level[% "s" IF maxdepth > 1 %] deep | [% END -%]
+    <a href="buglist.cgi?bug_id=[% ids.join(",") %]">view as [% terms.bug %] list</a>
+    [% IF canedit && ids.size > 1 %]
+      | <a href="buglist.cgi?bug_id=[% ids.join(",") %]&amp;tweak=1">change several</a>
+    [% END %])
+    <ul class="tree">
+      [% INCLUDE display_tree tree=$tree_name %]
+    </ul>
+    <p>
+  [% ELSE %]
+    <p>None</p>
+  [% END %]
+[% END %]
+
+
 [% BLOCK display_tree %]
-[% tree.$bug_id.seen = 1 %]
-<ul>
-  [% FOREACH dep_id = tree.$bug_id.dependencies %]
-    [% dep = tree.$dep_id %]
-    <li>
-      [% "<script>document.write('<a href=\"#\" class=\"toggle\" onclick=\"listToggle(event); return false\">[-]</a>')</script>"
-         IF dep.dependencies.size > 0 && !dep.seen %]
-      [% isclosed = !dep.open %]
-      [% FILTER closed(isclosed) %]
-      <a href="show_bug.cgi?id=[% dep_id %]">[% dep_id %]
-        [[% IF dep.milestone %][% dep.milestone FILTER html %], [% END %]
-        [% dep.assignee_email FILTER html %]] -
-        [% IF dep.seen %]
-          <i>This [% terms.bug %] appears elsewhere in this tree.</i></a>
-        [% ELSE %]
-          [%+ dep.summary FILTER html %].</a>
+  [%# INTERFACE
+    #   - bugid: the ID of the bug being displayed
+    #   - tree: a hash of bug objects
+    #%]
+  [% bug = tree.$bugid %]
+  <li>
+    [%- INCLUDE bullet bugid=bugid bug=bug -%]
+    <span class="summ[% "_deep" IF bug.dependencies.size %]" 
+          id="[% bugid FILTER html %]" 
+          [% IF global.seen.$bugid %]
+            onMouseover="duplicatedover('[% bugid FILTER html %]')"
+            onMouseout="duplicatedout('[% bugid FILTER html %]')"
+          [% END %]>
+      [%- INCLUDE buglink bug=bug bugid=bugid %]
+    </span>
+    [% IF global.seen.$bugid %]
+      <b><a title="Already displayed above; click to locate"
+            onclick="duplicated('[% bugid FILTER html %]')"
+            href="#b[% bugid %]">(*)</a></b>
+    [% ELSIF bug.dependencies.size %]
+      <ul>
+        [% FOREACH depid = bug.dependencies %]
+          [% INCLUDE display_tree bugid=depid %]
         [% END %]
-      [% END %]
-      [% INCLUDE display_tree bug_id=dep_id
-           IF dep.dependencies.size > 0 && !dep.seen %]
-    </li>
+      </ul>
+    [% END %]
+  </li>
+  [% global.seen.$bugid = 1 %]
+[% END %]
+
+[% BLOCK bullet %]
+  [% IF bug.dependencies.size > 0 && ! global.seen.$bugid %]
+    [% extra_class = " b_open" %]
+    [% extra_args = 'onclick="return doToggle(this, event)"' %] 
   [% END %]
-</ul>
+  <a name="b[% bugid %]" 
+     class="b [%+ extra_class FILTER none %]"
+     title="Click to expand or contract this portion of the tree. Hold down the Ctrl key while clicking to expand or contract all subtrees."
+     [% extra_args FILTER none %]>&nbsp;&nbsp;</a>
 [% END %]
 
-<script type="text/javascript">
-if (typeof Node == 'undefined') {
-    /* MSIE doesn't define Node, so provide a compatibility object */
-    window.Node = {
-        TEXT_NODE: 3
-    };
-}
-
-function toggleDisplay(node)
-{
-    var display = node.style.display;
-    if (display == "none") {
-        node.style.display =
-            ("oldDisplay" in node) ? node.oldDisplay : "block";
-        return true;
-    }
-
-    node.oldDisplay = display;
-    node.style.display = "none";
-    return false;
-}
-
-function listToggle(event)
-{
-    var node = event.target;
-    if (!node)
-       node = event.srcElement;
-    if (node.nodeType == Node.TEXT_NODE)
-        node = node.parentNode;
-    var toggle = node.nextSibling;
-    while (toggle && toggle.tagName != "UL")
-        toggle = toggle.nextSibling;
-    if (toggle) {
-        node.firstChild.data = toggleDisplay(toggle) ? "[-]" : "[+]";
-    }
-}
-
-</script>
+[% BLOCK buglink %]
+  [% isclosed = !bug.open %]
+  [% FILTER closed(isclosed) -%]
+    <a title="[% INCLUDE buginfo bug=bug %]"
+       href="show_bug.cgi?id=[% bugid %]">
+      <b>[%- bugid %]:</b>
+      <span class="summ_text">[%+ bug.summary FILTER html %]</span>
+      <span class="summ_info">[[% INCLUDE buginfo %]]</span>
+    </a>
+  [% END %]
+[% END %]
 
-[% PROCESS global/footer.html.tmpl %]
+[% BLOCK buginfo %]
+  [% bug.status FILTER html %]
+  [%+ bug.resolution FILTER html %]; assigned to [% bug.assignee_email FILTER html %]; 
+  [% "Target: " _ bug.milestone IF bug.milestone %]
+[% END %]
 
 [%###########################################################################%]
 [%# Block for depth control toolbar                                         #%]
 [%###########################################################################%]
 
 [% BLOCK depthControlToolbar %]
- <table cellpadding="3" border="0" cellspacing="0" bgcolor="#d0d0d0">
- <tr>
+ <table cellpadding="3" border="0" cellspacing="0" bgcolor="#e0e0e0">
+   <tr>
    [%# Hide/show resolved button
        Swaps text depending on the state of hide_resolved %]
    <td align="center">
diff --git a/template/en/default/filterexceptions.pl b/template/en/default/filterexceptions.pl
index 57a323e7f..dbc618ee6 100644
--- a/template/en/default/filterexceptions.pl
+++ b/template/en/default/filterexceptions.pl
@@ -313,10 +313,8 @@
 'bug/dependency-tree.html.tmpl' => [
   'bugid', 
   'maxdepth', 
-  'dependson_ids.join(",")', 
-  'blocked_ids.join(",")', 
-  'dep_id', 
   'hide_resolved', 
+  'ids.join(",")',
   'maxdepth + 1', 
   'maxdepth > 0 && maxdepth <= realdepth ? maxdepth : ""',
   'maxdepth == 1 ? 1