Mercurial > hg-stable

changeset 33390:32331f54930c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
hgweb: re-implement followlines UI selection using buttons This changeset attempts to solve two issues with the "followlines" UI in hgweb. First the "followlines" action is currently not easily discoverable (one has to hover on a line for some time, wait for the invite message to appear and then perform some action). Second, it gets in the way of natural line selection, especially in filerevision view. This changeset introduces an additional markup element (a <button class="btn-followlines">) alongside each content line of the view. This button now holds events for line selection that were previously plugged onto content lines directly. Consequently, there's no more action on content lines, hence restoring the "natural line selection" behavior (solving the second problem). These buttons are hidden by default and get displayed upon hover of content lines; then upon hover of a button itself, a text inviting followlines section shows up. This solves the first problem (discoverability) as we now have a clear visual element indicating that "some action could be perform" (i.e. a button) and that is self-documented. In followlines.js, all event listeners are now attached to these <button> elements. The custom "floating tooltip" element is dropped as <button> elements are now self-documented through a "title" attribute that changes depending on preceding actions (selection started or not, in particular). The new <button> element is inserted in followlines.js script (thus only visible if JavaScript is activated); it contains a "+" and "-" with a "diff-semantics" style; upon hover, it scales up. To find the parent element under which to insert the <button> we either rely on the "data-selectabletag" attribute (which defines the HTML tag of children of class="sourcelines" element e.g. <span> for filerevision view and <tr> for annotate view) or use a child of the latter elements if we find an element with class="followlines-btn-parent" (useful for annotate view, for which we have to find the <td> in which to insert the <button>). On noticeable change in CSS concerns the "margin-left" of span:before pseudo-elements in filelog view that has been increased a bit in order to leave space for the new button to appear between line number column and line content one. Also note the "z-index" addition for "annotate-info" box so that the latter appears on top of new buttons (instead of getting hidden). In some respect, the UI similar to line commenting feature that is implemented in popular code hosting site like GitHub, BitBucket or Kallithea.
author Denis Laxalde <denis.laxalde@logilab.fr>
date Mon, 03 Jul 2017 13:49:03 +0200
parents 7e89bd0cfb86
children 943b8c37f49d
files mercurial/templates/gitweb/map mercurial/templates/paper/map mercurial/templates/static/followlines.js mercurial/templates/static/style-gitweb.css mercurial/templates/static/style-paper.css tests/test-hgweb.t tests/test-highlight.t
diffstat 7 files changed, 280 insertions(+), 125 deletions(-) [+]
line wrap: on
line diff
--- a/mercurial/templates/gitweb/map	Sat Jul 01 20:51:19 2017 -0700
+++ b/mercurial/templates/gitweb/map	Mon Jul 03 13:49:03 2017 +0200
@@ -113,7 +113,7 @@
         <a href="{url|urlescape}rev/{node|short}{sessionvars%urlparameter}">changeset</a>
       </div>
     </td>
-    <td><pre><a class="linenr" href="#{lineid}">{linenumber}</a></pre></td>
+    <td class="followlines-btn-parent"><pre><a class="linenr" href="#{lineid}">{linenumber}</a></pre></td>
     <td><pre>{line|escape}</pre></td>
   </tr>'
 annotateparent = '
--- a/mercurial/templates/paper/map	Sat Jul 01 20:51:19 2017 -0700
+++ b/mercurial/templates/paper/map	Mon Jul 03 13:49:03 2017 +0200
@@ -94,7 +94,7 @@
         <a href="{url|urlescape}rev/{node|short}{sessionvars%urlparameter}">changeset</a>
       </div>
     </td>
-    <td class="source"><a href="#{lineid}">{linenumber}</a> {line|escape}</td>
+    <td class="source followlines-btn-parent"><a href="#{lineid}">{linenumber}</a> {line|escape}</td>
   </tr>'
 annotateparent = '
   <a href="{url|urlescape}annotate/{node|short}/{file|urlescape}{sessionvars%urlparameter}">{rev}</a>'
--- a/mercurial/templates/static/followlines.js	Sat Jul 01 20:51:19 2017 -0700
+++ b/mercurial/templates/static/followlines.js	Mon Jul 03 13:49:03 2017 +0200
@@ -26,14 +26,6 @@
 
     var isHead = parseInt(sourcelines.dataset.ishead || "0");
 
-    // 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',
@@ -42,32 +34,60 @@
         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');
