[4/5] fwhosts.cgi: Move the tooltip into the usage counter

Message ID 20250623171658.530138-4-michael.tremer@ipfire.org
State New
Headers
Series [1/5] fwhosts.cgi: Show in which firewall rule objects are being used |

Commit Message

Michael Tremer June 23, 2025, 5:16 p.m. UTC
  This will clutter the page less as we don't have any good icon sets.

Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
---
 html/cgi-bin/fwhosts.cgi | 42 +++++++++++-----------------------------
 1 file changed, 11 insertions(+), 31 deletions(-)
  

Comments

Adolf Belka June 25, 2025, 4:40 p.m. UTC | #1
Tested-by: Adolf Belka <adolf.belka@ipfire.org>

I actually found the i in a blue circle icon very helpful for this. I was able to figure out where I should place my mouse pointer for the info.

With this patch applied, which was the first way I tested it, I had no idea where to place the mouse pointer as nothing looked different to the existing situation. I did try placing it over the usage counter a couple of times but obviously not for long enough in my first tries as I never saw anything get shown.

Reading the title of this patch more carefully I went back and now held the mouse pointer over the usage counter and waited for 1 to 2 seconds and now the info was shown.  Typically I found it takes a minimum of 1 second and sometimes around 1.5 seconds before anything is shown and first time around I was obviously not waiting long enough at any one location.

If the usage counter is to stay as the location to place the mouse pointer onto for the info then I think this will need to be explained very clearly in the wiki documentation otherwise users might not discover this useful function directly on the WUI page.


