hgweb: add a floating tooltip to invite on followlines action

In followlines.js, we create a <div id="followlines-tooltip"> element to draw
attention of users on "followlines" feature. The element shows up on hover of
source lines after one second and follows the cursor. After first click (start
line selection), the text changes and indicates that next click will terminate
selection.

mercurial/templates/static/followlines.js

@@ -1,166 +1,212
 // followlines.js - JavaScript utilities for followlines UI
 //
 // Copyright 2017 Logilab SA <[e-mail]>
 //
 // This software may be used and distributed according to the terms of the
 // GNU General Public License version 2 or any later version.
 
 //** Install event listeners for line block selection and followlines action */
 document.addEventListener('DOMContentLoaded', function() {
     var sourcelines = document.getElementsByClassName('sourcelines')[0];
     if (typeof sourcelines === 'undefined') {
         return;
     }
     // URL to complement with "linerange" query parameter
     var targetUri = sourcelines.dataset.logurl;
     if (typeof targetUri === 'undefined') {
         return;
     }
 
+    // tooltip to invite on lines selection
+    var tooltip = document.createElement('div');
+    tooltip.id = 'followlines-tooltip';
+    tooltip.classList.add('hidden');
+    var initTooltipText = 'click to start following lines history from here';
+    tooltip.textContent = initTooltipText;
+    sourcelines.appendChild(tooltip);
+
+    var tooltipTimeoutID;
+    //* move the "tooltip" with cursor (top-right) and show it after 1s */
+    function moveAndShowTooltip(e) {
+        if (typeof tooltipTimeoutID !== 'undefined') {
+            // avoid accumulation of timeout callbacks (blinking)
+            window.clearTimeout(tooltipTimeoutID);
+        }
+        tooltip.classList.add('hidden');
+        var x = (e.clientX + 10) + 'px',
+            y = (e.clientY - 20) + 'px';
+        tooltip.style.top = y;
+        tooltip.style.left = x;
+        tooltipTimeoutID = window.setTimeout(function() {
+            tooltip.classList.remove('hidden');
+        }, 1000);
+    }
+
+    // on mousemove, show tooltip close to cursor position
+    sourcelines.addEventListener('mousemove', moveAndShowTooltip);
+
     // retrieve all direct <span> children of <pre class="sourcelines">
     var spans = Array.prototype.filter.call(
         sourcelines.children,
         function(x) { return x.tagName === 'SPAN' });
 
     // add a "followlines-select" class to change cursor type in CSS
     for (var i = 0; i < spans.length; i++) {
         spans[i].classList.add('followlines-select');
     }
 
     var lineSelectedCSSClass = 'followlines-selected';
 
     //** add CSS class on <span> element in `from`-`to` line range */
     function addSelectedCSSClass(from, to) {
         for (var i = from; i <= to; i++) {
             spans[i].classList.add(lineSelectedCSSClass);
         }
     }
 
     //** remove CSS class from previously selected lines */
     function removeSelectedCSSClass() {
         var elements = sourcelines.getElementsByClassName(
             lineSelectedCSSClass);
         while (elements.length) {
             elements[0].classList.remove(lineSelectedCSSClass);
         }
     }
 
     // ** return the <span> element parent of `element` */
     function findParentSpan(element) {
         var parent = element.parentElement;
         if (parent === null) {
             return null;
         }
         if (element.tagName == 'SPAN' && parent.isSameNode(sourcelines)) {
             return element;
         }
         return findParentSpan(parent);
     }
 
     //** event handler for "click" on the first line of a block */
     function lineSelectStart(e) {
         var startElement = findParentSpan(e.target);
         if (startElement === null) {
             // not a <span> (maybe <a>): abort, keeping event listener
             // registered for other click with <span> target
             return;
         }
+
+        // update tooltip text
+        tooltip.textContent = 'click again to terminate line block selection here';
+
         var startId = parseInt(startElement.id.slice(1));
         startElement.classList.add(lineSelectedCSSClass); // CSS
 
         // remove this event listener
         sourcelines.removeEventListener('click', lineSelectStart);
 
         //** event handler for "click" on the last line of the block */
         function lineSelectEnd(e) {
             var endElement = findParentSpan(e.target);
             if (endElement === null) {
                 // not a <span> (maybe <a>): abort, keeping event listener
                 // registered for other click with <span> target
                 return;
             }
 
             // remove this event listener
             sourcelines.removeEventListener('click', lineSelectEnd);
 
+            // hide tooltip and disable motion tracking
+            tooltip.classList.add('hidden');
+            sourcelines.removeEventListener('mousemove', moveAndShowTooltip);
+            window.clearTimeout(tooltipTimeoutID);
+
+            //* restore initial "tooltip" state */
+            function restoreTooltip() {
+                tooltip.textContent = initTooltipText;
+                sourcelines.addEventListener('mousemove', moveAndShowTooltip);
+            }
+
             // compute line range (startId, endId)
             var endId = parseInt(endElement.id.slice(1));
             if (endId == startId) {
                 // clicked twice the same line, cancel and reset initial state
-                // (CSS and event listener for selection start)
+                // (CSS, event listener for selection start, tooltip)
                 removeSelectedCSSClass();
                 sourcelines.addEventListener('click', lineSelectStart);
+                restoreTooltip();
                 return;
             }
             var inviteElement = endElement;
             if (endId < startId) {
                 var tmp = endId;
                 endId = startId;
                 startId = tmp;
                 inviteElement = startElement;
             }
 
             addSelectedCSSClass(startId - 1, endId -1);  // CSS
 
             // append the <div id="followlines"> element to last line of the
             // selection block
             var divAndButton = followlinesBox(targetUri, startId, endId);
             var div = divAndButton[0],
                 button = divAndButton[1];
             inviteElement.appendChild(div);
 
             //** event handler for cancelling selection */
             function cancel() {
                 // remove invite box
                 div.parentNode.removeChild(div);
                 // restore initial event listeners
                 sourcelines.addEventListener('click', lineSelectStart);
                 sourcelines.removeEventListener('click', cancel);
                 // remove styles on selected lines
                 removeSelectedCSSClass();
+                // restore tooltip element
+                restoreTooltip();
             }
 
             // bind cancel event to click on <button>
             button.addEventListener('click', cancel);
             // as well as on an click on any source line
             sourcelines.addEventListener('click', cancel);
         }
 
         sourcelines.addEventListener('click', lineSelectEnd);
 
     }
 
     sourcelines.addEventListener('click', lineSelectStart);
 
     //** return a <div id="followlines"> and inner cancel <button> elements */
     function followlinesBox(targetUri, fromline, toline) {
         // <div id="followlines">
         var div = document.createElement('div');
         div.id = 'followlines';
 
         //   <div class="followlines-cancel">
         var buttonDiv = document.createElement('div');
         buttonDiv.classList.add('followlines-cancel');
 
         //     <button>x</button>
         var button = document.createElement('button');
         button.textContent = 'x';
         buttonDiv.appendChild(button);
         div.appendChild(buttonDiv);
 
         //   <div class="followlines-link">
         var aDiv = document.createElement('div');
         aDiv.classList.add('followlines-link');
 
         //     <a href="/log/<rev>/<file>?patch=&linerange=...">
         var a = document.createElement('a');
         var url = targetUri + '?patch=&linerange=' + fromline + ':' + toline;
         a.setAttribute('href', url);
         a.textContent = 'follow lines ' + fromline + ':' + toline;
         aDiv.appendChild(a);
         div.appendChild(aDiv);
 
         return [div, button];
     }
 
 }, false);