-        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 *selectable* children of class="sourcelines"
     // element
     var selectableElements = Array.prototype.filter.call(
         sourcelines.children,
         function(x) { return x.tagName === selectableTag });
 
-    // add a "followlines-select" class to change cursor type in CSS
+    var btnTitleStart = 'start following lines history from here';
+    var btnTitleEnd = 'terminate line block selection here';
+
+    //** return a <button> element with +/- spans */
+    function createButton() {
+        var btn = document.createElement('button');
+        btn.title = btnTitleStart;
+        btn.classList.add('btn-followlines');
+        var plusSpan = document.createElement('span');
+        plusSpan.classList.add('followlines-plus');
+        plusSpan.textContent = '+';
+        btn.appendChild(plusSpan);
+        var br = document.createElement('br');
+        btn.appendChild(br);
+        var minusSpan = document.createElement('span');
+        minusSpan.classList.add('followlines-minus');
+        minusSpan.textContent = '−';
+        btn.appendChild(minusSpan);
+        return btn;
+    }
+
+    // extend DOM with CSS class for selection highlight and action buttons
+    var followlinesButtons = []
     for (var i = 0; i < selectableElements.length; i++) {
         selectableElements[i].classList.add('followlines-select');
+        var btn = createButton();
+        followlinesButtons.push(btn);
+        // insert the <button> as child of `selectableElements[i]` unless the
+        // latter has itself a child  with a "followlines-btn-parent" class
+        // (annotate view)
+        var btnSupportElm = selectableElements[i];
+        var childSupportElms = btnSupportElm.getElementsByClassName(
+            'followlines-btn-parent');
+        if ( childSupportElms.length > 0 ) {
+            btnSupportElm = childSupportElms[0];
+        }
+        var refNode = btnSupportElm.children[0]; // node to insert <button> before
+        btnSupportElm.insertBefore(btn, refNode);
+    }
+
+    // ** re-initialize followlines buttons */
+    function resetButtons() {
+        for (var i = 0; i < followlinesButtons.length; i++) {
+            var btn = followlinesButtons[i];
+            btn.title = btnTitleStart;
+            btn.classList.remove('btn-followlines-end');
+            btn.classList.remove('btn-followlines-hidden');
+        }
     }
 
     var lineSelectedCSSClass = 'followlines-selected';
@@ -100,27 +120,54 @@
         return selectableParent(parent);
     }
 
+    // ** update buttons title and style upon first click */
+    function updateButtons(selectable) {
+        for (var i = 0; i < followlinesButtons.length; i++) {
+            var btn = followlinesButtons[i];
+            btn.title = btnTitleEnd;
+            btn.classList.add('btn-followlines-end');
+        }
+        // on clicked button, change title to "cancel"
+        var clicked = selectable.getElementsByClassName('btn-followlines')[0];
+        clicked.title = 'cancel';
+        clicked.classList.remove('btn-followlines-end');
+    }
+
+    //** add `listener` on "click" event for all `followlinesButtons` */
+    function buttonsAddEventListener(listener) {
+        for (var i = 0; i < followlinesButtons.length; i++) {
+            followlinesButtons[i].addEventListener('click', listener);
+        }
+    }
+
+    //** remove `listener` on "click" event for all `followlinesButtons` */
+    function buttonsRemoveEventListener(listener) {
+        for (var i = 0; i < followlinesButtons.length; i++) {
+            followlinesButtons[i].removeEventListener('click', listener);
+        }
+    }
+
     //** event handler for "click" on the first line of a block */
     function lineSelectStart(e) {
-        var startElement = selectableParent(e.target);
+        var startElement = selectableParent(e.target.parentElement);
         if (startElement === null) {
             // not a "selectable" element (maybe <a>): abort, keeping event
             // listener registered for other click with a "selectable" target
             return;
         }
 
-        // update tooltip text
-        tooltip.textContent = 'click again to terminate line block selection here';
+        // update button tooltip text and CSS
+        updateButtons(startElement);
 
         var startId = parseInt(startElement.id.slice(1));
         startElement.classList.add(lineSelectedCSSClass); // CSS
 
         // remove this event listener
-        sourcelines.removeEventListener('click', lineSelectStart);
+        buttonsRemoveEventListener(lineSelectStart);
 
         //** event handler for "click" on the last line of the block */
         function lineSelectEnd(e) {
-            var endElement = selectableParent(e.target);
+            var endElement = selectableParent(e.target.parentElement);
             if (endElement === null) {
                 // not a <span> (maybe <a>): abort, keeping event listener
                 // registered for other click with <span> target
@@ -128,27 +175,18 @@
             }
 
             // remove this event listener
-            sourcelines.removeEventListener('click', lineSelectEnd);
+            buttonsRemoveEventListener(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);
-            }
+            // reset button tooltip text
+            resetButtons();
 
             // 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)
+                // (CSS, event listener for selection start)
                 removeSelectedCSSClass();
-                sourcelines.addEventListener('click', lineSelectStart);
-                restoreTooltip();
+                buttonsAddEventListener(lineSelectStart);
                 return;
             }
             var inviteElement = endElement;
