1253548 - Float the filename and function row on the top of viewport when scrolling down

Status: RESOLVED INVALID

(MozReview Graveyard :: Review Board: User Interface, defect)

Description

[Xidorn Quan [:xidorn] UTC+11]

Similiar to the fixed position table header. It could be useful to know the filename / function name when viewing a long file / function.

Comment 1

[David Walsh :davidwalsh]

I agree that this would be an awesome feature.  I took a few moments to look at what we may run into in as far as difficulties:

1.  The file name and information is in a `<thead>` element which may not like being sticky, so we may need to clone the heading and maybe even create a table
2.  Timing may be difficult -- since each diff is loaded synchronously *after* initial page load, so we'll need to hold off of initializing each scrolling pin until after we know an item is loaded
3.  We'll need to keep track of resize events -- we'll likely be storing a bunch of heights and positions, so any resize will shift all of those numbers
4.  If upstream wants this, we may need to consider writing this from scratch or utilizing an existing plugin.

(notes for myself)

Comment 2

[David Walsh :davidwalsh]

I found a utility, jQuery.floatThead which fits our needs; this code, for example, makes it all work (the headings are a bit janky though):

```
if($('#diffs').length) {
  $.getScript("https://cdnjs.cloudflare.com/ajax/libs/floatthead/1.4.0/jquery.floatThead.js").done(function() {
    $('.diff-container .sidebyside').floatThead({ position: 'fixed' });

    $(window).on('resize', function() {
      $('.diff-container .sidebyside').floatThead('reflow');
    });
  });
}
```

Function names will be pretty tough though, unless we can get the server side to output markers for different function containers for each row changed or something.  And it may be language dependent too so things could get wild.

Comment 3

[Xidorn Quan [:xidorn] UTC+11]

I think we have a bug with floatThead plugin -> bug 1267898.

Comment 4

[Matthew N. [:MattN]]

We may not even need a jQuery plugin if we fix bug 975644.

Comment 5

[BMO Automation]

MozReview is now obsolete. Please use Phabricator instead. Closing this bug.