Fossil

    const td = tr.querySelector('td:nth-child('+(
      /* TD element with the line numbers */
      getLHS ? 1 : (isSplit ? 4 : 2)
    )+')');
    const m = f.rx[getStart ? 'start' : 'end'].exec(td.innerText);
    return m ? +m[1] : undefined/*"shouldn't happen"*/;
  };
  

  /**
     Installs chunk-loading controls into TR.diffskip element tr.
     Each instance corresponds to a single TR.diffskip element.

     The goal is to base these controls roughly on github's, a good
     example of which, for use as a model, is:

        if(doAppend) content.push(lineNoTxt);
        else content.unshift(lineNoTxt);
        if(joinTr){
          content.push(trNext.querySelector(selector).innerHTML);
        }
        td.innerHTML = content.join('');
        if(joinTr) D.remove(joinTr);
        Diff.checkTableWidth(true);
        this.destroy();
        return this;
      }else if(this.FetchType.PrevDown===fetchType){
        /* Append context to previous TR. */
        // RHS line numbers...
        let startLnR = this.pos.prev.endRhs+1;
        lineno.length = lines.length;

        if(lines.length < (urlParam.to - urlParam.from)){
          /* No more data. */
          this.destroy();
        }else{
          this.maybeReplaceButtons();
          this.updatePosDebug();
        }
        Diff.checkTableWidth(true);
        return this;
      }else if(this.FetchType.NextUp===fetchType){
        /* Prepend content to next TR. */
        // RHS line numbers...
        if(doAppend){
          throw new Error("Internal precondition violation: doAppend is true.");
        }

           || lines.length < (urlParam.to - urlParam.from)){
          /* No more data. */
          this.destroy();
        }else{
          this.maybeReplaceButtons();
          this.updatePosDebug();
        }
        Diff.checkTableWidth(true);
        return this;
      }else{
        throw new Error("Unexpected 'fetchType' value.");
      }
    },

    /**

        new ChunkLoadControls(D.addClass(tr, 'jchunk'));
      });
    });
    return F;
  };
  Diff.setupDiffContextLoad();
});

/*
/* Refinements to the display of unified and side-by-side diffs.
**
** In all cases, the table columns tagged with "difftxt" are expanded,
** where possible, to fill the width of the screen.
**
** For a side-by-side diff, if either column is two wide to fit on the
** For a side-by-side diff, ensure that horizontal scrolling of either
** display, scrollbars are added.  The scrollbars are linked, so that
** both sides scroll together.  Left and right arrows also scroll.
** side of the diff is synchronized with the other side.
*/
window.fossil.onPageLoad(function(){
  const SCROLL_LEN = 25;
  const F = window.fossil, D = F.dom, Diff = F.diff;
  var lastWidth;
  Diff.checkTableWidth = function f(force){
    if(undefined === f.contentNode){
      f.contentNode = document.querySelector('div.content');
    }

    force = true;
    const parentCS = window.getComputedStyle(f.contentNode);
    const parentWidth = (
      //document.body.clientWidth;
  /* Look for a parent element to hold the sbs-sync-scroll toggle
     checkbox.  This differs per page. If we don't find one, simply
     elide that toggle and use whatever preference the user last
     specified (defaulting to on). */
  let cbSync /* scroll-sync checkbox */;
  let eToggleParent /* element to put the sync-scroll checkbox in */;
  const potentialParents = [ /* possible parents for the checkbox */
    /* Put the most likely pages at the end, as array.pop() is more
       efficient than array.shift() (see loop below). */
    /* /filedit */ 'body.cpage-fileedit #fileedit-tab-diff-buttons',
      //parentCS.width;
      f.contentNode.clientWidth
        - parseFloat(parentCS.marginLeft) - parseFloat(parentCS.marginRight)
    /* /wikiedit */ 'body.cpage-wikiedit #wikiedit-tab-diff-buttons',
    /* /vdiff */ 'body.vdiff form div.submenu',
    );
    if( !force && parentWidth===lastWidth ) return this;
    lastWidth = parentWidth;
    /* /info, /vinfo */ 'body.vinfo div.sectionmenu.info-changes-menu'
  ];
  while( potentialParents.length ){
    let w = lastWidth*0.5 - 100;
    //console.debug( "w = ",w,", lastWidth =",lastWidth," body = ",document.body.clientWidth);
    if(force || !f.colsL){
      f.colsL = document.querySelectorAll('td.difftxtl pre');
    if( (eToggleParent = document.querySelector(potentialParents.pop())) ){
      break;
    }
    f.colsL.forEach(function(e){
      e.style.width = w + "px";
      e.style.maxWidth = w + "px";
    });
    if(force || !f.colsR){
      f.colsR = document.querySelectorAll('td.difftxtr pre');
    }
  }
    f.colsR.forEach(function(e){
      e.style.width = w + "px";
      e.style.maxWidth = w + "px";
  const keySbsScroll = 'sync-diff-scroll' /* F.storage key */;
    });
    if(force || !f.colsU){
      f.colsU = document.querySelectorAll('td.difftxtu pre');
  if( eToggleParent ){
    /* Add a checkbox to toggle sbs scroll sync. Remember that in
       order to be UI-consistent in the /vdiff page we have to ensure
    }
    f.colsU.forEach(function(e){
      w = lastWidth - 3; // Outer border
      var k = e.parentElement/*TD*/;
       that the checkbox is to the LEFT of of its label. We store the
       sync-scroll preference in F.storage (not a cookie) so that it
       persists across page loads and different apps. */
    cbSync = D.checkbox(keySbsScroll, F.storage.getBool(keySbsScroll,true));
    D.append(eToggleParent, D.append(
      while(k = k.previousElementSibling/*TD*/) w -= k.scrollWidth;
      e.style.width = w + "px";
      e.style.maxWidth = w + "px";
    });
      D.addClass(D.create('span'), 'input-with-label'),
      D.append(D.create('label'),
               cbSync, "Sync side-by-side scrolling")
    ));
    if(0){ // seems to be unnecessary
      if(!f.allDiffs){
        f.allDiffs = document.querySelectorAll('table.diff');
      }
      w = lastWidth;
      f.allDiffs.forEach(function f(e){
    cbSync.addEventListener('change', function(e){
        if(0 && !f.$){
          f.$ = e.getClientRects()[0];
          console.debug("diff table w =",w," f.$x",f.$);
          w - 2*f.$.x /* left margin (assume right==left, for simplicity) */;
        }
        e.style.maxWidth = w + "px";
      });
      F.storage.set(keySbsScroll, e.target.checked);
    });
      //console.debug("checkTableWidth(",force,") lastWidth =",lastWidth);
    }
  }
    return this;
  };
  const useSync = cbSync ? ()=>cbSync.checked : ()=>F.storage.getBool(keySbsScroll,true);

  /* Now set up the events to enable syncronized scrolling... */
  const scrollLeft = function(event){
    //console.debug("scrollLeft",this,event);
    const table = this.parentElement/*TD*/.parentElement/*TR*/.
      parentElement/*TBODY*/.parentElement/*TABLE*/;
    if( useSync() ){
    table.$txtPres.forEach((e)=>(e===this) ? 1 : (e.scrollLeft = this.scrollLeft));
      table.$txtPres.forEach((e)=>(e===this) ? 1 : (e.scrollLeft = this.scrollLeft));
    }
    return false;
  };
  const SCROLL_LEN = 64/* pixels to scroll for keyboard events */;
  const keycodes = Object.assign(Object.create(null),{
    37/*cursor left*/: -SCROLL_LEN, 39/*cursor right*/: SCROLL_LEN
  });
  /** keydown handler for a diff element */
  const handleDiffKeydown = function(e){
    const len = keycodes[e.keyCode];
    if( !len ) return false;
    if( useSync() ){
      this.$txtPres[0].scrollLeft += len;
    }else if( this.$preCurrent ){
      this.$preCurrent.scrollLeft += len;
    }
    return false;
  };
  /**
     Sets up synchronized scrolling of table.splitdiff element
     `diff`. If passed no argument, it scans the dom for elements to
     initialize. The second argument is for this function's own
     internal use.

     It's okay (but wasteful) to pass the same element to this
     function multiple times: it will only be set up for sync
     scrolling the first time it's passed to this function.

     Note that this setup is ignorant of the cbSync toggle: the toggle
     is checked when scrolling, not when initializing the sync-scroll
     capability.
  */
  Diff.initTableDiff = function f(diff, unifiedDiffs){
  const initTableDiff = function f(diff, unifiedDiffs){
    if(!diff){
      let i, diffs;
      diffs = document.querySelectorAll('table.splitdiff');
      for(i=0; i<diffs.length; ++i){
        f.call(this, diffs[i], false);
      }
      diffs = document.querySelectorAll('table.udiff');
      for(i=0; i<diffs.length; ++i){
        f.call(this, diffs[i], true);
      }
      return this;
    }
    diff.$txtCols = diff.querySelectorAll('td.difftxt');
    diff.$txtPres = diff.querySelectorAll('td.difftxt pre');
    var width = 0;
    diff.$txtPres.forEach(function(e){
      if(width < e.scrollWidth) width = e.scrollWidth;
    });
    if(!unifiedDiffs){
    //console.debug("diff.$txtPres =",diff.$txtPres);
    diff.$txtCols.forEach((e)=>e.style.width = width + 'px');
    diff.$txtPres.forEach(function(e){
      diff.$txtPres.forEach(function(e){
      e.style.maxWidth = width + 'px';
      e.style.width = width + 'px';
      if(!unifiedDiffs && !e.classList.contains('scroller')){
        D.addClass(e, 'scroller');
        e.addEventListener('scroll', scrollLeft, false);
      }
    });
        if(!e.classList.contains('scroller')){
          D.addClass(e, 'scroller');
          e.addEventListener('scroll', scrollLeft, false);
        }
      });
    if(!unifiedDiffs){
      diff.tabIndex = 0;
      if(!diff.classList.contains('scroller')){
        /* Keyboard-based scrolling requires special-case handling to
           ensure that we scroll the proper side of the diff when sync
           is off. */
        D.addClass(diff, 'scroller');
        diff.addEventListener('keydown', function(e){
        diff.addEventListener('keydown', handleDiffKeydown, false);
          e = e || event;
          const len = {37: -SCROLL_LEN, 39: SCROLL_LEN}[e.keyCode];
        const handleLRClick = function(ev){
          if( !len ) return;
          this.$txtPres[0].scrollLeft += len;
          /* ^^^ bug: if there is a 2nd column and it has a scrollbar
             but txtPres[0] does not, no scrolling happens here. We need
             to find the widest of txtPres and scroll that one. Example:
             Checkin a7fbefee38a1c522 file diff.c */
          return false;
        }, false);
          diff.$preCurrent = this /* NOT ev.target, which is probably a child element */;
        };
        diff.$txtPres.forEach((e)=>e.addEventListener('click', handleLRClick, false));
      }
    }
    return this;
  }
  window.fossil.page.tweakSbsDiffs = function(){
    document.querySelectorAll('table.splitdiff').forEach((e)=>Diff.initTableDiff(e));
    document.querySelectorAll('table.splitdiff').forEach((e)=>initTableDiff(e));
    Diff.checkTableWidth();
  };
  Diff.initTableDiff().checkTableWidth();
  initTableDiff();
  window.addEventListener('resize', F.debounce(()=>Diff.checkTableWidth()));
}, false);