diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index 0327fceb38d0abca9dfe92c8a426be422466e94c..1d1415fe6ca5dd4904d23f53e1e083ded618976e 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -41,11 +41,6 @@ export default {
required: true,
},
},
- data() {
- return {
- activeFile: '',
- };
- },
computed: {
...mapState({
isLoading: state => state.diffs.isLoading,
@@ -126,14 +121,6 @@ export default {
eventHub.$emit('fetchNotesData');
}
},
- setActive(filePath) {
- this.activeFile = filePath;
- },
- unsetActive(filePath) {
- if (this.activeFile === filePath) {
- this.activeFile = '';
- }
- },
adjustView() {
if (this.shouldShow && this.isParallelView) {
window.mrTabs.expandViewContainer();
@@ -195,7 +182,6 @@ export default {
diff --git a/app/assets/javascripts/diffs/components/changed_files.vue b/app/assets/javascripts/diffs/components/changed_files.vue
index 9d29357d800e1c89f23f5338ab1677ba5993c6ef..97751db1254d5c94b614c030e4dd45ab40dff9aa 100644
--- a/app/assets/javascripts/diffs/components/changed_files.vue
+++ b/app/assets/javascripts/diffs/components/changed_files.vue
@@ -16,13 +16,6 @@ export default {
ClipboardButton,
},
mixins: [changedFilesMixin],
- props: {
- activeFile: {
- type: String,
- required: false,
- default: '',
- },
- },
data() {
return {
isStuck: false,
@@ -70,7 +63,7 @@ export default {
pluralize,
handleScroll() {
if (!this.updating) {
- requestAnimationFrame(this.updateIsStuck);
+ this.$nextTick(this.updateIsStuck);
this.updating = true;
}
},
@@ -148,25 +141,8 @@ export default {
/>
-
- {{ truncatedDiffPath(activeFile) }}
-
-
-
-
-
with
@@ -177,6 +153,17 @@ export default {
{{ pluralize(`${sumRemovedLines} deletion`, sumRemovedLines) }}
+
+
+ +{{ sumAddedLines }}
+
+
+ -{{ sumRemovedLines }}
+
+
diff --git a/app/assets/javascripts/diffs/components/changed_files_dropdown.vue b/app/assets/javascripts/diffs/components/changed_files_dropdown.vue
index b38d217fbe3378aa0971b56aaf7c252d2a97f99c..045688a32bf6d28b462e220d75393cbfee6d78d3 100644
--- a/app/assets/javascripts/diffs/components/changed_files_dropdown.vue
+++ b/app/assets/javascripts/diffs/components/changed_files_dropdown.vue
@@ -40,7 +40,7 @@ export default {
{{ n__('%d changed file', '%d changed files', diffFiles.length) }}
diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue
index a61e368249a5ec18411002b3eb00b583bd3df694..944084f05c9dfc02cad1dfb2dd307089d8509911 100644
--- a/app/assets/javascripts/diffs/components/diff_file.vue
+++ b/app/assets/javascripts/diffs/components/diff_file.vue
@@ -25,7 +25,6 @@ export default {
},
data() {
return {
- isActive: false,
isLoadingCollapsedDiff: false,
forkMessageVisible: false,
};
@@ -48,12 +47,6 @@ export default {
return this.isCollapsed && !this.isLoadingCollapsedDiff && !this.file.tooLarge;
},
},
- mounted() {
- document.addEventListener('scroll', this.handleScroll);
- },
- beforeDestroy() {
- document.removeEventListener('scroll', this.handleScroll);
- },
methods: {
...mapActions('diffs', ['loadCollapsedDiff']),
handleToggle() {
@@ -65,36 +58,6 @@ export default {
this.file.collapsed = !this.file.collapsed;
}
},
- handleScroll() {
- if (!this.updating) {
- requestAnimationFrame(this.scrollUpdate.bind(this));
- this.updating = true;
- }
- },
- scrollUpdate() {
- const header = document.querySelector('.js-diff-files-changed');
- if (!header) {
- this.updating = false;
- return;
- }
-
- const { top, bottom } = this.$el.getBoundingClientRect();
- const { top: topOfFixedHeader, bottom: bottomOfFixedHeader } = header.getBoundingClientRect();
-
- const headerOverlapsContent = top < topOfFixedHeader && bottom > bottomOfFixedHeader;
- const fullyAboveHeader = bottom < bottomOfFixedHeader;
- const fullyBelowHeader = top > topOfFixedHeader;
-
- if (headerOverlapsContent && !this.isActive) {
- this.$emit('setActive');
- this.isActive = true;
- } else if (this.isActive && (fullyAboveHeader || fullyBelowHeader)) {
- this.$emit('unsetActive');
- this.isActive = false;
- }
-
- this.updating = false;
- },
handleLoadCollapsedDiff() {
this.isLoadingCollapsedDiff = true;
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 7e89f8998fb4392924150a75af9d6b5cdf4d59fa..5e39bbb9890c15e8a26851a465ede5a9b5309337 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -518,6 +518,12 @@
outline: none;
color: $gl-link-hover-color;
}
+
+ .caret-icon {
+ position: relative;
+ top: 2px;
+ left: -1px;
+ }
}
// Mobile
diff --git a/changelogs/unreleased/48789-remove-event-listeners-scroll.yml b/changelogs/unreleased/48789-remove-event-listeners-scroll.yml
new file mode 100644
index 0000000000000000000000000000000000000000..9cc3f7adc361f8bb5f599f9ca47a775dafcbd183
--- /dev/null
+++ b/changelogs/unreleased/48789-remove-event-listeners-scroll.yml
@@ -0,0 +1,6 @@
+---
+title: Improves performance on Merge Request diff tab by removing the scroll event
+ listeners being added to every file
+merge_request:
+author:
+type: performance
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index eb3433b3ba202781befa0245809459408c44fa38..c669e2e1622eb4b4d89f9cf07780427cdb66c1fb 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -1666,9 +1666,6 @@ msgstr ""
msgid "Copy commit SHA to clipboard"
msgstr ""
-msgid "Copy file name to clipboard"
-msgstr ""
-
msgid "Copy file path to clipboard"
msgstr ""