Rewrite sticky File name in Merge Request Changes tab using CSS
Currently we have a feature (https://gitlab.com/gitlab-org/gitlab-ce/issues/32023 https://gitlab.com/gitlab-org/gitlab-ce/issues/48553) that makes the name of the filename being scrolled stick to the top of the viewport. A behaviour exactly like position: sticky;
.
At the moment, we have one event listener triggering on every scroll event, which is not performant at all.
We could improve situation by either having one instance overlooking the entire DOM or simply debouncing function calls on this listener and not executing on every single scroll.
However, this can easily be achieved using CSS only.
Proposal: drop the JS implementation and make the whole file header sticky, allowing the actions to be invoked from wherever in the diff.
Note we can still choose to have just the filename be sticky and the rest of the UI doesn't stick.
Browser support: https://caniuse.com/#feat=css-sticky (tl;dr: IE11 won't have this enhancement, all others will. — If critical, we could add a polyfill for IE11)
Example/Demo: Kapture_2018-07-02_at_20.37.34