Bug 1153101 - add hooks for edit-comments extension

6 files changed, 131 insertions, 238 deletions

diff --git a/extensions/EditComments/template/en/default/hook/bug/comments-a_comment-end.html.tmpl b/extensions/EditComments/template/en/default/hook/bug/comments-a_comment-end.html.tmpl
deleted file mode 100644
index cf54c71ed..000000000
--- a/extensions/EditComments/template/en/default/hook/bug/comments-a_comment-end.html.tmpl
+++ /dev/null
@@ -1,52 +0,0 @@
-[%# This Source Code Form is subject to the terms of the Mozilla Public
-  # License, v. 2.0. If a copy of the MPL was not distributed with this
-  # file, You can obtain one at http://mozilla.org/MPL/2.0/.
-  #
-  # This Source Code Form is "Incompatible With Secondary Licenses", as
-  # defined by the Mozilla Public License, v. 2.0.
-  #%]
-
-[% IF comment.body != ''
-   && Param('edit_comments_group')
-   && user.in_group(Param('edit_comments_group'))
-   && (comment.type == constants.CMT_NORMAL
-       || comment.type == constants.CMT_DUPE_OF
-       || comment.type == constants.CMT_ATTACHMENT_CREATED
-       || comment.type == constants.CMT_ATTACHMENT_UPDATED)
-%]
-  <span id="edit_comment_link_[% comment.count FILTER html %]">
-    [<a href="javascript:void(0);" id="edit_comment_edit_link_[% comment.count FILTER html %]"
-        onclick="editComment('[% comment.count FILTER js %]','[% comment.id FILTER js %]');">edit</a>
-    [% IF comment.edit_count %]
-      | <a href="page.cgi?id=editcomments.html&bug_id=[% bug.id FILTER uri %]&comment_id=[% comment.id FILTER uri %]">history</a>
-      ([% comment.edit_count FILTER html %])
-    [% END %]]
-  </span>
-  <div id="edit_comment_[% comment.count FILTER html %]">
-    <div class="bz_comment_text bz_default_hidden" id="edit_comment_loading_[% comment.count FILTER html %]">Loading...</div>
-    [% INCLUDE global/textarea.html.tmpl
-       name      = "edit_comment_textarea_${comment.id}"
-       id        = "edit_comment_textarea_${comment.count}"
-       minrows   = 10
-       maxrows   = 25
-       classes   = "edit_comment_textarea bz_default_hidden"
-       cols      = constants.COMMENT_COLS
-       disabled  = 1
-    %]
-  </div>
-  <script>
-    YAHOO.util.Event.onDOMReady(function() {
-      // Insert edit links near other comment actions such as reply
-      var comment_div = YAHOO.util.Dom.get('c[% comment.count FILTER js %]');
-      var bz_comment_actions = YAHOO.util.Dom.getElementsByClassName('bz_comment_actions', 'span', comment_div)[0];
-      var edit_comment_link = YAHOO.util.Dom.get('edit_comment_link_[% comment.count FILTER js %]');
-      bz_comment_actions.insertBefore(edit_comment_link, bz_comment_actions.firstChild);
-
-      // Insert blank textarea right below formatted comment
-      var comment_div = YAHOO.util.Dom.get('c[% comment.count FILTER js %]');
-      var comment_pre = YAHOO.util.Dom.get('comment_text_[% comment.count FILTER js %]');
-      var edit_comment_div = YAHOO.util.Dom.get('edit_comment_[% comment.count FILTER js %]');
-      comment_div.insertBefore(edit_comment_div, comment_pre);
-    });
-  </script>
-[% END %]
diff --git a/extensions/EditComments/template/en/default/hook/bug_modal/activity_stream-comment_action.html.tmpl b/extensions/EditComments/template/en/default/hook/bug_modal/activity_stream-comment_action.html.tmpl
new file mode 100644
index 000000000..358359243
--- /dev/null
+++ b/extensions/EditComments/template/en/default/hook/bug_modal/activity_stream-comment_action.html.tmpl
@@ -0,0 +1,26 @@
+[%# This Source Code Form is subject to the terms of the Mozilla Public
+  # License, v. 2.0. If a copy of the MPL was not distributed with this
+  # file, You can obtain one at http://mozilla.org/MPL/2.0/.
+  #
+  # This Source Code Form is "Incompatible With Secondary Licenses", as
+  # defined by the Mozilla Public License, v. 2.0.
+  #%]
+
+[%
+  RETURN IF comment.body == '';
+  RETURN UNLESS Param('edit_comments_group') && user.in_group(Param('edit_comments_group'));
+  RETURN UNLESS
+    comment.type == constants.CMT_NORMAL
+    || comment.type == constants.CMT_DUPE_OF
+    || comment.type == constants.CMT_ATTACHMENT_CREATED
+    || comment.type == constants.CMT_ATTACHMENT_UPDATED;
+%]
+
+[% IF comment.edit_count %]
+  <a href="page.cgi?id=editcomments.html&bug_id=[% bug.id FILTER none %]&amp;comment_id=[% comment.id FILTER none %]"
+     title="[% comment.edit_count FILTER none %] edit[% "s" UNLESS comment.edit_count == 1 %]">(Edited)</a>
+[% END %]
+
+<button class="edit-comment-btn minor edit-show" type="button" style="display:none"
+  data-id="[% comment.id FILTER none %]"
+  data-no="[% comment.count FILTER none %]">Edit</button>
diff --git a/extensions/EditComments/template/en/default/hook/bug/show-header-end.html.tmpl b/extensions/EditComments/template/en/default/hook/bug_modal/header-end.html.tmpl
index 331d7e6df..68597bcb0 100644
--- a/extensions/EditComments/template/en/default/hook/bug/show-header-end.html.tmpl
+++ b/extensions/EditComments/template/en/default/hook/bug_modal/header-end.html.tmpl
@@ -6,7 +6,9 @@
   # defined by the Mozilla Public License, v. 2.0.
   #%]
 
-[% IF Param('edit_comments_group') && user.in_group(Param('edit_comments_group')) %]
-  [% style_urls.push('extensions/EditComments/web/styles/editcomments.css') %]
-  [% javascript_urls.push('extensions/EditComments/web/js/editcomments.js') %]
-[% END %]
+[%
+  IF Param('edit_comments_group') && user.in_group(Param('edit_comments_group'));
+    style_urls.push('extensions/EditComments/web/styles/editcomments.css');
+    javascript_urls.push('extensions/EditComments/web/js/editcomments.js');
+  END;
+%]
diff --git a/extensions/EditComments/template/en/default/pages/editcomments.html.tmpl b/extensions/EditComments/template/en/default/pages/editcomments.html.tmpl
index 8b3b90c9e..13364f5b1 100644
--- a/extensions/EditComments/template/en/default/pages/editcomments.html.tmpl
+++ b/extensions/EditComments/template/en/default/pages/editcomments.html.tmpl
@@ -6,117 +6,44 @@
   # defined by the Mozilla Public License, v. 2.0.
   #%]
 
-[% PROCESS global/variables.none.tmpl %]
-
-[% PROCESS global/header.html.tmpl
-  title = "Comment changes made to $terms.bug $bug.id, comment $comment.id"
-  header = "Activity log for $terms.bug $bug.id, comment $comment.id"
- %]
-
-<script type="text/javascript">
-/* The functions below expand and collapse comments  */
-function toggle_comment_display(link, comment_id) {
-    if (YAHOO.util.Dom.hasClass('comment_text_' + comment_id, 'collapsed')) {
-        expand_comment(link, comment);
-    }
-    else {
-        collapse_comment(link, comment);
-    }
-}
-
-function toggle_all_comments(action) {
-    var num_comments = [% comment.activity.size FILTER html %];
-
-    // If for some given ID the comment doesn't exist, this doesn't mean
-    // there are no more comments, but that the comment is private and
-    // the user is not allowed to view it.
-
-    for (var id = 0; id < num_comments; id++) {
-        var comment = document.getElementById('comment_text_' + id);
-        if (!comment) {
-            continue;
-        }
-
-        var link = document.getElementById('comment_link_' + id);
-        if (action == 'collapse') {
-            collapse_comment(link, comment);
-        }
-        else {
-            expand_comment(link, comment);
-        }
-    }
-}
-
-function collapse_comment(link, comment) {
-    link.innerHTML = "[+]";
-    link.title = "Expand the comment.";
-    YAHOO.util.Dom.addClass(comment, 'collapsed');
-}
-
-function expand_comment(link, comment) {
-    link.innerHTML = "[-]";
-    link.title = "Collapse the comment";
-    YAHOO.util.Dom.removeClass(comment, 'collapsed');
-}
-</script>
+[%
+  PROCESS global/variables.none.tmpl;
+  PROCESS global/header.html.tmpl
+    title      = "$bug.id comment $comment.count Activity"
+    style_urls = ['extensions/EditComments/web/styles/editcomments.css']
+%]
+
+<h4>
+  Comment changes made to
+  [%= "$terms.bug $bug.id comment $comment.count"
+      FILTER bug_link(bug, { comment_num => comment.count })
+      FILTER none %]
+</h4>
 
 <p>
-  [% "Back to $terms.bug $bug.id" FILTER bug_link(bug.id) FILTER none %]
+  <b>Note</b>: The actual edited comment in the [% terms.bug %] view
+  page will always show the original commentor's name and original timestamp.
 </p>
 
-<p>
-  <strong>Note</strong>: The actual edited comment in the [% terms.bug %] view page will always show the original commentor's name and original timestamp.
-</p>
-
-<p>
-  <a href="#" onclick="toggle_all_comments('collapse'); return false;">Collapse All Changes</a> -
-  <a href="#" onclick="toggle_all_comments('expand'); return false;">Expand All Changes</a>
-</p>
-
-[% count = 0 %]
 [% FOREACH a = comment.activity %]
-  <div class="bz_comment">
-    <div class="bz_comment_head">
-      <i>
-        [% IF a.original %]
-          Original comment by [% (a.author.name || "Need Real Name") FILTER html %]
-          <span class="vcard">
-            (<a class="fn email" href="mailto:[% a.author.email FILTER html %]">
-            [%- a.author.email FILTER html -%]</a>)
-          </span>
-          on [%+ a.time FILTER time %]
-        [% ELSE %]
-          Revision by [% (a.author.name || "Need Real Name") FILTER html %]
-          <span class="vcard">
-            (<a class="fn email" href="mailto:[% a.author.email FILTER html %]">
-            [%- a.author.email FILTER html -%]</a>)
-          </span>
-          on [%+ a.time FILTER time %]
-        [% END %]
-      </i>
-      <a href="#" id="comment_link_[% count FILTER html %]"
-         onclick="toggle_comment_display(this, '[% count FILTER html FILTER js %]'); return false;"
-         title="Collapse the comment.">[-]</a>
+  <div class="edit-head">
+    <div class="edit-author-when">
+    [% a.original ? "Original comment" : "Revision" %]
+    by [% INCLUDE bug_modal/user.html.tmpl u=a.author %]
+    on [% a.time FILTER time %]
     </div>
-    [% IF a.original %]
-      [% wrapped_comment = a.body FILTER wrap_comment %]
-    [% ELSE %]
-      [% wrapped_comment = a.new FILTER wrap_comment %]
-    [% END %]
-[%# Don't indent the <pre> block, since then the spaces are displayed in the
-  # generated HTML %]
-<pre class="bz_comment_text" id="comment_text_[% count FILTER html %]">
-  [%- wrapped_comment FILTER quoteUrls(bug) -%]
-</pre>
   </div>
-  [% count = count + 1 %]
+  <pre class="bz_comment_text">
+    [%- a.original ? a.body : a.new FILTER quoteUrls(bug) -%]
+  </pre>
 [% END %]
 
-[% IF comment.activity.size > 0 %]
+[% IF comment.activity.size %]
   <p>
-    [% "Back to $terms.bug $bug.id" FILTER bug_link(bug.id) FILTER none %]
+    [%= "Back to $terms.bug $bug.id comment $comment.count"
+        FILTER bug_link(bug, { comment_num => comment.count })
+        FILTER none %]
   </p>
 [% END %]
 
 [% PROCESS global/footer.html.tmpl %]
-
diff --git a/extensions/EditComments/web/js/editcomments.js b/extensions/EditComments/web/js/editcomments.js
index a4e3014d5..222c081cf 100644
--- a/extensions/EditComments/web/js/editcomments.js
+++ b/extensions/EditComments/web/js/editcomments.js
@@ -6,87 +6,59 @@
  * defined by the Mozilla Public License, v. 2.0.
  */
 
-function editComment(comment_count, comment_id) {
-    if (!comment_count || !comment_id) return;
+$(function() {
+    $('.edit-comment-btn')
+        .click(function(event) {
+            event.preventDefault();
+            var that = $(this);
+            var id = that.data('id');
+            var no = that.data('no');
 
-    var edit_comment_textarea = YAHOO.util.Dom.get('edit_comment_textarea_' + comment_count);
-    if (!YAHOO.util.Dom.hasClass(edit_comment_textarea, 'bz_default_hidden')) {
-        hideEditCommentField(comment_count);
-        return;
-    }
-
-    // Show the loading indicator
-    toggleCommentLoading(comment_count);
-
-    YAHOO.util.Connect.setDefaultPostHeader('application/json', true);
-    YAHOO.util.Connect.asyncRequest(
-        'POST',
-        'jsonrpc.cgi',
-        {
-            success: function(res) {
-                // Hide the loading indicator
-                toggleCommentLoading(comment_count);
-                data = YAHOO.lang.JSON.parse(res.responseText);
-                if (data.error) {
-                    alert("Get [% comment failed: " + data.error.message);
-                }
-                else if (data.result.comments[comment_id]) {
-                    var comment_text = data.result.comments[comment_id];
-                    showEditCommentField(comment_count, comment_text);
-                }
-            },
-            failure: function(res) {
-                // Hide the loading indicator
-                toggleCommentLoading(comment_count);
-                if (res.responseText) {
-                    alert("Get comment failed: " + res.responseText);
-                }
-            }
-        },
-        YAHOO.lang.JSON.stringify({
-            version: "1.1",
-            method: "EditComments.comments",
-            id: comment_id,
-            params: { comment_ids: [ comment_id ],
-                      Bugzilla_api_token : (BUGZILLA.api_token ? BUGZILLA.api_token : '')
+            // cancel editing
+            if (that.data('editing')) {
+                that.data('editing', false).text('Edit');
+                $('#edit_comment_textarea_' + id).remove();
+                $('#ct-' + no).show();
+                return;
             }
-        })
-    );
-}
-
-function hideEditCommentField(comment_count) {
-    var comment_text_pre = YAHOO.util.Dom.get('comment_text_' + comment_count);
-    YAHOO.util.Dom.removeClass(comment_text_pre, 'bz_default_hidden');
+            that.text('Unedit');
 
-    var edit_comment_textarea = YAHOO.util.Dom.get('edit_comment_textarea_' + comment_count);
-    YAHOO.util.Dom.addClass(edit_comment_textarea, 'bz_default_hidden');
-    edit_comment_textarea.disabled = true;
-
-    YAHOO.util.Dom.get("edit_comment_edit_link_" + comment_count).innerHTML = "edit";
-}
-
-function showEditCommentField(comment_count, comment_text) {
-    var comment_text_pre = YAHOO.util.Dom.get('comment_text_' + comment_count);
-    YAHOO.util.Dom.addClass(comment_text_pre, 'bz_default_hidden');
-
-    var edit_comment_textarea = YAHOO.util.Dom.get('edit_comment_textarea_' + comment_count);
-    YAHOO.util.Dom.removeClass(edit_comment_textarea, 'bz_default_hidden');
-    edit_comment_textarea.disabled = false;
-    edit_comment_textarea.value = comment_text;
-
-    YAHOO.util.Dom.get("edit_comment_edit_link_" + comment_count).innerHTML = "unedit";
-}
-
-function toggleCommentLoading(comment_count, hide) {
-    var comment_div = 'comment_text_' + comment_count;
-    var loading_div = 'edit_comment_loading_' + comment_count;
-    if (YAHOO.util.Dom.hasClass(loading_div, 'bz_default_hidden')) {
-        YAHOO.util.Dom.addClass(comment_div, 'bz_default_hidden');
-        YAHOO.util.Dom.removeClass(loading_div, 'bz_default_hidden');
-    }
-    else {
-        YAHOO.util.Dom.removeClass(comment_div, 'bz_default_hidden');
-        YAHOO.util.Dom.addClass(loading_div, 'bz_default_hidden');
-    }
-}
+            // replace comment <pre> with loading message
+            $('#ct-' + no)
+                .hide()
+                .after(
+                    $('<pre/>')
+                        .attr('id', 'edit-comment-loading-' + id)
+                        .addClass('edit-comment-loading')
+                        .text('Loading...')
+                );
 
+            // load original comment text
+            bugzilla_ajax(
+                {
+                    url: 'rest/editcomments/comment/' + id,
+                    hideError: true
+                },
+                function(data) {
+                    // create editing textarea
+                    $('#edit-comment-loading-' + id).remove();
+                    that.data('editing', true);
+                    $('#ct-' + no)
+                        .after(
+                            $('<textarea/>')
+                                .attr('name', 'edit_comment_textarea_' + id)
+                                .attr('id', 'edit_comment_textarea_' + id)
+                                .addClass('edit-comment-textarea')
+                                .val(data.comments[id])
+                        );
+                },
+                function(message) {
+                    // unedit and show message
+                    that.data('editing', false).text('Edit');
+                    $('#edit-comment-loading-' + id).remove();
+                    $('#ct-' + no).show();
+                    alert(message);
+                }
+            );
+        });
+});
diff --git a/extensions/EditComments/web/styles/editcomments.css b/extensions/EditComments/web/styles/editcomments.css
index 911896ac8..99f4f9690 100644
--- a/extensions/EditComments/web/styles/editcomments.css
+++ b/extensions/EditComments/web/styles/editcomments.css
@@ -5,6 +5,24 @@
  * This Source Code Form is "Incompatible With Secondary Licenses", as
  * defined by the Mozilla Public License, v. 2.0. */
 
-.edit_comment_textarea {
-    width: 845px;
+.edit-comment-textarea {
+    width: 100%;
+    height: 15em;
+}
+
+.edit-comment-loading {
+    background: #fff;
+    padding: 8px;
+    border-top: 1px solid #ddd;
+    margin: 1px 0 0;
+    font-style: italic;
+}
+
+.edit-head {
+    width: 50em;
+    padding: 10px;
+}
+
+.edit-head .vcard {
+    display: inline;
 }