@@ -169,31 +207,37 @@
             inviteElement.appendChild(div);
             // set position close to cursor (top-right)
             positionTopRight(div, e);
+            // hide all buttons
+            for (var i = 0; i < followlinesButtons.length; i++) {
+                followlinesButtons[i].classList.add('btn-followlines-hidden');
+            }
 
             //** 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);
+                buttonsAddEventListener(lineSelectStart);
+                buttonsRemoveEventListener(cancel);
+                for (var i = 0; i < followlinesButtons.length; i++) {
+                    followlinesButtons[i].classList.remove('btn-followlines-hidden');
+                }
                 // remove styles on selected lines
                 removeSelectedCSSClass();
-                // restore tooltip element
-                restoreTooltip();
+                resetButtons();
             }
 
             // 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);
+            buttonsAddEventListener(cancel);
         }
 
-        sourcelines.addEventListener('click', lineSelectEnd);
+        buttonsAddEventListener(lineSelectEnd);
 
     }
 
-    sourcelines.addEventListener('click', lineSelectStart);
+    buttonsAddEventListener(lineSelectStart);
 
     //** return a <div id="followlines"> and inner cancel <button> elements */
     function followlinesBox(targetUri, fromline, toline, isHead) {
--- a/mercurial/templates/static/style-gitweb.css	Sat Jul 01 20:51:19 2017 -0700
+++ b/mercurial/templates/static/style-gitweb.css	Mon Jul 03 13:49:03 2017 +0200
@@ -86,6 +86,7 @@
   white-space: nowrap;
 }
 div.annotate-info {
+  z-index: 5;
   display: none;
   position: absolute;
   background-color: #FFFFFF;
@@ -152,7 +153,7 @@
 	-ms-user-select: none;
 	user-select: none;
 	display: inline-block;
-	margin-left: -5em;
+	margin-left: -6em;
 	width: 4em;
 	color: #999;
 	text-align: right;
@@ -177,11 +178,6 @@
 }
 
 /* Followlines */
-div.page_body table tbody.sourcelines > tr.followlines-select:hover,
-div.page_body pre.sourcelines > span.followlines-select:hover {
-  cursor: cell;
-}
-
 tbody.sourcelines > tr.followlines-selected,
 pre.sourcelines > span.followlines-selected {
   background-color: #99C7E9 !important;
@@ -219,21 +215,62 @@
   font-family: sans-serif;
 }
 
-div#followlines-tooltip {
+.btn-followlines {
   display: none;
-  position: fixed;
-  background-color: #ffc;
-  border: 1px solid #999;
-  padding: 2px;
+  cursor: pointer;
+  box-sizing: content-box;
+  font-size: 11px;
+  width: 13px;
+  height: 13px;
+  border-radius: 3px;
+  margin: 0px;
+  margin-top: -2px;
+  padding: 0px;
+  background-color: #E5FDE5;
+  border: 1px solid #9BC19B;
+  font-family: monospace;
+  text-align: center;
+  line-height: 5px;
+}
+
+tr .btn-followlines {
+  position: absolute;
 }
 
-.sourcelines:hover > div#followlines-tooltip {
+span .btn-followlines {
+  float: left;
+}
+
+span.followlines-select .btn-followlines {
+  margin-left: -1.6em;
+}
+
+.btn-followlines:hover {
+  transform: scale(1.1, 1.1);
+}
+
+.btn-followlines .followlines-plus {
+  color: green;
+}
+
+.btn-followlines .followlines-minus {
+  color: red;
+}
+
+.btn-followlines-end {
+  background-color: #ffdcdc;
+}
+
+.sourcelines tr:hover .btn-followlines,
+.sourcelines span.followlines-select:hover > .btn-followlines {
   display: inline;
 }
 
