All users were logged out of Bugzilla on October 13th, 2018

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



3 years ago
2 years ago


(Reporter: xidorn, Unassigned)





3 years ago
Similiar to the fixed position table header. It could be useful to know the filename / function name when viewing a long file / function.
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)
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("").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

2 years ago
I think we have a bug with floatThead plugin -> bug 1267898.
We may not even need a jQuery plugin if we fix bug 975644.
You need to log in before you can comment on or make changes to this bug.