[PATCH] paper: make all source lines have the same minimum height

Anton Shestakov av6 at dwimlabs.net
Wed Apr 4 06:52:23 UTC 2018


# HG changeset patch
# User Anton Shestakov <av6 at 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.

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;
 }


More information about the Mercurial-devel mailing list