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

[Michael Tremer <michael.tremer@ipfire.org>]

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>";
>