Bug 1146766 - 'follow/stop following' doesn't indicate changes are immediated (eg. the "cc following" count isn't updated)

4 files changed, 148 insertions, 68 deletions

diff --git a/extensions/BugModal/template/en/default/bug_modal/edit.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/edit.html.tmpl
index b8c86194c..a7eb2b7c6 100644
--- a/extensions/BugModal/template/en/default/bug_modal/edit.html.tmpl
+++ b/extensions/BugModal/template/en/default/bug_modal/edit.html.tmpl
@@ -149,6 +149,9 @@
 [%# === header === %]
 
 <div id="xhr-error" style="display:none"></div>
+<div id="floating-message" style="display:none">
+  <div id="floating-message-text"></div>
+</div>
 
 [% WRAPPER bug_modal/module.html.tmpl
     title = ""
@@ -618,7 +621,7 @@
       [% IF bug.cc && bug.cc.size %]
         <input type="hidden" name="removecc" id="removecc">
         <span id="cc-latch">&#9656;</span>
-        <span id="cc-summary">
+        <span id="cc-summary" data-count="[% bug.cc.size FILTER none %]">
           [%
             IF bug.cc.size == 1;
               is_cced ? "Just you" : "1 person";
diff --git a/extensions/BugModal/template/en/default/bug_modal/new_comment.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/new_comment.html.tmpl
index b2ba5fe0c..71a9b16ae 100644
--- a/extensions/BugModal/template/en/default/bug_modal/new_comment.html.tmpl
+++ b/extensions/BugModal/template/en/default/bug_modal/new_comment.html.tmpl
@@ -53,32 +53,36 @@
 
     [%# this checkboxes are in tables to match the alignment of the
         added-by-extensions checkboxes (needinfo, restrict-comments) %]
-    [% IF NOT bug.cc || NOT bug.cc.contains(user.login) %]
-      [%
-        IF user.settings.state_addselfcc.value == 'always';
-          check_add_self = 1;
-        ELSIF user.settings.state_addselfcc.value == 'cc_unless_role';
-          check_add_self = !(
-              bug.user.isreporter
-              || bug.assigned_to.id == user.id
-              || (bug.qa_contact && bug.qa_contact.id == user.id)
-            );
-        ELSE;
-          check_add_self = 0;
-        END;
-      %]
-      <table>
-        <tr>
-          <td>
-            <input type="checkbox" name="addselfcc" id="add-self-cc"
-              [%= "checked" IF check_add_self %]>
-          </td>
-          <td>
-            <label for="add-self-cc">Add me to CC list (follow this [% terms.bug %])</label>
-          </td>
-        </tr>
-      </table>
-    [% END %]
+    [%
+      IF NOT bug.cc || NOT bug.cc.contains(user.login);
+        hide_add_self = 0;
+      ELSE;
+        hide_add_self = 1;
+      END;
+      IF user.settings.state_addselfcc.value == 'always';
+        check_add_self = 1;
+      ELSIF user.settings.state_addselfcc.value == 'cc_unless_role';
+        check_add_self = !(
+            bug.user.isreporter
+            || bug.assigned_to.id == user.id
+            || (bug.qa_contact && bug.qa_contact.id == user.id)
+          );
+      ELSE;
+        check_add_self = 0;
+      END;
+    %]
+    <table id="add-self-cc-container" [%= 'style="display:none"' IF hide_add_self %]>
+      <tr>
+        <td>
+          <input type="checkbox" name="addselfcc" id="add-self-cc"
+            [%= "disabled" IF hide_add_self %]
+            [%= "checked" IF check_add_self %]>
+        </td>
+        <td>
+          <label for="add-self-cc">Add me to CC list (follow this [% terms.bug %])</label>
+        </td>
+      </tr>
+    </table>
 
     <table class="edit-show" style="display:none">
       <tr>
diff --git a/extensions/BugModal/web/bug_modal.css b/extensions/BugModal/web/bug_modal.css
index 9090945d3..2f869b453 100644
--- a/extensions/BugModal/web/bug_modal.css
+++ b/extensions/BugModal/web/bug_modal.css
@@ -722,6 +722,23 @@ td.flag-requestee {
     padding: 5px;
 }
 
+#floating-message {
+    position: absolute;
+    left: 50%;
+    margin: 4px;
+}
+
+#floating-message-text {
+    position: relative;
+    left: -50%;
+    cursor: default;
+    background: #fff9db;
+    color: #666458;
+    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5), inset 0 0 1px #000;
+    border-radius: 4px;
+    padding: 4px 8px;
+}
+
 #mode-container {
     display: table-cell;
     white-space: nowrap;
diff --git a/extensions/BugModal/web/bug_modal.js b/extensions/BugModal/web/bug_modal.js
index ac467aa0f..a5867a971 100644
--- a/extensions/BugModal/web/bug_modal.js
+++ b/extensions/BugModal/web/bug_modal.js
@@ -131,6 +131,13 @@ $(function() {
             $.scrollTo($('#bottom-actions'));
         });
 
