ADDED   src/copybtn.js
Index: src/copybtn.js
==================================================================
--- /dev/null
+++ src/copybtn.js
@@ -0,0 +1,135 @@
+/* Manage "Copy Buttons" linked to target elements, to copy the text (or, parts
+** thereof) of the target elements to the clipboard.
+**
+** Newly created buttons are <span> elements with an SVG background icon,
+** defined by the "copy-button" class in the default CSS style sheet.
+**
+** To simplify customization, the only properties modified for HTML-defined
+** buttons are the "onclick" handler, and the "transition" and "opacity" styles
+** (used for animation).
+**
+** For HTML-defined buttons, either initCopyButtonById(), or initCopyButton(),
+** needs to be called to attach the "onclick" handler (done automatically from
+** a handler attached to the "DOMContentLoaded" event).
+**
+** The initialization functions do not overwrite the "data-copytarget" and
+** "data-copylength" attributes with empty or null values for <idTarget> and
+** <cchLength>, respectively. Set <cchLength> to "-1" to explicitly remove the
+** previous copy length limit.
+**
+** HTML snippet for statically created buttons:
+**
+**    <span class="copy-button" id="idButton"
+**      data-copytarget="idTarget" data-copylength="cchLength"></span>
+*/
+function makeCopyButton(idButton,idTarget,cchLength){
+  var elButton = document.createElement("span");
+  elButton.className = "copy-button";
+  elButton.id = idButton;
+  initCopyButton(elButton,idTarget,cchLength);
+  return elButton;
+}
+function initCopyButtonById(idButton,idTarget,cchLength){
+  var elButton = document.getElementById(idButton);
+  if( elButton ) initCopyButton(elButton,idTarget,cchLength);
+  return elButton;
+}
+function initCopyButton(elButton,idTarget,cchLength){
+  elButton.style.transition = "";
+  elButton.style.opacity = 1;
+  if( idTarget ) elButton.setAttribute("data-copytarget",idTarget);
+  if( cchLength ) elButton.setAttribute("data-copylength",cchLength);
+  elButton.onclick = clickCopyButton;
+  return elButton;
+}
+onContentLoaded(function(){
+  var aButtons = document.getElementsByClassName("copy-button");
+  for ( var i=0; i<aButtons.length; i++ ){
+    initCopyButton(aButtons[i],0,0);
+  }
+});
+/* The onclick handler for the "Copy Button". */
+var lockCopyText = false;
+function clickCopyButton(e){
+  e.preventDefault();   /* Mandatory for <a> and <button>. */
+  e.stopPropagation();
+  if( lockCopyText ) return;
+  lockCopyText = true;
+  this.style.transition = "opacity 400ms ease-in-out";
+  this.style.opacity = 0;
+  var idTarget = this.getAttribute("data-copytarget");
+  var elTarget = document.getElementById(idTarget);
+  if( elTarget ){
+    var text = elTarget.innerText.replace(/^\s+|\s+$/g,'');
+    var cchLength = parseInt(this.getAttribute("data-copylength"));
+    if( !isNaN(cchLength) && cchLength>0 ){
+      text = text.slice(0,cchLength);   // Assume single-byte chars.
+    }
+    copyTextToClipboard(text);
+  }
+  setTimeout(function(id){
+    var elButton = document.getElementById(id);
+    if( elButton ){
+      elButton.style.transition = "";
+      elButton.style.opacity = 1;
+    }
+    lockCopyText = false;
+  }.bind(null,this.id),400);
+}
+/* Create a temporary <textarea> element and copy the contents to clipboard. */
+function copyTextToClipboard(text){
+  var textArea = document.createElement("textarea");
+  textArea.style.position = 'fixed';
+  textArea.style.top = 0;
+  textArea.style.left = 0;
+  textArea.style.width = '2em';
+  textArea.style.height = '2em';
+  textArea.style.padding = 0;
+  textArea.style.border = 'none';
+  textArea.style.outline = 'none';
+  textArea.style.boxShadow = 'none';
+  textArea.style.background = 'transparent';
+  textArea.value = text;
+  document.body.appendChild(textArea);
+  textArea.focus();
+  textArea.select();
+  try{
+    document.execCommand('copy');
+  }catch(err){
+  }
+  document.body.removeChild(textArea);
+}
+/* Execute a function as soon as the HTML document has been completely loaded.
+** The idea for this code is based on the contentLoaded() function presented
+** here:
+**
+**    Cross-browser wrapper for DOMContentLoaded
+**    http://javascript.nwbox.com/ContentLoaded/
+*/
+function onContentLoaded(fnready) {
+  var fninit = function() {
+    if (document.addEventListener ||
+        event.type === 'load' ||
+        document.readyState === 'complete') {
+      if (document.addEventListener) {
+        document.removeEventListener('DOMContentLoaded',fninit,false);
+        window.removeEventListener('load',fninit,false);
+      }
+      else {
+        document.detachEvent('onreadystatechange',fninit);
+        window.detachEvent('onload',fninit);
+      }
+    }
+    fnready.call(window);
+  };
+  if (document.readyState === 'complete')
+    fnready.call(window);
+  else if (document.addEventListener) {
+    document.addEventListener('DOMContentLoaded',fninit,false);
+    window.addEventListener('load',fninit,false);
+  }
+  else {
+    document.attachEvent('onreadystatechange',fninit);
+    window.attachEvent('onload',fninit);
+  }
+}