-.sourcelines:hover > div#followlines-tooltip.hidden {
+.btn-followlines-hidden,
+.sourcelines tr:hover .btn-followlines-hidden {
   display: none;
 }
+
 /* Graph */
 div#wrapper {
 	position: relative;
--- a/mercurial/templates/static/style-paper.css	Sat Jul 01 20:51:19 2017 -0700
+++ b/mercurial/templates/static/style-paper.css	Mon Jul 03 13:49:03 2017 +0200
@@ -214,6 +214,7 @@
   white-space: nowrap;
 }
 div.annotate-info {
+  z-index: 5;
   display: none;
   position: absolute;
   background-color: #FFFFFF;
@@ -267,7 +268,7 @@
   -ms-user-select: none;
   user-select: none;
   display: inline-block;
-  margin-left: -5em;
+  margin-left: -6em;
   width: 4em;
   font-size: smaller;
   color: #999;
@@ -280,11 +281,7 @@
   background-color: #bfdfff;
 }
 
-div.overflow table tbody.sourcelines > tr.followlines-select:hover,
-div.overflow pre.sourcelines > span.followlines-select:hover {
-  cursor: cell;
-}
-
+/* Followlines */
 tbody.sourcelines > tr.followlines-selected,
 pre.sourcelines > span.followlines-selected {
   background-color: #99C7E9;
@@ -322,19 +319,59 @@
   font-family: sans-serif;
 }
 
-div#followlines-tooltip {
+.btn-followlines {
   display: none;
-  position: fixed;
-  background-color: #ffc;
-  border: 1px solid #999;
-  padding: 2px;
+  cursor: pointer;
+  box-sizing: content-box;
+  font-size: 12px;
+  width: 13px;
+  height: 13px;
+  border-radius: 3px;
+  margin: 0px;
+  margin-top: -2px;
+  padding: 0px;
+  background-color: #E5FDE5;
+  border: 1px solid #9BC19B;
+  font-family: monospace;
+  text-align: center;
+  line-height: 5px;
+}
+
+tr .btn-followlines {
+  position: absolute;
 }
 
-.sourcelines:hover > div#followlines-tooltip {
+span .btn-followlines {
+  float: left;
+}
+
+span.followlines-select .btn-followlines {
+  margin-left: -1.5em;
+}
+
+.btn-followlines:hover {
+  transform: scale(1.2, 1.2);
+}
+
+.btn-followlines .followlines-plus {
+  color: green;
+}
+
+.btn-followlines .followlines-minus {
+  color: red;
+}
+
+.btn-followlines-end {
+  background-color: #ffdcdc;
+}
+
+.sourcelines tr:hover .btn-followlines,
+.sourcelines span.followlines-select:hover > .btn-followlines {
   display: inline;
 }
 
-.sourcelines:hover > div#followlines-tooltip.hidden {
+.btn-followlines-hidden,
+.sourcelines tr:hover .btn-followlines-hidden {
   display: none;
 }
 
--- a/tests/test-hgweb.t	Sat Jul 01 20:51:19 2017 -0700
+++ b/tests/test-hgweb.t	Mon Jul 03 13:49:03 2017 +0200
@@ -340,7 +340,7 @@
 
   $ get-with-headers.py --twice localhost:$HGPORT 'static/style-gitweb.css' - date etag server
   200 Script output follows
-  content-length: 8463
+  content-length: 8985
   content-type: text/css
   
   body { font-family: sans-serif; font-size: 12px; border:solid #d9d8d1; border-width:1px; margin:10px; background: white; color: black; }
@@ -431,6 +431,7 @@
     white-space: nowrap;
   }
   div.annotate-info {
+    z-index: 5;
     display: none;
     position: absolute;
     background-color: #FFFFFF;
@@ -497,7 +498,7 @@
   	-ms-user-select: none;
   	user-select: none;
   	display: inline-block;
-  	margin-left: -5em;
+  	margin-left: -6em;
   	width: 4em;
   	color: #999;
   	text-align: right;
@@ -522,11 +523,6 @@
   }
   
   /* Followlines */
-  div.page_body table tbody.sourcelines > tr.followlines-select:hover,
-  div.page_body pre.sourcelines > span.followlines-select:hover {
-    cursor: cell;
-  }
-  
   tbody.sourcelines > tr.followlines-selected,
   pre.sourcelines > span.followlines-selected {
     background-color: #99C7E9 !important;
@@ -564,21 +560,62 @@
     font-family: sans-serif;
   }
   
