border-radius: 0;
  border-width: 0;
}
tr.timelineCurrent td {
  border-radius: 0;
  border-width: 0;
}
.timelineFocused,
.timelineFocused a {
  color: #fff1a8 !important;
  background-color: #3a6ea5 !important;
}
.timelineFocused a:link,
.timelineFocused a:focus,
.timelineFocused a:active,
.timelineFocused a:visited {
  text-decoration: underline;
}
.timelineFocused a:hover {
  text-decoration: none;
}
span.timelineLeaf {
  font-weight: bold;
}
span.timelineHistDsp {
  font-weight: bold;
}
td.timelineTime {

    var dataObj = document.getElementById("timeline-data-"+i);
    if(!dataObj) break;
    var txJson = dataObj.textContent || dataObj.innerText;
    var tx = JSON.parse(txJson);
    TimelineGraph(tx);
  }
}());

/*
** Timeline keyboard navigation shortcuts:
**
** ### NOTE: The keyboard shortcuts are listed in the /timeline help screen. ###
**
** When navigating to a page with a timeline display, such as /timeline, /info,
** or /finfo, keyboard navigation mode needs to be "activated" first, i.e. if no
** timeline entry is focused yet, pressing any of the listed keys (except ESC)
** sets the visual focus indicator to the highlighted or current (check-out)
** entry if available, or to the topmost entry otherwise. A session cookie[0] is
** used to direct pages loaded in the future to enable keyboard navigation mode
** and automatically set the focus indicator to the highlighted, current, or
** topmost entry. Pressing N and M on the /timeline page while the topmost or
** bottommost entry is focused loads the next or previous page if available,
** similar to the [↑ More] and [↓ More] links. Pressing ESC disables keyboard
** navigation, i.e. removes the focus indicator and deletes the session cookie.
** When navigating backwards or forwards in browser history, the focused entry
** is restored using a hidden[1] input field.
**
** [0]: The lifetime and values of cookies can be tracked on the /cookies page.
** A session cookie is preferred over other storage APIs because Fossil already
** requires cookies to be enabled for reasonable functionality, and it's more
** likely that other storage APIs are blocked by users for privacy reasons, for
** example.
** [1]: This feature only works with a normal (text) input field hidden by CSS
** styles, instead of a true hidden (by type) input field, but according to MDN,
** screen readers should ignore it even without an aria-hidden="true" attribute
** (which is even discouraged for hidden by CSS elements). Also, this feature
** breaks if disabled[=true] or tabindex="-1" attributes are added to the input
** field, or (in FF) if page unload handlers are present.
**
** Ideas and TODOs:
**
**  o kTMLN: ensure the correct page is opened when used from /finfo (it seems
**    the tooltip also gets this "wrong", but maybe that's acceptable, because
**    in order to be able to construct /file URLs, the information provided by
**    the timeline-data-N blocks would have to be extended).
**  o kFRST, kLAST: check if the previous/next page should be opened if focus is
**    already at the top/bottom. UPDATE: the current behavior seems to be "more
**    predictable", i.e. these shortcuts reliably focus the top/bottom item.
**  o Shortcut(s) to (re)load /timeline with different View Style or Entry Limit
**    by appending query parameters `&ss={ViewStyle}&n={EntryLimit±N}&udc=1' to
**    the URL; alternatively set keyboard focus to the "View Style" <select> or
**    to the "Max:" <input> field.
**  o Auto-expand the hidden details (hash, user, tags) for focused entries in
**    Compact View (by inheritance via CSS class `.timelineFocused').
**  o Shortcut(s) to (re)load /ckout (with or without `exbase' query parameter).
*/
(function(){
  window.addEventListener('load',function(){
// "Primary" (1) and "secondary" (2) selections swapped compared to CSS classes:
// (1)  .timelineSecondary →
//          /vdiff?to=, /timeline?sel2=
// (2)  .timelineSelected:not(.timelineSecondary) →
//          /vdiff?from=, /timeline?c=, /timeline?sel1=
    function focusDefaultId(){
      var tn = document.querySelector('.timelineSecondary .tl-nodemark')
                || document.querySelector(
                    '.timelineSelected:not(.timelineSecondary) .tl-nodemark')
                || document.querySelector('.timelineCurrent .tl-nodemark');
      return tn ? tn.id : 'm1';
    }
    function focusSelectedId(){
      var tn = document.querySelector('.timelineSecondary .tl-nodemark');
      return tn ? tn.id : null;
    }
    function focus2ndSelectedId(){
      var tn = document.querySelector(
                '.timelineSelected:not(.timelineSecondary) .tl-nodemark');
      return tn ? tn.id : null;
    }
    function focusCurrentId(){
      var tn = document.querySelector('.timelineCurrent .tl-nodemark');
      return tn ? tn.id : null;
    }
    function focusTickedId(){
      var nd = document.querySelector('.tl-node.sel');
      return nd ? 'm' + nd.id.slice(3) : null;
    }
    function focusFirstId(id){
      return 'm1';
    }
    function focusLastId(id){
      var el = document.getElementsByClassName('tl-nodemark');
      var tn = el ? el[el.length-1] : null;
      return tn ? tn.id : id;
    }
    function focusNextId(id,dx){
      if( dx<-1 ) return focusFirstId(id);
      if( dx>+1 ) return focusLastId(id);
      var m = /^m(\d+)$/.exec(id);
      return m!==null ? 'm' + (parseInt(m[1]) + dx) : null;
    }
    // NOTE: This code relies on `getElementsByClassName()' returning elements
    // in document order; however, attempts to use binary searching (using the
    // signed distance to the vertical center) or 2-pass searching (to get the
    // 1000-block first) didn't yield any significant speedups -- probably the
    // calls to `getBoundingClientRect()' are cached because `initGraph()' has
    // already done so, or because they depend on their previous siblings, and
    // so `e(N).getBoundingClientRect()' ≈ `e(0..N).getBoundingClientRect()'?
    function focusViewportCenterId(){
      var
        fe = null,
        fd = 0,
        wt = 0,
        wb = wt + window.innerHeight,
        wc = wt + window.innerHeight/2,
        el = document.getElementsByClassName('timelineGraph');
      for( var i=0; i<el.length; i++ ){
        var
          rc = el[i].getBoundingClientRect(),
          et = rc.top,
          eb = rc.bottom;
        if( (et>=wt && et<=wb) || (eb>=wt && eb<=wb) ){
          var ed = Math.min(Math.abs(et-wc),Math.abs(eb-wc));
          if( !fe || ed<fd ){
            fe = el[i];
            fd = ed;
          }
          else break;
        }
      }
      return fe ? fe.querySelector('.tl-nodemark').id : null;
    }
    function timelineGetDataBlock(i){
      var tb = document.getElementById('timeline-data-' + i);
      return tb ? JSON.parse(tb.textContent || tb.innerText) : null;
    }
    function timelineGetRowInfo(id){
      var ti;
      for(var i=0; ti=timelineGetDataBlock(i); i++){
        // NOTE: `ti.rowinfo' only available if data block contains check-ins.
        for( var k=0; ti.rowinfo && k<ti.rowinfo.length; k++ ){
          if( id=='m' + ti.rowinfo[k].id ) return {
            'baseurl': ti.baseUrl,
            'filehash': ti.fileDiff,
            'hashdigits': ti.hashDigits,
            'hash': ti.rowinfo[k].h,
            'branch': ti.rowinfo[k].br
          };
        }
      }
      return null;
    }
    function fossilScrollIntoView(e){
      var y = 0;
      do{
        y += e.offsetTop;
      }while( e = e.offsetParent );
      window.scrollTo(0,y-window.innerHeight/2);
    }
    function focusVisualize(id,scroll){
      var td = document.querySelector('.timelineFocused');
      if( td ) td.classList.remove('timelineFocused');
      if( !id ) return true;
      var tn = document.getElementById(id);
      if( tn ){
        td = tn.parentElement.nextElementSibling;
        if( td ) {
          td.classList.add('timelineFocused');
          if( scroll ) fossilScrollIntoView(td);
          return true;
        }
      }
      return false;
    }
    function focusCacheInit(){
      var e = document.getElementById('timeline-kbfocus');
      if( !e ){
        e = document.createElement('input');
        e.type = 'text';
        e.style.display = 'none';
        e.style.visibility = 'hidden';
        e.id = 'timeline-kbfocus';
        document.body.appendChild(e);
      }
    }
    function focusCacheGet(){
      var e = document.getElementById('timeline-kbfocus');
      return e ? e.value : null;
    }
    function focusCacheSet(v){
      var e = document.getElementById('timeline-kbfocus');
      if( e ) e.value = v;
    }
    function focusCookieInit(){
      document.cookie = 'fossil_timeline_kbnav=1;path=/';
    }
    function focusCookieClear(){
      document.cookie =
        'fossil_timeline_kbnav=;expires=Thu, 01 Jan 1970 00:00:01 GMT;path=/';
    }
    function focusCookieQuery(){
      return document.cookie.match(/fossil_timeline_kbnav=1/);
    }
    focusCacheInit();
    document.addEventListener('keydown',function(evt){
      if( evt.target.tagName=='INPUT' || evt.target.tagName=='SELECT' ) return;
      var
        mSHIFT = 1<<13,
        kFRST = mSHIFT | 78 /* SHIFT+N */,
        kNEXT = 78 /* N */,
        kPREV = 77 /* M */,
        kLAST = mSHIFT | 77 /* SHIFT+M */,
        kCYCL = 74 /* J */,
        kCNTR = 188 /* , */,
        kSCRL = mSHIFT | 74 /* SHIFT+J */,
        kTICK = 72 /* H */,
        kUNTK = mSHIFT | 72 /* SHIFT+H */,
        kCPYH = 66 /* B */,
        kCPYB = mSHIFT | 66 /* SHIFT+B */,
        kTMLN = 76 /* L */,
        kTMLB = mSHIFT | 76 /* SHIFT+L */,
        kVIEW = 75 /* K */,
        kVDEF = 71 /* G */,
        kVCUR = mSHIFT | 71 /* SHIFT+G */,
        kDONE = 27 /* ESC */,
        mod = evt.altKey<<15|evt.ctrlKey<<14|evt.shiftKey<<13|evt.metaKey<<12,
        key = ( evt.which || evt.keyCode ) | mod;
      var dx = 0;
      switch( key ){
        case kFRST: dx = -2; break;
        case kNEXT: dx = -1; break;
        case kPREV: dx = +1; break;
        case kLAST: dx = +2; break;
        case kCYCL:
        case kCNTR:
        case kSCRL:
        case kTICK:
        case kUNTK:
        case kCPYH:
        case kCPYB:
        case kTMLN:
        case kTMLB:
        case kVIEW:
        case kVDEF:
        case kVCUR:
        case kDONE: break;
        default: return;
      }
      evt.preventDefault();
      evt.stopPropagation();
      if( key==kCNTR ){
        var cid = focusViewportCenterId();
        if( cid ){
          focusCacheSet(cid);
          focusVisualize(cid,false);
          focusCookieInit();
        }
        return;
      }
      else if( key==kSCRL ){
        var td = document.querySelector('.timelineFocused');
        if( td ) fossilScrollIntoView(td);
        return;
      }
      else if( key==kUNTK ){
        var tid = focusTickedId();
        if( tid ){
          var gn = document.getElementById('tln'+tid.slice(1));
          if( gn ) gn.click();
        }
        return;
      }
      else if( key==kCPYH || key==kCPYB ){
        var fid = focusCacheGet();
        if( fid ){
          var ri = timelineGetRowInfo(fid);
          if( ri ){
            copyTextToClipboard(
              key==kCPYH ? ri.hash.slice(0,ri.hashdigits) : ri.branch);
          }
        }
        return;
      }
      else if( key==kVDEF || key==kVCUR ){
        var ri = timelineGetRowInfo('m1');
        if( ri ){
          var page;
          switch( key ){
            case kVDEF:
              page = '/timeline';
              break;
            case kVCUR:
              page = '/timeline?c=current';
              break;
          }
          var href = ri.baseurl + page;
          if( href!=location.href.slice(-href.length) ) location.href = href;
        }
        return;
      }
      else if( key==kDONE ){
        focusCacheSet(null);
        focusVisualize(null,false);
        focusCookieClear();
        return;
      }
      focusCookieInit();
      var id = focusCacheGet();
      if( id && dx==0 ){
        if( key==kCYCL ){
          function uniqIds(){
            var a = Array.prototype.slice.call(arguments,0), k=[], v=[];
            for( var i=0; i<a.length; i++ ){
              if( a[i] && !(a[i] in k) ){
                k[a[i]] = 1;
                v.push(a[i]);
              }
            }
            return v;
          }
          var ids = uniqIds(
            focusTickedId(),
            focusSelectedId(),
            focus2ndSelectedId(),
            focusCurrentId()
          );
          if( ids.length>1 ){
            var m = 0;
            for( var i=0; i<ids.length; i++ ){
              if( id==ids[i] ){
                m = i<ids.length-1 ? i+1 : 0;
                break;
              }
            }
            id = ids[m];
          }
          else if( ids.length==1 ) id = ids[0];
        }
        else if( key==kTICK ){
          var gn = document.getElementById('tln'+id.slice(1));
          if( gn ) gn.click();
        }
        else/* if( key==kTMLN || key==kTMLB || key==kVIEW )*/{
          var ri = timelineGetRowInfo(id);
          if( ri ){
            var hh = encodeURIComponent(ri.hash.slice(0,ri.hashdigits));
            var br = encodeURIComponent(ri.branch);
            var page;
            switch( key ){
              case kTMLN:
                page = '/timeline' + ( ri.filehash ? '?m&cf=' : '?m&c=' ) + hh;
                break;
              case kTMLB:
                page = '/timeline?r=' + br +
                  ( ri.filehash ? '&m&cf=' : '&m&c=' ) + hh;
                break;
              case kVIEW:
                page = '/info/' + hh;
                break;
            }
            var href = ri.baseurl + page;
            if( href!=location.href.slice(-href.length) ){
              location.href = href;
              return;
            }
          }
        }
      }
      else if ( id && dx!=0 ){
        id = focusNextId(id,dx);
        if( id && !document.getElementById(id) ){
          var btn =
            document.querySelector('.tl-button-' + ( dx>0 ? 'prev' : 'next' ));
          if( btn ) btn.click();
          return;
        }
      }
      else if ( !id ) id = focusDefaultId();
      focusCacheSet(id);
      focusVisualize(id,true);
    }/*,true*/);
    // NOTE: To be able to override the default CTRL+CLICK behavior (to "select"
    // the elements, indicated by an outline) for normal (non-input) elements in
    // FF it's necessary to listen to `mousedown' instead of `click' events.
    window.addEventListener('mousedown',function(evt){
      var
        bMAIN = 0,
        mCTRL = 1<<14,
        mod = evt.altKey<<15|evt.ctrlKey<<14|evt.shiftKey<<13|evt.metaKey<<12;
      if( evt.target.tagName in { 'INPUT':1, 'SELECT':1, 'A':1 } ||
          evt.button!=bMAIN || mod!=mCTRL ){
        return;
      }
      var e = evt.target;
      while( e && !/\btimeline\w+Cell\b/.test(e.className) ){
        e = e.parentElement;
      }
      if( e && (e = e.previousElementSibling.querySelector('.tl-nodemark')) ){
        evt.preventDefault();
        evt.stopPropagation();
        focusCacheSet(e.id);
        focusVisualize(e.id,false);
      }
    },false);
    window.addEventListener('pageshow',function(evt){
      var id = focusCacheGet();
      if( !id || !focusVisualize(id,false) ){
        if( focusCookieQuery() ){
          id = focusDefaultId();
          focusCacheSet(id);
          focusVisualize(id,false);
        }
      }
    },false);
  },false);
}());

