Render add-diff-note button with server.

This commit moves the rendering of the button back to the server, and
shows/hides it using opacity rather than display. It also removes the
transform applied to the button on hover (scale). Previously, both of these
factors automatically triggered a reflow, which creates a performance
bottleneck on pages with larger DOM size.

MR: !12103

1 files changed, 4 insertions, 1 deletions

diff --git a/app/assets/javascripts/diff.js b/app/assets/javascripts/diff.js
index 725ec7b9c70..1be9df19c81 100644
--- a/app/assets/javascripts/diff.js
+++ b/app/assets/javascripts/diff.js
@@ -1,6 +1,7 @@
 /* eslint-disable class-methods-use-this */
 
 import './lib/utils/url_utility';
+import FilesCommentButton from './files_comment_button';
 
 const UNFOLD_COUNT = 20;
 let isBound = false;
@@ -8,8 +9,10 @@ let isBound = false;
 class Diff {
   constructor() {
     const $diffFile = $('.files .diff-file');
+
     $diffFile.singleFileDiff();
-    $diffFile.filesCommentButton();
+
+    FilesCommentButton.init($diffFile);
 
     $diffFile.each((index, file) => new gl.ImageFile(file));