[PATCH v2] blame: css: make blame highlight div absolute and top left

[John Keeping]

On Mon, Jun 18, 2018 at 02:02:54PM +0800, Andy Green wrote:
> Normal operation of blame view requires div.highlight to
> have absolute position and set to its parent's top left
> for me.
> 
> Otherwise the grey background boxes indicating the extent of
> the patch in the lines td displace the highlit sources, they
> start at the bottom of the td.
> 
> This patch makes the blame highlight div start back up the top of
> its parent area and render on top of the grey boxes.
> 
> Checked on Linux Firefox 60 and Linux Chrome 69.

Which browser is this broken in?  I tried Linux Firefox 60 and Chromium
67 and it looks ok without this patch.  (I'm not opposed to the patch in
principle, indeed it seems like a sensible change, but I'm curious why I
can't reproduce the problem.)

> "highlight" div class name is also used in md2html rendering
> output.  So this patch solves it by introducing a wrapper
> div and new "blame_highlight" css class.
> 
> Signed-off-by: Andy Green <andy at warmcat.com>
> ---
>  cgit.css   |    2 ++
>  ui-blame.c |    4 ++--
>  2 files changed, 4 insertions(+), 2 deletions(-)
> 
> diff --git a/cgit.css b/cgit.css
> index da8d9b0..5a85ceb 100644
> --- a/cgit.css
> +++ b/cgit.css
> @@ -162,6 +162,8 @@ div#cgit table.list tr.nohover-highlight:hover:nth-child(odd) {
>  	background: white;
>  }
>  
> +div#cgit div.blame_highlight { position: absolute; top: 0; left: 0; }

Is the "left" needed here?  I don't see any problem with setting the
position and top attributes, but setting left:0 moves the content right
up against the cell boundary where before we had a slight gap.

> +
>  div#cgit table.list th {
>  	font-weight: bold;
>  	/* color: #888;
> diff --git a/ui-blame.c b/ui-blame.c
> index 6e23f0b..ab44e3f 100644
> --- a/ui-blame.c
> +++ b/ui-blame.c
> @@ -196,7 +196,7 @@ static void print_object(const struct object_id *oid, const char *path,
>  	free((void *)sb.final_buf);
>  
>  	/* Lines */
> -	html("<pre><code>");
> +	html("<div class=\"blame_highlight\"> <pre><code>");

No need for a space before <pre> here.

>  	if (ctx.repo->source_filter) {
>  		char *filter_arg = xstrdup(basename);
>  		cgit_open_filter(ctx.repo->source_filter, filter_arg);
> @@ -207,7 +207,7 @@ static void print_object(const struct object_id *oid, const char *path,
>  		html_txt(buf);
>  	}
>  
> -	html("</code></pre>");
> +	html("</code></pre></div>");
>  
>  	html("</div></td>\n");
>