threads / discuss / 44489

gitweb html validation

Subject: gitweb html validation

## tl;dr

5 messages between Nov 15, 2016 and Nov 18, 2016.

replies: 4people: 3as markdown or json

Raphaël Gertz· Nov 15, 2016, 15:13 UTC · lore

Hi,

There a small bug in gitweb html validation, you need the following patch to pass w3c check with searchbox enabled.

The problem lies in the input directly embed inside a form without a wrapper which is not valid.

Best regards

The following patch fix the issue for git-2.10.2 : --- /usr/share/gitweb/gitweb.cgi.orig 2016-11-15 15:37:21.149805026 +0100 +++ /usr/share/gitweb/gitweb.cgi 2016-11-15 15:37:48.579240429 +0100

@@ -5518,6 +5518,7 @@ sub git_project_search_form {

         print "<div class=\"projsearch\">\n";
         print $cgi->start_form(-method => 'get', -action => $my_uri) .
+             '<div>'.
               $cgi->hidden(-name => 'a', -value => 'project_list')  . 
"\n";
         print $cgi->hidden(-name => 'pf', -value => $project_filter). 
"\n"
                 if (defined $project_filter);
@@ -5529,6 +5530,7 @@ sub git_project_search_form {
                              -checked => $search_use_regexp) .
               "</span>\n" .
               $cgi->submit(-name => 'btnS', -value => 'Search') .
+             '</div>'.
               $cgi->end_form() . "\n" .
               $cgi->a({-href => href(project => undef, searchtext => 
undef,
                                      project_filter => 
$project_filter)},

Ralf Thielow· Nov 15, 2016, 18:26 UTC · re: Raphaël Gertz · lore

Re: gitweb html validation

Raphaël Gertz <mageia@rapsys.eu> wrote:

Show 8 quoted lines

> Hi,
> 
> There a small bug in gitweb html validation, you need the following patch to
> pass w3c check with searchbox enabled.
> 
> The problem lies in the input directly embed inside a form without a wrapper
> which is not valid.
>

I agree this is a small bug. Only block level elements are allowed to be inside form tags, according to https://www.w3.org/2010/04/xhtml10-strict.html#elem_form

Show 21 quoted lines

> Best regards
> 
> The following patch fix the issue for git-2.10.2 :
> --- /usr/share/gitweb/gitweb.cgi.orig   2016-11-15 15:37:21.149805026 +0100
> +++ /usr/share/gitweb/gitweb.cgi        2016-11-15 15:37:48.579240429 +0100
> @@ -5518,6 +5518,7 @@ sub git_project_search_form {
> 
>         print "<div class=\"projsearch\">\n";
>         print $cgi->start_form(-method => 'get', -action => $my_uri) .
> +             '<div>'.
>               $cgi->hidden(-name => 'a', -value => 'project_list')  . "\n";
>         print $cgi->hidden(-name => 'pf', -value => $project_filter). "\n"
>                 if (defined $project_filter);
> @@ -5529,6 +5530,7 @@ sub git_project_search_form {
>                              -checked => $search_use_regexp) .
>               "</span>\n" .
>               $cgi->submit(-name => 'btnS', -value => 'Search') .
> +             '</div>'.
>               $cgi->end_form() . "\n" .
>               $cgi->a({-href => href(project => undef, searchtext => undef,
>                                      project_filter => $project_filter)},

I think it's better to just move the <form>-Tag outside of the surrounding div? Something like this perhaps, I didn't test it myself yet.

diff --git a/gitweb/gitweb.perl b/gitweb/gitweb.perl
index 7cf68f07b..33d7c154f 100755
--- a/gitweb/gitweb.perl
+++ b/gitweb/gitweb.perl
@@ -5531,8 +5531,8 @@ sub git_project_search_form {
 		$limit = " in '$project_filter/'";
 	}
 
-	print "<div class=\"projsearch\">\n";
 	print $cgi->start_form(-method => 'get', -action => $my_uri) .
+	      "<div class=\"projsearch\">\n" .
 	      $cgi->hidden(-name => 'a', -value => 'project_list')  . "\n";
 	print $cgi->hidden(-name => 'pf', -value => $project_filter). "\n"
 		if (defined $project_filter);
@@ -5544,11 +5544,11 @@ sub git_project_search_form {
 	                     -checked => $search_use_regexp) .
 	      "</span>\n" .
 	      $cgi->submit(-name => 'btnS', -value => 'Search') .
-	      $cgi->end_form() . "\n" .
 	      $cgi->a({-href => href(project => undef, searchtext => undef,
 	                             project_filter => $project_filter)},
 	              esc_html("List all projects$limit")) . "<br />\n";
-	print "</div>\n";
+	print "</div>\n" .
+	      $cgi->end_form() . "\n";
 }
 
 # entry for given @keys needs filling if at least one of keys in list
diff --git a/gitweb/static/gitweb.css b/gitweb/static/gitweb.css
index 321260103..507740b6a 100644
--- a/gitweb/static/gitweb.css
+++ b/gitweb/static/gitweb.css
@@ -539,7 +539,7 @@ div.projsearch {
 	margin: 20px 0px;
 }
 
-div.projsearch form {
+form div.projsearch {
 	margin-bottom: 2px;
 }

Junio C Hamano· Nov 16, 2016, 00:05 UTC · re: Ralf Thielow · lore

Re: gitweb html validation

Ralf Thielow <ralf.thielow@gmail.com> writes:

Show 7 quoted lines

> Only block level elements are
> allowed to be inside form tags, according to
> https://www.w3.org/2010/04/xhtml10-strict.html#elem_form
> ...
> I think it's better to just move the <form>-Tag outside of the
> surrounding div?
> Something like this perhaps, I didn't test it myself yet.

That sounds like a sensible update to me (no, I do not run gitweb myself). Is this the only <form> we have in the UI, or is it the only one that is problematic?

Show 41 quoted lines

> diff --git a/gitweb/gitweb.perl b/gitweb/gitweb.perl
> index 7cf68f07b..33d7c154f 100755
> --- a/gitweb/gitweb.perl
> +++ b/gitweb/gitweb.perl
> @@ -5531,8 +5531,8 @@ sub git_project_search_form {
>  		$limit = " in '$project_filter/'";
>  	}
>  
> -	print "<div class=\"projsearch\">\n";
>  	print $cgi->start_form(-method => 'get', -action => $my_uri) .
> +	      "<div class=\"projsearch\">\n" .
>  	      $cgi->hidden(-name => 'a', -value => 'project_list')  . "\n";
>  	print $cgi->hidden(-name => 'pf', -value => $project_filter). "\n"
>  		if (defined $project_filter);
> @@ -5544,11 +5544,11 @@ sub git_project_search_form {
>  	                     -checked => $search_use_regexp) .
>  	      "</span>\n" .
>  	      $cgi->submit(-name => 'btnS', -value => 'Search') .
> -	      $cgi->end_form() . "\n" .
>  	      $cgi->a({-href => href(project => undef, searchtext => undef,
>  	                             project_filter => $project_filter)},
>  	              esc_html("List all projects$limit")) . "<br />\n";
> -	print "</div>\n";
> +	print "</div>\n" .
> +	      $cgi->end_form() . "\n";
>  }
>  
>  # entry for given @keys needs filling if at least one of keys in list
> diff --git a/gitweb/static/gitweb.css b/gitweb/static/gitweb.css
> index 321260103..507740b6a 100644
> --- a/gitweb/static/gitweb.css
> +++ b/gitweb/static/gitweb.css
> @@ -539,7 +539,7 @@ div.projsearch {
>  	margin: 20px 0px;
>  }
>  
> -div.projsearch form {
> +form div.projsearch {
>  	margin-bottom: 2px;
>  }
>

Raphaël Gertz· Nov 16, 2016, 09:25 UTC · re: Junio C Hamano · lore

Re: gitweb html validation

Le 16.11.2016 01:05, Junio C Hamano a écrit :

Show 14 quoted lines

> Ralf Thielow <ralf.thielow@gmail.com> writes:
> 
>> Only block level elements are
>> allowed to be inside form tags, according to
>> https://www.w3.org/2010/04/xhtml10-strict.html#elem_form
>> ...
>> I think it's better to just move the <form>-Tag outside of the
>> surrounding div?
>> Something like this perhaps, I didn't test it myself yet.
> 
> That sounds like a sensible update to me (no, I do not run gitweb
> myself).  Is this the only <form> we have in the UI, or is it the
> only one that is problematic?
>

There is an other form in the cgi line 4110 :
         print $cgi->start_form(-method => "get", -action => $action) .
               "<div class=\"search\">\n" .

But this one has a <div class="search"> inside.

The problem with projsearch I want to change is that the div is around the form without a container inside.

I agree with moving the <div class="projsearch"> inside the form if it's a better option.

Best regards

Ralf Thielow· Nov 18, 2016, 20:06 UTC · re: Ralf Thielow · lore

Re: gitweb html validation

2016-11-15 19:26 GMT+01:00 Ralf Thielow <ralf.thielow@gmail.com>:

Finally I've found the time to actually try this out and there are some problems with it.

Show 28 quoted lines

>
> diff --git a/gitweb/gitweb.perl b/gitweb/gitweb.perl
> index 7cf68f07b..33d7c154f 100755
> --- a/gitweb/gitweb.perl
> +++ b/gitweb/gitweb.perl
> @@ -5531,8 +5531,8 @@ sub git_project_search_form {
>                 $limit = " in '$project_filter/'";
>         }
>
> -       print "<div class=\"projsearch\">\n";
>         print $cgi->start_form(-method => 'get', -action => $my_uri) .
> +             "<div class=\"projsearch\">\n" .
>               $cgi->hidden(-name => 'a', -value => 'project_list')  . "\n";
>         print $cgi->hidden(-name => 'pf', -value => $project_filter). "\n"
>                 if (defined $project_filter);
> @@ -5544,11 +5544,11 @@ sub git_project_search_form {
>                              -checked => $search_use_regexp) .
>               "</span>\n" .
>               $cgi->submit(-name => 'btnS', -value => 'Search') .
> -             $cgi->end_form() . "\n" .
>               $cgi->a({-href => href(project => undef, searchtext => undef,
>                                      project_filter => $project_filter)},
>                       esc_html("List all projects$limit")) . "<br />\n";
> -       print "</div>\n";
> +       print "</div>\n" .
> +             $cgi->end_form() . "\n";
>  }
>

The anchor is now inside the form-tag, which means there is no visual line-break anymore that comes automatically after </form> as the form-tag is a block level element. Could be solved by adding a "<br />", which is not very nice, but OK.

Show 14 quoted lines

>  # entry for given @keys needs filling if at least one of keys in list
> diff --git a/gitweb/static/gitweb.css b/gitweb/static/gitweb.css
> index 321260103..507740b6a 100644
> --- a/gitweb/static/gitweb.css
> +++ b/gitweb/static/gitweb.css
> @@ -539,7 +539,7 @@ div.projsearch {
>         margin: 20px 0px;
>  }
>
> -div.projsearch form {
> +form div.projsearch {
>         margin-bottom: 2px;
>  }
>

This is wrong as it overwrites the setting above, 20px at the bottom went to 2px.

The problem is how to apply the 2px now. Before this, we had the
<form>, a block element, which we can give the 2px margin at the
bottom.  Now this element is gone and we have a set of inline
elements where we use "<br />" to emulate the line break.  There
are two css rules which can solve this, but I'm not really happy with
both of them.
1) As we know we need the two pixel below an input element, we
can say
div.projsearch input {
  margin-bottom: 2px;
}
2) Make the a-Tag inside div.projsearch being displayed as a block
element to make a margin-top setting working.  This has the benefit
that we don't care about the element above.
div.projsearch a {
        display: inline-block;
        margin-top: 2px;
}
If I have to choose I'd prefer the second one.

So I can't think of a way to solve this nicely with this change.