mercurial/templates/static/style-paper.css

@@ -1,471 +1,487
 body {
   margin: 0;
   padding: 0;
   background: white;
   color: black;
   font-family: sans-serif;
 }
 
 .container {
   padding-left: 115px;
 }
 
 .main {
   position: relative;
   background: white;
   padding: 2em 2em 2em 0;
 }
 
 #.main {
   width: 98%;
 }
 
 .overflow {
   width: 100%;
   overflow: auto;
 }
 
 .menu {
   width: 90px;
   margin: 0;
   font-size: 80%;
   text-align: left;
   position: absolute;
   top: 20px;
   left: 20px;
   right: auto;
 }
 
 .menu ul {
   list-style: none;
   padding: 0;
   margin: 10px 0 0 0;
   border-left: 2px solid #999;
 }
 
 .menu li {
   margin-bottom: 3px;
   padding: 2px 4px;
   background: white;
   color: black;
   font-weight: normal;
 }
 
 .menu li.active {
   font-weight: bold;
 }
 
 .menu img {
   width: 75px;
   height: 90px;
   border: 0;
 }
 
 div.atom-logo {
   margin-top: 10px;
 }
 
 .atom-logo img{
   width: 14px;
   height: 14px;
   border: 0;
 }
 
 .menu a { color: black; display: block; }
 
 .search {
   position: absolute;
   top: .7em;
   right: 2em;
 }
 
 form.search div#hint {
   display: none;
   position: absolute;
   top: 40px;
   right: 0px;
   width: 190px;
   padding: 5px;
   background: #ffc;
   font-size: 70%;
   border: 1px solid yellow;
   border-radius: 5px;
 }
 
 form.search:hover div#hint { display: block; }
 
 a { text-decoration:none; }
 .age { white-space:nowrap; }
 .date { white-space:nowrap; }
 .indexlinks { white-space:nowrap; }
 .parity0,
 .stripes4 > :nth-child(4n+1),
 .stripes2 > :nth-child(2n+1) { background-color: #f0f0f0; }
 .parity1,
 .stripes4 > :nth-child(4n+3),
 .stripes2 > :nth-child(2n+2) { background-color: white; }
 .plusline { color: green; }
 .minusline { color: #dc143c; } /* crimson */
 .atline { color: purple; }
 
 .diffstat-table {
   margin-top: 1em;
 }
 .diffstat-file {
   white-space: nowrap;
   font-size: 90%;
 }
 .diffstat-total {
   white-space: nowrap;
   font-size: 90%;
 }
 .diffstat-graph {
   width: 100%;
 }
 .diffstat-add {
   background-color: green;
   float: left;
 }
 .diffstat-remove {
   background-color: red;
   float: left;
 }
 
 .navigate {
   text-align: right;
   font-size: 60%;
   margin: 1em 0;
 }
 
 .tag {
   color: #999;
   font-size: 70%;
   font-weight: normal;
   margin-left: .5em;
   vertical-align: baseline;
 }
 
 .branchhead {
   color: #000;
   font-size: 80%;
   font-weight: normal;
   margin-left: .5em;
   vertical-align: baseline;
 }
 
 ul#graphnodes .branchhead {
   font-size: 75%;
 }
 
 .branchname {
   color: #000;
   font-size: 60%;
   font-weight: normal;
   margin-left: .5em;
   vertical-align: baseline;
 }
 
 h3 .branchname {
   font-size: 80%;
 }
 
 /* Common */
 pre { margin: 0; }
 
 h2 { font-size: 120%; border-bottom: 1px solid #999; }
 h2 a { color: #000; }
 h3 {
   margin-top: +.7em;
   font-size: 100%;
 }
 
 /* log and tags tables */
 .bigtable {
   border-bottom: 1px solid #999;
   border-collapse: collapse;
   font-size: 90%;
   width: 100%;
   font-weight: normal;
   text-align: left;
 }
 
 .bigtable td {
   vertical-align: top;
 }
 
 .bigtable th {
   padding: 1px 4px;
   border-bottom: 1px solid #999;
 }
 .bigtable tr { border: none; }
 .bigtable .age { width: 7em; }
 .bigtable .author { width: 15em; }
 .bigtable .description { }
 .bigtable .description .base { font-size: 70%; float: right; line-height: 1.66; }
 .bigtable .node { width: 5em; font-family: monospace;}
 .bigtable .permissions { width: 8em; text-align: left;}
 .bigtable .size { width: 5em; text-align: right; }
 .bigtable .annotate { text-align: right; }
 .bigtable td.annotate { font-size: smaller; }
 .bigtable td.source { font-size: inherit; }
 tr.thisrev a { color:#999999; text-decoration: none; }
 tr.thisrev td.source { color:#009900; }
 td.annotate {
   white-space: nowrap;
 }
 div.annotate-info {
   display: none;
   position: absolute;
   background-color: #FFFFFF;
   border: 1px solid #999;
   text-align: left;
   color: #000000;
   padding: 5px;
 }
 div.annotate-info a { color: #0000FF; }
 td.annotate:hover div.annotate-info { display: inline; }
 
 .source, .sourcefirst {
   font-family: monospace;
   white-space: pre;
   padding: 1px 4px;
   font-size: 90%;
 }
 .sourcefirst { border-bottom: 1px solid #999; font-weight: bold; }
 .source a { color: #999; font-size: smaller; font-family: monospace;}
 .bottomline { border-bottom: 1px solid #999; }
 
 .sourcelines {
   font-size: 90%;
   position: relative;
   counter-reset: lineno;
 }
 
 .wrap > span {
     white-space: pre-wrap;
 }
 
 .linewraptoggle {
     float: right;
 }
 
 .diffblocks { counter-reset: lineno; }
 .diffblocks > div { counter-increment: lineno; }
 
 .sourcelines > span {
   display: inline-block;
   box-sizing: border-box;
   width: 100%;
   padding: 1px 0px 1px 5em;
   counter-increment: lineno;
 }
 
 .sourcelines > span:before {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
   display: inline-block;
   margin-left: -5em;
   width: 4em;
   font-size: smaller;
   color: #999;
   text-align: right;
   content: counters(lineno, ".");
   float: left;
 }
 
 .sourcelines > span:target, tr:target td {
   background-color: #bfdfff;
 }
 
 div.overflow pre.sourcelines > span.followlines-select:hover {
   cursor: cell;
 }
 
 pre.sourcelines > span.followlines-selected {
   background-color: #99C7E9;
 }
 
 div#followlines {
   background-color: #B7B7B7;
   border: 1px solid #CCC;
   border-radius: 5px;
   padding: 4px;
   position: absolute;
 }
 
 div.followlines-cancel {
   text-align: right;
 }
 
 div.followlines-cancel > button {
   line-height: 80%;
   padding: 0;
   border: 0;
   border-radius: 2px;
   background-color: inherit;
   font-weight: bold;
 }
 
 div.followlines-cancel > button:hover {
   color: #FFFFFF;
   background-color: #CF1F1F;
 }
 
 div.followlines-link {
   margin: 2px;
   margin-top: 4px;
   font-family: sans-serif;
 }
 
+div#followlines-tooltip {
+  display: none;
+  position: fixed;
+  background-color: #ffc;
+  border: 1px solid #999;
+  padding: 2px;
+}
+
+.sourcelines:hover > div#followlines-tooltip {
+  display: inline;
+}
+
+.sourcelines:hover > div#followlines-tooltip.hidden {
+  display: none;
+}
+
 .sourcelines > a {
     display: inline-block;
     position: absolute;
     left: 0px;
     width: 4em;
     height: 1em;
 }
 
 .fileline { font-family: monospace; }
 .fileline img { border: 0; }
 
 .tagEntry .closed { color: #99f; }
 
 /* Changeset entry */
 #changesetEntry {
   border-collapse: collapse;
   font-size: 90%;
   width: 100%;
   margin-bottom: 1em;
 }
 
 #changesetEntry th {
   padding: 1px 4px;
   width: 4em;
   text-align: right;
   font-weight: normal;
   color: #999;
   margin-right: .5em;
   vertical-align: top;
 }
 
 div.description {
   border-left: 2px solid #999;
   margin: 1em 0 1em 0;
   padding: .3em;
   white-space: pre;
   font-family: monospace;
 }
 
 /* Graph */
 div#wrapper {
 	position: relative;
 	border-top: 1px solid black;
 	border-bottom: 1px solid black;
 	margin: 0;
 	padding: 0;
 }
 
 canvas {
 	position: absolute;
 	z-index: 5;
 	top: -0.7em;
 	margin: 0;
 }
 
 ul#graphnodes {
 	position: absolute;
 	z-index: 10;
 	top: -1.0em;
 	list-style: none inside none;
 	padding: 0;
 }
 
 ul#nodebgs {
 	list-style: none inside none;
 	padding: 0;
 	margin: 0;
 	top: -0.7em;
 }
 
 ul#graphnodes li, ul#nodebgs li {
 	height: 39px;
 }
 
 ul#graphnodes li .info {
 	display: block;
 	font-size: 70%;
 	position: relative;
 	top: -3px;
 }
 
 /* Comparison */
 .legend {
     padding: 1.5% 0 1.5% 0;
 }
 
 .legendinfo {
     border: 1px solid #999;
     font-size: 80%;
     text-align: center;
     padding: 0.5%;
 }
 
 .equal {
     background-color: #ffffff;
 }
 
 .delete {
     background-color: #faa;
     color: #333;
 }
 
 .insert {
     background-color: #ffa;
 }
 
 .replace {
     background-color: #e8e8e8;
 }
 
 .header {
     text-align: center;
 }
 
 .block {
     border-top: 1px solid #999;
 }
 
 .breadcrumb {
     color: gray;
 }
 
 .breadcrumb a {
     color: blue;
 }
 
 .scroll-loading {
   -webkit-animation: change_color 1s linear 0s infinite alternate;
   -moz-animation: change_color 1s linear 0s infinite alternate;
   -o-animation: change_color 1s linear 0s infinite alternate;
   animation: change_color 1s linear 0s infinite alternate;
 }
 
 @-webkit-keyframes change_color {
   from { background-color: #A0CEFF; } to {  }
 }
 @-moz-keyframes change_color {
   from { background-color: #A0CEFF; } to {  }
 }
 @-o-keyframes change_color {
   from { background-color: #A0CEFF; } to {  }
 }
 @keyframes change_color {
   from { background-color: #A0CEFF; } to {  }
 }
 
 .scroll-loading-error {
     background-color: #FFCCCC !important;
 }