On 23/06/2025 19:16, Michael Tremer wrote:
> This will clutter the page less as we don't have any good icon sets.
> 
> Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
> ---
>   html/cgi-bin/fwhosts.cgi | 42 +++++++++++-----------------------------
>   1 file changed, 11 insertions(+), 31 deletions(-)
> 
> diff --git a/html/cgi-bin/fwhosts.cgi b/html/cgi-bin/fwhosts.cgi
> index 69970a840..953f81e5f 100644
> --- a/html/cgi-bin/fwhosts.cgi
> +++ b/html/cgi-bin/fwhosts.cgi
> @@ -1932,7 +1932,7 @@ sub viewtablenet
>   		}else{
>   			print<<END;
>   			<table width='100%' cellspacing='0' class='tbl'>
> -			<tr><th align='center'><b>$Lang::tr{'name'}</b></th><th align='center'><b>$Lang::tr{'fwhost netaddress'}</b></th><th align='center'><b>$Lang::tr{'remark'}</b></th><th align='center'><b>$Lang::tr{'used'}</b></th><th></th><th></th><th width='3%'></th></tr>
> +			<tr><th align='center'><b>$Lang::tr{'name'}</b></th><th align='center'><b>$Lang::tr{'fwhost netaddress'}</b></th><th align='center'><b>$Lang::tr{'remark'}</b></th><th align='center'><b>$Lang::tr{'used'}</b></th><th></th><th width='3%'></th></tr>
>   END
>   		}
>   		my $count=0;
> @@ -1953,11 +1953,7 @@ END
>   			my $colnet="$customnetwork{$key}[1]/".&General::subtocidr($customnetwork{$key}[2]);
>   			my $netcount=&getnetcount($customnetwork{$key}[0]);
>   			my $netusedin=&getusedin($customnetwork{$key}[0]);
> -			my $htmlparttouse="";
> -			if ($netusedin) {
> -				$htmlparttouse = "<input type='image' align='top' src='/images/info.gif' alt='$netusedin' title='$netusedin'>";
> -			}
> -			print"<td width='20%' $col><form method='post'>$customnetwork{$key}[0]</td><td width='15%' align='center' $col>".&getcolor($colnet)."</td><td width='40%' $col>$customnetwork{$key}[3]</td><td align='center' $col>$netcount x</td><td>$htmlparttouse</td>";
> +			print"<td width='20%' $col><form method='post'>$customnetwork{$key}[0]</td><td width='15%' align='center' $col>".&getcolor($colnet)."</td><td width='40%' $col>$customnetwork{$key}[3]</td><td align='center' $col><span title='$netusedin'>$netcount x</span></td>";
>   			print<<END;
>   			<td width='1%' $col><input type='image' src='/images/edit.gif' align='middle' alt='$Lang::tr{'edit'}' title='$Lang::tr{'edit'}' />
>   			<input type='hidden' name='ACTION' value='editnet'>
> @@ -2091,7 +2087,7 @@ sub viewtablehost
>   		}else{
>   		print<<END;
>   		<table width='100%' cellspacing='0' class='tbl'>
> -		<tr><th align='center'><b>$Lang::tr{'name'}</b></th><th align='center'><b>$Lang::tr{'fwhost ip_mac'}</b></th><th align='center'><b>$Lang::tr{'remark'}</b></th><th align='center'><b>$Lang::tr{'used'}</b></th><th></th><th></th><th width='3%'></th></tr>
> +		<tr><th align='center'><b>$Lang::tr{'name'}</b></th><th align='center'><b>$Lang::tr{'fwhost ip_mac'}</b></th><th align='center'><b>$Lang::tr{'remark'}</b></th><th align='center'><b>$Lang::tr{'used'}</b></th><th></th><th width='3%'></th></tr>
>   END
>   	}
>   		my $count=0;
> @@ -2112,12 +2108,9 @@ END
>   			my $hostcount=0;
>   			$hostcount=&gethostcount($customhost{$key}[0]);
>   			my $hostusedin=&getusedin($customhost{$key}[0]);
> -			my $htmlparttouse="";
> -			if ($hostusedin) {
> -				$htmlparttouse = "<input type='image' align='top' src='/images/info.gif' alt='$hostusedin' title='$hostusedin'>";
> -			}
> -			print"<td width='20%' $col>$customhost{$key}[0]</td><td width='20%' align='center' $col >".&getcolor($ip)."</td><td width='50%' align='left' $col>$customhost{$key}[3]</td><td align='center' $col>$hostcount x</td><td>$htmlparttouse</td>";
> -			print<<END;
> +			my $color = &getcolor($ip);
> +			print <<END;
> +			<td width='20%' $col>$customhost{$key}[0]</td><td width='20%' align='center' $col >$color</td><td width='50%' align='left' $col>$customhost{$key}[3]</td><td align='center' $col><span title="$hostusedin">$hostcount x</span></td>
>   			<td width='1%' $col><form method='post'><input type='image' src='/images/edit.gif' align='middle' alt='$Lang::tr{'edit'}' title='$Lang::tr{'edit'}' />
>   			<input type='hidden' name='ACTION' value='edithost' />
>   			<input type='hidden' name='HOSTNAME' value='$customhost{$key}[0]' />
> @@ -2192,11 +2185,8 @@ sub viewtablegrp
>   				print "<br><b><u>$grpname</u></b>&nbsp; &nbsp;";
>   				print " <b>$Lang::tr{'remark'}:</b>&nbsp $remark &nbsp " if ($remark ne '');
>   				my $netgrpcount=&getnetcount($grpname);
> -				print "<b>$Lang::tr{'used'}:</b> $netgrpcount x ";
>   				my $groupusedin=&getusedin($grpname);
> -				if ($groupusedin) {
> -					print "<input type='image' align='top' src='/images/info.gif' alt='$groupusedin' title='$groupusedin'>";
> -				}
> +				print "<b>$Lang::tr{'used'}:</b> <span title='$groupusedin'>$netgrpcount x</span>";
>   				if($netgrpcount == '0')
>   				{
>   					print"<form method='post' style='display:inline'><input type='image' src='/images/delete.gif' alt='$Lang::tr{'delete'}' title='$Lang::tr{'delete'}' align='right' /><input type='hidden' name='grp_name' value='$grpname' ><input type='hidden' name='ACTION' value='delgrp'></form>";
> @@ -2335,10 +2325,7 @@ sub viewtablelocationgrp
>   			# Get group count.
>   			my $locationgrpcount=&getlocationcount($grpname);
>   			my $locationusedin=&getlocusedin($grpname);
> -			print "<b>$Lang::tr{'used'}:</b> $locationgrpcount x ";
> -			if ($locationusedin) {
> -				print "<input type='image' align='top' src='/images/info.gif' alt='$locationusedin' title='$locationusedin'>";
> -			}
> +			print "<b>$Lang::tr{'used'}:</b> <span title='$locationusedin'>$locationgrpcount x</span>";
>   			# Only display delete icon, if the group is not used by a firewall rule.
>   			if($locationgrpcount == '0') {
>   				print"<form method='post' style='display:inline'>\n";
> @@ -2459,7 +2446,7 @@ sub viewtableservice
>   		&General::readhasharray("$fwconfigout", \%fwout);
>   		print<<END;
>   			<table width='100%' cellspacing='0' class='tbl'>
> -			<tr><th align='center'><b>$Lang::tr{'fwhost srv_name'}</b></th><th align='center'><b>$Lang::tr{'fwhost prot'}</b></th><th align='center'><b>$Lang::tr{'fwhost port'}</b></th><th align='center'><b>ICMP</b></th><th align='center'><b>$Lang::tr{'fwhost used'}</b></th><th></th><th></th><th width='3%'></th></tr>
> +			<tr><th align='center'><b>$Lang::tr{'fwhost srv_name'}</b></th><th align='center'><b>$Lang::tr{'fwhost prot'}</b></th><th align='center'><b>$Lang::tr{'fwhost port'}</b></th><th align='center'><b>ICMP</b></th><th align='center'><b>$Lang::tr{'fwhost used'}</b></th><th></th><th width='3%'></th></tr>
>   END
>   		my $col='';
>   		foreach my $key (sort { ncmp($customservice{$a}[0],$customservice{$b}[0])} keys %customservice)
> @@ -2481,14 +2468,10 @@ END
>   			#Neuer count
>   			$srvcount=&getsrvcount($customservice{$key}[0]);
>   			my $serviceusedin=&getsrvusedin($customservice{$key}[0]);
> -			my $htmlparttouse="";
> -			if ($serviceusedin) {
> -				$htmlparttouse="<input type='image' align='top' src='/images/info.gif' alt='$serviceusedin' title='$serviceusedin'>";
> -			}
>   			if($customservice{$key}[3] eq 'All ICMP-Types'){print $Lang::tr{'fwdfw all icmp'};}
>   			elsif($customservice{$key}[3] ne 'BLANK'){print $customservice{$key}[3];}
>   			print<<END;
> -			</td><td align='center' $col>$srvcount x</td><td>$htmlparttouse</td>
> +			</td><td align='center' $col><span title='$serviceusedin'>$srvcount x</span></td>
>   			<td width='1%' $col><form method='post'><input type='image' src='/images/edit.gif' align='middle' alt='$Lang::tr{'edit'}' title='$Lang::tr{'edit'}' /><input type='hidden' name='ACTION' value='editservice' />
>   			<input type='hidden' name='SRV_NAME' value='$customservice{$key}[0]' />
>   			<input type='hidden' name='SRV_PORT' value='$customservice{$key}[1]' />
> @@ -2560,11 +2543,8 @@ sub viewtableservicegrp
>   				if($count >0){print"</table>";$count=1;}
>   				print "<br><b><u>$grpname</u></b>&nbsp; &nbsp; ";
>   				print "<b>$Lang::tr{'remark'}:</b>&nbsp; $remark " if ($remark ne '');
> -				print "&nbsp; <b>$Lang::tr{'used'}:</b> $grpcount x ";
>   				my $srvgrpusedin=&getsrvusedin($customservicegrp{$key}[0]);
> -				if ($srvgrpusedin) {
> -					print "<input type='image' align='top' src='/images/info.gif' alt='$srvgrpusedin' title='$srvgrpusedin'>";
> -				}
> +				print "&nbsp; <b>$Lang::tr{'used'}:</b> <span title='$srvgrpusedin'>$grpcount x</span>";
>   				if($grpcount == '0')
>   				{
>   					print"<form method='post' style='display:inline'><input type='image' src='/images/delete.gif' alt='$Lang::tr{'delete'}' title='$Lang::tr{'delete'}' align='right' /><input type='hidden' name='SRVGRP_NAME' value='$grpname' ><input type='hidden' name='ACTION' value='delservicegrp'></form>";
  
Michael Tremer June 25, 2025, 4:52 p.m. UTC | #2
Hello Adolf,

Thank you for the feedback.

It is indeed not obvious. On the other hand, the large icon is not really a solution either in my opinion. It is simply too large and distracting for a feature that won’t be used *that* much.

I would however love some visual hint, but I cannot really think of anything between the two options that we have for now.

-Michael

> On 25 Jun 2025, at 17:40, Adolf Belka <adolf.belka@ipfire.org> wrote:
> 
> Tested-by: Adolf Belka <adolf.belka@ipfire.org>
> 
> I actually found the i in a blue circle icon very helpful for this. I was able to figure out where I should place my mouse pointer for the info.
> 
> With this patch applied, which was the first way I tested it, I had no idea where to place the mouse pointer as nothing looked different to the existing situation. I did try placing it over the usage counter a couple of times but obviously not for long enough in my first tries as I never saw anything get shown.
> 
> Reading the title of this patch more carefully I went back and now held the mouse pointer over the usage counter and waited for 1 to 2 seconds and now the info was shown.  Typically I found it takes a minimum of 1 second and sometimes around 1.5 seconds before anything is shown and first time around I was obviously not waiting long enough at any one location.
> 
> If the usage counter is to stay as the location to place the mouse pointer onto for the info then I think this will need to be explained very clearly in the wiki documentation otherwise users might not discover this useful function directly on the WUI page.
> 
> 
> On 23/06/2025 19:16, Michael Tremer wrote:
>> This will clutter the page less as we don't have any good icon sets.
>> Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
>> ---
>>  html/cgi-bin/fwhosts.cgi | 42 +++++++++++-----------------------------
>>  1 file changed, 11 insertions(+), 31 deletions(-)
>> diff --git a/html/cgi-bin/fwhosts.cgi b/html/cgi-bin/fwhosts.cgi
>> index 69970a840..953f81e5f 100644
>> --- a/html/cgi-bin/fwhosts.cgi
>> +++ b/html/cgi-bin/fwhosts.cgi
>> @@ -1932,7 +1932,7 @@ sub viewtablenet
>>   }else{
>>   print<<END;
>>   <table width='100%' cellspacing='0' class='tbl'>
>> - <tr><th align='center'><b>$Lang::tr{'name'}</b></th><th align='center'><b>$Lang::tr{'fwhost netaddress'}</b></th><th align='center'><b>$Lang::tr{'remark'}</b></th><th align='center'><b>$Lang::tr{'used'}</b></th><th></th><th></th><th width='3%'></th></tr>
>> + <tr><th align='center'><b>$Lang::tr{'name'}</b></th><th align='center'><b>$Lang::tr{'fwhost netaddress'}</b></th><th align='center'><b>$Lang::tr{'remark'}</b></th><th align='center'><b>$Lang::tr{'used'}</b></th><th></th><th width='3%'></th></tr>
>>  END
>>   }
>>   my $count=0;
>> @@ -1953,11 +1953,7 @@ END
>>   my $colnet="$customnetwork{$key}[1]/".&General::subtocidr($customnetwork{$key}[2]);
>>   my $netcount=&getnetcount($customnetwork{$key}[0]);
>>   my $netusedin=&getusedin($customnetwork{$key}[0]);
>> - my $htmlparttouse="";
>> - if ($netusedin) {
>> - $htmlparttouse = "<input type='image' align='top' src='/images/info.gif' alt='$netusedin' title='$netusedin'>";
>> - }
>> - print"<td width='20%' $col><form method='post'>$customnetwork{$key}[0]</td><td width='15%' align='center' $col>".&getcolor($colnet)."</td><td width='40%' $col>$customnetwork{$key}[3]</td><td align='center' $col>$netcount x</td><td>$htmlparttouse</td>";
>> + print"<td width='20%' $col><form method='post'>$customnetwork{$key}[0]</td><td width='15%' align='center' $col>".&getcolor($colnet)."</td><td width='40%' $col>$customnetwork{$key}[3]</td><td align='center' $col><span title='$netusedin'>$netcount x</span></td>";
>>   print<<END;
>>   <td width='1%' $col><input type='image' src='/images/edit.gif' align='middle' alt='$Lang::tr{'edit'}' title='$Lang::tr{'edit'}' />
>>   <input type='hidden' name='ACTION' value='editnet'>
>> @@ -2091,7 +2087,7 @@ sub viewtablehost
>>   }else{
>>   print<<END;
>>   <table width='100%' cellspacing='0' class='tbl'>
>> - <tr><th align='center'><b>$Lang::tr{'name'}</b></th><th align='center'><b>$Lang::tr{'fwhost ip_mac'}</b></th><th align='center'><b>$Lang::tr{'remark'}</b></th><th align='center'><b>$Lang::tr{'used'}</b></th><th></th><th></th><th width='3%'></th></tr>
>> + <tr><th align='center'><b>$Lang::tr{'name'}</b></th><th align='center'><b>$Lang::tr{'fwhost ip_mac'}</b></th><th align='center'><b>$Lang::tr{'remark'}</b></th><th align='center'><b>$Lang::tr{'used'}</b></th><th></th><th width='3%'></th></tr>
>>  END
>>   }
>>   my $count=0;
>> @@ -2112,12 +2108,9 @@ END
>>   my $hostcount=0;
>>   $hostcount=&gethostcount($customhost{$key}[0]);
>>   my $hostusedin=&getusedin($customhost{$key}[0]);
>> - my $htmlparttouse="";
>> - if ($hostusedin) {
>> - $htmlparttouse = "<input type='image' align='top' src='/images/info.gif' alt='$hostusedin' title='$hostusedin'>";
>> - }
>> - print"<td width='20%' $col>$customhost{$key}[0]</td><td width='20%' align='center' $col >".&getcolor($ip)."</td><td width='50%' align='left' $col>$customhost{$key}[3]</td><td align='center' $col>$hostcount x</td><td>$htmlparttouse</td>";
>> - print<<END;
>> + my $color = &getcolor($ip);
>> + print <<END;
>> + <td width='20%' $col>$customhost{$key}[0]</td><td width='20%' align='center' $col >$color</td><td width='50%' align='left' $col>$customhost{$key}[3]</td><td align='center' $col><span title="$hostusedin">$hostcount x</span></td>
>>   <td width='1%' $col><form method='post'><input type='image' src='/images/edit.gif' align='middle' alt='$Lang::tr{'edit'}' title='$Lang::tr{'edit'}' />
>>   <input type='hidden' name='ACTION' value='edithost' />
>>   <input type='hidden' name='HOSTNAME' value='$customhost{$key}[0]' />
>> @@ -2192,11 +2185,8 @@ sub viewtablegrp
>>   print "<br><b><u>$grpname</u></b>&nbsp; &nbsp;";
>>   print " <b>$Lang::tr{'remark'}:</b>&nbsp $remark &nbsp " if ($remark ne '');
>>   my $netgrpcount=&getnetcount($grpname);
>> - print "<b>$Lang::tr{'used'}:</b> $netgrpcount x ";
>>   my $groupusedin=&getusedin($grpname);
>> - if ($groupusedin) {
>> - print "<input type='image' align='top' src='/images/info.gif' alt='$groupusedin' title='$groupusedin'>";
>> - }
>> + print "<b>$Lang::tr{'used'}:</b> <span title='$groupusedin'>$netgrpcount x</span>";
>>   if($netgrpcount == '0')
>>   {
>>   print"<form method='post' style='display:inline'><input type='image' src='/images/delete.gif' alt='$Lang::tr{'delete'}' title='$Lang::tr{'delete'}' align='right' /><input type='hidden' name='grp_name' value='$grpname' ><input type='hidden' name='ACTION' value='delgrp'></form>";
>> @@ -2335,10 +2325,7 @@ sub viewtablelocationgrp
>>   # Get group count.
>>   my $locationgrpcount=&getlocationcount($grpname);
>>   my $locationusedin=&getlocusedin($grpname);
>> - print "<b>$Lang::tr{'used'}:</b> $locationgrpcount x ";
>> - if ($locationusedin) {
>> - print "<input type='image' align='top' src='/images/info.gif' alt='$locationusedin' title='$locationusedin'>";
>> - }
>> + print "<b>$Lang::tr{'used'}:</b> <span title='$locationusedin'>$locationgrpcount x</span>";
>>   # Only display delete icon, if the group is not used by a firewall rule.
>>   if($locationgrpcount == '0') {
>>   print"<form method='post' style='display:inline'>\n";
>> @@ -2459,7 +2446,7 @@ sub viewtableservice
>>   &General::readhasharray("$fwconfigout", \%fwout);
>>   print<<END;
>>   <table width='100%' cellspacing='0' class='tbl'>
>> - <tr><th align='center'><b>$Lang::tr{'fwhost srv_name'}</b></th><th align='center'><b>$Lang::tr{'fwhost prot'}</b></th><th align='center'><b>$Lang::tr{'fwhost port'}</b></th><th align='center'><b>ICMP</b></th><th align='center'><b>$Lang::tr{'fwhost used'}</b></th><th></th><th></th><th width='3%'></th></tr>
>> + <tr><th align='center'><b>$Lang::tr{'fwhost srv_name'}</b></th><th align='center'><b>$Lang::tr{'fwhost prot'}</b></th><th align='center'><b>$Lang::tr{'fwhost port'}</b></th><th align='center'><b>ICMP</b></th><th align='center'><b>$Lang::tr{'fwhost used'}</b></th><th></th><th width='3%'></th></tr>
>>  END
>>   my $col='';
>>   foreach my $key (sort { ncmp($customservice{$a}[0],$customservice{$b}[0])} keys %customservice)
>> @@ -2481,14 +2468,10 @@ END
>>   #Neuer count
>>   $srvcount=&getsrvcount($customservice{$key}[0]);
>>   my $serviceusedin=&getsrvusedin($customservice{$key}[0]);
>> - my $htmlparttouse="";
>> - if ($serviceusedin) {
>> - $htmlparttouse="<input type='image' align='top' src='/images/info.gif' alt='$serviceusedin' title='$serviceusedin'>";
>> - }
>>   if($customservice{$key}[3] eq 'All ICMP-Types'){print $Lang::tr{'fwdfw all icmp'};}
>>   elsif($customservice{$key}[3] ne 'BLANK'){print $customservice{$key}[3];}
>>   print<<END;
>> - </td><td align='center' $col>$srvcount x</td><td>$htmlparttouse</td>
>> + </td><td align='center' $col><span title='$serviceusedin'>$srvcount x</span></td>
>>   <td width='1%' $col><form method='post'><input type='image' src='/images/edit.gif' align='middle' alt='$Lang::tr{'edit'}' title='$Lang::tr{'edit'}' /><input type='hidden' name='ACTION' value='editservice' />
>>   <input type='hidden' name='SRV_NAME' value='$customservice{$key}[0]' />
>>   <input type='hidden' name='SRV_PORT' value='$customservice{$key}[1]' />
>> @@ -2560,11 +2543,8 @@ sub viewtableservicegrp
>>   if($count >0){print"</table>";$count=1;}
>>   print "<br><b><u>$grpname</u></b>&nbsp; &nbsp; ";
>>   print "<b>$Lang::tr{'remark'}:</b>&nbsp; $remark " if ($remark ne '');
>> - print "&nbsp; <b>$Lang::tr{'used'}:</b> $grpcount x ";
>>   my $srvgrpusedin=&getsrvusedin($customservicegrp{$key}[0]);
>> - if ($srvgrpusedin) {
>> - print "<input type='image' align='top' src='/images/info.gif' alt='$srvgrpusedin' title='$srvgrpusedin'>";
>> - }
>> + print "&nbsp; <b>$Lang::tr{'used'}:</b> <span title='$srvgrpusedin'>$grpcount x</span>";
>>   if($grpcount == '0')
>>   {
>>   print"<form method='post' style='display:inline'><input type='image' src='/images/delete.gif' alt='$Lang::tr{'delete'}' title='$Lang::tr{'delete'}' align='right' /><input type='hidden' name='SRVGRP_NAME' value='$grpname' ><input type='hidden' name='ACTION' value='delservicegrp'></form>";
>
  
Peer Dietzmann June 26, 2025, 12:08 p.m. UTC | #3
Hello Michael, Hello Adolf,

it was actually a bit hard to find a working solution to place this 
information somewhere. I scrolled through all the icons IPFire has 
"built in" and thought that a blue i icon would lead the user to think 
"oh what's this? What information can I get there?". When hovering then 
over the icon all necessary information is directly displayed without 
any button or box or anything which would require additional code and 
styling. Thereby all other icons are clickable I think there is no 
additional documentation required, the users will find it on their own.

But I am also fine with Michael's solution.

--

Best regards

Peer

On 25.06.25 18:52, Michael Tremer wrote:
> Hello Adolf,
>
> Thank you for the feedback.
>
> It is indeed not obvious. On the other hand, the large icon is not really a solution either in my opinion. It is simply too large and distracting for a feature that won’t be used *that* much.
>
> I would however love some visual hint, but I cannot really think of anything between the two options that we have for now.
>
> -Michael
>
>> On 25 Jun 2025, at 17:40, Adolf Belka <adolf.belka@ipfire.org> wrote:
>>
>> Tested-by: Adolf Belka <adolf.belka@ipfire.org>
>>
>> I actually found the i in a blue circle icon very helpful for this. I was able to figure out where I should place my mouse pointer for the info.
>>
>> With this patch applied, which was the first way I tested it, I had no idea where to place the mouse pointer as nothing looked different to the existing situation. I did try placing it over the usage counter a couple of times but obviously not for long enough in my first tries as I never saw anything get shown.
>>
>> Reading the title of this patch more carefully I went back and now held the mouse pointer over the usage counter and waited for 1 to 2 seconds and now the info was shown.  Typically I found it takes a minimum of 1 second and sometimes around 1.5 seconds before anything is shown and first time around I was obviously not waiting long enough at any one location.
>>
>> If the usage counter is to stay as the location to place the mouse pointer onto for the info then I think this will need to be explained very clearly in the wiki documentation otherwise users might not discover this useful function directly on the WUI page.
>>
>>
>> On 23/06/2025 19:16, Michael Tremer wrote:
>>> This will clutter the page less as we don't have any good icon sets.
>>> Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
>>> ---
>>>   html/cgi-bin/fwhosts.cgi | 42 +++++++++++-----------------------------
>>>   1 file changed, 11 insertions(+), 31 deletions(-)
>>> diff --git a/html/cgi-bin/fwhosts.cgi b/html/cgi-bin/fwhosts.cgi
>>> index 69970a840..953f81e5f 100644
>>> --- a/html/cgi-bin/fwhosts.cgi
>>> +++ b/html/cgi-bin/fwhosts.cgi
>>> @@ -1932,7 +1932,7 @@ sub viewtablenet
>>>    }else{
>>>    print<<END;
>>>    <table width='100%' cellspacing='0' class='tbl'>
>>> - <tr><th align='center'><b>$Lang::tr{'name'}</b></th><th align='center'><b>$Lang::tr{'fwhost netaddress'}</b></th><th align='center'><b>$Lang::tr{'remark'}</b></th><th align='center'><b>$Lang::tr{'used'}</b></th><th></th><th></th><th width='3%'></th></tr>
>>> + <tr><th align='center'><b>$Lang::tr{'name'}</b></th><th align='center'><b>$Lang::tr{'fwhost netaddress'}</b></th><th align='center'><b>$Lang::tr{'remark'}</b></th><th align='center'><b>$Lang::tr{'used'}</b></th><th></th><th width='3%'></th></tr>
>>>   END
>>>    }
>>>    my $count=0;
>>> @@ -1953,11 +1953,7 @@ END
>>>    my $colnet="$customnetwork{$key}[1]/".&General::subtocidr($customnetwork{$key}[2]);
>>>    my $netcount=&getnetcount($customnetwork{$key}[0]);
>>>    my $netusedin=&getusedin($customnetwork{$key}[0]);
>>> - my $htmlparttouse="";
>>> - if ($netusedin) {
>>> - $htmlparttouse = "<input type='image' align='top' src='/images/info.gif' alt='$netusedin' title='$netusedin'>";
>>> - }
>>> - print"<td width='20%' $col><form method='post'>$customnetwork{$key}[0]</td><td width='15%' align='center' $col>".&getcolor($colnet)."</td><td width='40%' $col>$customnetwork{$key}[3]</td><td align='center' $col>$netcount x</td><td>$htmlparttouse</td>";
>>> + print"<td width='20%' $col><form method='post'>$customnetwork{$key}[0]</td><td width='15%' align='center' $col>".&getcolor($colnet)."</td><td width='40%' $col>$customnetwork{$key}[3]</td><td align='center' $col><span title='$netusedin'>$netcount x</span></td>";
>>>    print<<END;
>>>    <td width='1%' $col><input type='image' src='/images/edit.gif' align='middle' alt='$Lang::tr{'edit'}' title='$Lang::tr{'edit'}' />
>>>    <input type='hidden' name='ACTION' value='editnet'>
>>> @@ -2091,7 +2087,7 @@ sub viewtablehost
>>>    }else{
>>>    print<<END;
>>>    <table width='100%' cellspacing='0' class='tbl'>
>>> - <tr><th align='center'><b>$Lang::tr{'name'}</b></th><th align='center'><b>$Lang::tr{'fwhost ip_mac'}</b></th><th align='center'><b>$Lang::tr{'remark'}</b></th><th align='center'><b>$Lang::tr{'used'}</b></th><th></th><th></th><th width='3%'></th></tr>
>>> + <tr><th align='center'><b>$Lang::tr{'name'}</b></th><th align='center'><b>$Lang::tr{'fwhost ip_mac'}</b></th><th align='center'><b>$Lang::tr{'remark'}</b></th><th align='center'><b>$Lang::tr{'used'}</b></th><th></th><th width='3%'></th></tr>
>>>   END
>>>    }
>>>    my $count=0;
>>> @@ -2112,12 +2108,9 @@ END
>>>    my $hostcount=0;
>>>    $hostcount=&gethostcount($customhost{$key}[0]);
>>>    my $hostusedin=&getusedin($customhost{$key}[0]);
>>> - my $htmlparttouse="";
>>> - if ($hostusedin) {
>>> - $htmlparttouse = "<input type='image' align='top' src='/images/info.gif' alt='$hostusedin' title='$hostusedin'>";
>>> - }
>>> - print"<td width='20%' $col>$customhost{$key}[0]</td><td width='20%' align='center' $col >".&getcolor($ip)."</td><td width='50%' align='left' $col>$customhost{$key}[3]</td><td align='center' $col>$hostcount x</td><td>$htmlparttouse</td>";
>>> - print<<END;
>>> + my $color = &getcolor($ip);
>>> + print <<END;
>>> + <td width='20%' $col>$customhost{$key}[0]</td><td width='20%' align='center' $col >$color</td><td width='50%' align='left' $col>$customhost{$key}[3]</td><td align='center' $col><span title="$hostusedin">$hostcount x</span></td>
>>>    <td width='1%' $col><form method='post'><input type='image' src='/images/edit.gif' align='middle' alt='$Lang::tr{'edit'}' title='$Lang::tr{'edit'}' />
>>>    <input type='hidden' name='ACTION' value='edithost' />
>>>    <input type='hidden' name='HOSTNAME' value='$customhost{$key}[0]' />
>>> @@ -2192,11 +2185,8 @@ sub viewtablegrp
>>>    print "<br><b><u>$grpname</u></b>&nbsp; &nbsp;";
>>>    print " <b>$Lang::tr{'remark'}:</b>&nbsp $remark &nbsp " if ($remark ne '');
>>>    my $netgrpcount=&getnetcount($grpname);
>>> - print "<b>$Lang::tr{'used'}:</b> $netgrpcount x ";
>>>    my $groupusedin=&getusedin($grpname);
>>> - if ($groupusedin) {
>>> - print "<input type='image' align='top' src='/images/info.gif' alt='$groupusedin' title='$groupusedin'>";
>>> - }
>>> + print "<b>$Lang::tr{'used'}:</b> <span title='$groupusedin'>$netgrpcount x</span>";
>>>    if($netgrpcount == '0')
>>>    {
>>>    print"<form method='post' style='display:inline'><input type='image' src='/images/delete.gif' alt='$Lang::tr{'delete'}' title='$Lang::tr{'delete'}' align='right' /><input type='hidden' name='grp_name' value='$grpname' ><input type='hidden' name='ACTION' value='delgrp'></form>";
>>> @@ -2335,10 +2325,7 @@ sub viewtablelocationgrp
>>>    # Get group count.
>>>    my $locationgrpcount=&getlocationcount($grpname);
>>>    my $locationusedin=&getlocusedin($grpname);
>>> - print "<b>$Lang::tr{'used'}:</b> $locationgrpcount x ";
>>> - if ($locationusedin) {
>>> - print "<input type='image' align='top' src='/images/info.gif' alt='$locationusedin' title='$locationusedin'>";
>>> - }
>>> + print "<b>$Lang::tr{'used'}:</b> <span title='$locationusedin'>$locationgrpcount x</span>";
>>>    # Only display delete icon, if the group is not used by a firewall rule.
>>>    if($locationgrpcount == '0') {
>>>    print"<form method='post' style='display:inline'>\n";
>>> @@ -2459,7 +2446,7 @@ sub viewtableservice
>>>    &General::readhasharray("$fwconfigout", \%fwout);
>>>    print<<END;
>>>    <table width='100%' cellspacing='0' class='tbl'>
>>> - <tr><th align='center'><b>$Lang::tr{'fwhost srv_name'}</b></th><th align='center'><b>$Lang::tr{'fwhost prot'}</b></th><th align='center'><b>$Lang::tr{'fwhost port'}</b></th><th align='center'><b>ICMP</b></th><th align='center'><b>$Lang::tr{'fwhost used'}</b></th><th></th><th></th><th width='3%'></th></tr>
>>> + <tr><th align='center'><b>$Lang::tr{'fwhost srv_name'}</b></th><th align='center'><b>$Lang::tr{'fwhost prot'}</b></th><th align='center'><b>$Lang::tr{'fwhost port'}</b></th><th align='center'><b>ICMP</b></th><th align='center'><b>$Lang::tr{'fwhost used'}</b></th><th></th><th width='3%'></th></tr>
>>>   END
>>>    my $col='';
>>>    foreach my $key (sort { ncmp($customservice{$a}[0],$customservice{$b}[0])} keys %customservice)
>>> @@ -2481,14 +2468,10 @@ END
>>>    #Neuer count
>>>    $srvcount=&getsrvcount($customservice{$key}[0]);
>>>    my $serviceusedin=&getsrvusedin($customservice{$key}[0]);
>>> - my $htmlparttouse="";
>>> - if ($serviceusedin) {
>>> - $htmlparttouse="<input type='image' align='top' src='/images/info.gif' alt='$serviceusedin' title='$serviceusedin'>";
>>> - }
>>>    if($customservice{$key}[3] eq 'All ICMP-Types'){print $Lang::tr{'fwdfw all icmp'};}
>>>    elsif($customservice{$key}[3] ne 'BLANK'){print $customservice{$key}[3];}
>>>    print<<END;
>>> - </td><td align='center' $col>$srvcount x</td><td>$htmlparttouse</td>
>>> + </td><td align='center' $col><span title='$serviceusedin'>$srvcount x</span></td>
>>>    <td width='1%' $col><form method='post'><input type='image' src='/images/edit.gif' align='middle' alt='$Lang::tr{'edit'}' title='$Lang::tr{'edit'}' /><input type='hidden' name='ACTION' value='editservice' />
>>>    <input type='hidden' name='SRV_NAME' value='$customservice{$key}[0]' />
>>>    <input type='hidden' name='SRV_PORT' value='$customservice{$key}[1]' />
>>> @@ -2560,11 +2543,8 @@ sub viewtableservicegrp
>>>    if($count >0){print"</table>";$count=1;}
>>>    print "<br><b><u>$grpname</u></b>&nbsp; &nbsp; ";
>>>    print "<b>$Lang::tr{'remark'}:</b>&nbsp; $remark " if ($remark ne '');
>>> - print "&nbsp; <b>$Lang::tr{'used'}:</b> $grpcount x ";
>>>    my $srvgrpusedin=&getsrvusedin($customservicegrp{$key}[0]);
>>> - if ($srvgrpusedin) {
>>> - print "<input type='image' align='top' src='/images/info.gif' alt='$srvgrpusedin' title='$srvgrpusedin'>";
>>> - }
>>> + print "&nbsp; <b>$Lang::tr{'used'}:</b> <span title='$srvgrpusedin'>$grpcount x</span>";
>>>    if($grpcount == '0')
>>>    {
>>>    print"<form method='post' style='display:inline'><input type='image' src='/images/delete.gif' alt='$Lang::tr{'delete'}' title='$Lang::tr{'delete'}' align='right' /><input type='hidden' name='SRVGRP_NAME' value='$grpname' ><input type='hidden' name='ACTION' value='delservicegrp'></form>";
  
Adam Gibbons June 26, 2025, 3:13 p.m. UTC | #4
Hi all.

I _think_ this could be accomplished by using an emoji instead.

This one might be a good option: https://emojipedia.org/information

I believe the unicode sequence for it is "U+2139 U+FE0F"

But there are obviously many other emojis to choose from which might be more appropriate.

Thanks,
Adam

On 26 June 2025 13:08:54 BST, Peer Dietzmann <dietzmann@brecht-schule.hamburg> wrote:
>Hello Michael, Hello Adolf,
>
>it was actually a bit hard to find a working solution to place this information somewhere. I scrolled through all the icons IPFire has "built in" and thought that a blue i icon would lead the user to think "oh what's this? What information can I get there?". When hovering then over the icon all necessary information is directly displayed without any button or box or anything which would require additional code and styling. Thereby all other icons are clickable I think there is no additional documentation required, the users will find it on their own.
>
>But I am also fine with Michael's solution.
>
>--
>
>Best regards
>
>Peer
>
>On 25.06.25 18:52, Michael Tremer wrote:
>> Hello Adolf,
>> 
>> Thank you for the feedback.
>> 
>> It is indeed not obvious. On the other hand, the large icon is not really a solution either in my opinion. It is simply too large and distracting for a feature that won’t be used *that* much.
>> 
>> I would however love some visual hint, but I cannot really think of anything between the two options that we have for now.
>> 
>> -Michael
>> 
>>> On 25 Jun 2025, at 17:40, Adolf Belka <adolf.belka@ipfire.org> wrote:
>>> 
>>> Tested-by: Adolf Belka <adolf.belka@ipfire.org>
>>> 
>>> I actually found the i in a blue circle icon very helpful for this. I was able to figure out where I should place my mouse pointer for the info.
>>> 
>>> With this patch applied, which was the first way I tested it, I had no idea where to place the mouse pointer as nothing looked different to the existing situation. I did try placing it over the usage counter a couple of times but obviously not for long enough in my first tries as I never saw anything get shown.
>>> 
>>> Reading the title of this patch more carefully I went back and now held the mouse pointer over the usage counter and waited for 1 to 2 seconds and now the info was shown.  Typically I found it takes a minimum of 1 second and sometimes around 1.5 seconds before anything is shown and first time around I was obviously not waiting long enough at any one location.
>>> 
>>> If the usage counter is to stay as the location to place the mouse pointer onto for the info then I think this will need to be explained very clearly in the wiki documentation otherwise users might not discover this useful function directly on the WUI page.
>>> 
>>> 
>>> On 23/06/2025 19:16, Michael Tremer wrote:
>>>> This will clutter the page less as we don't have any good icon sets.
>>>> Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>
>>>> ---
>>>>   html/cgi-bin/fwhosts.cgi | 42 +++++++++++-----------------------------
>>>>   1 file changed, 11 insertions(+), 31 deletions(-)
>>>> diff --git a/html/cgi-bin/fwhosts.cgi b/html/cgi-bin/fwhosts.cgi
>>>> index 69970a840..953f81e5f 100644
>>>> --- a/html/cgi-bin/fwhosts.cgi
>>>> +++ b/html/cgi-bin/fwhosts.cgi
>>>> @@ -1932,7 +1932,7 @@ sub viewtablenet
>>>>    }else{
>>>>    print<<END;
>>>>    <table width='100%' cellspacing='0' class='tbl'>
>>>> - <tr><th align='center'><b>$Lang::tr{'name'}</b></th><th align='center'><b>$Lang::tr{'fwhost netaddress'}</b></th><th align='center'><b>$Lang::tr{'remark'}</b></th><th align='center'><b>$Lang::tr{'used'}</b></th><th></th><th></th><th width='3%'></th></tr>
>>>> + <tr><th align='center'><b>$Lang::tr{'name'}</b></th><th align='center'><b>$Lang::tr{'fwhost netaddress'}</b></th><th align='center'><b>$Lang::tr{'remark'}</b></th><th align='center'><b>$Lang::tr{'used'}</b></th><th></th><th width='3%'></th></tr>
>>>>   END
>>>>    }
>>>>    my $count=0;
>>>> @@ -1953,11 +1953,7 @@ END
>>>>    my $colnet="$customnetwork{$key}[1]/".&General::subtocidr($customnetwork{$key}[2]);
>>>>    my $netcount=&getnetcount($customnetwork{$key}[0]);
>>>>    my $netusedin=&getusedin($customnetwork{$key}[0]);
>>>> - my $htmlparttouse="";
>>>> - if ($netusedin) {
>>>> - $htmlparttouse = "<input type='image' align='top' src='/images/info.gif' alt='$netusedin' title='$netusedin'>";
>>>> - }
>>>> - print"<td width='20%' $col><form method='post'>$customnetwork{$key}[0]</td><td width='15%' align='center' $col>".&getcolor($colnet)."</td><td width='40%' $col>$customnetwork{$key}[3]</td><td align='center' $col>$netcount x</td><td>$htmlparttouse</td>";
>>>> + print"<td width='20%' $col><form method='post'>$customnetwork{$key}[0]</td><td width='15%' align='center' $col>".&getcolor($colnet)."</td><td width='40%' $col>$customnetwork{$key}[3]</td><td align='center' $col><span title='$netusedin'>$netcount x</span></td>";
>>>>    print<<END;
>>>>    <td width='1%' $col><input type='image' src='/images/edit.gif' align='middle' alt='$Lang::tr{'edit'}' title='$Lang::tr{'edit'}' />
>>>>    <input type='hidden' name='ACTION' value='editnet'>
>>>> @@ -2091,7 +2087,7 @@ sub viewtablehost
>>>>    }else{
>>>>    print<<END;
>>>>    <table width='100%' cellspacing='0' class='tbl'>
>>>> - <tr><th align='center'><b>$Lang::tr{'name'}</b></th><th align='center'><b>$Lang::tr{'fwhost ip_mac'}</b></th><th align='center'><b>$Lang::tr{'remark'}</b></th><th align='center'><b>$Lang::tr{'used'}</b></th><th></th><th></th><th width='3%'></th></tr>
>>>> + <tr><th align='center'><b>$Lang::tr{'name'}</b></th><th align='center'><b>$Lang::tr{'fwhost ip_mac'}</b></th><th align='center'><b>$Lang::tr{'remark'}</b></th><th align='center'><b>$Lang::tr{'used'}</b></th><th></th><th width='3%'></th></tr>
>>>>   END
>>>>    }
>>>>    my $count=0;
>>>> @@ -2112,12 +2108,9 @@ END
>>>>    my $hostcount=0;
>>>>    $hostcount=&gethostcount($customhost{$key}[0]);
>>>>    my $hostusedin=&getusedin($customhost{$key}[0]);
>>>> - my $htmlparttouse="";
>>>> - if ($hostusedin) {
>>>> - $htmlparttouse = "<input type='image' align='top' src='/images/info.gif' alt='$hostusedin' title='$hostusedin'>";
>>>> - }
>>>> - print"<td width='20%' $col>$customhost{$key}[0]</td><td width='20%' align='center' $col >".&getcolor($ip)."</td><td width='50%' align='left' $col>$customhost{$key}[3]</td><td align='center' $col>$hostcount x</td><td>$htmlparttouse</td>";
>>>> - print<<END;
>>>> + my $color = &getcolor($ip);
>>>> + print <<END;
>>>> + <td width='20%' $col>$customhost{$key}[0]</td><td width='20%' align='center' $col >$color</td><td width='50%' align='left' $col>$customhost{$key}[3]</td><td align='center' $col><span title="$hostusedin">$hostcount x</span></td>
>>>>    <td width='1%' $col><form method='post'><input type='image' src='/images/edit.gif' align='middle' alt='$Lang::tr{'edit'}' title='$Lang::tr{'edit'}' />
>>>>    <input type='hidden' name='ACTION' value='edithost' />
>>>>    <input type='hidden' name='HOSTNAME' value='$customhost{$key}[0]' />
>>>> @@ -2192,11 +2185,8 @@ sub viewtablegrp
>>>>    print "<br><b><u>$grpname</u></b>&nbsp; &nbsp;";
>>>>    print " <b>$Lang::tr{'remark'}:</b>&nbsp $remark &nbsp " if ($remark ne '');
>>>>    my $netgrpcount=&getnetcount($grpname);
>>>> - print "<b>$Lang::tr{'used'}:</b> $netgrpcount x ";
>>>>    my $groupusedin=&getusedin($grpname);
>>>> - if ($groupusedin) {
>>>> - print "<input type='image' align='top' src='/images/info.gif' alt='$groupusedin' title='$groupusedin'>";
>>>> - }
>>>> + print "<b>$Lang::tr{'used'}:</b> <span title='$groupusedin'>$netgrpcount x</span>";
>>>>    if($netgrpcount == '0')
>>>>    {
>>>>    print"<form method='post' style='display:inline'><input type='image' src='/images/delete.gif' alt='$Lang::tr{'delete'}' title='$Lang::tr{'delete'}' align='right' /><input type='hidden' name='grp_name' value='$grpname' ><input type='hidden' name='ACTION' value='delgrp'></form>";
>>>> @@ -2335,10 +2325,7 @@ sub viewtablelocationgrp
>>>>    # Get group count.
>>>>    my $locationgrpcount=&getlocationcount($grpname);
>>>>    my $locationusedin=&getlocusedin($grpname);
>>>> - print "<b>$Lang::tr{'used'}:</b> $locationgrpcount x ";
>>>> - if ($locationusedin) {
>>>> - print "<input type='image' align='top' src='/images/info.gif' alt='$locationusedin' title='$locationusedin'>";
>>>> - }
>>>> + print "<b>$Lang::tr{'used'}:</b> <span title='$locationusedin'>$locationgrpcount x</span>";
>>>>    # Only display delete icon, if the group is not used by a firewall rule.
>>>>    if($locationgrpcount == '0') {
>>>>    print"<form method='post' style='display:inline'>\n";
>>>> @@ -2459,7 +2446,7 @@ sub viewtableservice
>>>>    &General::readhasharray("$fwconfigout", \%fwout);
>>>>    print<<END;
>>>>    <table width='100%' cellspacing='0' class='tbl'>
>>>> - <tr><th align='center'><b>$Lang::tr{'fwhost srv_name'}</b></th><th align='center'><b>$Lang::tr{'fwhost prot'}</b></th><th align='center'><b>$Lang::tr{'fwhost port'}</b></th><th align='center'><b>ICMP</b></th><th align='center'><b>$Lang::tr{'fwhost used'}</b></th><th></th><th></th><th width='3%'></th></tr>
>>>> + <tr><th align='center'><b>$Lang::tr{'fwhost srv_name'}</b></th><th align='center'><b>$Lang::tr{'fwhost prot'}</b></th><th align='center'><b>$Lang::tr{'fwhost port'}</b></th><th align='center'><b>ICMP</b></th><th align='center'><b>$Lang::tr{'fwhost used'}</b></th><th></th><th width='3%'></th></tr>
>>>>   END
>>>>    my $col='';
>>>>    foreach my $key (sort { ncmp($customservice{$a}[0],$customservice{$b}[0])} keys %customservice)
>>>> @@ -2481,14 +2468,10 @@ END
>>>>    #Neuer count
>>>>    $srvcount=&getsrvcount($customservice{$key}[0]);
>>>>    my $serviceusedin=&getsrvusedin($customservice{$key}[0]);
>>>> - my $htmlparttouse="";
>>>> - if ($serviceusedin) {
>>>> - $htmlparttouse="<input type='image' align='top' src='/images/info.gif' alt='$serviceusedin' title='$serviceusedin'>";
>>>> - }
>>>>    if($customservice{$key}[3] eq 'All ICMP-Types'){print $Lang::tr{'fwdfw all icmp'};}
>>>>    elsif($customservice{$key}[3] ne 'BLANK'){print $customservice{$key}[3];}
>>>>    print<<END;
>>>> - </td><td align='center' $col>$srvcount x</td><td>$htmlparttouse</td>
>>>> + </td><td align='center' $col><span title='$serviceusedin'>$srvcount x</span></td>
>>>>    <td width='1%' $col><form method='post'><input type='image' src='/images/edit.gif' align='middle' alt='$Lang::tr{'edit'}' title='$Lang::tr{'edit'}' /><input type='hidden' name='ACTION' value='editservice' />
>>>>    <input type='hidden' name='SRV_NAME' value='$customservice{$key}[0]' />
>>>>    <input type='hidden' name='SRV_PORT' value='$customservice{$key}[1]' />
>>>> @@ -2560,11 +2543,8 @@ sub viewtableservicegrp
>>>>    if($count >0){print"</table>";$count=1;}
>>>>    print "<br><b><u>$grpname</u></b>&nbsp; &nbsp; ";
>>>>    print "<b>$Lang::tr{'remark'}:</b>&nbsp; $remark " if ($remark ne '');
>>>> - print "&nbsp; <b>$Lang::tr{'used'}:</b> $grpcount x ";
>>>>    my $srvgrpusedin=&getsrvusedin($customservicegrp{$key}[0]);
>>>> - if ($srvgrpusedin) {
>>>> - print "<input type='image' align='top' src='/images/info.gif' alt='$srvgrpusedin' title='$srvgrpusedin'>";
>>>> - }
>>>> + print "&nbsp; <b>$Lang::tr{'used'}:</b> <span title='$srvgrpusedin'>$grpcount x</span>";
>>>>    if($grpcount == '0')
>>>>    {
>>>>    print"<form method='post' style='display:inline'><input type='image' src='/images/delete.gif' alt='$Lang::tr{'delete'}' title='$Lang::tr{'delete'}' align='right' /><input type='hidden' name='SRVGRP_NAME' value='$grpname' ><input type='hidden' name='ACTION' value='delservicegrp'></form>";
>
>-- 
>Mit freundlichem Gruß
>Peer Dietzmann
>
>Brecht-IT  | Administration und Support
>
>Brecht-Schule Hamburg GmbH
>Norderstrasse 163-165 | 20097 Hamburg
>Tel.: +49 40 21 11 12 - 37 | Fax: +49 40 21 11 12 - 20
>E-Mail: dietzmann@brecht-schule.hamburg | www.brecht-schule.hamburg
>
>Diese Email enthält ggfs. vertrauliche und/oder rechtlich geschützte Informationen.
>Wenn Sie nicht der richtige Adressat sind oder diese Email irrtümlich erhalten haben, informieren Sie bitte sofort den Absender und vernichten Sie diese Email.
>Das unerlaubte Kopieren sowie die unbefugte Weitergabe dieser Email ist nicht gestattet.
>
>
  

Patch

diff --git a/html/cgi-bin/fwhosts.cgi b/html/cgi-bin/fwhosts.cgi
index 69970a840..953f81e5f 100644
--- a/html/cgi-bin/fwhosts.cgi
+++ b/html/cgi-bin/fwhosts.cgi
@@ -1932,7 +1932,7 @@  sub viewtablenet
 		}else{
 			print<<END;
 			<table width='100%' cellspacing='0' class='tbl'>
-			<tr><th align='center'><b>$Lang::tr{'name'}</b></th><th align='center'><b>$Lang::tr{'fwhost netaddress'}</b></th><th align='center'><b>$Lang::tr{'remark'}</b></th><th align='center'><b>$Lang::tr{'used'}</b></th><th></th><th></th><th width='3%'></th></tr>
+			<tr><th align='center'><b>$Lang::tr{'name'}</b></th><th align='center'><b>$Lang::tr{'fwhost netaddress'}</b></th><th align='center'><b>$Lang::tr{'remark'}</b></th><th align='center'><b>$Lang::tr{'used'}</b></th><th></th><th width='3%'></th></tr>
 END
 		}
 		my $count=0;
@@ -1953,11 +1953,7 @@  END
 			my $colnet="$customnetwork{$key}[1]/".&General::subtocidr($customnetwork{$key}[2]);
 			my $netcount=&getnetcount($customnetwork{$key}[0]);
 			my $netusedin=&getusedin($customnetwork{$key}[0]);
-			my $htmlparttouse="";
-			if ($netusedin) {
-				$htmlparttouse = "<input type='image' align='top' src='/images/info.gif' alt='$netusedin' title='$netusedin'>";
-			}
-			print"<td width='20%' $col><form method='post'>$customnetwork{$key}[0]</td><td width='15%' align='center' $col>".&getcolor($colnet)."</td><td width='40%' $col>$customnetwork{$key}[3]</td><td align='center' $col>$netcount x</td><td>$htmlparttouse</td>";
+			print"<td width='20%' $col><form method='post'>$customnetwork{$key}[0]</td><td width='15%' align='center' $col>".&getcolor($colnet)."</td><td width='40%' $col>$customnetwork{$key}[3]</td><td align='center' $col><span title='$netusedin'>$netcount x</span></td>";
 			print<<END;
 			<td width='1%' $col><input type='image' src='/images/edit.gif' align='middle' alt='$Lang::tr{'edit'}' title='$Lang::tr{'edit'}' />
 			<input type='hidden' name='ACTION' value='editnet'>
@@ -2091,7 +2087,7 @@  sub viewtablehost
 		}else{
 		print<<END;
 		<table width='100%' cellspacing='0' class='tbl'>
-		<tr><th align='center'><b>$Lang::tr{'name'}</b></th><th align='center'><b>$Lang::tr{'fwhost ip_mac'}</b></th><th align='center'><b>$Lang::tr{'remark'}</b></th><th align='center'><b>$Lang::tr{'used'}</b></th><th></th><th></th><th width='3%'></th></tr>
+		<tr><th align='center'><b>$Lang::tr{'name'}</b></th><th align='center'><b>$Lang::tr{'fwhost ip_mac'}</b></th><th align='center'><b>$Lang::tr{'remark'}</b></th><th align='center'><b>$Lang::tr{'used'}</b></th><th></th><th width='3%'></th></tr>
 END
 	}
 		my $count=0;
@@ -2112,12 +2108,9 @@  END
 			my $hostcount=0;
 			$hostcount=&gethostcount($customhost{$key}[0]);
 			my $hostusedin=&getusedin($customhost{$key}[0]);
-			my $htmlparttouse="";
-			if ($hostusedin) {
-				$htmlparttouse = "<input type='image' align='top' src='/images/info.gif' alt='$hostusedin' title='$hostusedin'>";
-			}
-			print"<td width='20%' $col>$customhost{$key}[0]</td><td width='20%' align='center' $col >".&getcolor($ip)."</td><td width='50%' align='left' $col>$customhost{$key}[3]</td><td align='center' $col>$hostcount x</td><td>$htmlparttouse</td>";
-			print<<END;
+			my $color = &getcolor($ip);
+			print <<END;
+			<td width='20%' $col>$customhost{$key}[0]</td><td width='20%' align='center' $col >$color</td><td width='50%' align='left' $col>$customhost{$key}[3]</td><td align='center' $col><span title="$hostusedin">$hostcount x</span></td>
 			<td width='1%' $col><form method='post'><input type='image' src='/images/edit.gif' align='middle' alt='$Lang::tr{'edit'}' title='$Lang::tr{'edit'}' />
 			<input type='hidden' name='ACTION' value='edithost' />
 			<input type='hidden' name='HOSTNAME' value='$customhost{$key}[0]' />
@@ -2192,11 +2185,8 @@  sub viewtablegrp
 				print "<br><b><u>$grpname</u></b>&nbsp; &nbsp;";
 				print " <b>$Lang::tr{'remark'}:</b>&nbsp $remark &nbsp " if ($remark ne '');
 				my $netgrpcount=&getnetcount($grpname);
-				print "<b>$Lang::tr{'used'}:</b> $netgrpcount x ";
 				my $groupusedin=&getusedin($grpname);
-				if ($groupusedin) {
-					print "<input type='image' align='top' src='/images/info.gif' alt='$groupusedin' title='$groupusedin'>";
-				}
+				print "<b>$Lang::tr{'used'}:</b> <span title='$groupusedin'>$netgrpcount x</span>";
 				if($netgrpcount == '0')
 				{
 					print"<form method='post' style='display:inline'><input type='image' src='/images/delete.gif' alt='$Lang::tr{'delete'}' title='$Lang::tr{'delete'}' align='right' /><input type='hidden' name='grp_name' value='$grpname' ><input type='hidden' name='ACTION' value='delgrp'></form>";
@@ -2335,10 +2325,7 @@  sub viewtablelocationgrp
 			# Get group count.
 			my $locationgrpcount=&getlocationcount($grpname);
 			my $locationusedin=&getlocusedin($grpname);
-			print "<b>$Lang::tr{'used'}:</b> $locationgrpcount x ";
-			if ($locationusedin) {
-				print "<input type='image' align='top' src='/images/info.gif' alt='$locationusedin' title='$locationusedin'>";
-			}
+			print "<b>$Lang::tr{'used'}:</b> <span title='$locationusedin'>$locationgrpcount x</span>";
 			# Only display delete icon, if the group is not used by a firewall rule.
 			if($locationgrpcount == '0') {
 				print"<form method='post' style='display:inline'>\n";
@@ -2459,7 +2446,7 @@  sub viewtableservice
 		&General::readhasharray("$fwconfigout", \%fwout);
 		print<<END;
 			<table width='100%' cellspacing='0' class='tbl'>
-			<tr><th align='center'><b>$Lang::tr{'fwhost srv_name'}</b></th><th align='center'><b>$Lang::tr{'fwhost prot'}</b></th><th align='center'><b>$Lang::tr{'fwhost port'}</b></th><th align='center'><b>ICMP</b></th><th align='center'><b>$Lang::tr{'fwhost used'}</b></th><th></th><th></th><th width='3%'></th></tr>
+			<tr><th align='center'><b>$Lang::tr{'fwhost srv_name'}</b></th><th align='center'><b>$Lang::tr{'fwhost prot'}</b></th><th align='center'><b>$Lang::tr{'fwhost port'}</b></th><th align='center'><b>ICMP</b></th><th align='center'><b>$Lang::tr{'fwhost used'}</b></th><th></th><th width='3%'></th></tr>
 END
 		my $col='';
 		foreach my $key (sort { ncmp($customservice{$a}[0],$customservice{$b}[0])} keys %customservice)
@@ -2481,14 +2468,10 @@  END
 			#Neuer count
 			$srvcount=&getsrvcount($customservice{$key}[0]);
 			my $serviceusedin=&getsrvusedin($customservice{$key}[0]);
-			my $htmlparttouse="";
-			if ($serviceusedin) {
-				$htmlparttouse="<input type='image' align='top' src='/images/info.gif' alt='$serviceusedin' title='$serviceusedin'>";
-			}
 			if($customservice{$key}[3] eq 'All ICMP-Types'){print $Lang::tr{'fwdfw all icmp'};}
 			elsif($customservice{$key}[3] ne 'BLANK'){print $customservice{$key}[3];}
 			print<<END;
-			</td><td align='center' $col>$srvcount x</td><td>$htmlparttouse</td>
+			</td><td align='center' $col><span title='$serviceusedin'>$srvcount x</span></td>
 			<td width='1%' $col><form method='post'><input type='image' src='/images/edit.gif' align='middle' alt='$Lang::tr{'edit'}' title='$Lang::tr{'edit'}' /><input type='hidden' name='ACTION' value='editservice' />
 			<input type='hidden' name='SRV_NAME' value='$customservice{$key}[0]' />
 			<input type='hidden' name='SRV_PORT' value='$customservice{$key}[1]' />
@@ -2560,11 +2543,8 @@  sub viewtableservicegrp
 				if($count >0){print"</table>";$count=1;}
 				print "<br><b><u>$grpname</u></b>&nbsp; &nbsp; ";
 				print "<b>$Lang::tr{'remark'}:</b>&nbsp; $remark " if ($remark ne '');
-				print "&nbsp; <b>$Lang::tr{'used'}:</b> $grpcount x ";
 				my $srvgrpusedin=&getsrvusedin($customservicegrp{$key}[0]);
-				if ($srvgrpusedin) {
-					print "<input type='image' align='top' src='/images/info.gif' alt='$srvgrpusedin' title='$srvgrpusedin'>";
-				}
+				print "&nbsp; <b>$Lang::tr{'used'}:</b> <span title='$srvgrpusedin'>$grpcount x</span>";
 				if($grpcount == '0')
 				{
 					print"<form method='post' style='display:inline'><input type='image' src='/images/delete.gif' alt='$Lang::tr{'delete'}' title='$Lang::tr{'delete'}' align='right' /><input type='hidden' name='SRVGRP_NAME' value='$grpname' ><input type='hidden' name='ACTION' value='delservicegrp'></form>";