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 ""