Merge pull request #7614 from yglukhov/toggle-line-wrap

Added a checkbox to toggle line wrapping in diff.

app/assets/javascripts/behaviors/toggle_diff_line_wrap_behavior.coffee

+$ ->
+  # Toggle line wrapping in diff.
+  #
+  # %div.diff-file
+  #   %input.js-toggle-diff-line-wrap
+  #   %td.line_content
+  #
+  $("body").on "click", ".js-toggle-diff-line-wrap", (e) ->
+    diffFile = $(@).closest(".diff-file")
+    if $(@).is(":checked")
+      diffFile.addClass("diff-wrap-lines")
+    else
+      diffFile.removeClass("diff-wrap-lines")
+

app/assets/stylesheets/sections/diff.scss

@@ -125,8 +125,6 @@
     }
     .line_content {
       display: block;
-      white-space: pre;
-      height: 18px;
       margin: 0px;
       padding: 0px 0.5em;
       border: none;
@@ -341,3 +339,12 @@
   margin: 0;
   border: none;
 }
+
+.diff-file .line_content {
+  white-space: pre;
+}
+
+.diff-wrap-lines .line_content {
+  white-space: pre-wrap;
+}
+

app/views/projects/commits/_diff_file.html.haml

@@ -16,6 +16,10 @@
         %span.file-mode= "#{diff.a_mode} → #{diff.b_mode}"
 
       .diff-btn-group
+        %label
+          = check_box_tag nil, 1, false, class: "js-toggle-diff-line-wrap"
+          Wrap text
+         
         = link_to "#", class: "js-toggle-diff-comments btn btn-small" do
           %i.icon-chevron-down
           Diff comments