Patchwork [3,of,3,RFC] hgweb: code selection without line numbers in file diff and changeset views

login
register
mail settings
Submitter Alexander Plavin
Date June 29, 2013, 2:06 p.m.
Message ID <03f763079a3e8525c578.1372514817@debian-alexander.dolgopa>
Download mbox | patch
Permalink /patch/1765/
State Superseded, archived
Headers show

Comments

Alexander Plavin - June 29, 2013, 2:06 p.m.
# HG changeset patch
# User Alexander Plavin <me@aplavin.ru>
# Date 1369931030 -14400
#      Thu May 30 20:23:50 2013 +0400
# Node ID 03f763079a3e8525c5788f5238ff87ea0a90d0f4
# Parent  cc47e0b1bf3ecf020a1f84753694502ef4b9b603
hgweb: code selection without line numbers in file diff and changeset views

File diff and changeset views display lines the same way as file code view, as
HTML ordered list, so that line numbers are not selected with the code itself.

This patch changes the visual appearance of the diffs a little:
- line numbers have dots after them
- 'line diff' heading above the source lines removed
- line numbers and lines have a vertical line between them
  for better distinction
Laurens Holst - June 29, 2013, 3:23 p.m.
Op 29-6-2013 16:06, Alexander Plavin schreef:
> # HG changeset patch
> # User Alexander Plavin <me@aplavin.ru>
> # Date 1369931030 -14400
> #      Thu May 30 20:23:50 2013 +0400
> # Node ID 03f763079a3e8525c5788f5238ff87ea0a90d0f4
> # Parent  cc47e0b1bf3ecf020a1f84753694502ef4b9b603
> hgweb: code selection without line numbers in file diff and changeset views
>
> File diff and changeset views display lines the same way as file code view, as
> HTML ordered list, so that line numbers are not selected with the code itself.
>
> This patch changes the visual appearance of the diffs a little:
> - line numbers have dots after them
> - 'line diff' heading above the source lines removed
> - line numbers and lines have a vertical line between them
>    for better distinction
>
> diff -r cc47e0b1bf3e -r 03f763079a3e mercurial/templates/paper/changeset.tmpl
> --- a/mercurial/templates/paper/changeset.tmpl	Tue Jun 25 21:12:27 2013 +0400
> +++ b/mercurial/templates/paper/changeset.tmpl	Thu May 30 20:23:50 2013 +0400
> @@ -77,7 +77,7 @@
>   </table>
>   
>   <div class="overflow">
> -<div class="sourcefirst">   line diff</div>
> +<div class="sourcefirst"></div>
>   
>   {diff}
>   </div>
> diff -r cc47e0b1bf3e -r 03f763079a3e mercurial/templates/paper/filediff.tmpl
> --- a/mercurial/templates/paper/filediff.tmpl	Tue Jun 25 21:12:27 2013 +0400
> +++ b/mercurial/templates/paper/filediff.tmpl	Thu May 30 20:23:50 2013 +0400
> @@ -68,7 +68,7 @@
>   </table>
>   
>   <div class="overflow">
> -<div class="sourcefirst">   line diff</div>
> +<div class="sourcefirst"></div>
>   
>   {diff}
>   </div>
> diff -r cc47e0b1bf3e -r 03f763079a3e mercurial/templates/paper/map
> --- a/mercurial/templates/paper/map	Tue Jun 25 21:12:27 2013 +0400
> +++ b/mercurial/templates/paper/map	Thu May 30 20:23:50 2013 +0400
> @@ -84,11 +84,11 @@
>       <td class="source"><a href="#{lineid}" id="{lineid}">{linenumber}</a> {line|escape}</td>
>     </tr>'
>   
> -diffblock = '<div class="source bottomline parity{parity}"><pre>{lines}</pre></div>'
> -difflineplus = '<a href="#{lineid}" id="{lineid}">{linenumber}</a> <span class="plusline">{line|escape}</span>'
> -difflineminus = '<a href="#{lineid}" id="{lineid}">{linenumber}</a> <span class="minusline">{line|escape}</span>'
> -difflineat = '<a href="#{lineid}" id="{lineid}">{linenumber}</a> <span class="atline">{line|escape}</span>'
> -diffline = '<a href="#{lineid}" id="{lineid}">{linenumber}</a> {line|escape}'
> +diffblock = '<div class="bottomline"><ol class="parity{parity} sourcelines">{lines}</ol></div>'
> +difflineplus = '<li class="source" id="{lineid}"><div class="plusline">{nonempty(strip(line|escape, '\r\n'), '&nbsp;')}</div></li>'
> +difflineminus = '<li class="source" id="{lineid}"><div class="minusline">{nonempty(strip(line|escape, '\r\n'), '&nbsp;')}</div></li>'
> +difflineat = '<li class="source" id="{lineid}"><div class="atline">{nonempty(strip(line|escape, '\r\n'), '&nbsp;')}</div></li>'
> +diffline = '<li class="source" id="{lineid}"><div>{nonempty(strip(line|escape, '\r\n'), '&nbsp;')}</div></li>'
>   
>   comparisonblock ='
>     <tbody class="block">
> diff -r cc47e0b1bf3e -r 03f763079a3e mercurial/templates/static/style-paper.css
> --- a/mercurial/templates/static/style-paper.css	Tue Jun 25 21:12:27 2013 +0400
> +++ b/mercurial/templates/static/style-paper.css	Thu May 30 20:23:50 2013 +0400
> @@ -94,11 +94,11 @@
>   .age { white-space:nowrap; }
>   .date { white-space:nowrap; }
>   .indexlinks { white-space:nowrap; }
> -.parity0 { background-color: #f0f0f0; }
> -.parity1 { background-color: white; }
> -.plusline { color: green; }
> -.minusline { color: #dc143c; } /* crimson */
> -.atline { color: purple; }
> +.parity0 { background-color: #f0f0f0 !important; }
> +.parity1 { background-color: white !important; }
> +.plusline { color: green !important; }
> +.minusline { color: #dc143c !important; } /* crimson */
> +.atline { color: purple !important; }

There should be generally no need for web sites to use !important. Why 
are you using it here?

You can influence the cascade by either simply moving it below the thing 
you want to override, or increasing the specificity of your selector 
(e.g. div.atline or .source .atline).

See http://www.w3.org/TR/CSS2/cascade.html#cascade

>   
>   .diffstat-file {
>     white-space: nowrap;
> _______________________________________________
> Mercurial-devel mailing list
> Mercurial-devel@selenic.com
> http://selenic.com/mailman/listinfo/mercurial-devel
>
Alexander Plavin - June 29, 2013, 8:59 p.m.
I've always thought that using !important explicitly is better, than
just relying on the definitions order in css file, and so I preferred
to use this. And the reason such precedence changes are needed here is
that (there are 2 different cases):
a) elements having parity{0,1} class may have another class specifying
the background-color - then the parity color should be used (like
multiple files diffs in a changeset info view - they are of different
background color due to parity)
b) same with elements having {plus,minus,at}line, but color attribute
here (like in any view where there is file diff)

2013/6/29 Laurens Holst <laurens.nospam@grauw.nl>:
> Op 29-6-2013 16:06, Alexander Plavin schreef:
>
>> # HG changeset patch
>> # User Alexander Plavin <me@aplavin.ru>
>> # Date 1369931030 -14400
>> #      Thu May 30 20:23:50 2013 +0400
>> # Node ID 03f763079a3e8525c5788f5238ff87ea0a90d0f4
>> # Parent  cc47e0b1bf3ecf020a1f84753694502ef4b9b603
>> hgweb: code selection without line numbers in file diff and changeset
>> views
>>
>> File diff and changeset views display lines the same way as file code
>> view, as
>> HTML ordered list, so that line numbers are not selected with the code
>> itself.
>>
>> This patch changes the visual appearance of the diffs a little:
>> - line numbers have dots after them
>> - 'line diff' heading above the source lines removed
>> - line numbers and lines have a vertical line between them
>>    for better distinction
>>
>> diff -r cc47e0b1bf3e -r 03f763079a3e
>> mercurial/templates/paper/changeset.tmpl
>> --- a/mercurial/templates/paper/changeset.tmpl  Tue Jun 25 21:12:27 2013
>> +0400
>> +++ b/mercurial/templates/paper/changeset.tmpl  Thu May 30 20:23:50 2013
>> +0400
>> @@ -77,7 +77,7 @@
>>   </table>
>>     <div class="overflow">
>> -<div class="sourcefirst">   line diff</div>
>> +<div class="sourcefirst"></div>
>>     {diff}
>>   </div>
>> diff -r cc47e0b1bf3e -r 03f763079a3e
>> mercurial/templates/paper/filediff.tmpl
>> --- a/mercurial/templates/paper/filediff.tmpl   Tue Jun 25 21:12:27 2013
>> +0400
>> +++ b/mercurial/templates/paper/filediff.tmpl   Thu May 30 20:23:50 2013
>> +0400
>> @@ -68,7 +68,7 @@
>>   </table>
>>     <div class="overflow">
>> -<div class="sourcefirst">   line diff</div>
>> +<div class="sourcefirst"></div>
>>     {diff}
>>   </div>
>> diff -r cc47e0b1bf3e -r 03f763079a3e mercurial/templates/paper/map
>> --- a/mercurial/templates/paper/map     Tue Jun 25 21:12:27 2013 +0400
>> +++ b/mercurial/templates/paper/map     Thu May 30 20:23:50 2013 +0400
>> @@ -84,11 +84,11 @@
>>       <td class="source"><a href="#{lineid}"
>> id="{lineid}">{linenumber}</a> {line|escape}</td>
>>     </tr>'
>>   -diffblock = '<div class="source bottomline
>> parity{parity}"><pre>{lines}</pre></div>'
>> -difflineplus = '<a href="#{lineid}" id="{lineid}">{linenumber}</a> <span
>> class="plusline">{line|escape}</span>'
>> -difflineminus = '<a href="#{lineid}" id="{lineid}">{linenumber}</a> <span
>> class="minusline">{line|escape}</span>'
>> -difflineat = '<a href="#{lineid}" id="{lineid}">{linenumber}</a> <span
>> class="atline">{line|escape}</span>'
>> -diffline = '<a href="#{lineid}" id="{lineid}">{linenumber}</a>
>> {line|escape}'
>> +diffblock = '<div class="bottomline"><ol class="parity{parity}
>> sourcelines">{lines}</ol></div>'
>> +difflineplus = '<li class="source" id="{lineid}"><div
>> class="plusline">{nonempty(strip(line|escape, '\r\n'),
>> '&nbsp;')}</div></li>'
>> +difflineminus = '<li class="source" id="{lineid}"><div
>> class="minusline">{nonempty(strip(line|escape, '\r\n'),
>> '&nbsp;')}</div></li>'
>> +difflineat = '<li class="source" id="{lineid}"><div
>> class="atline">{nonempty(strip(line|escape, '\r\n'), '&nbsp;')}</div></li>'
>> +diffline = '<li class="source"
>> id="{lineid}"><div>{nonempty(strip(line|escape, '\r\n'),
>> '&nbsp;')}</div></li>'
>>     comparisonblock ='
>>     <tbody class="block">
>> diff -r cc47e0b1bf3e -r 03f763079a3e
>> mercurial/templates/static/style-paper.css
>> --- a/mercurial/templates/static/style-paper.css        Tue Jun 25
>> 21:12:27 2013 +0400
>> +++ b/mercurial/templates/static/style-paper.css        Thu May 30
>> 20:23:50 2013 +0400
>> @@ -94,11 +94,11 @@
>>   .age { white-space:nowrap; }
>>   .date { white-space:nowrap; }
>>   .indexlinks { white-space:nowrap; }
>> -.parity0 { background-color: #f0f0f0; }
>> -.parity1 { background-color: white; }
>> -.plusline { color: green; }
>> -.minusline { color: #dc143c; } /* crimson */
>> -.atline { color: purple; }
>> +.parity0 { background-color: #f0f0f0 !important; }
>> +.parity1 { background-color: white !important; }
>> +.plusline { color: green !important; }
>> +.minusline { color: #dc143c !important; } /* crimson */
>> +.atline { color: purple !important; }
>
>
> There should be generally no need for web sites to use !important. Why are
> you using it here?
>
> You can influence the cascade by either simply moving it below the thing you
> want to override, or increasing the specificity of your selector (e.g.
> div.atline or .source .atline).
>
> See http://www.w3.org/TR/CSS2/cascade.html#cascade
>
>>     .diffstat-file {
>>     white-space: nowrap;
>> _______________________________________________
>> Mercurial-devel mailing list
>> Mercurial-devel@selenic.com
>> http://selenic.com/mailman/listinfo/mercurial-devel
>>
>

Patch

diff -r cc47e0b1bf3e -r 03f763079a3e mercurial/templates/paper/changeset.tmpl
--- a/mercurial/templates/paper/changeset.tmpl	Tue Jun 25 21:12:27 2013 +0400
+++ b/mercurial/templates/paper/changeset.tmpl	Thu May 30 20:23:50 2013 +0400
@@ -77,7 +77,7 @@ 
 </table>
 
 <div class="overflow">
-<div class="sourcefirst">   line diff</div>
+<div class="sourcefirst"></div>
 
 {diff}
 </div>
diff -r cc47e0b1bf3e -r 03f763079a3e mercurial/templates/paper/filediff.tmpl
--- a/mercurial/templates/paper/filediff.tmpl	Tue Jun 25 21:12:27 2013 +0400
+++ b/mercurial/templates/paper/filediff.tmpl	Thu May 30 20:23:50 2013 +0400
@@ -68,7 +68,7 @@ 
 </table>
 
 <div class="overflow">
-<div class="sourcefirst">   line diff</div>
+<div class="sourcefirst"></div>
 
 {diff}
 </div>
diff -r cc47e0b1bf3e -r 03f763079a3e mercurial/templates/paper/map
--- a/mercurial/templates/paper/map	Tue Jun 25 21:12:27 2013 +0400
+++ b/mercurial/templates/paper/map	Thu May 30 20:23:50 2013 +0400
@@ -84,11 +84,11 @@ 
     <td class="source"><a href="#{lineid}" id="{lineid}">{linenumber}</a> {line|escape}</td>
   </tr>'
 
-diffblock = '<div class="source bottomline parity{parity}"><pre>{lines}</pre></div>'
-difflineplus = '<a href="#{lineid}" id="{lineid}">{linenumber}</a> <span class="plusline">{line|escape}</span>'
-difflineminus = '<a href="#{lineid}" id="{lineid}">{linenumber}</a> <span class="minusline">{line|escape}</span>'
-difflineat = '<a href="#{lineid}" id="{lineid}">{linenumber}</a> <span class="atline">{line|escape}</span>'
-diffline = '<a href="#{lineid}" id="{lineid}">{linenumber}</a> {line|escape}'
+diffblock = '<div class="bottomline"><ol class="parity{parity} sourcelines">{lines}</ol></div>'
+difflineplus = '<li class="source" id="{lineid}"><div class="plusline">{nonempty(strip(line|escape, '\r\n'), '&nbsp;')}</div></li>'
+difflineminus = '<li class="source" id="{lineid}"><div class="minusline">{nonempty(strip(line|escape, '\r\n'), '&nbsp;')}</div></li>'
+difflineat = '<li class="source" id="{lineid}"><div class="atline">{nonempty(strip(line|escape, '\r\n'), '&nbsp;')}</div></li>'
+diffline = '<li class="source" id="{lineid}"><div>{nonempty(strip(line|escape, '\r\n'), '&nbsp;')}</div></li>'
 
 comparisonblock ='
   <tbody class="block">
diff -r cc47e0b1bf3e -r 03f763079a3e mercurial/templates/static/style-paper.css
--- a/mercurial/templates/static/style-paper.css	Tue Jun 25 21:12:27 2013 +0400
+++ b/mercurial/templates/static/style-paper.css	Thu May 30 20:23:50 2013 +0400
@@ -94,11 +94,11 @@ 
 .age { white-space:nowrap; }
 .date { white-space:nowrap; }
 .indexlinks { white-space:nowrap; }
-.parity0 { background-color: #f0f0f0; }
-.parity1 { background-color: white; }
-.plusline { color: green; }
-.minusline { color: #dc143c; } /* crimson */
-.atline { color: purple; }
+.parity0 { background-color: #f0f0f0 !important; }
+.parity1 { background-color: white !important; }
+.plusline { color: green !important; }
+.minusline { color: #dc143c !important; } /* crimson */
+.atline { color: purple !important; }
 
 .diffstat-file {
   white-space: nowrap;