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

[andy at warmcat.com (Andy Green)]

On June 19, 2018 2:57:47 AM GMT+08:00, John Keeping <john at keeping.me.uk> wrote:
>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.)

It's not caused in the browser, I checked the cgit site blame and that doesn't have the problem.  I also went back to check just master without anything on top, and it's still broken on my box.  I confirmed I'm using the latest css, and that snipping the div with the boxes in the lines td (using developer tools / inspector in ffox) is also enough to have it display correctly.

Md2html seems to issue inline css style related to "highlight" as part of its processing, I think as it is, that may put the actual rendering behaviour at the mercy of pygments version or whatever actually generates that.  So separating the css to a different name is likely needed for robustness anyway.

My box is fedora 28.

python3-pygments-2.2.0-10.fc28.noarch

>> "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.

OK... it was not offset horizontally anyway so this is overkill.  I'll remove it.

-Andy

>> +
>>  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");
>>