table.diff pre {
  margin: 0 0 0 0;
}
tr.diffskip.jchunk:hover {
  /* jchunk gets added from JS to diffskip rows when they are
     plugged into the /jchunk route and removed after that data
     is fetched. */
}
tr.diffskip.jchunk:hover {
  /*background-color: rgba(127,127,127,0.5);
  cursor: pointer;*/
}
tr.diffskip > td.chunkctrl {
  text-align: left;
  font-family: monospace;
  /* Border is only for visibility during development. Remove it when done. */
  border-width: 1px;
  border-style: dotted;
}
tr.diffskip > td.chunkctrl > div {
  /* Exists solely for layout purposes. */
}
tr.diffskip > td.chunkctrl > div > .button {
  min-width: 2.5em;

  max-width: 2.5em;

  text-align: center;
  display: inline-block;
  padding: 0.1em 1em;
  margin: 0 1em 0 0;
  background-color: rgba(127,127,127,0.3);
  border-style: outset;
  border-width: 1px;
  border-color: rgba(0,0,0,0);
  border-radius: 0.5em;
}
tr.diffskip > td.chunkctrl > div > .button > span {
  /* In order to increase the glyph size w/o increasing the button size,
     we need an extra layer of DOM element for the glyph. */
  font-size: 150%;
}
tr.diffskip > td.chunkctrl > div > .button.up:not(.down){
  /* Simulate an error pointing up */
  border-radius: 3em 3em 0.25em 0.25em;
}
tr.diffskip > td.chunkctrl > div > .button.down:not(.up){
  /* Simulate an error pointing down */
  border-radius: 0.25em 0.25em 3em 3em;
}
tr.diffskip > td.chunkctrl > div > .button:hover {
  border-color: rgba(0,0,0,1);
  cursor: pointer;
}
td.diffln {
  width: 1px;
  text-align: right;
  padding: 0 1em 0 0;
}
td.difflne {

      }
    });
  };
  
  /**
     Installs chunk-loading controls into TR element tr. isSplit is true
     if the parent table is a split diff, else false.)


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

     https://github.com/msteveb/autosetup/commit/235925e914a52a542
  */
  Diff.ChunkLoadControls = function(isSplit, tr){
    this.isSplit = isSplit;
    this.e = {/*DOM elements*/};
    this.pos = {
      start: +tr.dataset.startln,
      end: +tr.dataset.endln
    };
    tr.$chunker = this /* keep GC from reaping this */;
    this.e.tr = tr;
    D.clearElement(tr);
    this.e.td = D.addClass(
      D.attr(D.td(tr), 'colspan', isSplit ? 5 : 4),
      'chunkctrl'
    );
    this.e.btnWrapper = D.div();
    D.append(this.e.td, this.e.btnWrapper);
    /**
       Depending on various factors, we need one of:

       - A single button to load all lines then remove this control

       - A single button to load the initial chunk

    }
    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;
    if(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. */
      btnDown = false;
      btnUp = D.append(
        D.addClass(D.span(), 'button', 'up', 'down'),
        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.append(D.span(), this.config.glyphDown)
        );
      }
      if(this.pos.next){
        btnUp = D.append(
          D.addClass(D.span(), 'button', 'up'),
          D.append(D.span(), this.config.glyphUp)
        );
      }
    }
    if(btnDown) D.append(this.e.btnWrapper, btnDown);
    if(btnUp) D.append(this.e.btnWrapper, btnUp);
    D.append(this.e.btnWrapper, D.append(D.span(), JSON.stringify(this.pos)));
  };

  Diff.ChunkLoadControls.prototype = {
    config: {
      glyphUp: '⇡', //'&#uarr;',
      glyphDown: '⇣' //'&#darr;'
    },
    destroy: function(){
      delete this.tr.$chunker;
      D.remove(this.tr);
    },
    /**
       Creates and returns 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).
    */
    newTR: function(){
      const tr = D.tr();
      if(this.isSplit){
        D.append(D.addClass( D.td(tr), 'diffln', 'difflnl' ), D.pre());
        D.append(D.addClass( D.td(tr), 'difftxt', 'difftxtl' ), D.pre());
        D.addClass( D.td(tr), 'diffsep' );
        D.append(D.addClass( D.td(tr), 'diffln', 'difflnr' ), D.pre());
        D.append(D.addClass( D.td(tr), 'difftxt', 'difftxtr' ), D.pre());
      }else{
        D.append(D.addClass( D.td(tr), 'diffln', 'difflnl' ), D.pre());
        D.append(D.addClass( D.td(tr), 'diffln', 'difflnr' ), D.pre());
        D.addClass( D.td(tr), 'diffsep' );
        D.append(D.addClass( D.td(tr), 'difftxt', 'difftxtu' ), D.pre());
      }
      return tr;
    }
  };

  Diff.addDiffSkipHandlers = function(){
    const tables = document.querySelectorAll('table.diff[data-lefthash]');
    if(!tables.length) return F;
    const addDiffSkipToTr = function f(isSplit, tr){
      D.addClass(tr, 'jchunk');



      //tr.addEventListener('click', f._handler, false);




      /* TODO/in progress... */
















      new Diff.ChunkLoadControls(isSplit, tr);
    };
    tables.forEach(function(table){
      table.querySelectorAll('tr.diffskip[data-startln]').forEach(function(tr){
        addDiffSkipToTr(table.classList.contains('splitdiff')/*else udiff*/, tr);
      });
    });