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

Wed Jul 3 04:50:41 CDT 2013

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