-  div#followlines-tooltip {
+  .btn-followlines {
     display: none;
-    position: fixed;
-    background-color: #ffc;
-    border: 1px solid #999;
-    padding: 2px;
+    cursor: pointer;
+    box-sizing: content-box;
+    font-size: 11px;
+    width: 13px;
+    height: 13px;
+    border-radius: 3px;
+    margin: 0px;
+    margin-top: -2px;
+    padding: 0px;
+    background-color: #E5FDE5;
+    border: 1px solid #9BC19B;
+    font-family: monospace;
+    text-align: center;
+    line-height: 5px;
+  }
+  
+  tr .btn-followlines {
+    position: absolute;
   }
   
-  .sourcelines:hover > div#followlines-tooltip {
+  span .btn-followlines {
+    float: left;
+  }
+  
+  span.followlines-select .btn-followlines {
+    margin-left: -1.6em;
+  }
+  
+  .btn-followlines:hover {
+    transform: scale(1.1, 1.1);
+  }
+  
+  .btn-followlines .followlines-plus {
+    color: green;
+  }
+  
+  .btn-followlines .followlines-minus {
+    color: red;
+  }
+  
+  .btn-followlines-end {
+    background-color: #ffdcdc;
+  }
+  
+  .sourcelines tr:hover .btn-followlines,
+  .sourcelines span.followlines-select:hover > .btn-followlines {
     display: inline;
   }
   
-  .sourcelines:hover > div#followlines-tooltip.hidden {
+  .btn-followlines-hidden,
+  .sourcelines tr:hover .btn-followlines-hidden {
     display: none;
   }
+  
   /* Graph */
   div#wrapper {
   	position: relative;
--- a/tests/test-highlight.t	Sat Jul 01 20:51:19 2017 -0700
+++ b/tests/test-highlight.t	Mon Jul 03 13:49:03 2017 +0200
@@ -314,7 +314,7 @@
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l1">     1</a> <span class="sd">&quot;&quot;&quot;Fun with generators. Corresponding Haskell implementation:</span></td>
+  <td class="source followlines-btn-parent"><a href="#l1">     1</a> <span class="sd">&quot;&quot;&quot;Fun with generators. Corresponding Haskell implementation:</span></td>
   </tr>
   <tr id="l2" class="thisrev">
   <td class="annotate parity0">
@@ -331,7 +331,7 @@
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l2">     2</a> </td>
+  <td class="source followlines-btn-parent"><a href="#l2">     2</a> </td>
   </tr>
   <tr id="l3" class="thisrev">
   <td class="annotate parity0">
@@ -348,7 +348,7 @@
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l3">     3</a> <span class="sd">primes = 2 : sieve [3, 5..]</span></td>
+  <td class="source followlines-btn-parent"><a href="#l3">     3</a> <span class="sd">primes = 2 : sieve [3, 5..]</span></td>
   </tr>
   <tr id="l4" class="thisrev">
   <td class="annotate parity0">
@@ -365,7 +365,7 @@
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l4">     4</a> <span class="sd">    where sieve (p:ns) = p : sieve [n | n &lt;- ns, mod n p /= 0]</span></td>
+  <td class="source followlines-btn-parent"><a href="#l4">     4</a> <span class="sd">    where sieve (p:ns) = p : sieve [n | n &lt;- ns, mod n p /= 0]</span></td>
   </tr>
   <tr id="l5" class="thisrev">
   <td class="annotate parity0">
@@ -382,7 +382,7 @@
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l5">     5</a> <span class="sd">&quot;&quot;&quot;</span></td>
+  <td class="source followlines-btn-parent"><a href="#l5">     5</a> <span class="sd">&quot;&quot;&quot;</span></td>
   </tr>
   <tr id="l6" class="thisrev">
   <td class="annotate parity0">
@@ -399,7 +399,7 @@
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l6">     6</a> </td>
+  <td class="source followlines-btn-parent"><a href="#l6">     6</a> </td>
   </tr>
   <tr id="l7" class="thisrev">
   <td class="annotate parity0">
