Fix newlines in how-to-merge. Added steps description. Fixes #3772

app/assets/javascripts/merge_requests.js.coffee

@@ -21,6 +21,13 @@ class MergeRequest
     this.initMergeWidget()
     this.$('.show-all-commits').on 'click', =>
       this.showAllCommits()
+    
+    modal = $('#modal_merge_info').modal modal: true, show:false
+
+    $('.how_to_merge_link').bind "click", ->
+      modal.show()
+    $('.modal-header .close').bind "click", ->
+      modal.hide()
   # Local jQuery finder
   $: (selector) ->

app/views/merge_requests/show/_how_to_merge.html.haml

@@ -3,22 +3,17 @@
     %a.close{href: "#"} ×
     %h3 How To Merge
   .modal-body
+    %p
+      %strong Step 1.
+      Checkout target branch and get recent objects from GitLab
     %pre.dark
-      = preserve do
+      :preserve
         git checkout #{@merge_request.target_branch}
         git fetch origin
+    %p
+      %strong Step 2.
+      Merge source branch into target branch and push changes to GitLab
+    %pre.dark
+      :preserve
         git merge origin/#{@merge_request.source_branch}
         git push origin #{@merge_request.target_branch}
-
-
-:javascript
-  $(function(){
-    var modal = $('#modal_merge_info').modal({modal: true, show:false});
-    $('.how_to_merge_link').bind("click", function(){
-      modal.show();
-    });
-    $('.modal-header .close').bind("click", function(){
-      modal.hide();
-    })
-  })
-