vertical-align: top;
}
table.diff pre {
  margin: 0 0 0 0;
}
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;



}
tr.diffskip.jchunk > td {
  padding: 0.25em 0.5em;
  margin: 0;
}
tr.diffskip.jchunk:hover {
  /*background-color: rgba(127,127,127,0.5);
  cursor: pointer;*/
}
tr.diffskip > td.chunkctrl {
  text-align: left;
  font-family: monospace;
}
tr.diffskip > td.chunkctrl > div {
  /* Exists solely for layout purposes. */



}
tr.diffskip > td.chunkctrl .button {
  min-width: 2.5em;
  max-width: 2.5em;
  text-align: center;
  display: inline-block;
  padding: 0.1em 1em;

    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{
      /* Figure out which chunk-load buttons to add... */
      if(this.pos.prev){
        btnDown = D.append(
          D.addClass(D.span(), 'button', 'down'),
          D.span(/*glyph holder*/)
          //D.append(D.span(), this.config.glyphDown)
        );
      }
      if(this.pos.next){
        btnUp = D.append(
          D.addClass(D.span(), 'button', 'up'),
          D.span(/*glyph holder*/)
          //D.append(D.span(), this.config.glyphUp)
        );
      }
    }
    if(btnDown){
      D.append(this.e.btnWrapper, btnDown);
      btnDown.addEventListener('click', ()=>this.fetchChunk(1),false);
    }

            trNext = this.e.tr.nextElementSibling,
            doAppend = !!trPrev /* true to append to previous TR, else prepend to NEXT TR */;
      const tr = trPrev || trNext;
      if(0!==direction){
        console.error("this case is not yet handled",arguments);
        return this;
      }

      const joinTr = (0===direction && trPrev && trNext);



      let i, td;

      if(1){ // LHS line numbers...
        const selector = '.difflnl > pre';
        td = tr.querySelector(selector);
        for( i = urlParam.from; i <= urlParam.to; ++i ){
          lineno.push(i);
        }
        const lineNoTxt = lineno.join('\n')+'\n';
        const content = [];
        if(doAppend) content.push(td.innerHTML, lineNoTxt);
        else content.push(lineNoTxt, td.innerHTML);
        if(joinTr){
          content.push(trNext.querySelector(selector).innerHTML);
        }
        td.innerHTML = content.join('');
      }

      if(1){// code block...
        const selector = '.difftxt > pre';
        td = tr.querySelectorAll(selector);
        const code = D.append(D.div(),lines.join('\n')+'\n').innerText;
        let joinNdx = 0;
        td.forEach(function(e){
          const content = [];
          if(doAppend) content.push(e.innerHTML, code);
          else content.push(code, e.innerHTML);
          if(joinTr){
            content.push(trNext.querySelectorAll(selector)[joinNdx++].innerHTML)
          }
          e.innerHTML = content.join('');
        });
      }

      if(1){
        // Add blank lines in (.diffsep>pre)
        const selector = '.diffsep > pre';
        td = tr.querySelector(selector);
        for(i = 0; i < lineno.length; ++i) lineno[i] = '';
        const blanks = lineno.join('\n')+'\n';
        const content = [];
        if(doAppend) content.push(td.innerHTML, blanks);
        else content.push(blanks, td.innerHTML);
        if(joinTr){
          content.push(trNext.querySelector(selector).innerHTML);
        }
        td.innerHTML = content.join('');
      }

      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);
        }
        const selector = '.difflnr > pre';
        td = tr.querySelector(selector);
        const lineNoTxt = lineno.join('\n')+'\n';

        const content = [];
        if(doAppend) content.push(td.innerHTML, lineNoTxt);
        else content.push(lineNoTxt, td.innerHTML);
        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{
        console.debug("TODO: handle load of partial next/prev");
        this.updatePosDebug();
      }

      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);
        };

      });
    });
    return F;
  };
  Diff.addDiffSkipHandlers();
});

/**
   2021-09-07: refactoring the following for use in the higher-level
   fossil.*.js framework is pending. For now it's a copy/paste copy
   of diff.js.
*/
/* 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
** display, scrollbars are added.  The scrollbars are linked, so that