Bug 1146770: implement comment preview

2 files changed, 131 insertions, 16 deletions

diff --git a/extensions/BugModal/web/bug_modal.css b/extensions/BugModal/web/bug_modal.css
index 910199a53..acb18638f 100644
--- a/extensions/BugModal/web/bug_modal.css
+++ b/extensions/BugModal/web/bug_modal.css
@@ -270,7 +270,7 @@ input[type="number"] {
     float: right;
 }
 
-#login-required {
+#new-comment-notice {
     padding: 20px 8px;
     margin-bottom: 50px;
 }
@@ -576,18 +576,56 @@ td.flag-requestee {
     margin-top: 20px;
 }
 
-#add-comment-label {
-    display: inline;
-    font-weight: bold;
-}
-
 #add-comment-private {
     float: right;
 }
 
 #comment {
+    border: 1px solid #ccc;
+}
+
+#comment, #comment-preview {
+    clear: both;
     width: 100%;
     box-sizing: border-box !important;
+    margin: 0 0 1em;
+}
+
+#comment-preview {
+    border: 1px solid #fff;
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    padding: 4px 3px 5px;
+}
+
+#preview-throbber {
+    margin-left: 8px;
+}
+
+#comment-tabs {
+    margin: 0px;
+    padding: 0px;
+    list-style: none;
+}
+
+#comment-tabs li {
+    display: inline-block;
+    padding: 4px 8px;
+    cursor: pointer;
+    border: 1px solid silver;
+    border-top-left-radius: 2px;
+    border-top-right-radius: 2px;
+}
+
+#comment-tabs li.current {
+    background: #fff;
+    border-bottom: 1px solid #fff;
+}
+
+.preview-error {
+    color: #666;
+    font-style: italic;
 }
 
 /* controls */
diff --git a/extensions/BugModal/web/bug_modal.js b/extensions/BugModal/web/bug_modal.js
index 9e7f5f8f9..419ac1e84 100644
--- a/extensions/BugModal/web/bug_modal.js
+++ b/extensions/BugModal/web/bug_modal.js
@@ -742,14 +742,31 @@ $(function() {
         .keydown(function(event) {
             if (!(event.ctrlKey || event.metaKey))
                 return;
-            // don't conflict with text input shortcut
-            if (document.activeElement.nodeNode == 'INPUT' || document.activeElement.nodeName == 'TEXTAREA')
-                return;
-            if (String.fromCharCode(event.which).toLowerCase() == 'e') {
-                if ($('#cancel-btn:visible').length === 0) {
-                    event.preventDefault();
-                    $('#mode-btn').click();
-                }
+            switch(String.fromCharCode(event.which).toLowerCase()) {
+                // ctrl+e or meta+e = enter edit mode
+                case 'e':
+                    // don't conflict with text input shortcut
+                    if (document.activeElement.nodeNode == 'INPUT' || document.activeElement.nodeName == 'TEXTAREA')
+                        return;
+                    if ($('#cancel-btn:visible').length === 0) {
+                        event.preventDefault();
+                        $('#mode-btn').click();
+                    }
+                    break;
+
+                // ctrl+shift+p = toggle comment preview
+                case 'p':
+                    if (event.metaKey || !event.shiftKey)
+                        return;
+                    if (document.activeElement.id == 'comment') {
+                        event.preventDefault();
+                        $('#comment-preview-tab').click();
+                    }
+                    else if ($('#comment-preview:visible').length !== 0) {
+                        event.preventDefault();
+                        $('#comment-edit-tab').click();
+                    }
+                    break;
             }
         });
 
@@ -892,6 +909,60 @@ $(function() {
                 .prop('title', message)
                 .show();
         });
+
+    // comment preview
+    var last_comment_text = '';
+    $('#comment-tabs li').click(function() {
+        var that = $(this);
+        if (that.hasClass('current'))
+            return;
+
+        // ensure preview's height matches the comment
+        var comment = $('#comment');
+        var preview = $('#comment-preview');
+        var comment_height = comment[0].offsetHeight;
+
+        // change tabs
+        $('#comment-tabs li').removeClass('current').attr('aria-selected', false);
+        $('.comment-tab').hide();
+        that.addClass('current').attr('aria-selected', true);
+        var tab = that.attr('data-tab');
+        $('#' + tab).show();
+        var focus = that.data('focus');
+        if (focus === '') {
+            document.activeElement.blur();
+        }
+        else {
+            $('#' + focus).focus();
+        }
+
+        // update preview
+        preview.css('height', comment_height + 'px');
+        if (tab != 'comment-tab-preview' || last_comment_text == comment.val())
+            return;
+        $('#preview-throbber').show();
+        preview.html('');
+        bugzilla_ajax(
+            {
+                url: 'rest/bug/comment/render',
+                type: 'POST',
+                data: { text: comment.val() },
+                hideError: true
+            },
+            function(data) {
+                $('#preview-throbber').hide();
+                preview.html(data.html);
+            },
+            function(message) {
+                $('#preview-throbber').hide();
+                var container = $('<div/>');
+                container.addClass('preview-error');
+                container.text(message);
+                preview.html(container);
+            }
+        );
+        last_comment_text = comment.val();
+    });
 });
 
 function confirmUnsafeURL(url) {
@@ -921,6 +992,10 @@ function bugzilla_ajax(request, done_fn, error_fn) {
         'Bugzilla_api_token=' + encodeURIComponent(BUGZILLA.api_token);
     if (request.type != 'GET') {
         request.contentType = 'application/json';
+        request.processData = false;
+        if (request.data && request.data.constructor === Object) {
+            request.data = JSON.stringify(request.data);
+        }
     }
     $.ajax(request)
         .done(function(data) {
@@ -936,8 +1011,10 @@ function bugzilla_ajax(request, done_fn, error_fn) {
         })
         .error(function(data) {
             var message = data.responseJSON ? data.responseJSON.message : 'Unexpected Error'; // all errors are unexpected :)
-            $('#xhr-error').html(message);
-            $('#xhr-error').show('fast');
+            if (!request.hideError) {
+                $('#xhr-error').html(message);
+                $('#xhr-error').show('fast');
+            }
             if (error_fn)
                 error_fn(message);
         });