hgweb: position the "followlines" box close to latest cursor position

mercurial/templates/static/followlines.js

@@ -1,212 +1,219 b''
 // 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);
 
+    //* position "element" on top-right of cursor */
+    function positionTopRight(element, event) {
+        var x = (event.clientX + 10) + 'px',
+            y = (event.clientY - 20) + 'px';
+        element.style.top = y;
+        element.style.left = x;
+    }
+
     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;
+        positionTopRight(tooltip, e);
         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, 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);
+            // set position close to cursor (top-right)
+            positionTopRight(div, e);
 
             //** 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,487 +1,487 b''
 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;
+  position: fixed;
 }
 
 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;
 }