padding: 0 0.25em 0 0.5em;
}
table.diff td {
  vertical-align: top;
}
table.diff pre {
  margin: 0 0 0 0;
}
table.diff tr.fetched {
  opacity: 0.7;
}
tr.diffskip.jchunk {
  /* jchunk gets added from JS to diffskip rows when they are
     plugged into the /jchunk route and removed after that data
     is fetched. */
  background-color: aliceblue;
  padding: 0;

     https://github.com/msteveb/autosetup/commit/235925e914a52a542

     Each instance corresponds to a single TR.diffskip element.
  */
  Diff.ChunkLoadControls = function(isSplit, tr){
    this.isSplit = isSplit;
    this.e = {/*DOM elements*/
      tr: tr,
      table: tr.parentElement/*TBODY*/.parentElement
    };
    this.fileHash = this.e.table.dataset.lefthash;
    tr.$chunker = this /* keep GC from reaping this */;
    this.pos = {
      //hash: F.hashDigits(this.fileHash),
      /* These line numbers correspond to the LHS file. Because the
         contents are common to both sides, we have the same number
         for the RHS, but need to extract those line numbers from the
         neighboring TR blocks */
      startLhs: +tr.dataset.startln,
      endLhs: +tr.dataset.endln
    };

    if(tr.previousElementSibling){
      this.pos.prev = {
        endLhs: extractLineNo(true, false, tr.previousElementSibling, isSplit),
        endRhs: extractLineNo(false, false, tr.previousElementSibling, isSplit)
      };
    }
    let btnUp = false, btnDown = false;
    /**
       this.pos.next refers to the line numbers in the next TR's chunk.
       this.pos.prev refers to the line numbers in the previous TR's chunk.
    */
    if((this.pos.startLhs + Diff.config.chunkLoadLines
        >= this.pos.endLhs )
       || (this.pos.prev && this.pos.next
           && ((this.pos.next.startLhs - this.pos.prev.endLhs)
               <= Diff.config.chunkLoadLines))){
      /* Place a single button to load the whole block, rather
         than separate up/down buttons. */
      //delete this.pos.next;
      btnDown = false;
      btnUp = D.append(
        D.addClass(D.span(), 'button', 'up', 'down'),
        D.span(/*glyph holder*/)
        //D.append(D.span(), this.config.glyphDown, this.config.glyphUp)
      );
    }else{

      if(this.e.posState){
        D.append(D.clearElement(this.e.posState), JSON.stringify(this.pos));
      }
      return this;
    },
    
    destroy: function(){

      D.remove(this.e.tr);
      delete this.e.tr.$chunker;
      delete this.e.tr;
      delete this.e;
      delete this.pos;
    },
    /**
       Creates a new TR element, including its TD elements (depending
       on this.isSplit), but does not fill it with any information nor
       inject it into the table (it doesn't know where to do
       so). Returns an object containing the TR element and various TD
       elements which will likely be needed by the routine which
       called this. See this code for details.
    */
    newTR: function(){
      const tr = D.addClass(D.tr(),'fetched'), rc = {
        tr,
        preLnL: D.pre(),
        preLnR: D.pre()
      };
      if(this.isSplit){
        D.append(D.addClass( D.td(tr), 'diffln', 'difflnl' ), rc.preLnL);
        rc.preTxtL = D.pre();
        D.append(D.addClass( D.td(tr), 'difftxt', 'difftxtl' ), rc.preTxtL);
        D.addClass( D.td(tr), 'diffsep' );
        D.append(D.addClass( D.td(tr), 'diffln', 'difflnr' ), rc.preLnR);
        rc.preTxtR = D.pre();
        D.append(D.addClass( D.td(tr), 'difftxt', 'difftxtr' ), rc.preTxtR);
      }else{
        D.append(D.addClass( D.td(tr), 'diffln', 'difflnl' ), rc.preLnL);
        D.append(D.addClass( D.td(tr), 'diffln', 'difflnr' ), rc.preLnR);
        D.addClass( D.td(tr), 'diffsep' );
        rc.preTxtU = D.pre();
        D.append(D.addClass( D.td(tr), 'difftxt', 'difftxtu' ), rc.preTxtU);
      }
      return rc;
    },

    injectResponse: function(direction/*as for fetchChunk()*/,
                             urlParam/*from fetchChunk()*/,
                             lines/*response lines*/){
      console.debug("Loading line range ",urlParam.from,"-",urlParam.to);
      const row = this.newTR();
      const lineno = [];
      let i;
      for( i = urlParam.from; i <= urlParam.to; ++i ){
        /* TODO: space-pad numbers, but we don't know the proper length from here. */
        lineno.push(i);
      }
      row.preLnL.innerText = lineno.join('\n')+'\n';
      if(row.preTxtU){//unified diff
        row.preTxtU.innerText = lines.join('\n')+'\n';
      }else{//split diff
        const code = lines.join('\n')+'\n';
        row.preTxtL.innerText = code;
        row.preTxtR.innerText = code;
      }
      if(0===direction){
        /* Closing the whole gap between two chunks or a whole gap
           at the start or end of a diff. */
        let startLnR = this.pos.prev
            ? this.pos.prev.endRhs+1 /* Closing the whole gap between two chunks
                                        or end-of-file gap. */
            : this.pos.next.startRhs - lines.length /* start-of-file gap */;
        lineno.length = 0;
        for( i = startLnR; i < startLnR + lines.length; ++i ){
          /* TODO? space-pad numbers, but we don't know the proper length from here. */
          lineno.push(i);
        }
        row.preLnR.innerText = lineno.join('\n')+'\n';
        this.e.tr.parentNode.insertBefore(row.tr, this.e.tr);
        Diff.initTableDiff(this.e.table/*fix scrolling*/).checkTableWidth(true);
        this.destroy();
        return this;
      }else{
        console.debug("TODO: handle load of partial next/prev");
        this.updatePosDebug();
      }
    },

    fetchChunk: function(direction/*-1=prev, 1=next, 0=both*/){
      /* Forewarning, this is a bit confusing: when fetching the
         previous lines, we're doing so on behalf of the *next* diff
         chunk (this.pos.next), and vice versa. */
      if(this.$isFetching){
        console.debug("Cannot load chunk while a load is pending.");
        return this;
      }
      if(direction<0/*prev chunk*/ && !this.pos.next){
        console.error("Attempt to fetch previous diff lines but don't have any.");
        return this;
      }else if(direction>0/*next chunk*/ && !this.pos.prev){
        console.error("Attempt to fetch next diff lines but don't have any.");
        return this;
      }
      console.debug("Going to fetch in direction",direction);
      const fOpt = {
        urlParams:{
          name: this.fileHash, from: 0, to: 0
        },
        aftersend: ()=>delete this.$isFetching
      };
      const self = this;
      if(direction!=0){
        console.debug("Skipping fetch for now.");
        return this;
      }else{
        fOpt.urlParams.from = this.pos.startLhs;
        fOpt.urlParams.to = this.pos.endLhs;
        fOpt.onload = function(list){
          self.injectResponse(direction,fOpt.urlParams,list);
        };
      }
      this.$isFetching = true;
      Diff.fetchArtifactChunk(fOpt);
      return this;
    }
  };

  Diff.addDiffSkipHandlers = function(){
    const tables = document.querySelectorAll('table.diff[data-lefthash]:not(.diffskipped)');
    /* Potential performance-related TODO: instead of installing all