Commenting on image diffs

45 files changed, 1114 insertions, 183 deletions

diff --git a/app/assets/images/icon_image_comment.svg b/app/assets/images/icon_image_comment.svg
new file mode 100644
index 00000000000..cf6cb972940
--- /dev/null
+++ b/app/assets/images/icon_image_comment.svg
@@ -0,0 +1 @@
+<svg width="24" height="30" viewBox="0 0 24 30" xmlns="http://www.w3.org/2000/svg"><title>cursor</title><g fill="none" fill-rule="evenodd"><path d="M24 12.105c0 6.686-5.74 11.58-12 17.895C5.74 23.684 0 18.79 0 12.105 0 5.42 5.373 0 12 0s12 5.42 12 12.105z" fill="#1F78D1" fill-rule="nonzero"/><path d="M15.28 25.249c1.458-1.475 2.539-2.635 3.474-3.747 2.851-3.394 4.203-6.265 4.203-9.397 0-6.111-4.908-11.062-10.957-11.062-6.05 0-10.957 4.951-10.957 11.062 0 3.132 1.352 6.003 4.203 9.397.935 1.112 2.016 2.272 3.474 3.747.511.517 2.216 2.213 3.28 3.275 1.064-1.062 2.769-2.758 3.28-3.275z" fill="#FFF"/><path d="M14.551 8.256A6.874 6.874 0 0 0 12 7.787c-.91 0-1.763.156-2.558.469-.79.308-1.42.725-1.888 1.252-.465.527-.697 1.096-.697 1.708 0 .5.159.977.476 1.433.321.45.772.841 1.352 1.172l.583.334-.181.643c-.107.407-.263.79-.469 1.152a6.604 6.604 0 0 0 1.842-1.145l.288-.254.381.04c.309.035.599.053.871.053.91 0 1.761-.154 2.551-.462.795-.312 1.424-.732 1.889-1.259.468-.526.703-1.096.703-1.707 0-.612-.235-1.181-.703-1.708-.465-.527-1.094-.944-1.889-1.252zm2.645.81c.536.656.804 1.373.804 2.15 0 .776-.268 1.495-.804 2.156-.535.656-1.263 1.176-2.183 1.56-.92.38-1.924.57-3.013.57a9.16 9.16 0 0 1-.971-.054 7.32 7.32 0 0 1-3.08 1.62 5.044 5.044 0 0 1-.764.148h-.033a.26.26 0 0 1-.181-.074.324.324 0 0 1-.107-.18v-.007c-.014-.018-.016-.045-.007-.08.014-.037.018-.059.014-.068 0-.009.01-.031.033-.067a.645.645 0 0 0 .04-.06 1.73 1.73 0 0 0 .047-.054l.054-.06a53.034 53.034 0 0 1 .435-.489c.049-.049.118-.136.207-.26.094-.126.168-.24.221-.342.054-.103.114-.235.181-.395.067-.161.125-.33.174-.51-.7-.397-1.254-.888-1.66-1.473A3.261 3.261 0 0 1 6 11.216c0-.777.268-1.494.804-2.15.535-.66 1.263-1.18 2.183-1.56.92-.384 1.924-.576 3.013-.576 1.09 0 2.094.192 3.013.576.92.38 1.648.9 2.183 1.56z" fill="#1F78D1" fill-rule="nonzero"/></g></svg>
diff --git a/app/assets/images/icon_image_comment@2x.svg b/app/assets/images/icon_image_comment@2x.svg
new file mode 100644
index 00000000000..83be91d3705
--- /dev/null
+++ b/app/assets/images/icon_image_comment@2x.svg
@@ -0,0 +1 @@
+<svg width="48" height="60" viewBox="0 0 48 60" xmlns="http://www.w3.org/2000/svg"><title>cursor_2x</title><g fill="none" fill-rule="evenodd"><path d="M48 24.21C48 37.583 36.522 47.369 24 60 11.478 47.368 0 37.582 0 24.21 0 10.84 10.745 0 24 0s24 10.84 24 24.21z" fill="#1F78D1" fill-rule="nonzero"/><path d="M30.56 50.497c2.915-2.95 5.078-5.268 6.947-7.493 5.703-6.788 8.406-12.53 8.406-18.793 0-12.223-9.815-22.124-21.913-22.124S2.087 11.988 2.087 24.211c0 6.263 2.703 12.005 8.406 18.793 1.87 2.225 4.032 4.544 6.947 7.493 1.022 1.035 4.432 4.426 6.56 6.55 2.128-2.124 5.538-5.515 6.56-6.55z" fill="#FFF"/><path d="M29.103 16.512c-1.58-.625-3.282-.938-5.103-.938-1.821 0-3.527.313-5.116.938-1.58.616-2.84 1.45-3.777 2.504-.928 1.054-1.393 2.192-1.393 3.415 0 1 .317 1.956.951 2.866.643.902 1.545 1.684 2.706 2.344l1.165.67-.362 1.286a9.603 9.603 0 0 1-.937 2.303 13.208 13.208 0 0 0 3.683-2.29l.576-.509.763.08c.616.072 1.196.108 1.741.108 1.821 0 3.522-.308 5.103-.925 1.589-.625 2.848-1.464 3.776-2.517.938-1.054 1.407-2.192 1.407-3.416 0-1.223-.469-2.361-1.407-3.415-.928-1.053-2.187-1.888-3.776-2.504zm5.29 1.62c1.071 1.313 1.607 2.746 1.607 4.3 0 1.553-.536 2.99-1.607 4.312-1.072 1.312-2.527 2.353-4.366 3.12-1.84.76-3.848 1.139-6.027 1.139a18.32 18.32 0 0 1-1.942-.107c-1.768 1.562-3.821 2.643-6.16 3.24-.438.126-.947.224-1.527.295h-.067a.521.521 0 0 1-.362-.147.649.649 0 0 1-.214-.362v-.013c-.027-.036-.032-.09-.014-.16.027-.072.036-.117.027-.135 0-.017.022-.062.067-.133a1.29 1.29 0 0 0 .08-.121c.01-.009.04-.045.094-.107a106.068 106.068 0 0 1 .522-.59c.215-.232.367-.401.456-.508.098-.099.236-.273.415-.523.188-.25.335-.477.442-.683.107-.205.228-.468.362-.79.134-.321.25-.66.348-1.018-1.402-.794-2.51-1.777-3.322-2.946C12.402 25.025 12 23.77 12 22.43c0-1.553.536-2.986 1.607-4.299 1.072-1.321 2.527-2.361 4.366-3.12 1.84-.768 3.848-1.152 6.027-1.152 2.179 0 4.188.384 6.027 1.152 1.84.759 3.294 1.799 4.366 3.12z" fill="#1F78D1" fill-rule="nonzero"/></g></svg>
diff --git a/app/assets/javascripts/commit.js b/app/assets/javascripts/commit.js
deleted file mode 100644
index 5f637524e30..00000000000
--- a/app/assets/javascripts/commit.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife */
-/* global CommitFile */
-
-window.Commit = (function() {
-  function Commit() {
-    $('.files .diff-file').each(function() {
-      return new CommitFile(this);
-    });
-  }
-
-  return Commit;
-})();
diff --git a/app/assets/javascripts/commit/file.js b/app/assets/javascripts/commit/file.js
deleted file mode 100644
index ee087c978dd..00000000000
--- a/app/assets/javascripts/commit/file.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-new */
-/* global ImageFile */
-
-(function() {
-  this.CommitFile = (function() {
-    function CommitFile(file) {
-      if ($('.image', file).length) {
-        new gl.ImageFile(file);
-      }
-    }
-
-    return CommitFile;
-  })();
-}).call(window);
diff --git a/app/assets/javascripts/commit/image_file.js b/app/assets/javascripts/commit/image_file.js
index 4763985c802..e7adf8814b8 100644
--- a/app/assets/javascripts/commit/image_file.js
+++ b/app/assets/javascripts/commit/image_file.js
@@ -1,4 +1,6 @@
 /* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-use-before-define, prefer-arrow-callback, no-else-return, consistent-return, prefer-template, quotes, one-var, one-var-declaration-per-line, no-unused-vars, no-return-assign, comma-dangle, quote-props, no-unused-expressions, no-sequences, object-shorthand, max-len */
