Bug 1511158 - Enhance comment action button style

diff --git a/extensions/BugModal/template/en/default/bug_modal/activity_stream.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/activity_stream.html.tmpl
index 05e8833f1f53538dca555b0224b89ac374771b94..03aa9163904e0a6e53bedac948afb5b0694c795a 100644 (file)
--- a/extensions/BugModal/template/en/default/bug_modal/activity_stream.html.tmpl
+++ b/extensions/BugModal/template/en/default/bug_modal/activity_stream.html.tmpl
@@ -123,7 +123,7 @@
           [% Hook.process('user', 'bug/comments.html.tmpl') %]
         </td>
 
-        <td class="comment-actions">
+        <td rowspan="2" class="comment-actions"><div role="group">
           [% IF user.is_insider && bug.check_can_change_field('longdesc', 0, 1) %]
             [% IF comment.is_private %]
               <div class="comment-private edit-hide bz_private">
@@ -158,11 +158,11 @@
                                   "expand_label": "Expanded", "expand_tooltip": "Expanded this comment" }'>
             <span class="icon" aria-hidden="true"></span>
           </button>
-        </td>
+        </div></td>
       </tr>
 
       <tr id="cr-[% comment.count FILTER none %]" [%= IF comment.collapsed %]style="display:none"[% END %]>
-        <td colspan="2">
+        <td>
           <h3 class="change-name">
             <a href="[% basepath FILTER none %]show_bug.cgi?id=[% bug.bug_id FILTER none %]#c[% comment.count FILTER none %]">
               [% comment.count == 0 ? "Description" : "Comment " _ comment.count ~%]
@@ -236,17 +236,17 @@
           [% END %]
           [% Hook.process('user', 'bug/changes.html.tmpl') %]
         </td>
-        <td class="comment-actions">
+        <td rowspan="2" class="comment-actions"><div role="group">
           <button type="button" class="change-spinner minor iconic" id="as-[% id FILTER none %]"
                   title="Collapse this change" aria-label="Collapse" aria-expanded="true"
                   data-strings='{ "collapse_label": "Collapse", "collapse_tooltip": "Collapse this change",
                                   "expand_label": "Expanded", "expand_tooltip": "Expanded this change" }'>
             <span class="icon" aria-hidden="true"></span>
           </button>
-        </td>
+        </div></td>
       </tr>
       <tr id="ar-[% id FILTER none %]">
-        <td colspan="2">
+        <td>
           <h3 class="change-name">
             <a href="[% basepath FILTER none %]show_bug.cgi?id=[% bug.bug_id FILTER none %]#[% id FILTER none %]">Updated</a>
           </h3>

diff --git a/extensions/BugModal/web/bug_modal.css b/extensions/BugModal/web/bug_modal.css
index b7ce55d193e1eec0fa037683ade214c83be64e36..c1ec87dd555a88b484923d90a6a6bf716bd75451 100644 (file)
--- a/extensions/BugModal/web/bug_modal.css
+++ b/extensions/BugModal/web/bug_modal.css
@@ -604,11 +604,8 @@ h3.change-name {
 }
 
 .comment-actions {
-    display: flex;
-    align-items: center;
-    white-space: nowrap;
-    vertical-align: top;
-    padding: 2px 2px 0 0 !important;
+    padding: 0 8px 0 0 !important;
+    vertical-align: middle;
 }
 
 .comment-private {
@@ -616,6 +613,12 @@ h3.change-name {
     margin: 0 8px;
 }
 
+.comment-actions > [role="group"] {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+}
+
 .comment-actions button {
     outline: 0;
     margin: 0;
@@ -637,6 +640,8 @@ h3.change-name {
 
 .comment-actions button.iconic .icon::before {
     font-family: 'Material Icons';
+    font-size: 16px;
+    vertical-align: middle;
 }
 
 .comment-actions .tag-btn .icon::before {
@@ -655,10 +660,6 @@ h3.change-name {
     content: '\E145';
 }
 
-.change-spinner {
-    width: 29px;
-}
-
 .comment-text {
     white-space: pre-wrap;
     line-height: 1.2;
@@ -691,7 +692,7 @@ body.platform-Win32 .comment-text, body.platform-Win64 .comment-text {
 }
 
 .comment-tags {
-    padding: 0 8px 2px 8px !important;
+    padding: 0 8px !important;
 }
 
 .comment-tag {