Index: src/default_css.txt
==================================================================
--- src/default_css.txt
+++ src/default_css.txt
@@ -767,5 +767,19 @@
   background-color: #ffb;
 }
 label {
   white-space: nowrap;
 }
+.copy-button {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  margin: -2px 0 0 0;
+  padding: 0;
+  border: 0;
+  vertical-align: middle;
+//Note: the mkcss utility does not support line breaks in data URIs.
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath style='fill: black; opacity:0' d='M 14 14 H 0 V 0 h 14 v 14 z'/%3E%3Cpath style='fill:rgb(240,240,240)' d='M 1 0 h 6.6 l 2 2 h 1 l 3.4 3.4 v 8.6 h -10 v -2 h -3 z'/%3E%3Cpath style='fill:rgb(64,64,64)' d='M 2 1 h 5 l 3 3 v 7 h -8 z'/%3E%3Cpath style='fill:rgb(248,248,248)' d='M 3 2 h 3.6 l 2.4 2.4 v 5.6 h -6 z'/%3E%3Cpath style='fill:rgb(80,128,208)' d='M 4 5 h 4 v 1 h -4 z m 0 2 h 4 v 1 h -4 z'/%3E%3Cpath style='fill:rgb(64,64,64)' d='M 5 3 h 5 l 3 3 v 7 h -8 z'/%3E%3Cpath style='fill:rgb(248,248,248)' d='M 10 4.4 v 1.6 h 1.6 z m -4 -0.6 h 3 v 3 h -3 z m 0 3 h 6 v 5.4 h -6 z'/%3E%3Cpath style='fill:rgb(80,128,208)' d='M 7 8 h 4 v 1 h -4 z m 0 2 h 4 v 1 h -4 z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  cursor: pointer;
+}

Index: src/graph.js
==================================================================
--- src/graph.js
+++ src/graph.js
@@ -19,10 +19,11 @@
 **     "scrollToSelect": BOOLEAN,   // Scroll to selection on first render
 **     "nrail": INTEGER,            // Number of vertical "rails"
 **     "baseUrl": TEXT,             // Top-level URL
 **     "dwellTimeout": INTEGER,     // Tooltip show delay in milliseconds
 **     "closeTimeout": INTEGER,     // Tooltip close delay in milliseconds
+**     "hashDigits": INTEGER,       // Limit of tooltip hashes ("hash-digits")
 **     "rowinfo": ROWINFO-ARRAY }
 **
 ** The rowinfo field is an array of structures, one per entry in the timeline,
 ** where each structure has the following fields:
 **
