Image Diff Viewing + Download Diff Viewing

app/assets/javascripts/ide/components/repo_editor.vue

@@ -2,6 +2,7 @@
 import { mapState, mapGetters, mapActions } from 'vuex';
 import flash from '~/flash';
 import ContentViewer from '~/vue_shared/components/content_viewer/content_viewer.vue';
+import DiffViewer from '~/vue_shared/components/diff_viewer/diff_viewer.vue';
 import { activityBarViews, viewerTypes } from '../constants';
 import Editor from '../lib/editor';
 import ExternalLink from './external_link.vue';
@@ -9,6 +10,7 @@ import ExternalLink from './external_link.vue';
 export default {
   components: {
     ContentViewer,
+    DiffViewer,
     ExternalLink,
   },
   props: {
@@ -29,9 +31,18 @@ export default {
     shouldHideEditor() {
       return this.file && this.file.binary && !this.file.content;
     },
+    showContentViewer() {
+      return (
+        (this.shouldHideEditor || this.file.viewMode === 'preview') &&
+        (this.viewer !== viewerTypes.mr || !this.file.mrChange)
+      );
+    },
+    showDiffViewer() {
+      return this.shouldHideEditor && this.file.mrChange && this.viewer === viewerTypes.mr;
+    },
     editTabCSS() {
       return {
-        active: this.file.viewMode === 'edit',
+        active: this.file.viewMode === 'editor',
       };
     },
     previewTabCSS() {
@@ -53,7 +64,7 @@ export default {
         if (this.currentActivityView !== activityBarViews.edit) {
           this.setFileViewMode({
             file: this.file,
-            viewMode: 'edit',
+            viewMode: 'editor',
           });
         }
       }
@@ -62,7 +73,7 @@ export default {
       if (this.currentActivityView !== activityBarViews.edit) {
         this.setFileViewMode({
           file: this.file,
-          viewMode: 'edit',
+          viewMode: 'editor',
         });
       }
     },
@@ -197,7 +208,7 @@ export default {
           <a
             href="javascript:void(0);"
             role="button"
-            @click.prevent="setFileViewMode({ file, viewMode: 'edit' })">
+            @click.prevent="setFileViewMode({ file, viewMode: 'editor' })">
             <template v-if="viewer === $options.viewerTypes.edit">
               {{ __('Edit') }}
             </template>
@@ -222,7 +233,7 @@ export default {
       />
     </div>
     <div
-      v-show="!shouldHideEditor && file.viewMode === 'edit'"
+      v-show="!shouldHideEditor && file.viewMode ==='editor'"
       ref="editor"
       class="multi-file-editor-holder"
       :class="{
@@ -231,10 +242,18 @@ export default {
     >
     </div>
     <content-viewer
-      v-if="shouldHideEditor || file.viewMode === 'preview'"
+      v-if="showContentViewer"
       :content="file.content || file.raw"
       :path="file.rawPath || file.path"
       :file-size="file.size"
       :project-path="file.projectId"/>
+    <diff-viewer
+      v-if="showDiffViewer"
+      :diff-mode="file.mrChange.diffMode"
+      :new-path="file.mrChange.new_path"
+      :new-sha="currentMergeRequest.sha"
+      :old-path="file.mrChange.old_path"
+      :old-sha="currentMergeRequest.baseCommitSha"
+      :project-path="file.projectId"/>
   </div>
 </template>

app/assets/javascripts/ide/constants.js

@@ -21,6 +21,13 @@ export const viewerTypes = {
   diff: 'diff',
 };
+export const diffModes = {
+  replaced: 'replaced',
+  new: 'new',
+  deleted: 'deleted',
+  renamed: 'renamed',
+};
+
 export const rightSidebarViews = {
   pipelines: 'pipelines-list',
   jobsDetail: 'jobs-detail',

app/assets/javascripts/ide/stores/mutations/file.js

 /* eslint-disable no-param-reassign */
 import * as types from '../mutation_types';
+import { diffModes } from '../../constants';
 export default {
   [types.SET_FILE_ACTIVE](state, { path, active }) {
@@ -85,8 +86,19 @@ export default {
     });
   },
   [types.SET_FILE_MERGE_REQUEST_CHANGE](state, { file, mrChange }) {
+    let diffMode = diffModes.replaced;
+    if (mrChange.new_file) {
+      diffMode = diffModes.new;
+    } else if (mrChange.deleted_file) {
+      diffMode = diffModes.deleted;
+    } else if (mrChange.renamed_file) {
+      diffMode = diffModes.renamed;
+    }
     Object.assign(state.entries[file.path], {
-      mrChange,
+      mrChange: {
+        ...mrChange,
+        diffMode,
+      },
     });
   },
   [types.SET_FILE_VIEWMODE](state, { file, viewMode }) {

app/assets/javascripts/ide/stores/utils.js

@@ -39,7 +39,7 @@ export const dataStructure = () => ({
   editorColumn: 1,
   fileLanguage: '',
   eol: '',
-  viewMode: 'edit',
+  viewMode: 'editor',
   previewMode: null,
   size: 0,
   parentPath: null,

app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue

@@ -32,7 +32,10 @@ export default {
   <div class="file-container">
     <div class="file-content">
       <p class="prepend-top-10 file-info">
-        {{ fileName }} ({{ fileSizeReadable }})
+        {{ fileName }}
+        <template v-if="fileSize > 0">
+          ({{ fileSizeReadable }})
+        </template>
       </p>
       <a
         :href="path"

app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue

 <script>
+import _ from 'underscore';
 import { numberToHumanSize } from '../../../../lib/utils/number_utils';
 export default {
@@ -12,6 +13,10 @@ export default {
       required: false,
       default: 0,
     },
+    renderInfo: {
+      type: Boolean,
+      default: true,
+    },
   },
   data() {
     return {
@@ -26,14 +31,34 @@ export default {
       return numberToHumanSize(this.fileSize);
     },
   },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeThrottled, false);
+  },
+  mounted() {
+    // The onImgLoad may have happened before the control was actually mounted
+    this.onImgLoad();
+    this.resizeThrottled = _.throttle(this.onImgLoad, 400);
+    window.addEventListener('resize', this.resizeThrottled, false);
+  },
   methods: {
     onImgLoad() {
       const contentImg = this.$refs.contentImg;
-      this.isZoomable =
-        contentImg.naturalWidth > contentImg.width || contentImg.naturalHeight > contentImg.height;
-      this.width = contentImg.naturalWidth;
-      this.height = contentImg.naturalHeight;
+      if (contentImg) {
+        this.isZoomable =
+          contentImg.naturalWidth > contentImg.width ||
+          contentImg.naturalHeight > contentImg.height;
+
+        this.width = contentImg.naturalWidth;
+        this.height = contentImg.naturalHeight;
+
+        this.$emit('imgLoaded', {
+          width: this.width,
+          height: this.height,
+          renderedWidth: contentImg.clientWidth,
+          renderedHeight: contentImg.clientHeight,
+        });
+      }
     },
     onImgClick() {
       if (this.isZoomable) this.isZoomed = !this.isZoomed;
@@ -47,20 +72,22 @@ export default {
     <div class="file-content image_file">
       <img
         ref="contentImg"
-        :class="{ 'isZoomable': isZoomable, 'isZoomed': isZoomed }"
+        :class="{ 'is-zoomable': isZoomable, 'is-zoomed': isZoomed }"
         :src="path"
         :alt="path"
         @load="onImgLoad"
         @click="onImgClick"/>
-      <p class="file-info prepend-top-10">
+      <p
+        v-if="renderInfo"
+        class="file-info prepend-top-10">
         <template v-if="fileSize>0">
           {{ fileSizeReadable }}
         </template>
         <template v-if="fileSize>0 && width && height">
-          -
+          |
         </template>
         <template v-if="width && height">
-          {{ width }} x {{ height }}
+          W: {{ width }} | H: {{ height }}
         </template>
       </p>
     </div>

app/assets/javascripts/vue_shared/components/diff_viewer/constants.js

+export const diffModes = {
+  replaced: 'replaced',
+  new: 'new',
+  deleted: 'deleted',
+  renamed: 'renamed',
+};
+
+export const imageViewMode = {
+  twoup: 'twoup',
+  swipe: 'swipe',
+  onion: 'onion',
+};

app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue

+<script>
+import { viewerInformationForPath } from '../content_viewer/lib/viewer_utils';
+import ImageDiffViewer from './viewers/image_diff_viewer.vue';
+import DownloadDiffViewer from './viewers/download_diff_viewer.vue';
+
+export default {
+  props: {
+    diffMode: {
+      type: String,
+      required: true,
+    },
+    newPath: {
+      type: String,
+      required: true,
+    },
+    newSha: {
+      type: String,
+      required: true,
+    },
+    oldPath: {
+      type: String,
+      required: true,
+    },
+    oldSha: {
+      type: String,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  computed: {
+    viewer() {
+      if (!this.newPath) return null;
+
+      const previewInfo = viewerInformationForPath(this.newPath);
+      if (!previewInfo) return DownloadDiffViewer;
+
+      switch (previewInfo.id) {
+        case 'image':
+          return ImageDiffViewer;
+        default:
+          return DownloadDiffViewer;
+      }
+    },
+    fullOldPath() {
+      return `${gon.relative_url_root}/${this.projectPath}/raw/${this.oldSha}/${this.oldPath}`;
+    },
+    fullNewPath() {
+      return `${gon.relative_url_root}/${this.projectPath}/raw/${this.newSha}/${this.newPath}`;
+    },
+  },
+};
+</script>
+
+<template>
+  <div
+    class="diff-file preview-container"
+    v-if="viewer">
+    <component
+      :is="viewer"
+      :diff-mode="diffMode"
+      :new-path="fullNewPath"
+      :old-path="fullOldPath"
+      :project-path="projectPath"
+    />
+  </div>
+</template>

app/assets/javascripts/vue_shared/components/diff_viewer/viewers/download_diff_viewer.vue

+<script>
+import DownloadViewer from '../../content_viewer/viewers/download_viewer.vue';
+import { diffModes } from '../constants';
+
+export default {
+  components: {
+    DownloadViewer,
+  },
+  props: {
+    diffMode: {
+      type: String,
+      required: true,
+    },
+    newPath: {
+      type: String,
+      required: true,
+    },
+    oldPath: {
+      type: String,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  diffModes,
+};
+</script>
+
+<template>
+  <div class="diff-file-container">
+    <div class="diff-viewer">
+      <div
+        v-if="diffMode === $options.diffModes.replaced"
+        class="two-up view row">
+        <div class="col-sm-6 deleted">
+          <download-viewer
+            :path="oldPath"
+            :project-path="projectPath"
+          />
+        </div>
+        <div class="col-sm-6 added">
+          <download-viewer
+            :path="newPath"
+            :project-path="projectPath"
+          />
+        </div>
+      </div>
+      <div
+        v-else-if="diffMode === $options.diffModes.new"
+        class="added">
+        <download-viewer
+          :path="newPath"
+          :project-path="projectPath"
+        />
+      </div>
+      <div
+        v-else
+        class="deleted">
+        <download-viewer
+          :path="oldPath"
+          :project-path="projectPath"
+        />
+      </div>
+    </div>
+  </div>
+</template>

app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue

+<script>
+import { pixeliseValue } from '../../../lib/utils/dom_utils';
+import ImageViewer from '../../../content_viewer/viewers/image_viewer.vue';
+
+export default {
+  components: {
+    ImageViewer,
+  },
+  props: {
+    newPath: {
+      type: String,
+      required: true,
+    },
+    oldPath: {
+      type: String,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      onionMaxWidth: undefined,
+      onionMaxHeight: undefined,
+      onionOldImgInfo: null,
+      onionNewImgInfo: null,
+      onionDraggerPos: 0,
+      onionOpacity: 1,
+      dragging: false,
+    };
+  },
+  computed: {
+    onionMaxPixelWidth() {
+      return pixeliseValue(this.onionMaxWidth);
+    },
+    onionMaxPixelHeight() {
+      return pixeliseValue(this.onionMaxHeight);
+    },
+    onionDraggerPixelPos() {
+      return pixeliseValue(this.onionDraggerPos);
+    },
+  },
+  beforeDestroy() {
+    document.body.removeEventListener('mouseup', this.stopDrag);
+    this.$refs.dragger.removeEventListener('mousedown', this.startDrag);
+  },
+  methods: {
+    dragMove(e) {
+      if (!this.dragging) return;
+      const left = e.pageX - this.$refs.dragTrack.getBoundingClientRect().left;
+      const dragTrackWidth =
+        this.$refs.dragTrack.clientWidth - this.$refs.dragger.clientWidth || 100;
+
+      let leftValue = left;
+      if (leftValue < 0) leftValue = 0;
+      if (leftValue > dragTrackWidth) leftValue = dragTrackWidth;
+
+      this.onionOpacity = left / dragTrackWidth;
+      this.onionDraggerPos = leftValue;
+    },
+    startDrag() {
+      this.dragging = true;
+      document.body.style.userSelect = 'none';
+      document.body.addEventListener('mousemove', this.dragMove);
+    },
+    stopDrag() {
+      this.dragging = false;
+      document.body.style.userSelect = '';
+      document.body.removeEventListener('mousemove', this.dragMove);
+    },
+    prepareOnionSkin() {
+      if (this.onionOldImgInfo && this.onionNewImgInfo) {
+        this.onionMaxWidth = Math.max(
+          this.onionOldImgInfo.renderedWidth,
+          this.onionNewImgInfo.renderedWidth,
+        );
+        this.onionMaxHeight = Math.max(
+          this.onionOldImgInfo.renderedHeight,
+          this.onionNewImgInfo.renderedHeight,
+        );
+
+        this.onionOpacity = 1;
+        this.onionDraggerPos =
+          this.$refs.dragTrack.clientWidth - this.$refs.dragger.clientWidth || 100;
+
+        document.body.addEventListener('mouseup', this.stopDrag);
+      }
+    },
+    onionNewImgLoaded(imgInfo) {
+      this.onionNewImgInfo = imgInfo;
+      this.prepareOnionSkin();
+    },
+    onionOldImgLoaded(imgInfo) {
+      this.onionOldImgInfo = imgInfo;
+      this.prepareOnionSkin();
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="onion-skin view">
+    <div
+      class="onion-skin-frame"
+      :style="{
+        'width': onionMaxPixelWidth,
+        'height': onionMaxPixelHeight,
+        'user-select': dragging === true ? 'none' : '',
+    }">
+      <div
+        class="frame deleted"
+        :style="{
+          'width': onionMaxPixelWidth,
+          'height': onionMaxPixelHeight,
+      }">
+        <image-viewer
+          key="onionOldImg"
+          :render-info="false"
+          :path="oldPath"
+          :project-path="projectPath"
+          @imgLoaded="onionOldImgLoaded"
+        />
+      </div>
+      <div
+        class="added frame"
+        ref="addedFrame"
+        :style="{
+          'opacity': onionOpacity,
+          'width': onionMaxPixelWidth,
+          'height': onionMaxPixelHeight,
+      }">
+        <image-viewer
+          key="onionNewImg"
+          :render-info="false"
+          :path="newPath"
+          :project-path="projectPath"
+          @imgLoaded="onionNewImgLoaded"
+        />
+      </div>
+      <div class="controls">
+        <div class="transparent"></div>
+        <div
+          class="drag-track"
+          ref="dragTrack"
+          @mousedown="startDrag"
+          @mouseup="stopDrag">
+          <div
+            class="dragger"
+            ref="dragger"
+            :style="{ 'left': onionDraggerPixelPos }">
+          </div>
+        </div>
+        <div class="opaque"></div>
+      </div>
+    </div>
+  </div>
+</template>

app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue

+<script>
+import _ from 'underscore';
+import { pixeliseValue } from '../../../lib/utils/dom_utils';
+import ImageViewer from '../../../content_viewer/viewers/image_viewer.vue';
+
+export default {
+  components: {
+    ImageViewer,
+  },
+  props: {
+    newPath: {
+      type: String,
+      required: true,
+    },
+    oldPath: {
+      type: String,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      dragging: false,
+      swipeOldImgInfo: null,
+      swipeNewImgInfo: null,
+      swipeMaxWidth: undefined,
+      swipeMaxHeight: undefined,
+      swipeBarPos: 1,
+      swipeWrapWidth: undefined,
+    };
+  },
+  computed: {
+    swipeMaxPixelWidth() {
+      return pixeliseValue(this.swipeMaxWidth);
+    },
+    swipeMaxPixelHeight() {
+      return pixeliseValue(this.swipeMaxHeight);
+    },
+    swipeWrapPixelWidth() {
+      return pixeliseValue(this.swipeWrapWidth);
+    },
+    swipeBarPixelPos() {
+      return pixeliseValue(this.swipeBarPos);
+    },
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeThrottled, false);
+    document.body.removeEventListener('mouseup', this.stopDrag);
+    document.body.removeEventListener('mousemove', this.dragMove);
+  },
+  mounted() {
+    window.addEventListener('resize', this.resize, false);
+  },
+  methods: {
+    dragMove(e) {
+      if (!this.dragging) return;
+
+      let leftValue = e.pageX - this.$refs.swipeFrame.getBoundingClientRect().left;
+      const spaceLeft = 20;
+      const { clientWidth } = this.$refs.swipeFrame;
+      if (leftValue <= 0) {
+        leftValue = 0;
+      } else if (leftValue > clientWidth - spaceLeft) {
+        leftValue = clientWidth - spaceLeft;
+      }
+
+      this.swipeWrapWidth = this.swipeMaxWidth - leftValue;
+      this.swipeBarPos = leftValue;
+    },
+    startDrag() {
+      this.dragging = true;
+      document.body.style.userSelect = 'none';
+      document.body.addEventListener('mousemove', this.dragMove);
+    },
+    stopDrag() {
+      this.dragging = false;
+      document.body.style.userSelect = '';
+      document.body.removeEventListener('mousemove', this.dragMove);
+    },
+    prepareSwipe() {
+      if (this.swipeOldImgInfo && this.swipeNewImgInfo) {
+        // Add 2 for border width
+        this.swipeMaxWidth =
+          Math.max(this.swipeOldImgInfo.renderedWidth, this.swipeNewImgInfo.renderedWidth) + 2;
+        this.swipeWrapWidth = this.swipeMaxWidth;
+        this.swipeMaxHeight =
+          Math.max(this.swipeOldImgInfo.renderedHeight, this.swipeNewImgInfo.renderedHeight) + 2;
+
+        document.body.addEventListener('mouseup', this.stopDrag);
+      }
+    },
+    swipeNewImgLoaded(imgInfo) {
+      this.swipeNewImgInfo = imgInfo;
+      this.prepareSwipe();
+    },
+    swipeOldImgLoaded(imgInfo) {
+      this.swipeOldImgInfo = imgInfo;
+      this.prepareSwipe();
+    },
+    resize: _.throttle(function throttledResize() {
+      this.swipeBarPos = 0;
+    }, 400),
+  },
+};
+</script>
+
+<template>
+  <div class="swipe view">
+    <div
+      class="swipe-frame"
+      ref="swipeFrame"
+      :style="{
+        'width': swipeMaxPixelWidth,
+        'height': swipeMaxPixelHeight,
+    }">
+      <div class="frame deleted">
+        <image-viewer
+          key="swipeOldImg"
+          ref="swipeOldImg"
+          :render-info="false"
+          :path="oldPath"
+          :project-path="projectPath"
+          @imgLoaded="swipeOldImgLoaded"
+        />
+      </div>
+      <div
+        class="swipe-wrap"
+        ref="swipeWrap"
+        :style="{
+          'width': swipeWrapPixelWidth,
+          'height': swipeMaxPixelHeight,
+      }">
+        <div class="frame added">
+          <image-viewer
+            key="swipeNewImg"
+            :render-info="false"
+            :path="newPath"
+            :project-path="projectPath"
+            @imgLoaded="swipeNewImgLoaded"
+          />
+        </div>
+      </div>
+      <span
+        class="swipe-bar"
+        ref="swipeBar"
+        @mousedown="startDrag"
+        @mouseup="stopDrag"
+        :style="{ 'left': swipeBarPixelPos }">
+        <span class="top-handle"></span>
+        <span class="bottom-handle"></span>
+      </span>
+    </div>
+  </div>
+</template>

app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue

+<script>
+import ImageViewer from '../../../content_viewer/viewers/image_viewer.vue';
+
+export default {
+  components: {
+    ImageViewer,
+  },
+  props: {
+    newPath: {
+      type: String,
+      required: true,
+    },
+    oldPath: {
+      type: String,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="two-up view row">
+    <div class="col-sm-6 frame deleted">
+      <image-viewer
+        :path="oldPath"
+        :project-path="projectPath"
+      />
+    </div>
+    <div class="col-sm-6 frame added">
+      <image-viewer
+        :path="newPath"
+        :project-path="projectPath"
+      />
+    </div>
+  </div>
+</template>

app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue

+<script>
+import ImageViewer from '../../content_viewer/viewers/image_viewer.vue';
+import TwoUpViewer from './image_diff/two_up_viewer.vue';
+import SwipeViewer from './image_diff/swipe_viewer.vue';
+import OnionSkinViewer from './image_diff/onion_skin_viewer.vue';
+import { diffModes, imageViewMode } from '../constants';
+
+export default {
+  components: {
+    ImageViewer,
+    TwoUpViewer,
+    SwipeViewer,
+    OnionSkinViewer,
+  },
+  props: {
+    diffMode: {
+      type: String,
+      required: true,
+    },
+    newPath: {
+      type: String,
+      required: true,
+    },
+    oldPath: {
+      type: String,
+      required: true,
+    },
+    projectPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  data() {
+    return {
+      mode: imageViewMode.twoup,
+    };
+  },
+  methods: {
+    changeMode(newMode) {
+      this.mode = newMode;
+    },
+  },
+  diffModes,
+  imageViewMode,
+};
+</script>
+
+<template>
+  <div class="diff-file-container">
+    <div
+      class="diff-viewer"
+      v-if="diffMode === $options.diffModes.replaced">
+      <div class="image js-replaced-image">
+        <two-up-viewer
+          v-if="mode === $options.imageViewMode.twoup"
+          v-bind="$props"/>
+        <swipe-viewer
+          v-else-if="mode === $options.imageViewMode.swipe"
+          v-bind="$props"/>
+        <onion-skin-viewer
+          v-else-if="mode === $options.imageViewMode.onion"
+          v-bind="$props"/>
+      </div>
+      <div class="view-modes">
+        <ul class="view-modes-menu">
+          <li
+            :class="{
+              active: mode === $options.imageViewMode.twoup
+            }"
+            @click="changeMode($options.imageViewMode.twoup)">
+            {{ s__('ImageDiffViewer|2-up') }}
+          </li>
+          <li
+            :class="{
+              active: mode === $options.imageViewMode.swipe
+            }"
+            @click="changeMode($options.imageViewMode.swipe)">
+            {{ s__('ImageDiffViewer|Swipe') }}
+          </li>
+          <li
+            :class="{
+              active: mode === $options.imageViewMode.onion
+            }"
+            @click="changeMode($options.imageViewMode.onion)">
+            {{ s__('ImageDiffViewer|Onion skin') }}
+          </li>
+        </ul>
+      </div>
+      <div class="note-container"></div>
+    </div>
+    <div
+      v-else-if="diffMode === $options.diffModes.new"
+      class="diff-viewer added">
+      <image-viewer
+        :path="newPath"
+        :project-path="projectPath"
+      />
+    </div>
+    <div
+      v-else
+      class="diff-viewer deleted">
+      <image-viewer
+        :path="oldPath"
+        :project-path="projectPath"
+      />
+    </div>
+  </div>
+</template>

app/assets/javascripts/vue_shared/components/lib/utils/dom_utils.js

+export function pixeliseValue(val) {
+  return val ? `${val}px` : '';
+}
+
+export default {};

app/assets/stylesheets/framework/files.scss

@@ -400,3 +400,51 @@ span.idiff {
   color: $common-gray-light;
   border: 1px solid $common-gray-light;
 }
+
+.preview-container {
+  height: 100%;
+  overflow: auto;
+
+  .file-container {
+    background-color: $gray-darker;
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+
+    text-align: center;
+
+    .file-content {
+      padding: $gl-padding;
+      max-width: 100%;
+      max-height: 100%;
+
+      img {
+        max-width: 90%;
+        max-height: 70vh;
+      }
+
+      .is-zoomable {
+        cursor: pointer;
+        cursor: zoom-in;
+
+        &.is-zoomed {
+          cursor: pointer;
+          cursor: zoom-out;
+          max-width: none;
+          max-height: none;
+          margin-right: $gl-padding;
+        }
+      }
+    }
+
+    .file-info {
+      font-size: $label-font-size;
+      color: $diff-image-info-color;
+    }
+  }
+
+  .md-previewer {
+    padding: $gl-padding;
+  }
+}

app/assets/stylesheets/pages/diff.scss

@@ -189,8 +189,22 @@
       img {
         border: 1px solid $white-light;
-        background-image: linear-gradient(45deg, $border-color 25%, transparent 25%, transparent 75%, $border-color 75%, $border-color 100%),
-        linear-gradient(45deg, $border-color 25%, transparent 25%, transparent 75%, $border-color 75%, $border-color 100%);
+        background-image: linear-gradient(
+            45deg,
+            $border-color 25%,
+            transparent 25%,
+            transparent 75%,
+            $border-color 75%,
+            $border-color 100%
+          ),
+          linear-gradient(
+            45deg,
+            $border-color 25%,
+            transparent 25%,
+            transparent 75%,
+            $border-color 75%,
+            $border-color 100%
+          );
         background-size: 10px 10px;
         background-position: 0 0, 5px 5px;
         max-width: 100%;
@@ -395,6 +409,69 @@
   .line_content {
     white-space: pre-wrap;
   }
+
+  .diff-file-container {
+    .frame.deleted {
+      border: 0;
+      background-color: inherit;
+
+      .image_file img {
+        border: 1px solid $deleted;
+      }
+    }
+
+    .frame.added {
+      border: 0;
+      background-color: inherit;
+
+      .image_file img {
+        border: 1px solid $added;
+      }
+    }
+
+    .swipe.view,
+    .onion-skin.view {
+      .swipe-wrap {
+        top: 0;
+        right: 0;
+      }
+
+      .frame.deleted {
+        top: 0;
+        right: 0;
+      }
+
+      .swipe-bar {
+        top: 0;
+
+        .top-handle {
+          top: -14px;
+          left: -7px;
+        }
+
+        .bottom-handle {
+          bottom: -14px;
+          left: -7px;
+        }
+      }
+
+      .file-container {
+        display: inline-block;
+
+        .file-content {
+          padding: 0;
+
+          img {
+            max-width: none;
+          }
+        }
+      }
+    }
+
+    .onion-skin.view .controls {
+      bottom: -25px;
+    }
+  }
 }
 .file-content .diff-file {
@@ -536,7 +613,7 @@
   margin-right: 0;
   border-color: $white-light;
   cursor: pointer;
-  transition: all .1s ease-out;
+  transition: all 0.1s ease-out;
   @for $i from 1 through 4 {
     &:nth-child(#{$i}) {
@@ -563,7 +640,7 @@
   height: 24px;
   border-radius: 50%;
   padding: 0;
-  transition: transform .1s ease-out;
+  transition: transform 0.1s ease-out;
   z-index: 100;
   .collapse-icon {
@@ -708,11 +785,35 @@
     width: 100%;
     height: 10px;
     background-color: $white-light;
-    background-image: linear-gradient(45deg, transparent, transparent 73%, $diff-jagged-border-gradient-color 75%, $white-light 80%),
-      linear-gradient(225deg, transparent, transparent 73%, $diff-jagged-border-gradient-color 75%, $white-light 80%),
-      linear-gradient(135deg, transparent, transparent 73%, $diff-jagged-border-gradient-color 75%, $white-light 80%),
-      linear-gradient(-45deg, transparent, transparent 73%, $diff-jagged-border-gradient-color 75%, $white-light 80%);
-    background-position: 5px 5px,0 5px,0 5px,5px 5px;
+    background-image: linear-gradient(
+        45deg,
+        transparent,
+        transparent 73%,
+        $diff-jagged-border-gradient-color 75%,
+        $white-light 80%
+      ),
+      linear-gradient(
+        225deg,
+        transparent,
+        transparent 73%,
+        $diff-jagged-border-gradient-color 75%,
+        $white-light 80%
+      ),
+      linear-gradient(
+        135deg,
+        transparent,
+        transparent 73%,
+        $diff-jagged-border-gradient-color 75%,
+        $white-light 80%
+      ),
+      linear-gradient(
+        -45deg,
+        transparent,
+        transparent 73%,
+        $diff-jagged-border-gradient-color 75%,
+        $white-light 80%
+      );
+    background-position: 5px 5px, 0 5px, 0 5px, 5px 5px;
     background-size: 10px 10px;
     background-repeat: repeat;
   }
@@ -750,11 +851,16 @@
 .frame.click-to-comment {
   position: relative;
   cursor: image-url('illustrations/image_comment_light_cursor.svg')
-    $image-comment-cursor-left-offset $image-comment-cursor-top-offset, auto;
+      $image-comment-cursor-left-offset $image-comment-cursor-top-offset,
+    auto;
   // Retina cursor
-  cursor: -webkit-image-set(image-url('illustrations/image_comment_light_cursor.svg') 1x, image-url('illustrations/image_comment_light_cursor@2x.svg') 2x)
-    $image-comment-cursor-left-offset $image-comment-cursor-top-offset, auto;
+  cursor: -webkit-image-set(
+        image-url('illustrations/image_comment_light_cursor.svg') 1x,
+        image-url('illustrations/image_comment_light_cursor@2x.svg') 2x
+      )
+      $image-comment-cursor-left-offset $image-comment-cursor-top-offset,
+    auto;
   .comment-indicator {
     position: absolute;
@@ -840,7 +946,7 @@
     .diff-notes-collapse,
     .note,
-    .discussion-reply-holder, {
+    .discussion-reply-holder {
       display: none;
     }

app/assets/stylesheets/pages/repo.scss

@@ -335,7 +335,6 @@
       img {
         max-width: 90%;
-        max-height: 90%;
       }
       .isZoomable {

changelogs/unreleased/tz-diff-blob-image-viewer.yml

+---
+title: Web IDE supports now Image + Download Diff Viewing
+merge_request: 18768
+author:
+type: added