tr.row0 {
  /* use default */
}
/* odd table row color */
tr.row1 {
  /* Use default */
}

  { "logo-mimetype",          CONFIGSET_SKIN },
  { "logo-image",             CONFIGSET_SKIN },
  { "background-mimetype",    CONFIGSET_SKIN },
  { "background-image",       CONFIGSET_SKIN },
  { "timeline-block-markup",  CONFIGSET_SKIN },
  { "timeline-max-comment",   CONFIGSET_SKIN },
  { "timeline-plaintext",     CONFIGSET_SKIN },
  { "timeline-rail-arrows",   CONFIGSET_SKIN },
  { "timeline-rail-circles",  CONFIGSET_SKIN },
  { "timeline-rail-colors",   CONFIGSET_SKIN },
  { "adunit",                 CONFIGSET_SKIN },
  { "adunit-omit-if-admin",   CONFIGSET_SKIN },
  { "adunit-omit-if-user",    CONFIGSET_SKIN },
  { "white-foreground",       CONFIGSET_SKIN },

#ifdef FOSSIL_ENABLE_TH1_DOCS
  { "th1-docs",               CONFIGSET_TH1 },

  Blob sql;
  HQuery url;
  GraphContext *pGraph;
  int brBg = P("brbg")!=0;
  int uBg = P("ubg")!=0;
  int fDebug = atoi(PD("debug","0"));
  int fShowId = P("showid")!=0;
  int showRailArrows = db_get_boolean("timeline-rail-arrows", 1);
  int showRailCircles = db_get_boolean("timeline-rail-circles", 0);
  int showRailColors = db_get_boolean("timeline-rail-colors", 0);

  login_check_credentials();
  if( !g.perm.Read ){ login_needed(g.anon.Read); return; }
  style_header("File History");
  login_anonymous_available();
  url_initialize(&url, "finfo");
  if( brBg ) url_add_parameter(&url, "brbg", 0);

      int w = pGraph->mxRail*pGraph->iRailPitch + 28;
      @ <tr><td></td><td>
      @ <div id="grbtm" style="width:%d(w)px;"></div>
      @     </td><td></td></tr>
    }
  }
  @ </table>
  timeline_output_graph_javascript(pGraph, 0, 1, showRailArrows,
    showRailCircles, showRailColors);
  style_footer();
}

{ "logo-mimetype",          CONFIGSET_SKIN },
{ "logo-image",             CONFIGSET_SKIN },
{ "background-mimetype",    CONFIGSET_SKIN },
{ "background-image",       CONFIGSET_SKIN },
{ "timeline-block-markup",  CONFIGSET_SKIN },
{ "timeline-max-comment",   CONFIGSET_SKIN },
{ "timeline-plaintext",     CONFIGSET_SKIN },
{ "timeline-rail-arrows",   CONFIGSET_SKIN },
{ "timeline-rail-circles",  CONFIGSET_SKIN },
{ "timeline-rail-colors",   CONFIGSET_SKIN },
{ "adunit",                 CONFIGSET_SKIN },
{ "adunit-omit-if-admin",   CONFIGSET_SKIN },
{ "adunit-omit-if-user",    CONFIGSET_SKIN },
{ "white-foreground",       CONFIGSET_SKIN },

