From mboxrd@z Thu Jan  1 00:00:00 1970
From: Adolf Belka <adolf.belka@ipfire.org>
To: development@lists.ipfire.org
Subject:
 [PATCH] updatexlrator.cgi: Fixes bug#13024 - Table style rendering bug
Date: Tue, 21 Feb 2023 14:11:54 +0100
Message-ID: <20230221131154.4579-1-adolf.belka@ipfire.org>
MIME-Version: 1.0
Content-Type: multipart/mixed; boundary="===============7295397927402921275=="
List-Id: <development.lists.ipfire.org>

--===============7295397927402921275==
Content-Type: text/plain; charset="utf-8"
Content-Transfer-Encoding: quoted-printable

- 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 proble=
ms.
   The table could not be confirmed as in my testbed I don't have updatexlrat=
or 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 tha=
t uses
   updatexlrator

Fixes: Bug#13024
Signed-off-by: Adolf Belka <adolf.belka(a)ipfire.org>
---
 html/cgi-bin/updatexlrator.cgi | 64 +++++++++++++++++++++++++++-------
 1 file changed, 51 insertions(+), 13 deletions(-)

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


--===============7295397927402921275==--