@@ -416,7 +416,7 @@
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l7">     7</a> <span class="kn">from</span> <span class="nn">itertools</span> <span class="kn">import</span> <span class="n">dropwhile</span><span class="p">,</span> <span class="n">ifilter</span><span class="p">,</span> <span class="n">islice</span><span class="p">,</span> <span class="n">count</span><span class="p">,</span> <span class="n">chain</span></td>
+  <td class="source followlines-btn-parent"><a href="#l7">     7</a> <span class="kn">from</span> <span class="nn">itertools</span> <span class="kn">import</span> <span class="n">dropwhile</span><span class="p">,</span> <span class="n">ifilter</span><span class="p">,</span> <span class="n">islice</span><span class="p">,</span> <span class="n">count</span><span class="p">,</span> <span class="n">chain</span></td>
   </tr>
   <tr id="l8" class="thisrev">
   <td class="annotate parity0">
@@ -433,7 +433,7 @@
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l8">     8</a> </td>
+  <td class="source followlines-btn-parent"><a href="#l8">     8</a> </td>
   </tr>
   <tr id="l9" class="thisrev">
   <td class="annotate parity0">
@@ -450,7 +450,7 @@
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l9">     9</a> <span class="kn">def</span> <span class="nf">primes</span><span class="p">():</span></td>
+  <td class="source followlines-btn-parent"><a href="#l9">     9</a> <span class="kn">def</span> <span class="nf">primes</span><span class="p">():</span></td>
   </tr>
   <tr id="l10" class="thisrev">
   <td class="annotate parity0">
@@ -467,7 +467,7 @@
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l10">    10</a>     <span class="sd">&quot;&quot;&quot;Generate all primes.&quot;&quot;&quot;</span></td>
+  <td class="source followlines-btn-parent"><a href="#l10">    10</a>     <span class="sd">&quot;&quot;&quot;Generate all primes.&quot;&quot;&quot;</span></td>
   </tr>
   <tr id="l11" class="thisrev">
   <td class="annotate parity0">
@@ -484,7 +484,7 @@
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l11">    11</a>     <span class="kn">def</span> <span class="nf">sieve</span><span class="p">(</span><span class="n">ns</span><span class="p">):</span></td>
+  <td class="source followlines-btn-parent"><a href="#l11">    11</a>     <span class="kn">def</span> <span class="nf">sieve</span><span class="p">(</span><span class="n">ns</span><span class="p">):</span></td>
   </tr>
   <tr id="l12" class="thisrev">
   <td class="annotate parity0">
@@ -501,7 +501,7 @@
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l12">    12</a>         <span class="n">p</span> <span class="o">=</span> <span class="n">ns</span><span class="o">.</span><span class="n">next</span><span class="p">()</span></td>
+  <td class="source followlines-btn-parent"><a href="#l12">    12</a>         <span class="n">p</span> <span class="o">=</span> <span class="n">ns</span><span class="o">.</span><span class="n">next</span><span class="p">()</span></td>
   </tr>
   <tr id="l13" class="thisrev">
   <td class="annotate parity0">
@@ -518,7 +518,7 @@
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l13">    13</a>         <span class="c"># It is important to yield *here* in order to stop the</span></td>
+  <td class="source followlines-btn-parent"><a href="#l13">    13</a>         <span class="c"># It is important to yield *here* in order to stop the</span></td>
   </tr>
   <tr id="l14" class="thisrev">
   <td class="annotate parity0">
@@ -535,7 +535,7 @@
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l14">    14</a>         <span class="c"># infinite recursion.</span></td>
+  <td class="source followlines-btn-parent"><a href="#l14">    14</a>         <span class="c"># infinite recursion.</span></td>
   </tr>
   <tr id="l15" class="thisrev">
   <td class="annotate parity0">
@@ -552,7 +552,7 @@
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l15">    15</a>         <span class="kn">yield</span> <span class="n">p</span></td>
+  <td class="source followlines-btn-parent"><a href="#l15">    15</a>         <span class="kn">yield</span> <span class="n">p</span></td>
   </tr>
   <tr id="l16" class="thisrev">
   <td class="annotate parity0">
@@ -569,7 +569,7 @@
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l16">    16</a>         <span class="n">ns</span> <span class="o">=</span> <span class="n">ifilter</span><span class="p">(</span><span class="kn">lambda</span> <span class="n">n</span><span class="p">:</span> <span class="n">n</span> <span class="o">%</span> <span class="n">p</span> <span class="o">!=</span> <span class="mi">0</span><span class="p">,</span> <span class="n">ns</span><span class="p">)</span></td>
+  <td class="source followlines-btn-parent"><a href="#l16">    16</a>         <span class="n">ns</span> <span class="o">=</span> <span class="n">ifilter</span><span class="p">(</span><span class="kn">lambda</span> <span class="n">n</span><span class="p">:</span> <span class="n">n</span> <span class="o">%</span> <span class="n">p</span> <span class="o">!=</span> <span class="mi">0</span><span class="p">,</span> <span class="n">ns</span><span class="p">)</span></td>
   </tr>
   <tr id="l17" class="thisrev">
   <td class="annotate parity0">