{ "project-name",           CONFIGSET_PROJ },
{ "short-project-name",     CONFIGSET_PROJ },

  @ <hr />
  onoff_attribute("Plaintext comments on timelines",
                  "timeline-plaintext", "tpt", 0, 0);
  @ <p>In timeline displays, check-in comments are displayed literally,
  @ without any wiki or HTML interpretation.  (Note: Use CSS to change
  @ display formatting features such as fonts and line-wrapping behavior.)</p>

  @ <hr />
  onoff_attribute("Show branch rail arrowheads",
                  "timeline-rail-arrows", "tra", 1, 0);
  @ <p>The rail (line) that connects check-ins may optionally display an
  @ arrowhead indicating the linear progression of changes.</p>

  @ <hr />
  onoff_attribute("Show check-in timeline nodes as circles",
                  "timeline-rail-circles", "trc", 0, 0);
  @ <p>By default, Fossil will display check-nodes as squares. Alternatively you
  @ may prefer to display them as circles.</p>

  @ <hr />
  onoff_attribute("Use branch background color for branch rails",
                  "timeline-rail-colors", "trl", 0, 0);
  @ <p>Fossil will display your branch rails using the color defined for the
  @ branch background.  (Note: Branch background colors may not have enough
  @ contrast to be easily distinguishable from the timeline background.</p>

  @ <hr />
  onoff_attribute("Use Universal Coordinated Time (UTC)",
                  "timeline-utc", "utc", 1, 0);
  @ <p>Show times as UTC (also sometimes called Greenwich Mean Time (GMT) or
  @ Zulu) instead of in local time.  On this server, local time is currently
  tmDiff = db_double(0.0, "SELECT julianday('now')");
  tmDiff = db_double(0.0,

    @ /* Use default */
  },
  { "#usetupEditCapability",
    "format for capabilities string, mentioned on the user edit page",
    @ font-weight: bold;
  },
  { "#canvas", "timeline graph node colors",
    @ color: black;             /* default rail/line color */
    @ background-color: white;  /* default branch node/box color */
    @ border-color: black;      /* leaf indicator color */
    @ outline-color: black;     /* node/box border color */
  },
  { "table.adminLogTable",
    "Class for the /admin_log table",
    @ text-align: left;
  },
  { ".adminLogTable .adminTime",
    "Class for the /admin_log table",

  Stmt *pQuery,          /* Query to implement the timeline */
  int tmFlags,           /* Flags controlling display behavior */
  const char *zThisUser, /* Suppress links to this user */
  const char *zThisTag,  /* Suppress links to this tag */
  int selectedRid,       /* Highlight the line with this RID value */
  void (*xExtra)(int)    /* Routine to call on each line of display */
){
  int showRailArrows;
  int showRailCircles;
  int showRailColors;
  int mxWikiLen;
  Blob comment;
  int prevTagid = 0;
  int suppressCnt = 0;
  char zPrevDate[20];
  GraphContext *pGraph = 0;
  int prevWasDivider = 0;     /* True if previous output row was <hr> */
  int fchngQueryInit = 0;     /* True if fchngQuery is initialized */
  Stmt fchngQuery;            /* Query for file changes on check-ins */
  static Stmt qbranch;
  int pendingEndTr = 0;       /* True if a </td></tr> is needed */
  int vid = 0;                /* Current checkout version */
  int dateFormat = 0;         /* 0: HH:MM (default) */
  const char *zDateFmt;

  if( fossil_strcmp(g.zIpAddr, "127.0.0.1")==0 && db_open_local(0) ){
    vid = db_lget_int("checkout", 0);
  }
  zPrevDate[0] = 0;
  showRailArrows = db_get_boolean("timeline-rail-arrows", 1);
  showRailCircles = db_get_boolean("timeline-rail-circles", 0);
  showRailColors = db_get_boolean("timeline-rail-colors", 0);
  mxWikiLen = db_get_int("timeline-max-comment", 0);
  dateFormat = db_get_int("timeline-date-format", 0);
  zDateFmt = P("datefmt");
  if( zDateFmt ) dateFormat = atoi(zDateFmt);
  if( tmFlags & TIMELINE_GRAPH ){
    pGraph = graph_init();
    /* style is not moved to css, because this is

      @ <tr><td></td><td>
      @ <div id="grbtm" style="width:%d(w)px;"></div>
      @ </td><td></td></tr>
    }
  }
  @ </table>
  if( fchngQueryInit ) db_finalize(&fchngQuery);
  timeline_output_graph_javascript(pGraph, (tmFlags & TIMELINE_DISJOINT)!=0, 0,
    showRailArrows, showRailCircles, showRailColors);
}

/*
** Generate all of the necessary javascript to generate a timeline
** graph.
*/
void timeline_output_graph_javascript(
  GraphContext *pGraph,     /* The graph to be displayed */
  int omitDescenders,       /* True to omit descenders */
  int fileDiff,             /* True for file diff.  False for check-in diff */
  int showRailArrows,       /* True to render rail arrow heads */
  int showRailCircles,      /* True to render circles instead of squares */
  int showRailColors        /* True to color rails by the branch background */
){
  if( pGraph && pGraph->nErr==0 && pGraph->nRow>0 ){
    GraphRow *pRow;
    int i;
    char cSep;
    int mergeOffset;     /* Pixel offset from rail to merge riser */
    int iRailPitch;      /* Pixels between consecutive rails */

    cgi_printf("var nrail = %d\n", pGraph->mxRail+1);
    graph_free(pGraph);
    @ var cDiv = gebi("canvas");
    @ var csty = window.getComputedStyle && window.getComputedStyle(cDiv,null);
    @ var lineClr = (csty && csty.getPropertyValue('color')) || 'black';
    @ var bgClr = (csty && csty.getPropertyValue('background-color')) ||'white';
    @ if( bgClr=='transparent' ) bgClr = 'white';
    @ var boxColor = (csty && csty.getPropertyValue('outline-color')) ||lineClr;
    @ var leafColor = (csty && csty.getPropertyValue('border-color')) ||lineClr;
    @ function drawBox(color,x0,y0,x1,y1){
    @   var n = document.createElement("div");
    @   if( x0>x1 ){ var t=x0; x0=x1; x1=t; }
    @   if( y0>y1 ){ var t=y0; y0=y1; y1=t; }
    @   var w = x1-x0+1;
    @   var h = y1-y0+1;
    @   n.style.position = "absolute";

    @   if( obj.offsetParent ){
    @     do{
    @       left += obj.offsetLeft;
    @     }while( obj = obj.offsetParent );
    @   }
    @   return left;
    @ }
    @ function getRailColor(clr){
    @   var railClr = lineClr;
    if( showRailColors ) {
      @   if ( bgClr == clr ) railClr = lineClr;
      @   railClr = clr||railClr;
    }
    @   return railClr;
    @ }
    @ function drawRail(x,y0,y1,clr){
    @   var railClr = getRailColor(clr);
    @   drawBox(railClr,x,y0+1,x+1,y1);
    @   var n = document.createElement("div"),
    @       l = x-2,
    @       t = y0;
    if( showRailArrows ){
      @   n.style.position = "absolute";
      @   n.style.left = l+"px";
      @   n.style.top = t+"px";
      @   n.style.width = 0;
      @   n.style.height = 0;
      @   n.style.transform = "scale(.999)";
      @   n.style.borderWidth = 0;
      @   n.style.borderStyle = "solid";
      @   n.style.borderColor = "transparent";
      @   n.style.borderRightWidth = "3px";
      @   n.style.borderBottomColor = railClr;
      @   n.style.borderLeftWidth = "3px";
      @   if( y0+10>=y1 ){
      @     n.style.borderBottomWidth = "5px";
      @   } else {
      @     n.style.borderBottomWidth = "7px";
      @   }
      @   cDiv.appendChild(n);
    }
    @ }
    @ function drawThinArrow(y,xFrom,xTo){
    @   var n = document.createElement("div"),
    @       t = y-2;
    @   n.style.position = "absolute";
    @   n.style.top = t+"px";
    @   n.style.width = 0;

    @   }
    @   cDiv.appendChild(n);
    @ }
    @ function drawThinLine(x0,y0,x1,y1){
    @   drawBox(lineClr,x0,y0,x1,y1);
    @ }
    @ function drawNodeBox(color,x0,y0,x1,y1){
    @   var n = drawBox(color,x0,y0,x1,y1);
    @   n.style.cursor = "pointer";
    if( showRailCircles ){
      @   n.style.borderRadius = "6px";
    }
    @ }
    @ function drawNode(p, left, btm){
    @   /* Current CheckIn node */
    @   drawNodeBox(boxColor,p.x-5,p.y-5,p.x+6,p.y+6);
    @   drawNodeBox(p.bg||bgClr,p.x-4,p.y-4,p.x+5,p.y+5);

    @   /* Leaf indicator for CheckIn node */
    @   if( p.f&1 ) drawNodeBox(leafColor,p.x-1,p.y-1,p.x+2,p.y+2);
    @   /* Branch rail to CheckIn's node */
    @   if( p.u>0 ) drawRail(p.x, rowinfo[p.u-1].y+6, p.y-6, rowinfo[p.u-1].bg);
    if( !omitDescenders ){
      @   /* Branch rails from bottom or to top of page */
      @   if( p.u==0 ) drawRail(p.x, 0, p.y-6,p.bg);
      @   if( p.d ) drawRail(p.x, p.y+6, btm,p.bg);
    }
    @   /* MergeOut horizontal rail */
    @   if( p.mo>0 ){
    @     var x1 = p.mo + left - 1;
    @     var y1 = p.y-3;
    @     var x0 = x1>p.x ? p.x+6 : p.x-6;
    @     var u = rowinfo[p.mu-1];
    @     var y0 = u.y+5;
    @     if( x1>=p.x-5 && x1<=p.x+5 ){
    @       y1 = p.y-5;
    @     }else{
    @       drawThinLine(x0,y1,x1,y1);
    @     }
    if( mergeOffset==0 ) cgi_printf("if( p.mo!=p.u-1 ) ");
    @     drawThinLine(x1,y0,x1,y1);
    @   }
    @   var n = p.au.length;
    @   for(var i=0; i<n; i+=2){
    @     var x1 = p.au[i]*railPitch + left;
    @     var x0 = x1>p.x ? p.x+7 : p.x-6;
    @     var u = rowinfo[p.au[i+1]-1];
    @     if(u.id<p.id){
    @       /* Branch rail */
    @       var railClr = getRailColor(u.bg);
    @       drawBox(railClr,x0,p.y,x1+1,p.y+1);
    @       drawRail(x1, u.y+6, p.y, u.bg);
    @     }else{
    @       /* Timewarp rail */
    @       drawBox("#600000",x0,p.y,x1,p.y+1);
    @       drawBox("#600000",x1-1,p.y,x1,u.y+1);
    @       drawBox("#600000",x1,u.y,u.x-10,u.y+1);
    @       var n = document.createElement("div"),
    @           t = u.y-2,
    @           l = u.x-11;
    @       n.style.position = "absolute";

    @       n.style.borderTopWidth = "3px";
    @       n.style.borderBottomWidth = "3px";
    @       n.style.borderLeftWidth = "7px";
    @       n.style.borderLeftColor = "#600000";
    @       cDiv.appendChild(n);
    @     }
    @   }
    @   /* MergeIn rails & arrows */
    @   for(var j in p.mi){
    @     var y0 = p.y+5;
    @     var mx = p.mi[j];
    @     if( mx<0 ){
    @       mx = left-mx;
    @       drawThinLine(mx,y0,mx,btm);
    @     }else{

    @       break;
    @     }
    @   }
    @ }
    @ function clickOnRow(p){
    @   if( selRow==null ){
    @     selBox = drawBox("red",p.x-2,p.y-2,p.x+3,p.y+3);
    if( showRailCircles ){
      @   selBox.style.borderRadius="6px";
    }
    @     selRow = p;
    @   }else if( selRow==p ){
    @     var canvasDiv = gebi("canvas");
    @     canvasDiv.removeChild(selBox);
    @     selBox = null;
    @     selRow = null;
    @   }else{