+import 'vendor/jquery.waitforimages';
+
 (function() {
   gl.ImageFile = (function() {
     var prepareFrames;
@@ -17,15 +19,10 @@
 
             // Load two-up view after images are loaded
             // so that we can display the correct width and height information
-            const images = $('.two-up.view img', _this.file);
-            let loadedCount = 0;
-
-            images.on('load', () => {
-              loadedCount += 1;
+            const $images = $('.two-up.view img', _this.file);
 
-              if (loadedCount === images.length) {
-                _this.initView('two-up');
-              }
+            $images.waitForImages(function() {
+              _this.initView('two-up');
             });
           });
         };
diff --git a/app/assets/javascripts/diff.js b/app/assets/javascripts/diff.js
index 9ddfdb6ae21..6c78662baa7 100644
--- a/app/assets/javascripts/diff.js
+++ b/app/assets/javascripts/diff.js
@@ -3,6 +3,7 @@
 import './lib/utils/url_utility';
 import FilesCommentButton from './files_comment_button';
 import SingleFileDiff from './single_file_diff';
+import imageDiffHelper from './image_diff/helpers/index';
 
 const UNFOLD_COUNT = 20;
 let isBound = false;
@@ -20,7 +21,9 @@ class Diff {
     const tab = document.getElementById('diffs');
     if (!tab || (tab && tab.dataset && tab.dataset.isLocked !== '')) FilesCommentButton.init($diffFile);
 
-    $diffFile.each((index, file) => new gl.ImageFile(file));
+    const firstFile = $('.files').first().get(0);
+    const canCreateNote = firstFile && firstFile.hasAttribute('data-can-create-note');
+    $diffFile.each((index, file) => imageDiffHelper.initImageDiff(file, canCreateNote));
 
     if (!isBound) {
       $(document)
diff --git a/app/assets/javascripts/diff_notes/components/jump_to_discussion.js b/app/assets/javascripts/diff_notes/components/jump_to_discussion.js
index 497c23f014f..e77910a83d4 100644
--- a/app/assets/javascripts/diff_notes/components/jump_to_discussion.js
+++ b/app/assets/javascripts/diff_notes/components/jump_to_discussion.js
@@ -171,7 +171,14 @@ const JumpToDiscussion = Vue.extend({
         // When jumping between unresolved discussions on the diffs tab, we show them.
         $target.closest(".content").show();
 
-        $target = $target.closest("tr.notes_holder");
+        const $notesHolder = $target.closest("tr.notes_holder");
+
+        // Image diff discussions does not use notes_holder
+        // so we should keep original $target value in those cases
+        if ($notesHolder.length > 0) {
+          $target = $notesHolder;
+        }
+
         $target.show();
 
         // If we are on the diffs tab, we don't scroll to the discussion itself, but to
diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js
index e4e7cae540e..33271c25146 100644
--- a/app/assets/javascripts/dispatcher.js
+++ b/app/assets/javascripts/dispatcher.js
@@ -7,7 +7,6 @@
 /* global IssuableForm */
 /* global LabelsSelect */
 /* global MilestoneSelect */
-/* global Commit */
 /* global CommitsList */
 /* global NewBranchForm */
 /* global NotificationsForm */
@@ -316,7 +315,6 @@ import { ajaxGet, convertPermissionToBoolean } from './lib/utils/common_utils';
           new gl.Activities();
           break;
         case 'projects:commit:show':
-          new Commit();
           new gl.Diff();
           new ZenMode();
           shortcut_handler = new ShortcutsNavigation();
diff --git a/app/assets/javascripts/image_diff/helpers/badge_helper.js b/app/assets/javascripts/image_diff/helpers/badge_helper.js
new file mode 100644
index 00000000000..6a6a668308d
--- /dev/null
+++ b/app/assets/javascripts/image_diff/helpers/badge_helper.js
@@ -0,0 +1,38 @@
+export function createImageBadge(noteId, { x, y }, classNames = []) {
+  const buttonEl = document.createElement('button');
+  const classList = classNames.concat(['js-image-badge']);
+  classList.forEach(className => buttonEl.classList.add(className));
+  buttonEl.setAttribute('type', 'button');
+  buttonEl.setAttribute('disabled', true);
+  buttonEl.dataset.noteId = noteId;
+  buttonEl.style.left = `${x}px`;
+  buttonEl.style.top = `${y}px`;
+
+  return buttonEl;
+}
+
+export function addImageBadge(containerEl, { coordinate, badgeText, noteId }) {
+  const buttonEl = createImageBadge(noteId, coordinate, ['badge']);
+  buttonEl.innerText = badgeText;
+
+  containerEl.appendChild(buttonEl);
+}
+
+export function addImageCommentBadge(containerEl, { coordinate, noteId }) {
+  const buttonEl = createImageBadge(noteId, coordinate, ['image-comment-badge', 'inverted']);
+  const iconEl = document.createElement('i');
+  iconEl.className = 'fa fa-comment-o';
+  iconEl.setAttribute('aria-label', 'comment');
+
+  buttonEl.appendChild(iconEl);
+  containerEl.appendChild(buttonEl);
+}
+
+export function addAvatarBadge(el, event) {
+  const { noteId, badgeNumber } = event.detail;
+
+  // Add badge to new comment
+  const avatarBadgeEl = el.querySelector(`#${noteId} .badge`);
+  avatarBadgeEl.innerText = badgeNumber;
+  avatarBadgeEl.classList.remove('hidden');
+}
diff --git a/app/assets/javascripts/image_diff/helpers/comment_indicator_helper.js b/app/assets/javascripts/image_diff/helpers/comment_indicator_helper.js
new file mode 100644
index 00000000000..05000c73052
--- /dev/null
+++ b/app/assets/javascripts/image_diff/helpers/comment_indicator_helper.js
@@ -0,0 +1,58 @@
+export function addCommentIndicator(containerEl, { x, y }) {
+  const buttonEl = document.createElement('button');
+  buttonEl.classList.add('btn-transparent');
+  buttonEl.classList.add('comment-indicator');
+  buttonEl.setAttribute('type', 'button');
+  buttonEl.style.left = `${x}px`;
+  buttonEl.style.top = `${y}px`;
+
+  buttonEl.innerHTML = gl.utils.spriteIcon('image-comment-dark');
+
+  containerEl.appendChild(buttonEl);
+}
+
+export function removeCommentIndicator(imageFrameEl) {
+  const commentIndicatorEl = imageFrameEl.querySelector('.comment-indicator');
+  const imageEl = imageFrameEl.querySelector('img');
+  const willRemove = !!commentIndicatorEl;
+  let meta = {};
+
+  if (willRemove) {
+    meta = {
+      x: parseInt(commentIndicatorEl.style.left, 10),
+      y: parseInt(commentIndicatorEl.style.top, 10),
+      image: {
+        width: imageEl.width,
+        height: imageEl.height,
+      },
+    };
+
+    commentIndicatorEl.remove();
+  }
+
+  return Object.assign({}, meta, {
+    removed: willRemove,
+  });
+}
+
+export function showCommentIndicator(imageFrameEl, coordinate) {
+  const { x, y } = coordinate;
+  const commentIndicatorEl = imageFrameEl.querySelector('.comment-indicator');
+
+  if (commentIndicatorEl) {
+    commentIndicatorEl.style.left = `${x}px`;
+    commentIndicatorEl.style.top = `${y}px`;
+  } else {
+    addCommentIndicator(imageFrameEl, coordinate);
+  }
+}
+
+export function commentIndicatorOnClick(event) {
+  // Prevent from triggering onAddImageDiffNote in notes.js
+  event.stopPropagation();
+
+  const buttonEl = event.currentTarget;
+  const diffViewerEl = buttonEl.closest('.diff-viewer');
+  const textareaEl = diffViewerEl.querySelector('.note-container .note-textarea');
+  textareaEl.focus();
+}
diff --git a/app/assets/javascripts/image_diff/helpers/dom_helper.js b/app/assets/javascripts/image_diff/helpers/dom_helper.js
new file mode 100644
index 00000000000..12d56714b34
--- /dev/null
+++ b/app/assets/javascripts/image_diff/helpers/dom_helper.js
@@ -0,0 +1,44 @@
+export function setPositionDataAttribute(el, options) {
+  // Update position data attribute so that the
+  // new comment form can use this data for ajax request
+  const { x, y, width, height } = options;
+  const position = el.dataset.position;
+  const positionObject = Object.assign({}, JSON.parse(position), {
+    x,
+    y,
+    width,
+    height,
+  });
+
+  el.setAttribute('data-position', JSON.stringify(positionObject));
+}
+
+export function updateDiscussionAvatarBadgeNumber(discussionEl, newBadgeNumber) {
+  const avatarBadgeEl = discussionEl.querySelector('.image-diff-avatar-link .badge');
+  avatarBadgeEl.innerText = newBadgeNumber;
+}
+
+export function updateDiscussionBadgeNumber(discussionEl, newBadgeNumber) {
+  const discussionBadgeEl = discussionEl.querySelector('.badge');
+  discussionBadgeEl.innerText = newBadgeNumber;
+}
+
+export function toggleCollapsed(event) {
+  const toggleButtonEl = event.currentTarget;
+  const discussionNotesEl = toggleButtonEl.closest('.discussion-notes');
+  const formEl = discussionNotesEl.querySelector('.discussion-form');
+  const isCollapsed = discussionNotesEl.classList.contains('collapsed');
+
+  if (isCollapsed) {
+    discussionNotesEl.classList.remove('collapsed');
+  } else {
+    discussionNotesEl.classList.add('collapsed');
+  }
+
+  // Override the inline display style set in notes.js
+  if (formEl && !isCollapsed) {
+    formEl.style.display = 'none';
+  } else if (formEl && isCollapsed) {
+    formEl.style.display = 'block';
+  }
+}
diff --git a/app/assets/javascripts/image_diff/helpers/index.js b/app/assets/javascripts/image_diff/helpers/index.js
new file mode 100644
index 00000000000..4a100631003
--- /dev/null
+++ b/app/assets/javascripts/image_diff/helpers/index.js
@@ -0,0 +1,25 @@
+import * as badgeHelper from './badge_helper';
+import * as commentIndicatorHelper from './comment_indicator_helper';
+import * as domHelper from './dom_helper';
+import * as utilsHelper from './utils_helper';
+
+export default {
+  addCommentIndicator: commentIndicatorHelper.addCommentIndicator,
+  removeCommentIndicator: commentIndicatorHelper.removeCommentIndicator,
+  showCommentIndicator: commentIndicatorHelper.showCommentIndicator,
+  commentIndicatorOnClick: commentIndicatorHelper.commentIndicatorOnClick,
+
+  addImageBadge: badgeHelper.addImageBadge,
+  addImageCommentBadge: badgeHelper.addImageCommentBadge,
+  addAvatarBadge: badgeHelper.addAvatarBadge,
+
+  setPositionDataAttribute: domHelper.setPositionDataAttribute,
+  updateDiscussionAvatarBadgeNumber: domHelper.updateDiscussionAvatarBadgeNumber,
+  updateDiscussionBadgeNumber: domHelper.updateDiscussionBadgeNumber,
+  toggleCollapsed: domHelper.toggleCollapsed,
+
+  resizeCoordinatesToImageElement: utilsHelper.resizeCoordinatesToImageElement,
+  generateBadgeFromDiscussionDOM: utilsHelper.generateBadgeFromDiscussionDOM,
+  getTargetSelection: utilsHelper.getTargetSelection,
+  initImageDiff: utilsHelper.initImageDiff,
+};
diff --git a/app/assets/javascripts/image_diff/helpers/utils_helper.js b/app/assets/javascripts/image_diff/helpers/utils_helper.js
new file mode 100644
index 00000000000..96fc735e629
--- /dev/null
+++ b/app/assets/javascripts/image_diff/helpers/utils_helper.js
@@ -0,0 +1,95 @@
+import ImageBadge from '../image_badge';
+import ImageDiff from '../image_diff';
+import ReplacedImageDiff from '../replaced_image_diff';
+import '../../commit/image_file';
+
+export function resizeCoordinatesToImageElement(imageEl, meta) {
+  const { x, y, width, height } = meta;
+
+  const imageWidth = imageEl.width;
+  const imageHeight = imageEl.height;
+
+  const widthRatio = imageWidth / width;
+  const heightRatio = imageHeight / height;
+
+  return {
+    x: Math.round(x * widthRatio),
+    y: Math.round(y * heightRatio),
+    width: imageWidth,
+    height: imageHeight,
+  };
+}
+
+export function generateBadgeFromDiscussionDOM(imageFrameEl, discussionEl) {
+  const position = JSON.parse(discussionEl.dataset.position);
+  const firstNoteEl = discussionEl.querySelector('.note');
+  const badge = new ImageBadge({
+    actual: position,
+    imageEl: imageFrameEl.querySelector('img'),
+    noteId: firstNoteEl.id,
+    discussionId: discussionEl.dataset.discussionId,
+  });
+
+  return badge;
+}
+
+export function getTargetSelection(event) {
+  const containerEl = event.currentTarget;
+  const imageEl = containerEl.querySelector('img');
+
+  const x = event.offsetX;
+  const y = event.offsetY;
+
+  const width = imageEl.width;
+  const height = imageEl.height;
+
+  const actualWidth = imageEl.naturalWidth;
+  const actualHeight = imageEl.naturalHeight;
+
+  const widthRatio = actualWidth / width;
+  const heightRatio = actualHeight / height;
+
+  // Browser will include the frame as a clickable target,
+  // which would result in potential 1px out of bounds value
+  // This bound the coordinates to inside the frame
+  const normalizedX = Math.max(0, x) && Math.min(x, width);
+  const normalizedY = Math.max(0, y) && Math.min(y, height);
+
+  return {
+    browser: {
+      x: normalizedX,
+      y: normalizedY,
+      width,
+      height,
+    },
+    actual: {
+      // Round x, y so that we don't need to deal with decimals
+      x: Math.round(normalizedX * widthRatio),
+      y: Math.round(normalizedY * heightRatio),
+      width: actualWidth,
+      height: actualHeight,
+    },
+  };
+}
+
+export function initImageDiff(fileEl, canCreateNote, renderCommentBadge) {
+  const options = {
+    canCreateNote,
+    renderCommentBadge,
+  };
+  let diff;
+
+  // ImageFile needs to be invoked before initImageDiff so that badges
+  // can mount to the correct location
+  new gl.ImageFile(fileEl); // eslint-disable-line no-new
+
+  if (fileEl.querySelector('.diff-file .js-single-image')) {
+    diff = new ImageDiff(fileEl, options);
+    diff.init();
+  } else if (fileEl.querySelector('.diff-file .js-replaced-image')) {
+    diff = new ReplacedImageDiff(fileEl, options);
+    diff.init();
+  }
+
+  return diff;
+}
diff --git a/app/assets/javascripts/image_diff/image_badge.js b/app/assets/javascripts/image_diff/image_badge.js
new file mode 100644
index 00000000000..51a8cda98d7
--- /dev/null
+++ b/app/assets/javascripts/image_diff/image_badge.js
@@ -0,0 +1,23 @@
+import imageDiffHelper from './helpers/index';
+
+const defaultMeta = {
+  x: 0,
+  y: 0,
+  width: 0,
+  height: 0,
+};
+
+export default class ImageBadge {
+  constructor(options) {
+    const { noteId, discussionId } = options;
+
+    this.actual = options.actual || defaultMeta;
+    this.browser = options.browser || defaultMeta;
+    this.noteId = noteId;
+    this.discussionId = discussionId;
+
+    if (options.imageEl && !options.browser) {
+      this.browser = imageDiffHelper.resizeCoordinatesToImageElement(options.imageEl, this.actual);
+    }
+  }
+}
diff --git a/app/assets/javascripts/image_diff/image_diff.js b/app/assets/javascripts/image_diff/image_diff.js
new file mode 100644
index 00000000000..f3af92cf2b0
--- /dev/null
+++ b/app/assets/javascripts/image_diff/image_diff.js
@@ -0,0 +1,143 @@
+import imageDiffHelper from './helpers/index';
+import ImageBadge from './image_badge';
+import { isImageLoaded } from '../lib/utils/image_utility';
+
+export default class ImageDiff {
+  constructor(el, options) {
+    this.el = el;
+    this.canCreateNote = !!(options && options.canCreateNote);
+    this.renderCommentBadge = !!(options && options.renderCommentBadge);
+    this.$noteContainer = $('.note-container', this.el);
+    this.imageBadges = [];
+  }
+
+  init() {
+    this.imageFrameEl = this.el.querySelector('.diff-file .js-image-frame');
+    this.imageEl = this.imageFrameEl.querySelector('img');
+
+    this.bindEvents();
+  }
+
+  bindEvents() {
+    this.imageClickedWrapper = this.imageClicked.bind(this);
+    this.imageBlurredWrapper = imageDiffHelper.removeCommentIndicator.bind(null, this.imageFrameEl);
+    this.addBadgeWrapper = this.addBadge.bind(this);
+    this.removeBadgeWrapper = this.removeBadge.bind(this);
+    this.renderBadgesWrapper = this.renderBadges.bind(this);
+
+    // Render badges
+    if (isImageLoaded(this.imageEl)) {
+      this.renderBadges();
+    } else {
+      this.imageEl.addEventListener('load', this.renderBadgesWrapper);
+    }
+
+    // jquery makes the event delegation here much simpler
+    this.$noteContainer.on('click', '.js-diff-notes-toggle', imageDiffHelper.toggleCollapsed);
+    $(this.el).on('click', '.comment-indicator', imageDiffHelper.commentIndicatorOnClick);
+
+    if (this.canCreateNote) {
+      this.el.addEventListener('click.imageDiff', this.imageClickedWrapper);
+      this.el.addEventListener('blur.imageDiff', this.imageBlurredWrapper);
+      this.el.addEventListener('addBadge.imageDiff', this.addBadgeWrapper);
+      this.el.addEventListener('removeBadge.imageDiff', this.removeBadgeWrapper);
+    }
+  }
+
+  imageClicked(event) {
+    const customEvent = event.detail;
+    const selection = imageDiffHelper.getTargetSelection(customEvent);
+    const el = customEvent.currentTarget;
+
+    imageDiffHelper.setPositionDataAttribute(el, selection.actual);
+    imageDiffHelper.showCommentIndicator(this.imageFrameEl, selection.browser);
+  }
+
+  renderBadges() {
+    const discussionsEls = this.el.querySelectorAll('.note-container .discussion-notes .notes');
+    [...discussionsEls].forEach(this.renderBadge.bind(this));
+  }
+
+  renderBadge(discussionEl, index) {
+    const imageBadge = imageDiffHelper
+      .generateBadgeFromDiscussionDOM(this.imageFrameEl, discussionEl);
+
+    this.imageBadges.push(imageBadge);
+
+    const options = {
+      coordinate: imageBadge.browser,
+      noteId: imageBadge.noteId,
+    };
+
+    if (this.renderCommentBadge) {
+      imageDiffHelper.addImageCommentBadge(this.imageFrameEl, options);
+    } else {
+      const numberBadgeOptions = Object.assign({}, options, {
+        badgeText: index + 1,
+      });
+
+      imageDiffHelper.addImageBadge(this.imageFrameEl, numberBadgeOptions);
+    }
+  }
+
+  addBadge(event) {
+    const { x, y, width, height, noteId, discussionId } = event.detail;
+    const badgeText = this.imageBadges.length + 1;
+    const imageBadge = new ImageBadge({
+      actual: {
+        x,
+        y,
+        width,
+        height,
+      },
+      imageEl: this.imageFrameEl.querySelector('img'),
+      noteId,
+      discussionId,
+    });
+
+    this.imageBadges.push(imageBadge);
+
+    imageDiffHelper.addImageBadge(this.imageFrameEl, {
+      coordinate: imageBadge.browser,
+      badgeText,
+      noteId,
+    });
+
+    imageDiffHelper.addAvatarBadge(this.el, {
+      detail: {
+        noteId,
+        badgeNumber: badgeText,
+      },
+    });
+
+    const discussionEl = this.el.querySelector(`#discussion_${discussionId}`);
+    imageDiffHelper.updateDiscussionBadgeNumber(discussionEl, badgeText);
+  }
+
+  removeBadge(event) {
+    const { badgeNumber } = event.detail;
+    const indexToRemove = badgeNumber - 1;
+    const imageBadgeEls = this.imageFrameEl.querySelectorAll('.badge');
+
+    if (this.imageBadges.length !== badgeNumber) {
+      // Cascade badges count numbers for (avatar badges + image badges)
+      this.imageBadges.forEach((badge, index) => {
+        if (index > indexToRemove) {
+          const { discussionId } = badge;
+          const updatedBadgeNumber = index;
+          const discussionEl = this.el.querySelector(`#discussion_${discussionId}`);
+
+          imageBadgeEls[index].innerText = updatedBadgeNumber;
+
+          imageDiffHelper.updateDiscussionBadgeNumber(discussionEl, updatedBadgeNumber);
+          imageDiffHelper.updateDiscussionAvatarBadgeNumber(discussionEl, updatedBadgeNumber);
+        }
+      });
+    }
+
+    this.imageBadges.splice(indexToRemove, 1);
+
+    const imageBadgeEl = imageBadgeEls[indexToRemove];
+    imageBadgeEl.remove();
+  }
+}
diff --git a/app/assets/javascripts/image_diff/init_discussion_tab.js b/app/assets/javascripts/image_diff/init_discussion_tab.js
new file mode 100644
index 00000000000..2f16c6ef115
--- /dev/null
+++ b/app/assets/javascripts/image_diff/init_discussion_tab.js
@@ -0,0 +1,12 @@
+import imageDiffHelper from './helpers/index';
+
+export default () => {
+  // Always pass can-create-note as false because a user
+  // cannot place new badge markers on discussion tab
+  const canCreateNote = false;
+  const renderCommentBadge = true;
+
+  const diffFileEls = document.querySelectorAll('.timeline-content .diff-file.js-image-file');
+  [...diffFileEls].forEach(diffFileEl =>
+    imageDiffHelper.initImageDiff(diffFileEl, canCreateNote, renderCommentBadge));
+};
diff --git a/app/assets/javascripts/image_diff/replaced_image_diff.js b/app/assets/javascripts/image_diff/replaced_image_diff.js
new file mode 100644
index 00000000000..4abd13fb472
--- /dev/null
+++ b/app/assets/javascripts/image_diff/replaced_image_diff.js
@@ -0,0 +1,92 @@
+import imageDiffHelper from './helpers/index';
+import { viewTypes, isValidViewType } from './view_types';
+import ImageDiff from './image_diff';
+
+export default class ReplacedImageDiff extends ImageDiff {
+  init(defaultViewType = viewTypes.TWO_UP) {
+    this.imageFrameEls = {
+      [viewTypes.TWO_UP]: this.el.querySelector('.two-up .js-image-frame'),
+      [viewTypes.SWIPE]: this.el.querySelector('.swipe .js-image-frame'),
+      [viewTypes.ONION_SKIN]: this.el.querySelector('.onion-skin .js-image-frame'),
+    };
+
+    const viewModesEl = this.el.querySelector('.view-modes-menu');
+    this.viewModesEls = {
+      [viewTypes.TWO_UP]: viewModesEl.querySelector('.two-up'),
+      [viewTypes.SWIPE]: viewModesEl.querySelector('.swipe'),
+      [viewTypes.ONION_SKIN]: viewModesEl.querySelector('.onion-skin'),
+    };
+
+    this.currentView = defaultViewType;
+    this.generateImageEls();
+    this.bindEvents();
+  }
+
+  generateImageEls() {
+    this.imageEls = {};
+
+    const viewTypeNames = Object.getOwnPropertyNames(viewTypes);
+    viewTypeNames.forEach((viewType) => {
+      this.imageEls[viewType] = this.imageFrameEls[viewType].querySelector('img');
+    });
+  }
+
+  bindEvents() {
+    super.bindEvents();
+
+    this.changeToViewTwoUp = this.changeView.bind(this, viewTypes.TWO_UP);
+    this.changeToViewSwipe = this.changeView.bind(this, viewTypes.SWIPE);
+    this.changeToViewOnionSkin = this.changeView.bind(this, viewTypes.ONION_SKIN);
+
+    this.viewModesEls[viewTypes.TWO_UP].addEventListener('click', this.changeToViewTwoUp);
+    this.viewModesEls[viewTypes.SWIPE].addEventListener('click', this.changeToViewSwipe);
+    this.viewModesEls[viewTypes.ONION_SKIN].addEventListener('click', this.changeToViewOnionSkin);
+  }
+
+  get imageEl() {
+    return this.imageEls[this.currentView];
+  }
+
+  get imageFrameEl() {
+    return this.imageFrameEls[this.currentView];
+  }
+
+  changeView(newView) {
+    if (!isValidViewType(newView)) {
+      return;
+    }
+
+    const indicator = imageDiffHelper.removeCommentIndicator(this.imageFrameEl);
+
+    this.currentView = newView;
+
+    // Clear existing badges on new view
+    const existingBadges = this.imageFrameEl.querySelectorAll('.badge');
+    [...existingBadges].map(badge => badge.remove());
+
+    // Remove existing references to old view image badges
+    this.imageBadges = [];
+
+    // Image_file.js has a fade animation of 200ms for loading the view
+    // Need to wait an additional 250ms for the images to be displayed
+    // on window in order to re-normalize their dimensions
+    setTimeout(this.renderNewView.bind(this, indicator), 250);
+  }
+
+  renderNewView(indicator) {
+    // Generate badge coordinates on new view
+    this.renderBadges();
+
+    // Re-render indicator in new view
+    if (indicator.removed) {
+      const normalizedIndicator = imageDiffHelper
+        .resizeCoordinatesToImageElement(this.imageEl, {
+          x: indicator.x,
+          y: indicator.y,
+          width: indicator.image.width,
+          height: indicator.image.height,
+        });
+      imageDiffHelper.showCommentIndicator(this.imageFrameEl, normalizedIndicator);
+    }
+  }
+}
diff --git a/app/assets/javascripts/image_diff/view_types.js b/app/assets/javascripts/image_diff/view_types.js
new file mode 100644
index 00000000000..ab0a595571f
--- /dev/null
+++ b/app/assets/javascripts/image_diff/view_types.js
@@ -0,0 +1,9 @@
+export const viewTypes = {
+  TWO_UP: 'TWO_UP',
+  SWIPE: 'SWIPE',
+  ONION_SKIN: 'ONION_SKIN',
+};
+
+export function isValidViewType(validate) {
+  return !!Object.getOwnPropertyNames(viewTypes).find(viewType => viewType === validate);
+}
diff --git a/app/assets/javascripts/lib/utils/image_utility.js b/app/assets/javascripts/lib/utils/image_utility.js
new file mode 100644
index 00000000000..2977ec821cb
--- /dev/null
+++ b/app/assets/javascripts/lib/utils/image_utility.js
@@ -0,0 +1,5 @@
+/* eslint-disable import/prefer-default-export */
+
+export function isImageLoaded(element) {
+  return element.complete && element.naturalHeight !== 0;
+}
diff --git a/app/assets/javascripts/main.js b/app/assets/javascripts/main.js
index 2c1dcc374ff..5858c2b6fd8 100644
--- a/app/assets/javascripts/main.js
+++ b/app/assets/javascripts/main.js
@@ -35,8 +35,6 @@ import './shortcuts_network';
 import './templates/issuable_template_selector';
 import './templates/issuable_template_selectors';
 
-// commit
-import './commit/file';
 import './commit/image_file';
 
 // lib/utils
@@ -70,7 +68,6 @@ import './build';
 import './build_artifacts';
 import './build_variables';
 import './ci_lint_editor';
-import './commit';
 import './commits';
 import './compare';
 import './compare_autocomplete';
diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js
index d3299c15720..c042b22d1fd 100644
--- a/app/assets/javascripts/merge_request_tabs.js
+++ b/app/assets/javascripts/merge_request_tabs.js
@@ -13,6 +13,8 @@ import {
   isMetaClick,
 } from './lib/utils/common_utils';
 
+import initDiscussionTab from './image_diff/init_discussion_tab';
+
 /* eslint-disable max-len */
 // MergeRequestTabs
 //
@@ -154,6 +156,8 @@ import {
         }
         this.resetViewContainer();
         this.destroyPipelinesView();
+
+        initDiscussionTab();
       }
       if (this.setUrl) {
         this.setCurrentAction(action);
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index 93aa29454a0..24de21f2ce2 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -24,6 +24,7 @@ import './autosave';
 import './dropzone_input';
 import TaskList from './task_list';
 import { ajaxPost, isInViewport, getPagePath, scrollToElement, isMetaKey } from './lib/utils/common_utils';
+import imageDiffHelper from './image_diff/helpers/index';
 
 window.autosize = autosize;
 window.Dropzone = Dropzone;
@@ -42,6 +43,7 @@ export default class Notes {
     this.visibilityChange = this.visibilityChange.bind(this);
     this.cancelDiscussionForm = this.cancelDiscussionForm.bind(this);
     this.onAddDiffNote = this.onAddDiffNote.bind(this);
+    this.onAddImageDiffNote = this.onAddImageDiffNote.bind(this);
     this.setupDiscussionNoteForm = this.setupDiscussionNoteForm.bind(this);
     this.onReplyToDiscussionNote = this.onReplyToDiscussionNote.bind(this);
     this.removeNote = this.removeNote.bind(this);
@@ -114,6 +116,8 @@ export default class Notes {
     $(document).on('click', '.js-discussion-reply-button', this.onReplyToDiscussionNote);
     // add diff note
     $(document).on('click', '.js-add-diff-note-button', this.onAddDiffNote);
+    // add diff note for images
+    $(document).on('click', '.js-add-image-diff-note-button', this.onAddImageDiffNote);
     // hide diff note form
     $(document).on('click', '.js-close-discussion-note-form', this.cancelDiscussionForm);
     // toggle commit list
@@ -140,6 +144,7 @@ export default class Notes {
     $(document).off('click', '.js-note-attachment-delete');
     $(document).off('click', '.js-discussion-reply-button');
     $(document).off('click', '.js-add-diff-note-button');
+    $(document).off('click', '.js-add-image-diff-note-button');
     $(document).off('visibilitychange');
     $(document).off('keyup input', '.js-note-text');
     $(document).off('click', '.js-note-target-reopen');
@@ -412,6 +417,11 @@ export default class Notes {
     this.note_ids.push(noteEntity.id);
     form = $form || $(`.js-discussion-note-form[data-discussion-id="${noteEntity.discussion_id}"]`);
     row = form.closest('tr');
+
+    if (noteEntity.on_image) {
+      row = form;
+    }
+
     lineType = this.isParallelView() ? form.find('#line_type').val() : 'old';
     diffAvatarContainer = row.prevAll('.line_holder').first().find('.js-avatar-container.' + lineType + '_line');
     // is this the first note of discussion?
@@ -423,7 +433,7 @@ export default class Notes {
       if (noteEntity.diff_discussion_html) {
         var $discussion = $(noteEntity.diff_discussion_html).renderGFM();
 
-        if (!this.isParallelView() || row.hasClass('js-temp-notes-holder')) {
+        if (!this.isParallelView() || row.hasClass('js-temp-notes-holder') || noteEntity.on_image) {
           // insert the note and the reply button after the temp row
           row.after($discussion);
         } else {
@@ -449,6 +459,7 @@ export default class Notes {
 
     if (typeof gl.diffNotesCompileComponents !== 'undefined' && noteEntity.discussion_resolvable) {
       gl.diffNotesCompileComponents();
+
       this.renderDiscussionAvatar(diffAvatarContainer, noteEntity);
     }
 
@@ -561,7 +572,7 @@ export default class Notes {
       form.find('#note_line_code').val(),
 
       // DiffNote
-      form.find('#note_position').val()
+      form.find('#note_position').val(),
     ];
     return new Autosave(textarea, key);
   }
@@ -783,9 +794,22 @@ export default class Notes {
           $(`.js-diff-avatars-${discussionId}`).trigger('remove.vue');
 
           // The notes tr can contain multiple lists of notes, like on the parallel diff
-          if (notesTr.find('.discussion-notes').length > 1) {
+          // notesTr does not exist for image diffs
+          if (notesTr.find('.discussion-notes').length > 1 || notesTr.length === 0) {
+            const $diffFile = $notes.closest('.diff-file');
+            if ($diffFile.length > 0) {
+              const removeBadgeEvent = new CustomEvent('removeBadge.imageDiff', {
+                detail: {
+                  // badgeNumber's start with 1 and index starts with 0
+                  badgeNumber: $notes.index() + 1,
+                },
+              });
+
+              $diffFile[0].dispatchEvent(removeBadgeEvent);
+            }
+
             $notes.remove();
-          } else {
+          } else if (notesTr.length > 0) {
             notesTr.remove();
           }
         }
@@ -841,7 +865,11 @@ export default class Notes {
    */
   setupDiscussionNoteForm(dataHolder, form) {
     // setup note target
-    const diffFileData = dataHolder.closest('.text-file');
+    let diffFileData = dataHolder.closest('.text-file');
+
+    if (diffFileData.length === 0) {
+      diffFileData = dataHolder.closest('.image');
+    }
 
     var discussionID = dataHolder.data('discussionId');
 
@@ -907,6 +935,31 @@ export default class Notes {
     });
   }
 
+  onAddImageDiffNote(e) {
+    const $link = $(e.currentTarget || e.target);
+    const $diffFile = $link.closest('.diff-file');
+
+    const clickEvent = new CustomEvent('click.imageDiff', {
+      detail: e,
+    });
+
+    $diffFile[0].dispatchEvent(clickEvent);
+
+    // Setup comment form
+    let newForm;
+    const $noteContainer = $link.closest('.diff-viewer').find('.note-container');
+    const $form = $noteContainer.find('> .discussion-form');
+
+    if ($form.length === 0) {
+      newForm = this.cleanForm(this.formClone.clone());
+      newForm.appendTo($noteContainer);
+    } else {
+      newForm = $form;
+    }
+
+    this.setupDiscussionNoteForm($link, newForm);
+  }
+
   toggleDiffNote({
     target,
     lineType,
@@ -999,10 +1052,25 @@ export default class Notes {
   }
 
   cancelDiscussionForm(e) {
-    var form;
     e.preventDefault();
-    form = $(e.target).closest('.js-discussion-note-form');
-    return this.removeDiscussionNoteForm(form);
+    const $form = $(e.target).closest('.js-discussion-note-form');
+    const $discussionNote = $(e.target).closest('.discussion-notes');
+
+    if ($discussionNote.length === 0) {
+      // Only send blur event when the discussion form
+      // is not part of a discussion note
+      const $diffFile = $form.closest('.diff-file');
+
+      if ($diffFile.length > 0) {
+        const blurEvent = new CustomEvent('blur.imageDiff', {
+          detail: e,
+        });
+
+        $diffFile[0].dispatchEvent(blurEvent);
+      }
+    }
+
+    return this.removeDiscussionNoteForm($form);
   }
 
   /**
@@ -1414,6 +1482,15 @@ export default class Notes {
         // Submission successful! remove placeholder
         $notesContainer.find(`#${noteUniqueId}`).remove();
 
+        const $diffFile = $form.closest('.diff-file');
+        if ($diffFile.length > 0) {
+          const blurEvent = new CustomEvent('blur.imageDiff', {
+            detail: e,
+          });
+
+          $diffFile[0].dispatchEvent(blurEvent);
+        }
+
         // Reset cached commands list when command is applied
         if (hasQuickActions) {
           $form.find('textarea.js-note-text').trigger('clear-commands-cache.atwho');
@@ -1436,7 +1513,28 @@ export default class Notes {
           }
 
           // Show final note element on UI
-          this.addDiscussionNote($form, note, $notesContainer.length === 0);
+          const isNewDiffComment = $notesContainer.length === 0;
+          this.addDiscussionNote($form, note, isNewDiffComment);
+
+          if (isNewDiffComment) {
+            // Add image badge, avatar badge and toggle discussion badge for new image diffs
+            const notePosition = $form.find('#note_position').val();
+            if ($diffFile.length > 0 && notePosition.length > 0) {
+              const { x, y, width, height } = JSON.parse(notePosition);
+              const addBadgeEvent = new CustomEvent('addBadge.imageDiff', {
+                detail: {
+                  x,
+                  y,
+                  width,
+                  height,
+                  noteId: `note_${note.id}`,
+                  discussionId: note.discussion_id,
+                },
+              });
+
+              $diffFile[0].dispatchEvent(addBadgeEvent);
+            }
+          }
 
           // append flash-container to the Notes list
           if ($notesContainer.length) {
@@ -1457,6 +1555,16 @@ export default class Notes {
         // Submission failed, remove placeholder note and show Flash error message
         $notesContainer.find(`#${noteUniqueId}`).remove();
 
+        const blurEvent = new CustomEvent('blur.imageDiff', {
+          detail: e,
+        });
+
+        const closestDiffFile = $form.closest('.diff-file');
+
+        if (closestDiffFile.length) {
+          closestDiffFile[0].dispatchEvent(blurEvent);
+        }
+
         if (hasQuickActions) {
           $notesContainer.find(`#${systemNoteUniqueId}`).remove();
         }
@@ -1500,6 +1608,8 @@ export default class Notes {
     const $noteBody = $editingNote.find('.js-task-list-container');
     const $noteBodyText = $noteBody.find('.note-text');
     const { formData, formContent, formAction } = this.getFormData($form);
+    const $diffFile = $form.closest('.diff-file');
+    const $notesContainer = $form.closest('.notes');
 
     // Cache original comment content
     const cachedNoteBodyText = $noteBodyText.html();
diff --git a/app/assets/javascripts/single_file_diff.js b/app/assets/javascripts/single_file_diff.js
index 4505a79a2df..3f811c59cb9 100644
--- a/app/assets/javascripts/single_file_diff.js
+++ b/app/assets/javascripts/single_file_diff.js
@@ -1,6 +1,7 @@
 /* eslint-disable func-names, prefer-arrow-callback, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, one-var, one-var-declaration-per-line, consistent-return, no-param-reassign, max-len */
 
 import FilesCommentButton from './files_comment_button';
+import imageDiffHelper from './image_diff/helpers/index';
 
 const WRAPPER = '<div class="diff-content"></div>';
 const LOADING_HTML = '<i class="fa fa-spinner fa-spin"></i>';
@@ -74,7 +75,11 @@ export default class SingleFileDiff {
           gl.diffNotesCompileComponents();
         }
 
-        FilesCommentButton.init($(_this.file));
+        const $file = $(_this.file);
+        FilesCommentButton.init($file);
+
+        const canCreateNote = $file.closest('.files').is('[data-can-create-note]');
+        imageDiffHelper.initImageDiff($file[0], canCreateNote);
 
         if (cb) cb();
       };
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index c77160a678b..b131e2d57ee 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -1,3 +1,25 @@
+@mixin btn-comment-icon {
+  border-radius: 50%;
+  background: $white-light;
+  padding: 1px 5px;
+  font-size: 12px;
+  color: $blue-500;
+  width: 23px;
+  height: 23px;
+  border: 1px solid $blue-500;
+
+  &:hover,
+  &.inverted {
+    background: $blue-500;
+    border-color: $blue-600;
+    color: $white-light;
+  }
+
+  &:active {
+    outline: 0;
+  }
+}
+
 @mixin btn-default {
   border-radius: 3px;
   font-size: $gl-font-size;
diff --git a/app/assets/stylesheets/framework/timeline.scss b/app/assets/stylesheets/framework/timeline.scss
index 3d68a50f91f..f718ec4bcad 100644
--- a/app/assets/stylesheets/framework/timeline.scss
+++ b/app/assets/stylesheets/framework/timeline.scss
@@ -17,15 +17,19 @@
 
   .diff-file {
     border: 1px solid $border-color;
-    border-bottom: none;
     margin: 0;
   }
+
+  &.text-file .diff-file {
+    border-bottom: none;
+  }
 }
 
 .timeline-entry {
   border-color: $white-normal;
   color: $gl-text-color;
   border-bottom: 1px solid $border-white-light;
+  background: $white-light;
 
   .timeline-entry-inner {
     position: relative;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 2f9def51d91..5f604680181 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -323,6 +323,7 @@ $diff-image-info-color: grey;
 $diff-swipe-border: #999;
 $diff-view-modes-color: grey;
 $diff-view-modes-border: #c1c1c1;
+$diff-jagged-border-gradient-color: darken($white-normal, 8%);
 
 /*
  * Fonts
@@ -712,3 +713,9 @@ Issuable warning
 */
 $issuable-warning-size: 24px;
 $issuable-warning-icon-margin: 4px;
+
+/*
+Image Commenting cursor
+*/
+$image-comment-cursor-left-offset: 12;
+$image-comment-cursor-top-offset: 30;
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index fb23343b966..ffb5fc94475 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -297,6 +297,7 @@
         .drag-track {
           display: block;
           position: absolute;
+          top: 0;
           left: 12px;
           height: 10px;
           width: 276px;
@@ -547,16 +548,23 @@
 }
 
 .diff-notes-collapse {
-  width: 19px;
-  height: 19px;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
   padding: 0;
   transition: transform .1s ease-out;
   z-index: 100;
 
+  .collapse-icon {
+    height: 50%;
+    width: 100%;
+  }
+
   svg {
-    vertical-align: text-top;
+    vertical-align: middle;
   }
 
+  .collapse-icon,
   path {
     fill: $white-light;
   }
@@ -644,3 +652,157 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.note-container {
+  background-color: $gray-light;
+  border-top: 1px solid $white-normal;
+
+  // double jagged line divider
+  .discussion-notes + .discussion-notes::before,
+  .discussion-notes + .discussion-form::before {
+    content: '';
+    position: relative;
+    display: block;
+    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-size: 10px 10px;
+    background-repeat: repeat;
+  }
+
+  .notes {
+    position: relative;
+  }
+
+  .diff-notes-collapse {
+    position: absolute;
+    left: -12px;
+  }
+}
+
+.diff-file .note-container > .new-note,
+.note-container .discussion-notes {
+  margin-left: 100px;
+  border-left: 1px solid $white-normal;
+}
+
+.notes.active {
+  .diff-file .note-container > .new-note,
+  .note-container .discussion-notes {
+    // Override our margin and border (set for diff tab)
+    // when user is on the discussion tab for MR
+    margin-left: inherit;
+    border-left: inherit;
+  }
+}
+
+.files:not([data-can-create-note]) .frame {
+  cursor: auto;
+}
+
+.frame.click-to-comment {
+  position: relative;
+  cursor: url(icon_image_comment.svg)
+    $image-comment-cursor-left-offset $image-comment-cursor-top-offset, auto;
+
+  // Retina cursor
+  cursor: -webkit-image-set(url(icon_image_comment.svg) 1x, url(icon_image_comment@2x.svg) 2x)
+    $image-comment-cursor-left-offset $image-comment-cursor-top-offset, auto;
+
+  .comment-indicator {
+    position: absolute;
+    padding: 0;
+    width: (2px * $image-comment-cursor-left-offset);
+    height: (1px * $image-comment-cursor-top-offset);
+    // center the indicator to match the top left click region
+    margin-top: (-1px * $image-comment-cursor-top-offset) + 2;
+    margin-left: (-1px * $image-comment-cursor-left-offset) + 1;
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+}
+
+.frame .badge,
+.image-diff-avatar-link .badge,
+.notes > .badge {
+  position: absolute;
+  background-color: $blue-400;
+  color: $white-light;
+  border: $white-light 1px solid;
+  min-height: $gl-padding;
+  padding: 5px 8px;
+  border-radius: 12px;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.frame .badge,
+.frame .image-comment-badge {
+  // Center align badges on the frame
+  transform: translate3d(-50%, -50%, 0);
+}
+
+.image-comment-badge {
+  @include btn-comment-icon;
+  position: absolute;
+
+  &.inverted {
+    border-color: $white-light;
+  }
+}
+
+.image-diff-avatar-link {
+  position: relative;
+
+  .badge,
+  .image-comment-badge {
+    top: 25px;
+    right: 8px;
+  }
+}
+
+.notes > .badge {
+  display: none;
+  left: -13px;
+}
+
+.discussion-notes {
+  min-height: 35px;
+
+  &:first-child {
+    // First child does not have the jagged borders
+    min-height: 25px;
+  }
+
+  &.collapsed {
+    background-color: $white-light;
+
+    .diff-notes-collapse,
+    .note,
+    .discussion-reply-holder, {
+      display: none;
+    }
+
+    .notes > .badge {
+      display: block;
+    }
+  }
+}
+
+.discussion-body .image .frame {
+  position: relative;
+}
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 420bca9ece5..04b132415eb 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -161,10 +161,13 @@
 }
 
 .discussion-form {
-  padding: $gl-padding-top $gl-padding $gl-padding;
   background-color: $white-light;
 }
 
+.discussion-form-container {
+  padding: $gl-padding-top $gl-padding $gl-padding;
+}
+
 .discussion-notes .disabled-comment {
   padding: 6px 0;
 }
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 925fe4513ee..96b7db3b85d 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -650,29 +650,12 @@ ul.notes {
 }
 
 .add-diff-note {
+  @include btn-comment-icon;
   opacity: 0;
   margin-top: -2px;
-  border-radius: 50%;
-  background: $white-light;
-  padding: 1px 5px;
-  font-size: 12px;
-  color: $blue-500;
   margin-left: -55px;
   position: absolute;
   z-index: 10;
-  width: 23px;
-  height: 23px;
-  border: 1px solid $blue-500;
-
-  &:hover {
-    background: $blue-500;
-    border-color: $blue-600;
-    color: $white-light;
-  }
-
-  &:active {
-    outline: 0;
-  }
 }
 
 .discussion-body,
diff --git a/app/controllers/concerns/notes_actions.rb b/app/controllers/concerns/notes_actions.rb
index 915f32b4c33..1126f706393 100644
--- a/app/controllers/concerns/notes_actions.rb
+++ b/app/controllers/concerns/notes_actions.rb
@@ -96,7 +96,8 @@ module NotesActions
           id: note.id,
           discussion_id: note.discussion_id(noteable),
           html: note_html(note),
-          note: note.note
+          note: note.note,
+          on_image: note.try(:on_image?)
         )
 
         discussion = note.to_discussion(noteable)
@@ -122,7 +123,9 @@ module NotesActions
   def diff_discussion_html(discussion)
     return unless discussion.diff_discussion?
 
-    if params[:view] == 'parallel'
+    on_image = discussion.on_image?
+
+    if params[:view] == 'parallel' && !on_image
       template = "discussions/_parallel_diff_discussion"
       locals =
         if params[:line_type] == 'old'
@@ -132,7 +135,9 @@ module NotesActions
         end
     else
       template = "discussions/_diff_discussion"
-      locals = { discussions: [discussion] }
+      @fresh_discussion = true
+
+      locals = { discussions: [discussion], on_image: on_image }
     end
 
     render_to_string(
diff --git a/app/models/concerns/discussion_on_diff.rb b/app/models/concerns/discussion_on_diff.rb
index eee1a36ac6b..f5cbb3becad 100644
--- a/app/models/concerns/discussion_on_diff.rb
+++ b/app/models/concerns/discussion_on_diff.rb
@@ -28,6 +28,10 @@ module DiscussionOnDiff
     true
   end
 
+  def file_new_path
+    first_note.position.new_path
+  end
+
   # Returns an array of at most 16 highlighted lines above a diff note
   def truncated_diff_lines(highlight: true)
     lines = highlight ? highlighted_diff_lines : diff_lines
diff --git a/app/models/diff_discussion.rb b/app/models/diff_discussion.rb
index 07c4846e2ac..6eba87da1a1 100644
--- a/app/models/diff_discussion.rb
+++ b/app/models/diff_discussion.rb
@@ -11,6 +11,8 @@ class DiffDiscussion < Discussion
   delegate  :position,
             :original_position,
             :change_position,
+            :on_text?,
+            :on_image?,
 
             to: :first_note
 
diff --git a/app/models/diff_note.rb b/app/models/diff_note.rb
index e9a60e6ce09..d88a92dc027 100644
--- a/app/models/diff_note.rb
+++ b/app/models/diff_note.rb
@@ -12,8 +12,8 @@ class DiffNote < Note
 
   validates :original_position, presence: true
   validates :position, presence: true
-  validates :diff_line, presence: true
-  validates :line_code, presence: true, line_code: true
+  validates :diff_line, presence: true, if: :on_text?
+  validates :line_code, presence: true, line_code: true, if: :on_text?
   validates :noteable_type, inclusion: { in: NOTEABLE_TYPES }
   validate :positions_complete
   validate :verify_supported
@@ -43,6 +43,14 @@ class DiffNote < Note
     end
   end
 
+  def on_text?
+    position.position_type == "text"
+  end
+
+  def on_image?
+    position.position_type == "image"
+  end
+
   def diff_file
     @diff_file ||= self.original_position.diff_file(self.project.repository)
   end
@@ -56,6 +64,8 @@ class DiffNote < Note
   end
 
   def original_line_code
+    return unless on_text?
+
     self.diff_file.line_code(self.diff_line)
   end
 
diff --git a/app/models/discussion.rb b/app/models/discussion.rb
index b80da7b246a..437df923d2d 100644
--- a/app/models/discussion.rb
+++ b/app/models/discussion.rb
@@ -66,6 +66,10 @@ class Discussion
     @context_noteable = context_noteable
   end
 
+  def on_image?
+    false
+  end
+
   def ==(other)
     other.class == self.class &&
       other.context_noteable == self.context_noteable &&
diff --git a/app/models/legacy_diff_discussion.rb b/app/models/legacy_diff_discussion.rb
index 3c1d34db5fa..80fc6304fd4 100644
--- a/app/models/legacy_diff_discussion.rb
+++ b/app/models/legacy_diff_discussion.rb
@@ -17,6 +17,14 @@ class LegacyDiffDiscussion < Discussion
     true
   end
 
+  def on_image?
+    false
+  end
+
+  def on_text?
+    true
+  end
+
   def active?(*args)
     return @active if @active.present?
 
diff --git a/app/models/note.rb b/app/models/note.rb
index f44590e2144..ceded9f2aef 100644
--- a/app/models/note.rb
+++ b/app/models/note.rb
@@ -134,14 +134,22 @@ class Note < ActiveRecord::Base
       Discussion.build(notes)
     end
 
+    # Group diff discussions by line code or file path.
+    # It is not needed to group by line code when comment is
+    # on an image.
     def grouped_diff_discussions(diff_refs = nil)
       groups = {}
 
       diff_notes.fresh.discussions.each do |discussion|
-        line_code = discussion.line_code_in_diffs(diff_refs)
-
-        if line_code
-          discussions = groups[line_code] ||= []
+        group_key =
+          if discussion.on_image?
+            discussion.file_new_path
+          else
+            discussion.line_code_in_diffs(diff_refs)
+          end
+
+        if group_key
+          discussions = groups[group_key] ||= []
           discussions << discussion
         end
       end
diff --git a/app/views/discussions/_diff_discussion.html.haml b/app/views/discussions/_diff_discussion.html.haml
index e6d307e5568..52279d0a870 100644
--- a/app/views/discussions/_diff_discussion.html.haml
+++ b/app/views/discussions/_diff_discussion.html.haml
@@ -1,6 +1,10 @@
-- expanded = local_assigns.fetch(:expanded, true)
-%tr.notes_holder{ class: ('hide' unless expanded) }
-  %td.notes_line{ colspan: 2 }
-  %td.notes_content
-    .content{ class: ('hide' unless expanded) }
-      = render partial: "discussions/notes", collection: discussions, as: :discussion
+- if local_assigns[:on_image]
+  = render partial: "discussions/notes", collection: discussions, as: :discussion
+- else
+  -# Text diff discussions
+  - expanded = local_assigns.fetch(:expanded, true)
+  %tr.notes_holder{ class: ('hide' unless expanded) }
+    %td.notes_line{ colspan: 2 }
+    %td.notes_content
+      .content{ class: ('hide' unless expanded) }
+        = render partial: "discussions/notes", collection: discussions, as: :discussion
diff --git a/app/views/discussions/_diff_with_notes.html.haml b/app/views/discussions/_diff_with_notes.html.haml
index 4a41be972da..636d06cab53 100644
--- a/app/views/discussions/_diff_with_notes.html.haml
+++ b/app/views/discussions/_diff_with_notes.html.haml
@@ -1,18 +1,27 @@
 - diff_file = discussion.diff_file
 - blob = discussion.blob
+- discussions = { discussion.original_line_code => [discussion] }
+- diff_file_class = diff_file.text? ? 'text-file' : 'js-image-file'
 
-.diff-file.file-holder
+.diff-file.file-holder{ class: diff_file_class }
   .js-file-title.file-title.file-title-flex-parent
     .file-header-content
       = render "projects/diffs/file_header", diff_file: diff_file, url: discussion_path(discussion), show_toggle: false
 
-  .diff-content.code.js-syntax-highlight
-    %table
-      - discussions = { discussion.original_line_code => [discussion] }
-      = render partial: "projects/diffs/line",
-        collection: discussion.truncated_diff_lines,
-        as: :line,
-        locals: { diff_file: diff_file,
-          discussions: discussions,
-          discussion_expanded: true,
-          plain: true }
+  - if diff_file.text?
+    .diff-content.code.js-syntax-highlight
+      %table
+        = render partial: "projects/diffs/line",
+          collection: discussion.truncated_diff_lines,
+          as: :line,
+          locals: { diff_file: diff_file,
+            discussions: discussions,
+            discussion_expanded: true,
+            plain: true }
+  - else
+    - partial = (diff_file.new_file? || diff_file.deleted_file?) ? 'single_image_diff' : 'replaced_image_diff'
+
+    = render partial: "projects/diffs/#{partial}", locals: { diff_file: diff_file, position: discussion.position.to_json, click_to_comment: false }
+
+    .note-container
+      = render partial: "discussions/notes", locals: { discussion: discussion, show_toggle: false, show_image_comment_badge: true, disable_collapse: true }
diff --git a/app/views/discussions/_notes.html.haml b/app/views/discussions/_notes.html.haml
index db5ab939948..9efcfef690f 100644
--- a/app/views/discussions/_notes.html.haml
+++ b/app/views/discussions/_notes.html.haml
@@ -1,6 +1,19 @@
-.discussion-notes
-  %ul.notes{ data: { discussion_id: discussion.id } }
-    = render partial: "shared/notes/note", collection: discussion.notes, as: :note
+- disable_collapse = local_assigns.fetch(:disable_collapse, false)
+- collapsed_class = 'collapsed' if discussion.resolved? && !disable_collapse
+- badge_counter = discussion_counter + 1 if local_assigns[:discussion_counter]
+- show_toggle = local_assigns.fetch(:show_toggle, true)
+- show_image_comment_badge = local_assigns.fetch(:show_image_comment_badge, false)
+
+.discussion-notes{ class: collapsed_class }
+  -# Save the first note position data so that we have a reference and can go
+  -# to the first note position when we click on a badge diff discussion
+  %ul.notes{ id: "discussion_#{discussion.id}", data: { discussion_id: discussion.id, position: discussion.notes[0].position.to_json } }
+    - if discussion.try(:on_image?) && show_toggle
+      %button.diff-notes-collapse.js-diff-notes-toggle{ type: 'button' }
+        = sprite_icon('collapse', css_class: 'collapse-icon')
+      %button.btn-transparent.badge.js-diff-notes-toggle{ type: 'button' }
+        = badge_counter
+    = render partial: "shared/notes/note", collection: discussion.notes, as: :note, locals: { badge_counter: badge_counter, show_image_comment_badge: show_image_comment_badge }
 
   .flash-container
 
diff --git a/app/views/projects/diffs/_image_diff_frame.html.haml b/app/views/projects/diffs/_image_diff_frame.html.haml
new file mode 100644
index 00000000000..dae73e10460
--- /dev/null
+++ b/app/views/projects/diffs/_image_diff_frame.html.haml
@@ -0,0 +1,5 @@
+- class_name = local_assigns.fetch(:class_name, '')
+- note_type = local_assigns.fetch(:note_type, '')
+
+.frame{ class: class_name, data: { position: position, note_type: note_type } }
+  = image_tag(image_path, alt: alt, draggable: false, lazy: false)
diff --git a/app/views/projects/diffs/_replaced_image_diff.html.haml b/app/views/projects/diffs/_replaced_image_diff.html.haml
new file mode 100644
index 00000000000..8fc232b464e
--- /dev/null
+++ b/app/views/projects/diffs/_replaced_image_diff.html.haml
@@ -0,0 +1,61 @@
+- blob = diff_file.blob
+- old_blob = diff_file.old_blob
+- blob_raw_path = diff_file_blob_raw_path(diff_file)
+- old_blob_raw_path = diff_file_old_blob_raw_path(diff_file)
+- click_to_comment = local_assigns.fetch(:click_to_comment, true)
+- diff_view_data = local_assigns.fetch(:diff_view_data, '')
+- class_name = ''
+
+- if click_to_comment
+  - class_name = 'js-add-image-diff-note-button click-to-comment'
+
+.image.js-replaced-image{ data: diff_view_data }
+  .two-up.view
+    .wrap
+      .frame.deleted
+        = image_tag(old_blob_raw_path, alt: diff_file.old_path, lazy: false)
+      %p.image-info.hide
+        %span.meta-filesize= number_to_human_size(old_blob.size)
+        |
+        %strong W:
+        %span.meta-width
+        |
+        %strong H:
+        %span.meta-height
+    .wrap
+      = render partial: "projects/diffs/image_diff_frame", locals: { class_name: "added js-image-frame #{class_name}", position: position, note_type: DiffNote.name, image_path: blob_raw_path, alt: diff_file.new_path }
+      %p.image-info.hide
+        %span.meta-filesize= number_to_human_size(blob.size)
+        |
+        %strong W:
+        %span.meta-width
+        |
+        %strong H:
+        %span.meta-height
+
+  .swipe.view.hide
+    .swipe-frame
+      .frame.deleted
+        = image_tag(old_blob_raw_path, alt: diff_file.old_path, lazy: false)
+      .swipe-wrap
+        = render partial: "projects/diffs/image_diff_frame", locals: { class_name: "added js-image-frame #{class_name}", position: position, note_type: DiffNote.name, image_path: blob_raw_path, alt: diff_file.new_path }
+      %span.swipe-bar
+        %span.top-handle
+        %span.bottom-handle
+
+  .onion-skin.view.hide
+    .onion-skin-frame
+      .frame.deleted
+        = image_tag(old_blob_raw_path, alt: diff_file.old_path, lazy: false)
+      = render partial: "projects/diffs/image_diff_frame", locals: { class_name: "added js-image-frame #{class_name}", position: position, note_type: DiffNote.name, image_path: blob_raw_path, alt: diff_file.new_path }
+      .controls
+        .transparent
+        .drag-track
+          .dragger{ :style => "left: 0px;" }
+        .opaque
+
+.view-modes.hide
+  %ul.view-modes-menu
+    %li.two-up{ data: { mode: 'two-up' } } 2-up
+    %li.swipe{ data: { mode: 'swipe' } } Swipe
+    %li.onion-skin{ data: { mode: 'onion-skin' } } Onion skin
diff --git a/app/views/projects/diffs/_single_image_diff.html.haml b/app/views/projects/diffs/_single_image_diff.html.haml
new file mode 100644
index 00000000000..6b0c6bbe48f
--- /dev/null
+++ b/app/views/projects/diffs/_single_image_diff.html.haml
@@ -0,0 +1,16 @@
+- blob = diff_file.blob
+- old_blob = diff_file.old_blob
+- blob_raw_path = diff_file_blob_raw_path(diff_file)
+- old_blob_raw_path = diff_file_old_blob_raw_path(diff_file)
+- click_to_comment = local_assigns.fetch(:click_to_comment, true)
+- diff_view_data = local_assigns.fetch(:diff_view_data, '')
+- class_name = ''
+
+- if click_to_comment
+  - class_name = 'js-add-image-diff-note-button click-to-comment'
+
+.image.js-single-image{ data: diff_view_data }
+  .wrap
+    - single_class_name = diff_file.deleted_file? ? 'deleted' : 'added'
+    = render partial: "projects/diffs/image_diff_frame", locals: { class_name: "#{single_class_name} #{class_name} js-image-frame", position: position, note_type: DiffNote.name, image_path: blob_raw_path, alt: diff_file.file_path }
+  %p.image-info= number_to_human_size(blob.size)
diff --git a/app/views/projects/diffs/viewers/_image.html.haml b/app/views/projects/diffs/viewers/_image.html.haml
index 6b5233833c6..f190073c2fc 100644
--- a/app/views/projects/diffs/viewers/_image.html.haml
+++ b/app/views/projects/diffs/viewers/_image.html.haml
@@ -1,67 +1,13 @@
 - diff_file = viewer.diff_file
-- blob = diff_file.blob
-- old_blob = diff_file.old_blob
-- blob_raw_path = diff_file_blob_raw_path(diff_file)
-- old_blob_raw_path = diff_file_old_blob_raw_path(diff_file)
+- image_point = Gitlab::Diff::ImagePoint.new(nil, nil, nil, nil)
+- discussions = @grouped_diff_discussions[diff_file.new_path] if @grouped_diff_discussions
+
+- locals = { diff_file: diff_file, position: diff_file.position(image_point, position_type: :image).to_json, click_to_comment: true, diff_view_data: diff_view_data }
 
 - if diff_file.new_file? || diff_file.deleted_file?
-  .image
-    %span.wrap
-      .frame{ class: (diff_file.deleted_file? ? 'deleted' : 'added') }
-        = image_tag(blob_raw_path, alt: diff_file.file_path)
-      %p.image-info= number_to_human_size(blob.size)
+  = render partial: "projects/diffs/single_image_diff", locals: locals
 - else
-  .image
-    .two-up.view
-      %span.wrap
-        .frame.deleted
-          = image_tag(old_blob_raw_path, alt: diff_file.old_path)
-        %p.image-info.hide
-          %span.meta-filesize= number_to_human_size(old_blob.size)
-          |
-          %b W:
-          %span.meta-width
-          |
-          %b H:
-          %span.meta-height
-      %span.wrap
-        .frame.added
-          = image_tag(blob_raw_path, alt: diff_file.new_path)
-        %p.image-info.hide
-          %span.meta-filesize= number_to_human_size(blob.size)
-          |
-          %b W:
-          %span.meta-width
-          |
-          %b H:
-          %span.meta-height
-
-    .swipe.view.hide
-      .swipe-frame
-        .frame.deleted
-          = image_tag(old_blob_raw_path, alt: diff_file.old_path, lazy: false)
-        .swipe-wrap
-          .frame.added
-            = image_tag(blob_raw_path, alt: diff_file.new_path, lazy: false)
-        %span.swipe-bar
-          %span.top-handle
-          %span.bottom-handle
-
-    .onion-skin.view.hide
-      .onion-skin-frame
-        .frame.deleted
-          = image_tag(old_blob_raw_path, alt: diff_file.old_path, lazy: false)
-        .frame.added
-          = image_tag(blob_raw_path, alt: diff_file.new_path, lazy: false)
-        .controls
-          .transparent
-          .drag-track
-            .dragger{ :style => "left: 0px;" }
-          .opaque
-
+  = render partial: "projects/diffs/replaced_image_diff", locals: locals
 
-  .view-modes.hide
-    %ul.view-modes-menu
-      %li.two-up{ data: { mode: 'two-up' } } 2-up
-      %li.swipe{ data: { mode: 'swipe' } } Swipe
-      %li.onion-skin{ data: { mode: 'onion-skin' } } Onion skin
+.note-container
+  = render partial: "discussions/notes", collection: discussions, as: :discussion
diff --git a/app/views/shared/notes/_form.html.haml b/app/views/shared/notes/_form.html.haml
index 725bf916592..71c0d740bc8 100644
--- a/app/views/shared/notes/_form.html.haml
+++ b/app/views/shared/notes/_form.html.haml
@@ -24,20 +24,21 @@
   -# DiffNote
   = f.hidden_field :position
 
-  = render layout: 'projects/md_preview', locals: { url: preview_url, referenced_users: true } do
-    = render 'projects/zen', f: f,
-      attr: :note,
-      classes: 'note-textarea js-note-text',
-      placeholder: "Write a comment or drag your files here...",
-      supports_quick_actions: supports_quick_actions,
-      supports_autocomplete: supports_autocomplete
-    = render 'shared/notes/hints', supports_quick_actions: supports_quick_actions
-    .error-alert
-
-  .note-form-actions.clearfix
-    = render partial: 'shared/notes/comment_button'
-
-    = yield(:note_actions)
-
-    %a.btn.btn-cancel.js-note-discard{ role: "button", data: {cancel_text: "Cancel" } }
-      Discard draft
+  .discussion-form-container
+    = render layout: 'projects/md_preview', locals: { url: preview_url, referenced_users: true } do
+      = render 'projects/zen', f: f,
+        attr: :note,
+        classes: 'note-textarea js-note-text',
+        placeholder: "Write a comment or drag your files here...",
+        supports_quick_actions: supports_quick_actions,
+        supports_autocomplete: supports_autocomplete
+      = render 'shared/notes/hints', supports_quick_actions: supports_quick_actions
+      .error-alert
+
+    .note-form-actions.clearfix
+      = render partial: 'shared/notes/comment_button'
+
+      = yield(:note_actions)
+
+      %a.btn.btn-cancel.js-note-discard{ role: "button", data: {cancel_text: "Cancel" } }
+        Discard draft
diff --git a/app/views/shared/notes/_note.html.haml b/app/views/shared/notes/_note.html.haml
index 4f00a9f2759..b6085fd3af0 100644
--- a/app/views/shared/notes/_note.html.haml
+++ b/app/views/shared/notes/_note.html.haml
@@ -1,7 +1,10 @@
 - return unless note.author
 - return if note.cross_reference_not_visible_for?(current_user)
 
+- show_image_comment_badge = local_assigns.fetch(:show_image_comment_badge, false)
 - note_editable = note_editable?(note)
+- note_counter = local_assigns.fetch(:note_counter, 0)
+
 %li.timeline-entry{ id: dom_id(note),
   class: ["note", "note-row-#{note.id}", ('system-note' if note.system)],
   data: { author_id: note.author.id,
@@ -12,8 +15,18 @@
       - if note.system
         = icon_for_system_note(note)
       - else
-        %a{ href: user_path(note.author) }
+        %a.image-diff-avatar-link{ href: user_path(note.author) }
           = image_tag avatar_icon(note.author), alt: '', class: 'avatar s40'
+          - if note.is_a?(DiffNote) && note.on_image?
+            - if show_image_comment_badge && note_counter == 0
+              -# Only show this for the first comment in the discussion
+              %span.image-comment-badge.inverted
+                = icon('comment-o')
+            - elsif note_counter == 0
+              - counter = badge_counter if local_assigns[:badge_counter]
+              - badge_class = "hidden" if @fresh_discussion || counter.nil?
+              %span.badge{ class: badge_class }
+                = counter
     .timeline-content
       .note-header
         .note-header-info