[PATCH RFC] hgweb: code selection without line numbers in file source view

Wed Jul 3 05:06:21 CDT 2013

In this case the whole lines are links, which makes it impossible to
select a random region (at least I couldn't do it) and isn't a good thing
anyway as for me. Also, both embedded and leading tabs are lost on
copy (tried several times, as you state the opposite, but same
result).

2013/7/3 Martin Geisler <martin at geisler.net>:
> Alexander Plavin <me at aplavin.ru> writes:
>
>> # HG changeset patch
>> # User Alexander Plavin <me at aplavin.ru>
>> # Date 1372180221 -14400
>> #      Tue Jun 25 21:10:21 2013 +0400
>> # Node ID bc3e72c2e619659e7cd73f28aa95dd27dd7d3812
>> # Parent  d7b4aa1049d3fbbc2b8d24114afad82586c49db3
>> hgweb: code selection without line numbers in file source view
>>
>> File code is presented as HTML ordered list, so that
>> line numbers are not selected with the code itself.
>>
>> There are different possible strategies to implement the source code view,
>> and they have different pros/cons. Here follows a simple comparison table for
>> possible implementations:
>>
>> Strategy             FF              Chrome
>>
>> current             D,LT,E,T,L        D,L
>> pre                 S,NW              S,NW
>> pre/div/nbsp        LT,E,T,TS,NW      TS,NW
>> pre/div/br          LT,E,T,NW         NW
>> ol/li/nbsp          LT,E,T,TS,AJ      TS,AJ
>> ol/li/br            LT,E,T,AJ         AJ
>>
>> Legend
>>
>> Strategies:
>> - current: implemented in hgweb before this patch, i.e. divs for each line,
>> and line numbers links in the div too
>> - pre: the whole code in one pre tag with newlines, all line numbers
>> in another one with 'float: left'
>> - pre/div/{nbsp,br}: same as just 'pre', but separate divs for each line and
>>   or <br> instead of empty lines (otherwise they are not copied at all)
>> - ol/li/{nbsp,br}: a single ol with li's and divs for each line,
>>   or <br> same as in previous strategy
>
> It is not clear to me if you have tried to simply use this strategy
> coupled with CSS that adds line numbers and colors the rows:
>
>  <pre>
>     <a id="l1" href="#l1">   the line  </a>
>  </pre>
>
> That seems to work when I test it in Firefox and Chrome and supports
> leading TABs, line links, highlighing the current line, styling the page
> numbers independently, etc. There is a full example below -- try
> clicking on differnet lines and try copy-pasting it of course.
>
> The question is if :before, :nth-child, and :target is supported by
> enough browsers. There are statistics here:
>
>   http://caniuse.com/#feat=css-gencontent (:before)
>   http://caniuse.com/#feat=css-sel3 (:nth-child, :target)
>
> In both cases, they say that 87% of visitors should be able to see the
> whole thing. If a browser doesn't support CSS generated content the line
> numbers disappear, if it doesn't support CSS3 selectors, the highlight
> on the linked line go away (but you can still link to it).
>
> The version below wraps long lines, and when doing so the wrapped line
> begins below the line number. I'm not sure that is a problem. Change
> 'white-space: pre-wrap' to 'overflow-x: hidden' to make the lines be cut
> off where the background color ends (instead of bleeding out into the
> parge margin).
>
>
> <html>
> <head>
>     <style>
>         pre > a {
>             display: inline-block;
>             width: 100%;
>             white-space: pre-wrap;
>             text-decoration: none;
>             counter-increment: lineno;
>         }
>         pre > a:before {
>             display: inline-block;
>             width: 2em;
>             margin-right: 1em;
>             font-size: small;
>             font-style: italic;
>             text-align: right;
>             content: counter(lineno);
>         }
>         pre > a:nth-child(even) {
>             background-color: lightgrey;
>         }
>         pre > a:target {
>             background-color: yellow;
>         }
>     </style>
> </head>
> <body>
>
>     <p>Text before</p>
>
> <pre>
> <a id="l1" href="#l1">  Leading tab</a>
> <a id="l2" href="#l2">  Leading whitespace</a>
> <a id="l3" href="#l3">Trailing whitespace:   </a>
> <a id="l4" href="#l4">Embedded   whitespace</a>
> <a id="l5" href="#l5">Embedded  tab.</a>
> <a id="l6" href="#l6">Very, very, long, very, long, very, long, very, long, very, long, long line...</a>
> <a id="l7" href="#l7">Trailing whitespace!   </a>
> <a id="l8" href="#l8">More trailing whitespace...   </a>
> </pre>
>
>     <p>Text after</p>
>
> </body>
>
> </html>
>
>
> --
> Martin Geisler