Re: [PATCH] Highlight the link target line in Gitweb using CSS

From: Matthew Blissett <matt@blissett.me.uk>
Date: Dec 20, 2012, 22:35 UTC
Message-ID: <CAKW1YCZLUS1LH+cAad08WhG5RLwXARMupEStrH8cdyhQY1itzg@mail.gmail.com>
In-Reply-To: <7vbodo4f6q.fsf@alter.siamese.dyndns.org>

On 20 December 2012 20:54, Junio C Hamano <gitster@pobox.com> wrote:

> [jc: adding area expert to Cc]

Thanks.

Show 22 quoted lines

> Matthew Blissett <matt@blissett.me.uk> writes:
>
> > This is useful when a Gitweb link with a target (like #l100) refers to
> > a line in the last screenful of text.  Highlight the background in
> > yellow, and display a ⚓ character on the left.  Show the same
> > highlight when hovering the mouse over a line number.
> >
> > Signed-off-by: Matthew Blissett <matt@blissett.me.uk>
> > ---
> > The background-colour change is the 'main' (tiny) change.
>
> In the "blob" view, I think it does make it more discoverable that
> these line numbers are links, so I personally think a.linenr:hover
> part is an improvement.  I am not sure about other three changes
> adding any value, though.
>
> > Consider the ::before part a suggestion.  I think it helps show the
> > target line, but it does overlap the first character of any line >999.
>
> Actually, when viewing the blame view, this is even worse, as it
> seems to always overlap.  The background color ought to be enough
> cue without being overly distracting, I would have to say.

I didn't know about blame-view, sorry. The line-number links in that view aren't self-referential, so the ⚓ symbol is misleading. I'm not sure if that's a mistake, or if the links are supposed to point to the commit that introduced the change. In any case, often they point to the parent commit instead.

Just this:
/* Pink highlight when hovering line numbers or linking to them */
.pre a.linenr:hover,
.pre a.linenr:target {
	color: #444444;
	background-color: #f8f;
}
is probably best.  A pink background, which shows up better than
yellow, and only in blob view.  The :target background also helps mark
the chosen line after scrolling.

If blame view is supposed to have the same behaviour (self-referential
links) then these two CSS selectors are appropriate:
    .blame tr:target .linenr a, .blame tr .linenr a:hover

-- 
Thanks,
Matt