Patchwork [3,of,3,V3] paper: make all source lines have the same minimum height

login
register
mail settings
Submitter Anton Shestakov
Date April 9, 2018, 2:16 p.m.
Message ID <ac7a25c5acc5b69305d7.1523283408@neuro>
Download mbox | patch
Permalink /patch/30587/
State Accepted
Headers show

Comments

Anton Shestakov - April 9, 2018, 2:16 p.m.
# HG changeset patch
# User Anton Shestakov <av6@dwimlabs.net>
# Date 1522818888 -28800
#      Wed Apr 04 13:14:48 2018 +0800
# Node ID ac7a25c5acc5b69305d78b2d56475f9599553711
# Parent  281674337d7709b4fa8e4d0425e7879c2300af28
paper: make all source lines have the same minimum height

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
functionality was added, but after that just using the follow-lines button to
select a block of code with empty lines would demonstrate the fact that empty
lines didn't have enough height - there were white "gaps" in the selection
block.

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 doesn't remove the gaps when viewed in
Chromium.

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