Registered FilesCommentButton as a jQuery plugin and made review changes

app/assets/javascripts/diff.js.coffee

 class @Diff
   UNFOLD_COUNT = 20
   constructor: ->
-    @filesCommentButton = new FilesCommentButton($('.files'))
+    @filesCommentButton = $('.files .diff-file').filesCommentButton()
 
     $(document).off('click', '.js-unfold')
     $(document).on('click', '.js-unfold', (event) =>

app/assets/javascripts/files_comment_button.js.coffee

 class @FilesCommentButton
-  constructor: (@filesContainerElement) ->
-    return unless @filesContainerElement
-    return if _.isUndefined @filesContainerElement.data 'can-create-note'
-
-    @COMMENT_BUTTON_CLASS = '.add-diff-note'
-    @COMMENT_BUTTON_TEMPLATE = _.template '<button name="button" type="submit" class="btn <%- COMMENT_BUTTON_CLASS %> js-add-diff-note-button" title="Add a comment to this line"><i class="fa fa-comment-o"></i></button>'
-
-    @LINE_NUMBER_CLASS = 'diff-line-num'
-    @LINE_CONTENT_CLASS = 'line_content'
-    @UNFOLDABLE_LINE_CLASS = 'js-unfold'
-    @EMPTY_CELL_CLASS = 'empty-cell'
-    @OLD_LINE_CLASS = 'old_line'
-    @LINE_COLUMN_CLASSES = ".#{@LINE_NUMBER_CLASS}, .line_content"
-    @TEXT_FILE_SELECTOR = '.text-file'
-
-    @DEBOUNCE_TIMEOUT_DURATION = 150
+  COMMENT_BUTTON_CLASS = '.add-diff-note'
+  COMMENT_BUTTON_TEMPLATE = _.template '<button name="button" type="submit" class="btn <%- COMMENT_BUTTON_CLASS %> js-add-diff-note-button" title="Add a comment to this line"><i class="fa fa-comment-o"></i></button>'
+  LINE_HOLDER_CLASS = '.line_holder'
+  LINE_NUMBER_CLASS = 'diff-line-num'
+  LINE_CONTENT_CLASS = 'line_content'
+  UNFOLDABLE_LINE_CLASS = 'js-unfold'
+  EMPTY_CELL_CLASS = 'empty-cell'
+  OLD_LINE_CLASS = 'old_line'
+  LINE_COLUMN_CLASSES = ".#{LINE_NUMBER_CLASS}, .line_content"
+  TEXT_FILE_SELECTOR = '.text-file'
+  DEBOUNCE_TIMEOUT_DURATION = 100
 
+  constructor: (@filesContainerElement) ->
     @VIEW_TYPE = $('input#view[type=hidden]').val()
 
-    $(document)
-      .on 'mouseover', @LINE_COLUMN_CLASSES, @debounceRender
-      .on 'mouseleave', @LINE_COLUMN_CLASSES, @destroy
-
-  debounceRender: (e) =>
-    clearTimeout @debounceTimeout if @debounceTimeout
-    @debounceTimeout = setTimeout =>
-      @render e
-    , @DEBOUNCE_TIMEOUT_DURATION
-    return
+    debounce = _.debounce @render, DEBOUNCE_TIMEOUT_DURATION
 
-  render: (e) ->
-    currentTarget = $(e.currentTarget)
-    textFileElement = @getTextFileElement(currentTarget)
-    lineContentElement = @getLineContent(currentTarget)
-    buttonParentElement = @getButtonParent(currentTarget)
+    $(document)
+      .on 'mouseover', LINE_COLUMN_CLASSES, debounce
+      .on 'mouseleave', LINE_COLUMN_CLASSES, @destroy
 
+  render: (e) =>
+    $currentTarget = $(e.currentTarget)
+    buttonParentElement = @getButtonParent $currentTarget
     return unless @shouldRender e, buttonParentElement
 
+    textFileElement = @getTextFileElement $currentTarget
+    lineContentElement = @getLineContent $currentTarget
+
     buttonParentElement.append @buildButton
-      noteable_type: textFileElement.attr 'data-noteable-type'
-      noteable_id: textFileElement.attr 'data-noteable-id'
-      commit_id: textFileElement.attr 'data-commit-id'
-      note_type: lineContentElement.attr 'data-note-type'
+      noteableType: textFileElement.attr 'data-noteable-type'
+      noteableID: textFileElement.attr 'data-noteable-id'
+      commitID: textFileElement.attr 'data-commit-id'
+      noteType: lineContentElement.attr 'data-note-type'
       position: lineContentElement.attr 'data-position'
-      line_type: lineContentElement.attr 'data-line-type'
-      discussion_id: lineContentElement.attr 'data-discussion-id'
-      line_code: lineContentElement.attr 'data-line-code'
+      lineType: lineContentElement.attr 'data-line-type'
+      discussionID: lineContentElement.attr 'data-discussion-id'
+      lineCode: lineContentElement.attr 'data-line-code'
     return
 
   destroy: (e) =>
     return if @isMovingToSameType e
-    $(@COMMENT_BUTTON_CLASS, @getButtonParent $(e.currentTarget)).remove()
+    $(COMMENT_BUTTON_CLASS, @getButtonParent $(e.currentTarget)).remove()
     return
 
   buildButton: (buttonAttributes) ->
-    initializedButtonTemplate = @COMMENT_BUTTON_TEMPLATE
-      COMMENT_BUTTON_CLASS: @COMMENT_BUTTON_CLASS.substr 1
+    initializedButtonTemplate = COMMENT_BUTTON_TEMPLATE
+      COMMENT_BUTTON_CLASS: COMMENT_BUTTON_CLASS.substr 1
     $(initializedButtonTemplate).attr
-      'data-noteable-type': buttonAttributes.noteable_type
-      'data-noteable-id': buttonAttributes.noteable_id
-      'data-commit-id': buttonAttributes.commit_id
-      'data-note-type': buttonAttributes.note_type
-      'data-line-code': buttonAttributes.line_code
+      'data-noteable-type': buttonAttributes.noteableType
+      'data-noteable-id': buttonAttributes.noteableID
+      'data-commit-id': buttonAttributes.commitID
+      'data-note-type': buttonAttributes.noteType
+      'data-line-code': buttonAttributes.lineCode
       'data-position': buttonAttributes.position
-      'data-discussion-id': buttonAttributes.discussion_id
-      'data-line-type': buttonAttributes.line_type
+      'data-discussion-id': buttonAttributes.discussionID
+      'data-line-type': buttonAttributes.lineType
 
   getTextFileElement: (hoveredElement) ->
-    $(hoveredElement.closest(@TEXT_FILE_SELECTOR))
+    $(hoveredElement.closest TEXT_FILE_SELECTOR)
 
   getLineContent: (hoveredElement) ->
-    return hoveredElement if hoveredElement.hasClass @LINE_CONTENT_CLASS
+    return hoveredElement if hoveredElement.hasClass LINE_CONTENT_CLASS
 
-    $(hoveredElement).next ".#{@LINE_CONTENT_CLASS}"
+    $(hoveredElement).next ".#{LINE_CONTENT_CLASS}"
 
   getButtonParent: (hoveredElement) ->
     if @VIEW_TYPE is 'inline'
-      return hoveredElement if hoveredElement.hasClass @OLD_LINE_CLASS
+      return hoveredElement if hoveredElement.hasClass OLD_LINE_CLASS
 
-      $(hoveredElement).parent().find ".#{@OLD_LINE_CLASS}"
+      hoveredElement.parent().find ".#{OLD_LINE_CLASS}"
     else
-      return hoveredElement if hoveredElement.hasClass @LINE_NUMBER_CLASS
+      return hoveredElement if hoveredElement.hasClass LINE_NUMBER_CLASS
 
-      $(hoveredElement).prev ".#{@LINE_NUMBER_CLASS}"
+      $(hoveredElement).prev ".#{LINE_NUMBER_CLASS}"
 
   isMovingToSameType: (e) ->
-    newButtonParent = @getButtonParent($(e.toElement))
+    newButtonParent = @getButtonParent $(e.toElement)
     return false unless newButtonParent
-    (newButtonParent).is @getButtonParent($(e.currentTarget))
+    newButtonParent.is @getButtonParent $(e.currentTarget)
 
   shouldRender: (e, buttonParentElement) ->
-    (!buttonParentElement.hasClass(@EMPTY_CELL_CLASS) and \
-    !buttonParentElement.hasClass(@UNFOLDABLE_LINE_CLASS) and \
-    $(@COMMENT_BUTTON_CLASS, buttonParentElement).length is 0)
+    (not buttonParentElement.hasClass(EMPTY_CELL_CLASS) and \
+    not buttonParentElement.hasClass(UNFOLDABLE_LINE_CLASS) and \
+    $(COMMENT_BUTTON_CLASS, buttonParentElement).length is 0)
+
+$.fn.filesCommentButton = ->
+  return unless this and @parent().data('can-create-note')?
+
+  @each ->
+    unless $.data this, 'filesCommentButton'
+      $.data this, 'filesCommentButton', new FilesCommentButton $(this)

app/assets/javascripts/merge_request_tabs.js.coffee

@@ -163,7 +163,7 @@ class @MergeRequestTabs
         @diffsLoaded = true
         @scrollToElement("#diffs")
         @highlighSelectedLine()
-        @filesCommentButton = new FilesCommentButton($('.files'))
+        @filesCommentButton = $('.files .diff-file').filesCommentButton()
 
         $(document)
           .off 'click', '.diff-line-num a'

app/views/projects/diffs/_parallel_view.html.haml

@@ -15,7 +15,7 @@
         - else
           %td.old_line.diff-line-num{id: left[:line_code], class: [left[:type], ('empty-cell' unless left[:number])], data: { linenumber: left[:number] }}
             %a{href: "##{left[:line_code]}" }= raw(left[:number])
-          %td.line_content.parallel.noteable_line{class: [left[:type], ('empty-cell' if left[:text].empty?)], data: diff_view_line_data(left[:line_code], left[:position], left[:type])}= diff_line_content(left[:text])
+          %td.line_content.parallel.noteable_line{class: [left[:type], ('empty-cell' if left[:text].empty?)], data: diff_view_line_data(left[:line_code], left[:position], 'old')}= diff_line_content(left[:text])
 
           - if right[:type] == 'new'
             - new_line_type = 'new'
@@ -28,7 +28,7 @@
 
           %td.new_line.diff-line-num{id: new_line_code, class: [new_line_type, ('empty-cell' unless right[:number])], data: { linenumber: right[:number] }}
             %a{href: "##{new_line_code}" }= raw(right[:number])
-          %td.line_content.parallel.noteable_line{class: [new_line_type, ('empty-cell' if right[:text].empty?)], data: diff_view_line_data(new_line_code, new_position, new_line_type)}= diff_line_content(right[:text])
+          %td.line_content.parallel.noteable_line{class: [new_line_type, ('empty-cell' if right[:text].empty?)], data: diff_view_line_data(new_line_code, new_position, 'new')}= diff_line_content(right[:text])
 
       - unless @diff_notes_disabled
         - notes_left, notes_right = organize_comments(left, right)