updatexlrator.cgi: Fixes bug#13024 - Table style rendering bug

- This is happening due to the use of bgcolor which has been deprecated since HTML4.01 and
   is no longer supported in HTML5
- Similar approach used here as was used in the same fix for the dhcp.cgi page
- CSS based approach utilised.
- Partially tested in my vm testbed. The percentage bar works withg no problems.
   The table could not be confirmed as in my testbed I don't have updatexlrator running
   as my updates are all based on https and not http.
- The table will need to be confirmed by the bug reporter or someone else that uses
   updatexlrator

Fixes: Bug#13024
Signed-off-by: Adolf Belka <adolf.belka@ipfire.org>

diff --git a/html/cgi-bin/updatexlrator.cgi b/html/cgi-bin/updatexlrator.cgi
index fb39594574159aa1756e15d0d70f650f613d508a..47d3cca4211fab16ec7f8ff2ca5c20db5949d9f4 100644 (file)
--- a/html/cgi-bin/updatexlrator.cgi
+++ b/html/cgi-bin/updatexlrator.cgi
@@ -105,6 +105,46 @@ my @metadata=();
 &General::readhash("${General::swroot}/proxy/settings", \%proxysettings);
 &General::readhash("/srv/web/ipfire/html/themes/ipfire/include/colors.txt", \%color);
 
+###--- HTML HEAD ---###
+my $extraHead = <<END
+<style>
+       .row-color20 {
+               background-color: $color{'color20'};
+       }
+       .row-color22 {
+               background-color: $color{'color22'};
+       }
+       .row-table1colour {
+               background-color: $Header::table1colour;
+       }
+       .row-table2colour {
+               background-color: $Header::table2colour;
+       }
+       .percent-box {
+               border-style: solid;
+               border-width: 1px;
+               border-color: #a0a0a0;
+               width: 100px;
+               height: 10px;
+       }
+       .percent-bar {
+               background-color: #a0a0a0;
+               border-style: solid;
+               border-width: 1px;
+               border-color: #e2e2e2;
+       }
+       .percent-space {
+               background-color: #e2e2e2;
+               border-style: solid;
+               border-width: 1px;
+               border-color: #e2e2e2;
+       }
+</style>
+END
+;
+###--- END HTML HEAD ---###
+
+
 $xlratorsettings{'ACTION'} = '';
 $xlratorsettings{'ENABLE_LOG'} = 'off';
 $xlratorsettings{'PASSIVE_MODE'} = 'off';
@@ -369,7 +409,7 @@ $selected{'NOT_ACCESSED_LAST'}{$xlratorsettings{'NOT_ACCESSED_LAST'}} = "selecte
 
 &Header::showhttpheaders();
 
-&Header::openpage($Lang::tr{'updxlrtr configuration'}, 1, '');
+&Header::openpage($Lang::tr{'updxlrtr configuration'}, 1, $extraHead);
 
 &Header::openbigbox('100%', 'left', '', $errormessage);
 
@@ -532,9 +572,9 @@ END
 
                        $id++;
                        if ($id % 2) {
-                               print "<tr bgcolor='$Header::table1colour'>\n"; }
+                               print "<tr class='row-table1colour'>\n"; }
                        else {
-                               print "<tr bgcolor='$Header::table2colour'>\n"; }
+                               print "<tr class='row-table2colour'>\n"; }
 
                        $filesize = $size_updatefile;
                        1 while $filesize =~ s/^(-?\d+)(\d{3})/$1.$2/;
@@ -823,9 +863,9 @@ foreach (@vendors)
 
        $id++;
        if ($id % 2) {
-               print "<tr bgcolor=''$color{'color20'}'>\n"; }
+               print "<tr class='row-color20'>\n"; }
        else {
-               print "<tr bgcolor=''$color{'color22'}'>\n"; }
+               print "<tr class='row-color22'>\n"; }
 
        print "<td class='base' align='center'><nobr>&nbsp;";
 
@@ -1162,9 +1202,9 @@ END
 
                $id++;
                if ($id % 2) {
-                       print "<tr bgcolor='$Header::table1colour'>\n"; }
+                       print "<tr class='row-table1colour'>\n"; }
                else {
-                       print "<tr bgcolor='$Header::table2colour'>\n"; }
+                       print "<tr class='row-table2colour'>\n"; }
 
                $filesize = $size_updatefile;
                1 while $filesize =~ s/^(-?\d+)(\d{3})/$1.$2/;
@@ -1522,22 +1562,20 @@ sub savesettings
 sub percentbar
 {
   my $percent = $_[0];
-  my $fg = '#a0a0a0';
-  my $bg = '#e2e2e2';
 
   if ($percent =~ m/^(\d+)%$/ )
   {
     print <<END
-<table width='100' border='1' cellspacing='0' cellpadding='0' style='border-width:1px;border-style:solid;border-color:$fg;width:100px;height:10px;'>
+<table width='100' border='1' cellspacing='0' cellpadding='0' class='percent-box'>
 <tr>
 END
 ;
     if ($percent eq "100%") {
-      print "<td width='100%' bgcolor='$fg' style='background-color:$fg;border-style:solid;border-width:1px;border-color:$bg'>"
+      print "<td width='100%' class='percent-bar'>"
     } elsif ($percent eq "0%") {
-      print "<td width='100%' bgcolor='$bg' style='background-color:$bg;border-style:solid;border-width:1px;border-color:$bg'>"
+      print "<td width='100%' class='percent-space'>"
     } else {
-      print "<td width='$percent' bgcolor='$fg' style='background-color:$fg;border-style:solid;border-width:1px;border-color:$bg'></td><td width='" . (100-$1) . "%' bgcolor='$bg' style='background-color:$bg;border-style:solid;border-width:1px;border-color:$bg'>"
+      print "<td width='$percent' class='percent-bar'></td><td width='" . (100-$1) . "%' class='percent-space'>"
     }
     print <<END
 <img src='/images/null.gif' width='1' height='1' alt='' /></td></tr></table>