Bug 452732: Re-organize the comment headers to make them look better and be more readable

skins/contrib/Dusk/global.css

@@ -139,7 +139,9 @@ hr {
     font-size: 10pt;
 }
 
-/* comments */
+/************/
+/* Comments */
+/************/
 
 #comments th {
     font-size: 9pt;
@@ -171,26 +173,21 @@ hr {
     font-size: 9pt;
 }
 
-.bz_first_comment {
-}
-
-.bz_comment_head,
-.bz_first_comment_head {
+.bz_comment_head, .bz_first_comment_head {
     margin: 0; padding: 0;
     background-color: transparent;
     font-weight: bold;
 }
 
+.bz_comment_user {
+    margin-left: 0;
+}
+
 .bz_comment.bz_private {
     background-color: #f0e8e8;
     border-color: #f8c8ba;
 }
 
-.bz_comment_head i,
-.bz_first_comment_head i {
-    font-style: normal;
-}
-
 .comment_rule {
     display: none;
 }

skins/standard/global.css

@@ -240,6 +240,10 @@ div#docslinks {
     color: #a0a0a0;
 }
 
+/************/
+/* Comments */
+/************/
+
 .bz_comment {
     margin-bottom: 2em;
 }
@@ -260,18 +264,44 @@ div#docslinks {
      width: 50em;
 }
 
-.bz_first_comment {
+.bz_comment_user, .bz_comment_time, .bz_comment_number, 
+.bz_private_checkbox, .bz_comment_actions
+{
+    margin: 0 .5em;
+}
+
+.bz_comment_actions, .bz_comment_number, .bz_private_checkbox {
+    float: right;
+}
+
+.bz_collapse_comment {
+    text-decoration: none;
+}
+
+.bz_private_checkbox input { 
+    margin: 0;
+    vertical-align: middle;
 }
 
 .bz_comment_head, .bz_first_comment_head {
+    padding-top: .1em;
+    padding-bottom: .1em;
+    padding-left: .5em;
     background-color: #e0e0e0;
 }
+
+.bz_comment_user_images img {
+    vertical-align: bottom;
+}
+
 .bz_comment_hilite pre {
     background-color: lightgreen;
     margin: 0;
     padding: 1em 0;
 }
 
+/** End Comments **/
+
 .bz_default_hidden {
     display: none;
 }

template/en/default/bug/comments.html.tmpl

@@ -69,13 +69,13 @@
   }
 
   function collapse_comment(link, comment) {
-    link.innerHTML = "(+)";
+    link.innerHTML = "[+]";
     link.title = "Expand the comment.";
     comment.className = "collapsed";
   }
 
   function expand_comment(link, comment) {
-    link.innerHTML = "(-)";
+    link.innerHTML = "[-]";
     link.title = "Collapse the comment";
     comment.className = "";
   }
@@ -84,9 +84,10 @@
    * won't display this link  */
 
   function addCollapseLink(count) {
-    document.write(' <a href="#" id="comment_link_' + count +
+    document.write(' <a href="#" class="bz_collapse_comment"' +
+                   ' id="comment_link_' + count +
                    '" onclick="toggle_comment_display(this, ' +  count +
-                   '); return false;" title="Collapse the comment.">(-)</a> ');
+                   '); return false;" title="Collapse the comment.">[-]<\/a> ');
   }
   //-->
   </script>
@@ -150,46 +151,25 @@
                 [% " bz_first_comment" IF count == description %]">
       [% IF count == description %]
         [% class_name = "bz_first_comment_head" %]
-        [% comment_label = "" %]
-        [% comment_link = "Description" %]
-        [% decoration = "" %]
+        [% comment_label = "Description" %]
       [% ELSE %]
         [% class_name = "bz_comment_head" %]
-        [% comment_label = "Comment" %]
-        [% comment_link = "#" _ count %]
-        [% decoration = '<span class="comment_rule">-------</span>' %]
+        [% comment_label = "Comment " _ count %]
       [% END %]
 
-      <span class="[% class_name FILTER html %]">
-        [%# Do not filter decoration as it's a real HTML tag. No XSS risk. %]
-        [% decoration FILTER none %]
-        <i>[% comment_label FILTER html %]
-        <a name="c[% count %]" href="show_bug.cgi?id=[% bug.bug_id %]#c[% count %]">
-          [% comment_link FILTER html %]</a> From
-        <span class="vcard">
-          <a class="fn email" href="mailto:[% comment.author.email FILTER html %]">
-            [% (comment.author.name || comment.author.login) FILTER html %]</a>
-        </span>
-        [% FOREACH group = comment.author.direct_group_membership %]
-          [% NEXT UNLESS group.icon_url %]
-          <img src="[% group.icon_url FILTER html %]"
-               alt="[% group.name FILTER html %]"
-               title="[% group.name FILTER html %] - [% group.description FILTER html %]">
-        [% END %]
-
-        [%+ comment.time FILTER time %]</i>
+      <div class="[% class_name FILTER html %]">
 
         [% IF mode == "edit" %]
+          <span class="bz_comment_actions">
             <script type="text/javascript"><!--
-            addCollapseLink([% count %]);
-            addReplyLink([% count %], [% comment.id %]); //-->
+              addReplyLink([% count %], [% comment.id %]);
+              addCollapseLink([% count %]); // -->
             </script>
-        [% END %]
-        [%+ decoration FILTER none %]
           </span>
+        [% END %]
 
         [% IF mode == "edit" && isinsider %]
-        <i>
+          <div class="bz_private_checkbox">
             <input type="hidden" value="1"
                    name="defined_isprivate_[% comment.id %]">
             <input type="checkbox"
@@ -198,8 +178,37 @@
                    onClick="updateCommentPrivacy(this, [% count %])"
                    [% " checked=\"checked\"" IF comment.isprivate %]>
             <label for="isprivate_[% comment.id %]">Private</label>
-        </i>
+          </div>
+        [% END %]
+
+        <span class="bz_comment_number">
+          <a name="c[% count %]" 
+             href="show_bug.cgi?id=[% bug.bug_id %]#c[% count %]">
+            [%- comment_label FILTER html %]</a>
+        </span>
+
+        <span class="bz_comment_user">
+          <span class="vcard">
+            <a class="fn email" 
+               href="mailto:[% comment.author.email FILTER html %]">
+              [% (comment.author.name || comment.author.login) FILTER html %]</a>
+          </span>
+        </span>
+
+        <span class="bz_comment_user_images">
+          [% FOREACH group = comment.author.direct_group_membership %]
+            [% NEXT UNLESS group.icon_url %]
+            <img src="[% group.icon_url FILTER html %]"
+                 alt="[% group.name FILTER html %]"
+                 title="[% group.name FILTER html %] - [% group.description FILTER html %]">
           [% END %]
+        </span>
+
+        <span class="bz_comment_time">
+          [%+ comment.time FILTER time %]
+        </span>
+      </div>
+
       [% IF user.in_group(Param('timetrackinggroup')) &&
             (comment.work_time > 0 || comment.work_time < 0) %]
          <br>