@@ -97,10 +98,11 @@
 
 /* State information for the tooltip popup and its timers */
 window.tooltipInfo = {
   dwellTimeout: 250,  /* The tooltip dwell timeout. */
   closeTimeout: 3000, /* The tooltip close timeout. */
+  hashDigits: 16,     /* Limit of tooltip hashes ("hash-digits"). */
   idTimer: 0,         /* The tooltip dwell timer id. */
   idTimerClose: 0,    /* The tooltip close timer id. */
   ixHover: -1,        /* The id of the element with the mouse. */
   ixActive: -1,       /* The id of the element with the tooltip. */
   nodeHover: null,    /* Graph node under mouse when ixHover==-2 */
@@ -141,10 +143,11 @@
 function TimelineGraph(tx){
   var topObj = document.getElementById("timelineTable"+tx.iTableId);
   amendCss(tx.circleNodes, tx.showArrowheads);
   tooltipInfo.dwellTimeout = tx.dwellTimeout
   tooltipInfo.closeTimeout = tx.closeTimeout
+  tooltipInfo.hashDigits = tx.hashDigits
   topObj.onclick = clickOnGraph
   topObj.ondblclick = dblclickOnGraph
   topObj.onmousemove = function(e) {
     var ix = findTxIndex(e);
     topObj.style.cursor = (ix<0) ? "" : "pointer"
@@ -157,12 +160,12 @@
     ** element, so clear the dwell timer, and record the new element id and
     ** mouse position. */
     stopDwellTimer();
     if(ix >= 0){
       tooltipInfo.ixHover = ix;
-      tooltipInfo.posX = e.x;
-      tooltipInfo.posY = e.y;
+      tooltipInfo.posX = e.clientX;
+      tooltipInfo.posY = e.clientY;
       stopCloseTimer();
       if(tooltipInfo.dwellTimeout>0){
         tooltipInfo.idTimer = setTimeout(function() {
           tooltipInfo.idTimer = 0;
           stopCloseTimer();
@@ -188,12 +191,12 @@
   function nodeHover(e){
     /* Invoked by mousemove events over a graph node */
     e.stopPropagation()
     if(tooltipInfo.ixHover==-2) return
     tooltipInfo.ixHover = -2
-    tooltipInfo.posX = e.x
-    tooltipInfo.posY = e.y
+    tooltipInfo.posX = e.clientX
+    tooltipInfo.posY = e.clientY
     tooltipInfo.nodeHover = this
     stopCloseTimer();
     if(tooltipInfo.dwellTimeout>0){
       tooltipInfo.idTimer = setTimeout(function() {
         tooltipInfo.idTimer = 0;
@@ -557,12 +560,12 @@
   }
   function findTxIndex(e){
     /* Look at all the graph elements.  If any graph elements that is near
     ** the click-point "e" and has a "data-ix" attribute, then return
     ** the value of that attribute.  Otherwise return -1 */
-    var x = e.x + window.pageXOffset - absoluteX(canvasDiv);
-    var y = e.y + window.pageYOffset - absoluteY(canvasDiv);
+    var x = e.clientX + window.pageXOffset - absoluteX(canvasDiv);
+    var y = e.clientY + window.pageYOffset - absoluteY(canvasDiv);
     var aNode = canvasDiv.childNodes
     var nNode = aNode.length;
     var i;
     for(i=0;i<nNode;i++){
       var n = aNode[i]
@@ -583,25 +586,26 @@
     dest += encodeURIComponent(tx.rowinfo[ix].h)
     return dest
   }
   function clickOnGraph(e){
     tooltipInfo.ixHover = findTxIndex(e);
-    tooltipInfo.posX = e.x;
-    tooltipInfo.posY = e.y;
+    tooltipInfo.posX = e.clientX;
+    tooltipInfo.posY = e.clientY;
     showGraphTooltip();
   }
   function showGraphTooltip(){
     var html = null
     var ix = -1
     if( tooltipInfo.ixHover==-2 ){
       ix = parseInt(tooltipInfo.nodeHover.id.match(/\d+$/)[0],10)-tx.iTopRow
       var h = tx.rowinfo[ix].h
       var dest = tx.baseUrl + "/info/" + h
+      h = h.slice(0,tooltipInfo.hashDigits); // Assume single-byte characters.
       if( tx.fileDiff ){
-        html = "artifact <a href=\""+dest+"\">"+h+"</a>"
+        html = "artifact <a id=\"tooltip-link\" href=\""+dest+"\">"+h+"</a>"
       }else{
-        html = "check-in <a href=\""+dest+"\">"+h+"</a>"
+        html = "check-in <a id=\"tooltip-link\" href=\""+dest+"\">"+h+"</a>"
       }
       tooltipInfo.ixActive = -2;
     }else if( tooltipInfo.ixHover>=0 ){
       ix = tooltipInfo.ixHover
       var br = tx.rowinfo[ix].br
@@ -609,11 +613,11 @@
       var hbr = br.replace(/&/g, "&amp;")
          .replace(/</g, "&lt;")
          .replace(/>/g, "&gt;")
          .replace(/"/g, "&quot;")
          .replace(/'/g, "&#039;");
-      html = "branch <a href=\""+dest+"\">"+hbr+"</a>"
+      html = "branch <a id=\"tooltip-link\" href=\""+dest+"\">"+hbr+"</a>"
       tooltipInfo.ixActive = ix;
     }
     if( html ){
       /* Setup while hidden, to ensure proper dimensions. */
       var s = getComputedStyle(document.body)
@@ -624,10 +628,13 @@
       }
       tooltipObj.style.borderColor =
          tooltipObj.style.color = s.getPropertyValue('color')
       tooltipObj.style.visibility = "hidden"
       tooltipObj.innerHTML = html
+      tooltipObj.appendChild(document.createTextNode(' '));
+      tooltipObj.appendChild(
+        makeCopyButton("tooltip-copybtn","tooltip-link",0));
       tooltipObj.style.display = "inline"
       tooltipObj.style.position = "absolute"
       var x = tooltipInfo.posX + 4 + window.pageXOffset
                    - absoluteX(tooltipObj.offsetParent)
       tooltipObj.style.left = x+"px"

Index: src/main.mk
==================================================================
--- src/main.mk
+++ src/main.mk
@@ -210,10 +210,11 @@
   $(SRCDIR)/../skins/xekri/css.txt \
   $(SRCDIR)/../skins/xekri/details.txt \
   $(SRCDIR)/../skins/xekri/footer.txt \
   $(SRCDIR)/../skins/xekri/header.txt \
   $(SRCDIR)/ci_edit.js \
+  $(SRCDIR)/copybtn.js \
   $(SRCDIR)/diff.tcl \
   $(SRCDIR)/forum.js \
   $(SRCDIR)/graph.js \
   $(SRCDIR)/href.js \
   $(SRCDIR)/login.js \

Index: src/printf.c
==================================================================
--- src/printf.c
+++ src/printf.c
@@ -48,11 +48,11 @@
 /*
 ** Return the number of artifact hash digits to display.  The number is for
 ** human output if the bForUrl is false and is destined for a URL if
 ** bForUrl is false.
 */
-static int hashDigits(int bForUrl){
+int hash_digits(int bForUrl){
   static int nDigitHuman = 0;
   static int nDigitUrl = 0;
   if( nDigitHuman==0 ){
     nDigitHuman = db_get_int("hash-digits", FOSSIL_HASH_DIGITS);
     if( nDigitHuman < 6 ) nDigitHuman = 6;
@@ -66,11 +66,11 @@
 
 /*
 ** Return the number of characters in a %S output.
 */
 int length_of_S_display(void){
-  return hashDigits(0);
+  return hash_digits(0);
 }
 
 /*
 ** Conversion types fall into various categories as defined by the
 ** following enumeration.
@@ -679,11 +679,11 @@
         if( bufpt==0 ){
           bufpt = "";
         }else if( xtype==etDYNSTRING ){
           zExtra = bufpt;
         }else if( xtype==etSTRINGID ){
-          precision = hashDigits(flag_altform2);
+          precision = hash_digits(flag_altform2);
         }
         length = StrNLen32(bufpt, limit);
         if( precision>=0 && precision<length ) length = precision;
         break;
       }

Index: src/style.c
==================================================================
--- src/style.c
+++ src/style.c
@@ -82,13 +82,14 @@
 static unsigned adUnitFlags = 0;
 
 /*
 ** Flags for various javascript files needed prior to </body>
 */
-static int needHrefJs = 0;   /* href.js */
-static int needSortJs = 0;   /* sorttable.js */
-static int needGraphJs = 0;  /* graph.js */
+static int needHrefJs = 0;      /* href.js */
+static int needSortJs = 0;      /* sorttable.js */
+static int needGraphJs = 0;     /* graph.js */
+static int needCopyBtnJs = 0;   /* copybtn.js */
 
 /*
 ** Extra JS added to the end of the file.
 */
 static Blob blobOnLoad = BLOB_INITIALIZER;
@@ -533,15 +534,22 @@
 void style_table_sorter(void){
   needSortJs = 1;
 }
 
 /*
-** Indicate that the table-sorting javascript is needed.
+** Indicate that the timeline graph javascript is needed.
 */
 void style_graph_generator(void){
   needGraphJs = 1;
 }
+
+/*
+** Indicate that the copy button javascript is needed.
+*/
+void style_copy_button(void){
+  needCopyBtnJs = 1;
+}
 
 /*
 ** Generate code to load a single javascript file
 */
 void style_load_one_js_file(const char *zFile){
@@ -591,10 +599,13 @@
     cgi_append_content(builtin_text("sorttable.js"),-1);
   }
   if( needGraphJs ){
     cgi_append_content(builtin_text("graph.js"),-1);
   }
+  if( needCopyBtnJs ){
+    cgi_append_content(builtin_text("copybtn.js"),-1);
+  }
   for(i=0; i<nJsToLoad; i++){
     cgi_append_content(builtin_text(azJsToLoad[i]),-1);
   }
   if( blob_size(&blobOnLoad)>0 ){
     @ window.onload = function(){

Index: src/timeline.c
==================================================================
--- src/timeline.c
+++ src/timeline.c
@@ -859,10 +859,11 @@
     @   "scrollToSelect": %d(scrollToSelect),
     @   "nrail": %d(pGraph->mxRail+1),
     @   "baseUrl": "%R",
     @   "dwellTimeout": %d(dwellTimeout),
     @   "closeTimeout": %d(closeTimeout),
+    @   "hashDigit": %d(hash_digits(1)),
     @   "bottomRowId": "btm-%d(iTableId)",
     if( pGraph->nRow==0 ){
       @   "rowinfo": null
     }else{
       @   "rowinfo": [
@@ -991,10 +992,11 @@
       cgi_printf("\"h\":\"%!S\"}%s",
                  pRow->zUuid, pRow->pNext ? ",\n" : "]\n");
     }
     @ }</script>
     style_graph_generator();
+    style_copy_button(); /* Dependency: graph.js requires copybtn.js. */
     graph_free(pGraph);
   }
 }
 
 /*

Index: win/Makefile.mingw
==================================================================
--- win/Makefile.mingw
+++ win/Makefile.mingw
@@ -632,10 +632,11 @@
   $(SRCDIR)/../skins/xekri/css.txt \
   $(SRCDIR)/../skins/xekri/details.txt \
   $(SRCDIR)/../skins/xekri/footer.txt \
   $(SRCDIR)/../skins/xekri/header.txt \
   $(SRCDIR)/ci_edit.js \
+  $(SRCDIR)/copybtn.js \
   $(SRCDIR)/diff.tcl \
   $(SRCDIR)/forum.js \
   $(SRCDIR)/graph.js \
   $(SRCDIR)/href.js \
   $(SRCDIR)/login.js \

Index: win/Makefile.msc
==================================================================
--- win/Makefile.msc
+++ win/Makefile.msc
@@ -535,10 +535,11 @@
         $(SRCDIR)\..\skins\xekri\css.txt \
         $(SRCDIR)\..\skins\xekri\details.txt \
         $(SRCDIR)\..\skins\xekri\footer.txt \
         $(SRCDIR)\..\skins\xekri\header.txt \
         $(SRCDIR)\ci_edit.js \
+        $(SRCDIR)\copybtn.js \
         $(SRCDIR)\diff.tcl \
         $(SRCDIR)\forum.js \
         $(SRCDIR)\graph.js \
         $(SRCDIR)\href.js \
         $(SRCDIR)\login.js \