Commit ffb01a13 authored by Justin Boyson's avatar Justin Boyson Committed by Paul Slaughter

Remove stickyMonitor from diff_file_head.vue

In this scenario stickyMonitor only add the class `is-stuck`
to diff_file_header. On large diffs this almost doubles the
render time.

All the `is-stuck` class does is set border-radiust to 0.
I believe the performance impact is not worth the trade
off.
parent 64fedd20
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
import _ from 'underscore'; import _ from 'underscore';
import { mapActions, mapGetters } from 'vuex'; import { mapActions, mapGetters } from 'vuex';
import { GlButton, GlTooltipDirective, GlTooltip, GlLoadingIcon } from '@gitlab/ui'; import { GlButton, GlTooltipDirective, GlTooltip, GlLoadingIcon } from '@gitlab/ui';
import { polyfillSticky, stickyMonitor } from '~/lib/utils/sticky'; import { polyfillSticky } from '~/lib/utils/sticky';
import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
import Icon from '~/vue_shared/components/icon.vue'; import Icon from '~/vue_shared/components/icon.vue';
import FileIcon from '~/vue_shared/components/file_icon.vue'; import FileIcon from '~/vue_shared/components/file_icon.vue';
...@@ -11,7 +11,7 @@ import { __, s__, sprintf } from '~/locale'; ...@@ -11,7 +11,7 @@ import { __, s__, sprintf } from '~/locale';
import { diffViewerModes } from '~/ide/constants'; import { diffViewerModes } from '~/ide/constants';
import EditButton from './edit_button.vue'; import EditButton from './edit_button.vue';
import DiffStats from './diff_stats.vue'; import DiffStats from './diff_stats.vue';
import { scrollToElement, contentTop } from '~/lib/utils/common_utils'; import { scrollToElement } from '~/lib/utils/common_utils';
export default { export default {
components: { components: {
...@@ -127,8 +127,6 @@ export default { ...@@ -127,8 +127,6 @@ export default {
}, },
mounted() { mounted() {
polyfillSticky(this.$refs.header); polyfillSticky(this.$refs.header);
const fileHeaderHeight = this.$refs.header.clientHeight;
stickyMonitor(this.$refs.header, contentTop() - fileHeaderHeight - 1, false);
}, },
methods: { methods: {
...mapActions('diffs', [ ...mapActions('diffs', [
......
...@@ -334,10 +334,6 @@ span.idiff { ...@@ -334,10 +334,6 @@ span.idiff {
padding: $gl-padding-8 $gl-padding; padding: $gl-padding-8 $gl-padding;
margin: 0; margin: 0;
border-radius: $border-radius-default $border-radius-default 0 0; border-radius: $border-radius-default $border-radius-default 0 0;
&.is-stuck {
border-radius: 0;
}
} }
.file-header-content { .file-header-content {
......
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
.file-title-flex-parent { .file-title-flex-parent {
border-top-left-radius: $border-radius-default; border-top-left-radius: $border-radius-default;
border-top-right-radius: $border-radius-default; border-top-right-radius: $border-radius-default;
box-shadow: 0 -2px 0 0 var(--white);
cursor: pointer; cursor: pointer;
@media (min-width: map-get($grid-breakpoints, md)) { @media (min-width: map-get($grid-breakpoints, md)) {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment