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

Martin Geisler martin at geisler.net
Wed Jul 3 17:25:30 CDT 2013


Alexander Plavin <me at aplavin.ru> writes:

> 2013/7/3 Laurens Holst <laurens.nospam at grauw.nl>:
>> Op 03-07-13 18:49, Alexander Plavin schreef:
>>>
>>> 2013/7/3 Laurens Holst <laurens.nospam at grauw.nl>:
>>>
>>>> “ I don’t like that the screen jumps when you select something. I like to
>>>> select where I’m reading so I don’t lose track, and this heavily
>>>> interferes
>>>> with that. It would be better if only clicking on the line number would
>>>> change the target.”
>>>
>>> Using this strategy there are no unexpected jumps. You can look at
>>> this at hg.aplavin.ru :)
>>
>>
>> Thanks for pointing me to it.
>>
>> I think it is the same as it was before, it jumps when you deselect... So it
>> still interferes with me :). I’d rather prefer that just the line numbers
>> were clickable, the way it works now.
>
> It's impossible to add click handler just to the :before pseudo
> element.

Yes, I learned today that the pseudo elements exist outside the normal
DOM. However, we can add an element in the dom...

> However, I haven't noticed this before you told, as I
> unselected by clicking not at the code.

The version below uses no JavaScript and only lets you click in the
first 30px of each line. I've only tested it in Firefox where it seems
to work well. I experimented a bit to see if I could influence the line
numbers when hovering on the a elements, e.g., to add an underline, but
I didn't figure out a way to do that.


<html>
<head>
    <style>
        pre {
            position: relative;
        }
        pre span {
            display: inline-block;
            width: 100%;
            white-space: pre-wrap;
            counter-increment: lineno;
        }
        pre span:before {
            display: inline-block;
            width: 30px;
            margin-right: 1em;
            font-size: small;
            font-style: italic;
            text-align: right;
            content: counter(lineno);
        }
        pre span:nth-child(4n+1) {
            background-color: lightgrey;
        }
        pre span:target {
            background-color: yellow;
        }
        pre a {
            display: inline-block;
            position: absolute;
            left: 0px;
            width: 30px;
            height: 2ex;
            outline: thin dashed red;
        }
    </style>
</head>
<body>
    <p>Text before</p>
<pre>
<span id="l1">	Leading tab</span><a href="#l1"></a>
<span id="l2">  Leading whitespace</span><a href="#l2"></a>
<span id="l3">Trailing whitespace:   </span><a href="#l3"></a>
<span id="l4">More trailing whitespace...   </span><a href="#l4"></a>
<span id="l5">Embedded	tab.</span><a href="#l5"></a>
<span id="l6">Very, very, long, very, long, very, long, very, long, very, long, long line...</span><a href="#l6"></a>
<span id="l7">Trailing whitespace!   </span><a href="#l7"></a>
<span id="l8">More trailing whitespace...   </span><a href="#l8"></a>
</pre>
    <p>Text after</p>
</body>
</html>

-- 
Martin Geisler
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: application/pgp-signature
Size: 835 bytes
Desc: not available
URL: <http://selenic.com/pipermail/mercurial-devel/attachments/20130704/a7d6fcd8/attachment.pgp>


More information about the Mercurial-devel mailing list