@@ -586,7 +586,7 @@
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l17">    17</a>         <span class="kn">for</span> <span class="n">n</span> <span class="ow">in</span> <span class="n">sieve</span><span class="p">(</span><span class="n">ns</span><span class="p">):</span></td>
+  <td class="source followlines-btn-parent"><a href="#l17">    17</a>         <span class="kn">for</span> <span class="n">n</span> <span class="ow">in</span> <span class="n">sieve</span><span class="p">(</span><span class="n">ns</span><span class="p">):</span></td>
   </tr>
   <tr id="l18" class="thisrev">
   <td class="annotate parity0">
@@ -603,7 +603,7 @@
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l18">    18</a>             <span class="kn">yield</span> <span class="n">n</span></td>
+  <td class="source followlines-btn-parent"><a href="#l18">    18</a>             <span class="kn">yield</span> <span class="n">n</span></td>
   </tr>
   <tr id="l19" class="thisrev">
   <td class="annotate parity0">
@@ -620,7 +620,7 @@
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l19">    19</a> </td>
+  <td class="source followlines-btn-parent"><a href="#l19">    19</a> </td>
   </tr>
   <tr id="l20" class="thisrev">
   <td class="annotate parity0">
@@ -637,7 +637,7 @@
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l20">    20</a>     <span class="n">odds</span> <span class="o">=</span> <span class="n">ifilter</span><span class="p">(</span><span class="kn">lambda</span> <span class="n">i</span><span class="p">:</span> <span class="n">i</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">==</span> <span class="mi">1</span><span class="p">,</span> <span class="n">count</span><span class="p">())</span></td>
+  <td class="source followlines-btn-parent"><a href="#l20">    20</a>     <span class="n">odds</span> <span class="o">=</span> <span class="n">ifilter</span><span class="p">(</span><span class="kn">lambda</span> <span class="n">i</span><span class="p">:</span> <span class="n">i</span> <span class="o">%</span> <span class="mi">2</span> <span class="o">==</span> <span class="mi">1</span><span class="p">,</span> <span class="n">count</span><span class="p">())</span></td>
   </tr>
   <tr id="l21" class="thisrev">
   <td class="annotate parity0">
@@ -654,7 +654,7 @@
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l21">    21</a>     <span class="kn">return</span> <span class="n">chain</span><span class="p">([</span><span class="mi">2</span><span class="p">],</span> <span class="n">sieve</span><span class="p">(</span><span class="n">dropwhile</span><span class="p">(</span><span class="kn">lambda</span> <span class="n">n</span><span class="p">:</span> <span class="n">n</span> <span class="o">&lt;</span> <span class="mi">3</span><span class="p">,</span> <span class="n">odds</span><span class="p">)))</span></td>
+  <td class="source followlines-btn-parent"><a href="#l21">    21</a>     <span class="kn">return</span> <span class="n">chain</span><span class="p">([</span><span class="mi">2</span><span class="p">],</span> <span class="n">sieve</span><span class="p">(</span><span class="n">dropwhile</span><span class="p">(</span><span class="kn">lambda</span> <span class="n">n</span><span class="p">:</span> <span class="n">n</span> <span class="o">&lt;</span> <span class="mi">3</span><span class="p">,</span> <span class="n">odds</span><span class="p">)))</span></td>
   </tr>
   <tr id="l22" class="thisrev">
   <td class="annotate parity0">
@@ -671,7 +671,7 @@
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l22">    22</a> </td>
+  <td class="source followlines-btn-parent"><a href="#l22">    22</a> </td>
   </tr>
   <tr id="l23" class="thisrev">
   <td class="annotate parity0">
@@ -688,7 +688,7 @@
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l23">    23</a> <span class="kn">if</span> <span class="n">__name__</span> <span class="o">==</span> <span class="s">&quot;__main__&quot;</span><span class="p">:</span></td>
+  <td class="source followlines-btn-parent"><a href="#l23">    23</a> <span class="kn">if</span> <span class="n">__name__</span> <span class="o">==</span> <span class="s">&quot;__main__&quot;</span><span class="p">:</span></td>
   </tr>
   <tr id="l24" class="thisrev">
   <td class="annotate parity0">
