Merge branch 'fix-image-view-mode' into 'master'

Fix image view mode

Closes #40945

See merge request gitlab-org/gitlab-ce!15803

(cherry picked from commit fb47f2a7459f4c413f3fe496bcdb1b40d81d73a4)

e815e8eb Fix image view mode
aa2031b6 Add spec

2 files changed, 14 insertions, 2 deletions

diff --git a/app/assets/javascripts/commit/image_file.js b/app/assets/javascripts/commit/image_file.js
index 50d0cb5c86d..5662802525e 100644
--- a/app/assets/javascripts/commit/image_file.js
+++ b/app/assets/javascripts/commit/image_file.js
@@ -121,7 +121,7 @@ export default class ImageFile {
       return $('.swipe.view', this.file).each((function(_this) {
         return function(index, view) {
           var $swipeWrap, $swipeBar, $swipeFrame, wrapPadding, ref;
-          ref = this.prepareFrames(view), maxWidth = ref[0], maxHeight = ref[1];
+          ref = _this.prepareFrames(view), maxWidth = ref[0], maxHeight = ref[1];
           $swipeFrame = $('.swipe-frame', view);
           $swipeWrap = $('.swipe-wrap', view);
           $swipeBar = $('.swipe-bar', view);
@@ -158,7 +158,7 @@ export default class ImageFile {
       return $('.onion-skin.view', this.file).each((function(_this) {
         return function(index, view) {
           var $frame, $track, $dragger, $frameAdded, framePadding, ref, dragging = false;
-          ref = this.prepareFrames(view), maxWidth = ref[0], maxHeight = ref[1];
+          ref = _this.prepareFrames(view), maxWidth = ref[0], maxHeight = ref[1];
           $frame = $('.onion-skin-frame', view);
           $frameAdded = $('.frame.added', view);
           $track = $('.drag-track', view);
diff --git a/spec/features/merge_requests/image_diff_notes.rb b/spec/features/merge_requests/image_diff_notes.rb
index 3c53b51e330..021c4e03428 100644
--- a/spec/features/merge_requests/image_diff_notes.rb
+++ b/spec/features/merge_requests/image_diff_notes.rb
@@ -185,6 +185,18 @@ feature 'image diff notes', :js do
       expect(page).to have_content(diff_note.note)
     end
   end
+
+  describe 'image view modes' do
+    before do
+      visit project_commit_path(project, '2f63565e7aac07bcdadb654e253078b727143ec4')
+    end
+
+    it 'resizes image in onion skin view mode' do
+      find('.view-modes-menu .onion-skin').click
+
+      expect(find('.onion-skin-frame')['style']).to match('width: 228px; height: 240px;')
+    end
+  end
 end
 
 def create_image_diff_note