**
** When multiple time-related filters are used, e.g. ym, yw, and ymd,
** which one(s) is/are applied is unspecified and may change between
** fossil versions.
**
** CHECKIN or TIMEORTAG can be a check-in hash prefix, or a tag, or the
** name of a branch.
**
** Keyboard navigation shortcuts:
**
**    N     Focus first (newest) entry.
**    n     Focus next (newer) entry, or open next page.
**    m     Focus previous (older) entry, or open previous page.
**    M     Focus last (oldest) entry.
**    j     Move focus between selected, current (check-out) and ticked entries.
**    ,     Focus entry closest to center of viewport.
**    Ctrl+Click
**          Focus clicked entry.
**    J     Scroll to focused entry.
**    h     Tick/untick focused entry, or open diff if two entries ticked.
**    H     Untick all entries.
**    b     Copy commit hash of focused entry to clipboard.
**    B     Copy branch name of focused entry to clipboard.
**    l     View timeline of focused entry.
**    L     View timeline of focused entry filtered by branch.
**    k     View details of focused entry.
**    g     View default timeline.
**    G     View timeline around current (check-out) entry.
**    ESC   Disable keyboard navigation mode.
*/
void page_timeline(void){
  Stmt q;                            /* Query used to generate the timeline */
  Blob sql;                          /* text of SQL used to generate timeline */
  Blob desc;                         /* Description of the timeline */
  int nEntry;                        /* Max number of entries on timeline */
  int p_rid;                         /* artifact p and its parents */

  /* Report any errors. */
  if( zError ){
    @ <p class="generalError">%h(zError)</p>
  }

  if( zNewerButton ){
    @ %z(chref("button","%s",zNewerButton))%h(zNewerButtonLabel)\
    @ %z(chref("button tl-button-next","%s",zNewerButton))%h(zNewerButtonLabel)\
    @ &nbsp;&uarr;</a>
  }
  cgi_check_for_malice();
  {
    Matcher *pLeftBranch;
    const char *zPattern = P("sl");
    if( zPattern!=0 ){

    }
    www_print_timeline(&q, tmFlags, zThisUser, zThisTag, pLeftBranch,
                       selectedRid, secondaryRid, 0);
    match_free(pLeftBranch);
  }
  db_finalize(&q);
  if( zOlderButton ){
    @ %z(chref("button","%s",zOlderButton))%h(zOlderButtonLabel)\
    @ %z(chref("button tl-button-prev","%s",zOlderButton))%h(zOlderButtonLabel)\
    @ &nbsp;&darr;</a>
  }
  document_emit_js(/*handles pikchrs rendered above*/);
  blob_reset(&sql);
  blob_reset(&desc);
  style_finish_page();
}