@@ -705,7 +705,7 @@
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l24">    24</a>     <span class="kn">import</span> <span class="nn">sys</span></td>
+  <td class="source followlines-btn-parent"><a href="#l24">    24</a>     <span class="kn">import</span> <span class="nn">sys</span></td>
   </tr>
   <tr id="l25" class="thisrev">
   <td class="annotate parity0">
@@ -722,7 +722,7 @@
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l25">    25</a>     <span class="kn">try</span><span class="p">:</span></td>
+  <td class="source followlines-btn-parent"><a href="#l25">    25</a>     <span class="kn">try</span><span class="p">:</span></td>
   </tr>
   <tr id="l26" class="thisrev">
   <td class="annotate parity0">
@@ -739,7 +739,7 @@
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l26">    26</a>         <span class="n">n</span> <span class="o">=</span> <span class="nb">int</span><span class="p">(</span><span class="n">sys</span><span class="o">.</span><span class="n">argv</span><span class="p">[</span><span class="mi">1</span><span class="p">])</span></td>
+  <td class="source followlines-btn-parent"><a href="#l26">    26</a>         <span class="n">n</span> <span class="o">=</span> <span class="nb">int</span><span class="p">(</span><span class="n">sys</span><span class="o">.</span><span class="n">argv</span><span class="p">[</span><span class="mi">1</span><span class="p">])</span></td>
   </tr>
   <tr id="l27" class="thisrev">
   <td class="annotate parity0">
@@ -756,7 +756,7 @@
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l27">    27</a>     <span class="kn">except</span> <span class="p">(</span><span class="ne">ValueError</span><span class="p">,</span> <span class="ne">IndexError</span><span class="p">):</span></td>
+  <td class="source followlines-btn-parent"><a href="#l27">    27</a>     <span class="kn">except</span> <span class="p">(</span><span class="ne">ValueError</span><span class="p">,</span> <span class="ne">IndexError</span><span class="p">):</span></td>
   </tr>
   <tr id="l28" class="thisrev">
   <td class="annotate parity0">
@@ -773,7 +773,7 @@
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l28">    28</a>         <span class="n">n</span> <span class="o">=</span> <span class="mi">10</span></td>
+  <td class="source followlines-btn-parent"><a href="#l28">    28</a>         <span class="n">n</span> <span class="o">=</span> <span class="mi">10</span></td>
   </tr>
   <tr id="l29" class="thisrev">
   <td class="annotate parity0">
@@ -790,7 +790,7 @@
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l29">    29</a>     <span class="n">p</span> <span class="o">=</span> <span class="n">primes</span><span class="p">()</span></td>
+  <td class="source followlines-btn-parent"><a href="#l29">    29</a>     <span class="n">p</span> <span class="o">=</span> <span class="n">primes</span><span class="p">()</span></td>
   </tr>
   <tr id="l30" class="thisrev">
   <td class="annotate parity0">
@@ -807,7 +807,7 @@
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l30">    30</a>     <span class="kn">print</span> <span class="s">&quot;The first </span><span class="si">%d</span><span class="s"> primes: </span><span class="si">%s</span><span class="s">&quot;</span> <span class="o">%</span> <span class="p">(</span><span class="n">n</span><span class="p">,</span> <span class="nb">list</span><span class="p">(</span><span class="n">islice</span><span class="p">(</span><span class="n">p</span><span class="p">,</span> <span class="n">n</span><span class="p">)))</span></td>
+  <td class="source followlines-btn-parent"><a href="#l30">    30</a>     <span class="kn">print</span> <span class="s">&quot;The first </span><span class="si">%d</span><span class="s"> primes: </span><span class="si">%s</span><span class="s">&quot;</span> <span class="o">%</span> <span class="p">(</span><span class="n">n</span><span class="p">,</span> <span class="nb">list</span><span class="p">(</span><span class="n">islice</span><span class="p">(</span><span class="n">p</span><span class="p">,</span> <span class="n">n</span><span class="p">)))</span></td>
   </tr>
   <tr id="l31" class="thisrev">
   <td class="annotate parity0">
@@ -824,7 +824,7 @@
   <a href="/rev/1af356141006">changeset</a>
   </div>
   </td>
-  <td class="source"><a href="#l31">    31</a> </td>
+  <td class="source followlines-btn-parent"><a href="#l31">    31</a> </td>
   </tr>
   </tbody>
   </table>