Bug 1181596 - Modal UI doesn't honor the "where to put the additional comment textarea" preference

3 files changed, 64 insertions, 32 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 7e77e1582..fd193b182 100644
--- a/extensions/BugModal/template/en/default/bug_modal/edit.html.tmpl
+++ b/extensions/BugModal/template/en/default/bug_modal/edit.html.tmpl
@@ -1017,7 +1017,11 @@
 [% IF user.id %]
   <div id="top-actions">
     <button type="button" id="attachments-add-btn" class="minor">Attach File</button>
-    <button type="button" class="comment-btn minor">Add Comment</button>
+    [% IF user.settings.comment_box_position.value == 'after_comments' %]
+      <button type="button" id="add-comment-btn" class="minor">Add Comment &darr;</button>
+    [% ELSE %]
+      <button type="button" id="bottom-btn" class="minor">Bottom &darr;</button>
+    [% END %]
     [%+ Hook.process('top_actions') %]
     <button type="submit" class="save-btn major" id="top-save-btn" style="display:none">Save Changes</button>
   </div>
@@ -1028,49 +1032,69 @@
 [%# === comments === %]
 
 [%
+  IF user.settings.comment_box_position.value == 'before_comments';
+    INCLUDE new_comment;
+  END;
   INCLUDE bug_modal/activity_stream.html.tmpl stream=bug.activity_stream;
-  IF user.id;
-    INCLUDE bug_modal/new_comment.html.tmpl;
-  ELSE;
-    %]
-      <div id="new-comment-notice">
-        You need to <a href="show_bug.cgi?id=[% bug.bug_id FILTER none %]&amp;GoAheadAndLogIn=1">log in</a>
-        before you can comment on or make changes to this [% terms.bug %].
-      </div>
-    [%
+  IF user.settings.comment_box_position.value == 'after_comments';
+    INCLUDE new_comment;
   END;
 %]
 
 [%# === bottom actions === %]
 
-[% IF user.id %]
-  <div id="bottom-actions">
-    <button type="submit" class="save-btn major" id="bottom-save-btn">Save Changes</button>
-    [%
-      IF bug.resolution == "";
-        seen_header = 0;
-        FOREACH resolution IN ["FIXED", "INVALID", "DUPLICATE"];
-          NEXT UNLESS bug.choices.resolution.only("name", resolution).size;
-          IF NOT seen_header;
-            seen_header = 1;
-            " Resolve as ";
-          END;
-          %] <button type="button" class="minor resolution-btn">[% resolution FILTER html %]</button> [%
-        END;
-      ELSIF bug.choices.bug_status.only("name", "REOPENED").size;
-          %] <button type="button" class="minor status-btn" data-status="REOPENED">REOPEN</button> [%
-      END;
-    %]
-    <div id="bottom-right-actions">
-      <button type="button" id="top-btn" class="minor">Top &uarr;</button>
+<div id="bottom-actions">
+  <div id="bottom-right-actions">
+    <button type="button" id="top-btn" class="minor">Top &uarr;</button>
+    [% IF user.id %]
       <button type="button" id="new-bug-btn" class="minor">New [% terms.Bug %] &#9662;</button>
-    </div>
+    [% END %]
   </div>
+</div>
+
+[% IF user.id %]
   </form>
 [% END %]
 
 [%# === blocks === %]
 
+[% BLOCK new_comment %]
+  [%# === new comment === %]
+  [%
+    IF user.id;
+      INCLUDE bug_modal/new_comment.html.tmpl;
+    ELSE;
+      %]
+        <div id="new-comment-notice">
+          You need to <a href="show_bug.cgi?id=[% bug.bug_id FILTER none %]&amp;GoAheadAndLogIn=1">log in</a>
+          before you can comment on or make changes to this [% terms.bug %].
+        </div>
+      [%
+    END;
+  %]
+  [%# === comment actions === %]
+  [% IF user.id %]
+    <div id="new-comment-actions">
+      <button type="submit" class="save-btn major" id="bottom-save-btn">Save Changes</button>
+      [%
+        IF bug.resolution == "";
+          seen_header = 0;
+          FOREACH resolution IN ["FIXED", "INVALID", "DUPLICATE"];
+            NEXT UNLESS bug.choices.resolution.only("name", resolution).size;
+            IF NOT seen_header;
+              seen_header = 1;
+              " Resolve as ";
+            END;
+            %] <button type="button" class="minor resolution-btn">[% resolution FILTER html %]</button> [%
+          END;
+        ELSIF bug.choices.bug_status.only("name", "REOPENED").size;
+            %] <button type="button" class="minor status-btn" data-status="REOPENED">REOPEN</button> [%
+        END;
+      %]
+    </div>
+  [% END %]
+[% END %]
+
 [% BLOCK fields_lhs %]
   <div class="fields-lhs">[% content FILTER none %]</div>
 [% END %]
diff --git a/extensions/BugModal/web/bug_modal.css b/extensions/BugModal/web/bug_modal.css
index 696c5e192..007d63592 100644
--- a/extensions/BugModal/web/bug_modal.css
+++ b/extensions/BugModal/web/bug_modal.css
@@ -343,6 +343,7 @@ input[type="number"] {
 }
 
 #bottom-actions {
+    margin-top: 8px;
     margin-bottom: 50px;
     max-width: 1024px;
 }
diff --git a/extensions/BugModal/web/bug_modal.js b/extensions/BugModal/web/bug_modal.js
index a72319c72..393b23b55 100644
--- a/extensions/BugModal/web/bug_modal.js
+++ b/extensions/BugModal/web/bug_modal.js
@@ -106,6 +106,13 @@ $(function() {
             $.scrollTo($('body'));
         });
 
+    // bottom btn
+    $('#bottom-btn')
+        .click(function(event) {
+            event.preventDefault();
+            $.scrollTo($('#bottom-actions'));
+        });
+
     // 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" },
@@ -306,7 +313,7 @@ $(function() {
         });
 
     // add comment menuitem, scroll the textarea into view
-    $('#action-add-comment')
+    $('#action-add-comment, #add-comment-btn')
         .click(function(event) {
             event.preventDefault();
             // focus first to grow the textarea, so we scroll to the correct location