Fix comments on collapsed and expanded diffs

We can't save the HTML as it was on page load, because comments etc. add
content that we would lose if we kept the initial HTML. Instead, shuffle
elements around.

app/assets/javascripts/single_diff.js.coffee

@@ -1,5 +1,6 @@
 class @SingleDiff
 
+  WRAPPER = '<div class="diff-content diff-wrap-lines"></div>'
   LOADING_HTML = '<i class="fa fa-spinner fa-spin"></i>'
   ERROR_HTML = '<div class="nothing-here-block"><i class="fa fa-warning"></i> Could not load diff</div>'
   COLLAPSED_HTML = '<div class="nothing-here-block diff-collapsed">This diff is collapsed. Click to expand it.</div>'
@@ -7,51 +8,47 @@ class @SingleDiff
   constructor: (@file) ->
     @content = $('.diff-content', @file)
     @diffForPath = @content.find('[data-diff-for-path]').data 'diff-for-path'
-    @setOpenState()
+    @isOpen = !@diffForPath
+
+    if @diffForPath
+      @collapsedContent = @content
+      @loadingContent = $(WRAPPER).addClass('loading').html(LOADING_HTML).hide()
+      @content = null
+      @collapsedContent.after(@loadingContent)
+    else
+      @collapsedContent = $(WRAPPER).html(COLLAPSED_HTML).hide()
+      @content.after(@collapsedContent)
+
+    @collapsedContent.on 'click', @toggleDiff
 
     $('.file-title > a', @file).on 'click', @toggleDiff
-    @enableToggleOnContent()
-
-  setOpenState: ->
-    if @diffForPath
-      @isOpen = false
-    else
-      @isOpen = true
-      @contentHTML = @content.html()
-    return
-
-  enableToggleOnContent: ->
-    @content.find('.nothing-here-block.diff-collapsed').on 'click', @toggleDiff
 
   toggleDiff: (e) =>
     e.preventDefault()
     @isOpen = !@isOpen
     if not @isOpen and not @hasError
-      @content.html COLLAPSED_HTML
-      @enableToggleOnContent
-      return
-    if @contentHTML
-      @setContentHTML()
+      @content.hide()
+      @collapsedContent.show()
+    else if @content
+      @collapsedContent.hide()
+      @content.show()
     else
       @getContentHTML()
-    return
 
   getContentHTML: ->
-    @content.html(LOADING_HTML).addClass 'loading'
+    @collapsedContent.hide()
+    @loadingContent.show()
     $.get @diffForPath, (data) =>
+      @loadingContent.hide()
       if data.html
-        @setContentHTML data.html
+        @content = $(data.html)
+        @content.syntaxHighlight()
       else
         @hasError = true
-        @content.html ERROR_HTML
-      @content.removeClass 'loading'
+        @content = $(ERROR_HTML)
+      @collapsedContent.after(@content)
     return
 
-  setContentHTML: (contentHTML) ->
-    @contentHTML = contentHTML if contentHTML
-    @content.html @contentHTML
-    @content.syntaxHighlight()
-
 $.fn.singleDiff = ->
   return @each ->
     if not $.data this, 'singleDiff'