Add latest changes from gitlab-org/gitlab@master

6 files changed, 55 insertions, 9 deletions

diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue
index 55526dcc381..eb7e24734ce 100644
--- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/image_viewer.vue
@@ -28,6 +28,8 @@ export default {
     return {
       width: 0,
       height: 0,
+      renderedWidth: 0,
+      renderedHeight: 0,
     };
   },
   computed: {
@@ -63,11 +65,14 @@ export default {
         this.height = contentImg.naturalHeight;
 
         this.$nextTick(() => {
+          this.renderedWidth = contentImg.clientWidth;
+          this.renderedHeight = contentImg.clientHeight;
+
           this.$emit('imgLoaded', {
             width: this.width,
             height: this.height,
-            renderedWidth: contentImg.clientWidth,
-            renderedHeight: contentImg.clientHeight,
+            renderedWidth: this.renderedWidth,
+            renderedHeight: this.renderedHeight,
           });
         });
       }
@@ -79,7 +84,12 @@ export default {
 <template>
   <div data-testid="image-viewer">
     <div :class="innerCssClasses" class="position-relative">
-      <img ref="contentImg" :src="path" @load="onImgLoad" /> <slot name="image-overlay"></slot>
+      <img ref="contentImg" :src="path" @load="onImgLoad" />
+      <slot
+        name="image-overlay"
+        :rendered-width="renderedWidth"
+        :rendered-height="renderedHeight"
+      ></slot>
     </div>
     <p v-if="renderInfo" class="image-info">
       <template v-if="hasFileSize">
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue
index a2fe19f9672..e755494a668 100644
--- a/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/diff_viewer.vue
@@ -106,7 +106,13 @@ export default {
       :a-mode="aMode"
       :b-mode="bMode"
     >
-      <slot slot="image-overlay" name="image-overlay"></slot>
+      <template #image-overlay="{ renderedWidth, renderedHeight }">
+        <slot
+          :rendered-width="renderedWidth"
+          :rendered-height="renderedHeight"
+          name="image-overlay"
+        ></slot>
+      </template>
     </component>
     <slot></slot>
   </div>
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue
index 2b5b2269ec8..433aafdeb9e 100644
--- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/onion_skin_viewer.vue
@@ -141,7 +141,13 @@ export default {
           :path="newPath"
           @imgLoaded="onionNewImgLoaded"
         >
-          <slot slot="image-overlay" name="image-overlay"> </slot>
+          <template #image-overlay="{ renderedWidth, renderedHeight }">
+            <slot
+              :rendered-width="renderedWidth"
+              :rendered-height="renderedHeight"
+              name="image-overlay"
+            ></slot>
+          </template>
         </image-viewer>
       </div>
       <div class="controls">
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue
index 2f2618d448f..acca6ba117f 100644
--- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/swipe_viewer.vue
@@ -143,7 +143,13 @@ export default {
           class="frame added"
           @imgLoaded="swipeNewImgLoaded"
         >
-          <slot slot="image-overlay" name="image-overlay"> </slot>
+          <template #image-overlay="{ renderedWidth, renderedHeight }">
+            <slot
+              :rendered-width="renderedWidth"
+              :rendered-height="renderedHeight"
+              name="image-overlay"
+            ></slot>
+          </template>
         </image-viewer>
       </div>
       <span
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue
index 4dbfdb6d79c..97cac919b2a 100644
--- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff/two_up_viewer.vue
@@ -44,7 +44,13 @@ export default {
       :inner-css-classes="['frame', 'added']"
       class="wrap w-50"
     >
-      <slot slot="image-overlay" name="image-overlay"> </slot>
+      <template #image-overlay="{ renderedWidth, renderedHeight }">
+        <slot
+          :rendered-width="renderedWidth"
+          :rendered-height="renderedHeight"
+          name="image-overlay"
+        ></slot>
+      </template>
     </image-viewer>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue
index 6f5a133b225..00033145603 100644
--- a/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/diff_viewer/viewers/image_diff_viewer.vue
@@ -76,7 +76,13 @@ export default {
     <div v-if="diffMode === $options.diffModes.replaced" class="diff-viewer">
       <div class="image js-replaced-image">
         <component :is="imageViewComponent" v-bind="$props">
-          <slot slot="image-overlay" name="image-overlay"> </slot>
+          <template #image-overlay="{ renderedWidth, renderedHeight }">
+            <slot
+              :rendered-width="renderedWidth"
+              :rendered-height="renderedHeight"
+              name="image-overlay"
+            ></slot>
+          </template>
         </component>
       </div>
       <div class="view-modes">
@@ -121,7 +127,13 @@ export default {
             },
           ]"
         >
-          <slot v-if="isNew || isRenamed" slot="image-overlay" name="image-overlay"> </slot>
+          <template v-if="isNew || isRenamed" #image-overlay="{ renderedWidth, renderedHeight }">
+            <slot
+              :rendered-width="renderedWidth"
+              :rendered-height="renderedHeight"
+              name="image-overlay"
+            ></slot>
+          </template>
         </image-viewer>
       </div>
     </div>