Patchwork paper: make all source lines have the same minimum height

login
register
mail settings
Submitter Anton Shestakov
Date April 4, 2018, 6:52 a.m.
Message ID <cec6b1932d091667b65d.1522824743@neuro>
Download mbox | patch
Permalink /patch/30246/
State Superseded
Headers show

Comments

Anton Shestakov - April 4, 2018, 6:52 a.m.
# HG changeset patch
# User Anton Shestakov <av6@dwimlabs.net>
# Date 1522818888 -28800
#      Wed Apr 04 13:14:48 2018 +0800
# Node ID cec6b1932d091667b65daa5d2260b665a7f07e81
# Parent  0a1fb171dc1ddd6a1cd1a5666e92299db12e9f5d
paper: make all source lines have the same minimum height

In Chromium, empty source lines in paper and coal themes used to have smaller
height than every other line (because of the way line numbers are shown and
because they are using smaller font). This wasn't very noticeable before the
follow-lines button was added. After that, viewing any file with empty lines
turned into a jerky mess, because the button would bump the height of empty
lines up to its proper value on hover, and undo it when mouse cursor was gone,
so every line after the one that was hovered upon would jump down and then back
up 2px.

Since this problem occurs when lines don't have any content inside, let's
create a pseudo-element (it's unselectable because of that) which still doesn't
have any content, but fills up empty lines to 100% of their height because of
display: inline-block. This is the most natural way to solve this annoyance
that I've found so far.

Hardcoding height isn't useful because we can have wrapped lines, in which case
multiple lines of text need to fit into a single <span>.

Setting min-height or line-height didn't work for some reason; it produced
weird visuals when highlighting an empty line.

Maybe this could also be fixed by tweaking some properties of the follow-lines
button, because it's currently present on every line (with display: none), but
I think it would be a good idea to actually not have it on every line and
create it dynamically by the same script that has the rest of the follow-lines
functionality.
Yuya Nishihara - April 4, 2018, 1:01 p.m.
On Wed, 04 Apr 2018 14:52:23 +0800, Anton Shestakov wrote:
> # HG changeset patch
> # User Anton Shestakov <av6@dwimlabs.net>
> # Date 1522818888 -28800
> #      Wed Apr 04 13:14:48 2018 +0800
> # Node ID cec6b1932d091667b65daa5d2260b665a7f07e81
> # Parent  0a1fb171dc1ddd6a1cd1a5666e92299db12e9f5d
> paper: make all source lines have the same minimum height
> 
> In Chromium, empty source lines in paper and coal themes used to have smaller
> height than every other line (because of the way line numbers are shown and
> because they are using smaller font). This wasn't very noticeable before the
> follow-lines button was added. After that, viewing any file with empty lines
> turned into a jerky mess, because the button would bump the height of empty
> lines up to its proper value on hover, and undo it when mouse cursor was gone,
> so every line after the one that was hovered upon would jump down and then back
> up 2px.

I see this weird behavior on every line in Chromium, with/without this patch.

> +.sourcelines > span:after {
> +  content: '';
> +  display: inline-block;
> +}

Perhaps we'll have to make the button "detached" from the normal flow by
e.g. adding "position: absolute" ?

Patch

diff --git a/mercurial/templates/static/style-paper.css b/mercurial/templates/static/style-paper.css
--- a/mercurial/templates/static/style-paper.css
+++ b/mercurial/templates/static/style-paper.css
@@ -308,6 +308,11 @@  td.annotate:hover div.annotate-info { di
   float: left;
 }
 
+.sourcelines > span:after {
+  content: '';
+  display: inline-block;
+}
+
 .sourcelines > span:target, tr:target td {
   background-color: #bfdfff;
 }