show images in the diff

app/assets/stylesheets/design/git.scss

@@ -279,3 +279,17 @@ table.blame td.message .message {
     background: #ECECEC;
     color: #000;
 }
+
+table.diff td.diff-image {
+    text-align: center;
+
+    span.diff-image {
+      text-align: center;
+      margin: 0;
+      padding: 0;
+
+      img {
+        margin-top: 5px;
+      }
+    }
+}

app/views/projects/git/blobs/_render_as_image.html.haml

@@ -1,8 +1,6 @@
-%table.table.blob
+%table.table.blob.diff
   %tr
     %td.lines
-    %td.blob
-      :plain
-        <br/>
-        <center><img src='#{raw_path(@project, @treeish, @path)}'/></center>
-        <br/>
+    %td.blob.diff-image
+      %span.diff-image
+        %img{ src: raw_path(@project, @treeish, @path), style: 'max-width: 600px;' }

app/views/projects/git/commits/diff.html.haml

@@ -24,7 +24,17 @@
           - if commit_diff.b_path.present?
             .r= link_to "view file @ #{short_hash_id(commit_id)}", blob_path(@project, commit_id, commit_diff.b_path)
           .clear
-        -if commit_diff.diff.present? && !(@project.repo.tree(commit_id) / commit_diff.b_path).binary?
-          .diff_data=render_diff(commit_diff, diff_counter: diff_counter)
+        -if commit_diff.diff.present?
+          .diff_data
+            - blob = @project.repo.tree(commit_id) / commit_diff.b_path
+            - if blob.render_as == :image
+              %table.diff.inline{ cellspacing: 0, cellpadding: 0 }
+                %tr
+                  %td.lines
+                  %td.blob.diff-image
+                    %span.diff-image
+                      %img{ src: "data:#{blob.mime_type};base64,#{Base64.encode64(blob.data)}",
+                            style: 'max-width: 600px;' }
+            = render_diff(commit_diff, diff_counter: diff_counter) unless blob.binary?
   - rescue Grit::Git::GitTimeout
     %p= t 'layout.git.repositories.commit_diff_too_big'