+    // hide floating message when clicked
+    $('#floating-message')
+        .click(function(event) {
+            event.preventDefault();
+            $(this).hide();
+        });
+
     // use non-native tooltips for relative times and bug summaries
     $('.rel-time, .rel-time-title, .bz_bug_link, .tt').tooltip({
         position: { my: "left top+8", at: "left bottom", collision: "flipfit" },
@@ -161,6 +168,54 @@ $(function() {
         });
 
     // cc list
+
+    function ccListLoading() {
+        $('#cc-list').html(
+            '<img src="extensions/BugModal/web/throbber.gif" width="16" height="11"> Loading...'
+        );
+    }
+
+    function ccListUpdate() {
+        bugzilla_ajax(
+            {
+                url: 'rest/bug_modal/cc/' + BUGZILLA.bug_id
+            },
+            function(data) {
+                $('#cc-list').html(data.html);
+                $('#cc-latch').data('fetched', true);
+                $('#cc-list .cc-user').hover(
+                    function() {
+                        $('#ccr-' + $(this).data('n')).css('visibility', 'visible');
+                    },
+                    function() {
+                        $('#ccr-' + $(this).data('n')).css('visibility', 'hidden');
+                    }
+                );
+                $('#cc-list .cc-remove')
+                    .click(function(event) {
+                        event.preventDefault();
+                        $('#top-save-btn').show();
+                        var n = $(this).data('n');
+                        var ccu = $('#ccu-' + n);
+                        if (ccu.hasClass('cc-removed')) {
+                            ccu.removeClass('cc-removed');
+                            $('#cc-' + n).remove();
+                        }
+                        else {
+                            $('#removecc').val('on');
+                            ccu.addClass('cc-removed');
+                            $('<input>').attr({
+                                type: 'hidden',
+                                id: 'cc-' + n,
+                                value: $('#ccr-' + n).data('login'),
+                                name: 'cc'
+                            }).appendTo('#changeform');
+                        }
+                    });
+            }
+        );
+    }
+
     $('#cc-latch, #cc-summary')
         .click(function(event) {
             event.preventDefault();
@@ -174,47 +229,8 @@ $(function() {
                 latch.data('expanded', true).html('&#9662;');
                 $('#cc-list').show();
                 if (!latch.data('fetched')) {
-                    $('#cc-list').html(
-                        '<img src="extensions/BugModal/web/throbber.gif" width="16" height="11"> Loading...'
-                    );
-                    bugzilla_ajax(
-                        {
-                            url: 'rest/bug_modal/cc/' + BUGZILLA.bug_id
-                        },
-                        function(data) {
-                            $('#cc-list').html(data.html);
-                            latch.data('fetched', true);
-                            $('#cc-list .cc-user').hover(
-                                function() {
-                                    $('#ccr-' + $(this).data('n')).css('visibility', 'visible');
-                                },
-                                function() {
-                                    $('#ccr-' + $(this).data('n')).css('visibility', 'hidden');
-                                }
-                            );
-                            $('#cc-list .cc-remove')
-                                .click(function(event) {
-                                    event.preventDefault();
-                                    $('#top-save-btn').show();
-                                    var n = $(this).data('n');
-                                    var ccu = $('#ccu-' + n);
-                                    if (ccu.hasClass('cc-removed')) {
-                                        ccu.removeClass('cc-removed');
-                                        $('#cc-' + n).remove();
-                                    }
-                                    else {
-                                        $('#removecc').val('on');
-                                        ccu.addClass('cc-removed');
-                                        $('<input>').attr({
-                                            type: 'hidden',
-                                            id: 'cc-' + n,
-                                            value: $('#ccr-' + n).data('login'),
-                                            name: 'cc'
-                                        }).appendTo('#changeform');
-                                    }
-                                });
-                        }
-                    );
+                    ccListLoading();
+                    ccListUpdate();
                 }
             }
         });
@@ -561,8 +577,10 @@ $(function() {
             var is_cced = $(event.target).data('is-cced') == '1';
 
             var cc_change;
+            var cc_count = $('#cc-summary').data('count');
             if (is_cced) {
                 cc_change = { remove: [ BUGZILLA.user.login ] };
+                cc_count--;
                 $('#cc-btn')
                     .text('Follow')
                     .data('is-cced', '0')
@@ -570,11 +588,45 @@ $(function() {
             }
             else {
                 cc_change = { add: [ BUGZILLA.user.login ] };
+                cc_count++;
                 $('#cc-btn')
                     .text('Stop Following')
                     .data('is-cced', '1')
                     .prop('disabled', true);
             }
+            is_cced = !is_cced;
+
+            // update visible count
+            $('#cc-summary').data('count', cc_count);
+            if (cc_count == 1) {
+                $('#cc-summary').text(is_cced ? 'Just you' : '1 person');
+            }
+            else {
+                $('#cc-summary').text(cc_count + ' people');
+            }
+
+            // clear/update user list
+            $('#cc-latch').data('fetched', false);
+            if ($('#cc-latch').data('expanded'))
+                ccListLoading();
+
+            // show message
+            $('#floating-message-text')
+                .text(is_cced ? 'You are now following this bug' : 'You are no longer following this bug');
+            $('#floating-message')
+                .fadeIn(250)
+                .delay(2500)
+                .fadeOut();
+
+            // show/hide "add me to the cc list"
+            if (is_cced) {
+                $('#add-self-cc-container').hide();
+                $('#add-self-cc').attr('disabled', true);
+            }
+            else {
+                $('#add-self-cc-container').show();
+                $('#add-self-cc').attr('disabled', false);
+            }
 
             bugzilla_ajax(
                 {
@@ -596,9 +648,13 @@ $(function() {
                             .text('Follow')
                             .data('is-cced', '0');
                     }
+                    if ($('#cc-latch').data('expanded'))
+                        ccListUpdate();
                 },
                 function(message) {
                     $('#cc-btn').prop('disabled', false);
+                    if ($('#cc-latch').data('expanded'))
+                        ccListUpdate();
                 }
             );