From e18e20605a03e3bc77e89aef7746d403ac18de0d Mon Sep 17 00:00:00 2001
From: iliajie <gpg@ilia.engineer>
Date: Sat, 10 Dec 2022 18:45:47 +0200
Subject: [PATCH] Fix to use HTML collapse in `hidden_start` and `hidden_end`

---
 gray-theme/right.cgi                      |  2 +-
 gray-theme/theme.pl                       | 54 ++++++++++++-----------
 gray-theme/unauthenticated/gray-theme.css | 38 +++++++++++++++-
 3 files changed, 66 insertions(+), 28 deletions(-)

diff --git a/gray-theme/right.cgi b/gray-theme/right.cgi
index 5b0113223..39bca1ad3 100755
--- a/gray-theme/right.cgi
+++ b/gray-theme/right.cgi
@@ -39,7 +39,7 @@ my @linkshtml = map {
 		 !$_->{'target'} ? '' :
 	         $_->{'target'} eq 'new' ? 'target=_blank' :
 		 $_->{'target'} eq 'window' ? 'target=_top' : '') } @links;
-print "<div align=right>\n";
+print "<div class=\"right-top-links\" align=right>\n";
 print &ui_links_row(\@linkshtml);
 print "</div>\n";
 
diff --git a/gray-theme/theme.pl b/gray-theme/theme.pl
index 5119c3fb5..766d396f4 100755
--- a/gray-theme/theme.pl
+++ b/gray-theme/theme.pl
@@ -598,6 +598,26 @@ $rv .= "</td></tr></table>\n"; # wrapper
 return $rv;
 }
 
+sub theme_ui_hidden_start
+{
+my ($title, $name, $status) = @_;
+my $rv;
+my $opened = $status ? " open" : "";
+$rv .= "<details class='ui_hidden_start'$opened>";
+$rv .= "<summary>$title</summary>\n";
+return $rv;
+}
+
+=head2 ui_hidden_end(name)
+
+Returns HTML for the end of a hidden section, started by ui_hidden_start.
+
+=cut
+sub theme_ui_hidden_end
+{
+return "</details>\n";
+}
+
 # theme_ui_hidden_table_start(heading, [tabletags], [cols], name, status,
 #                             [&default-tds], [rightheading])
 # A table with a heading and table inside, and which is collapsible
@@ -608,31 +628,17 @@ my $rv;
 if (!$main::ui_hidden_start_donejs++) {
   $rv .= &ui_hidden_javascript();
   }
-my $divid = "hiddendiv_$name";
-my $openerid = "hiddenopener_$name";
-my $defimg = $status ? "open.gif" : "closed.gif";
-my $defclass = $status ? 'opener_shown' : 'opener_hidden';
-my $text = defined($tconfig{'cs_text'}) ? $tconfig{'cs_text'} :
-        defined($gconfig{'cs_text'}) ? $gconfig{'cs_text'} : "000000";
+my $opened = $status ? " open" : "";
+my $header = defined($heading) ? "<span>$heading</span>" : "";
+my $rheader = defined($rightheading) ? "<span class='rightheading'>$rightheading</span>" : "";
 if (!$main::WRAPPER_OPEN) { # If we're not already inside of a wrapper, wrap it
-	$rv .= "<table class='shrinkwrapper' $tabletags>\n";
-	$rv .= "<tr><td>\n";
+	$rv .= "<div>\n";
 	}
 $main::WRAPPER_OPEN++;
 my $colspan = 1;
-$rv .= "<table class='ui_table' $tabletags>\n";
-if (defined($heading) || defined($rightheading)) {
-	$rv .= "<thead><tr>";
-	if (defined($heading)) {
-		$rv .= "<td><a href=\"javascript:hidden_opener('$divid', '$openerid')\" id='$openerid'><img border=0 src='@{[&get_webprefix()]}/images/$defimg'></a> <a href=\"javascript:hidden_opener('$divid', '$openerid')\" class='ui-hidden-table-title'><b>$heading</b></a></td>";
-		}
-        if (defined($rightheading)) {
-                $rv .= "<td align=right>$rightheading</td>";
-                $colspan++;
-                }
-	$rv .= "</tr> </thead>\n";
-	}
-$rv .= "<tbody><tr> <td colspan=$colspan><div class='$defclass' id='$divid'><table width=100%>\n";
+$rv .= "<details class='ui_hidden_table_start'$opened>";
+$rv .= "<summary>$header $rheader</summary>\n";
+$rv .= "<table width=100%>\n";
 $main::ui_table_cols = $cols || 4;
 $main::ui_table_pos = 0;
 $main::ui_table_default_tds = $tds;
@@ -644,12 +650,10 @@ return $rv;
 # ui_hidden_table_start
 sub theme_ui_hidden_table_end
 {
-my ($name) = @_;
-local $rv = "</table></div></td></tr></tbody></table>\n";
+local $rv = "</table></details>\n";
 if ( $main::WRAPPER_OPEN == 1 ) {
 	$main::WRAPPER_OPEN--;
-	#$rv .= "</div>\n";
-	$rv .= "</td></tr></table>\n";
+	$rv .= "</div>\n";
 	}
 elsif ($main::WRAPPER_OPEN) { $main::WRAPPER_OPEN--; }
 return $rv;
diff --git a/gray-theme/unauthenticated/gray-theme.css b/gray-theme/unauthenticated/gray-theme.css
index f39b78b6b..ec9bda9f1 100644
--- a/gray-theme/unauthenticated/gray-theme.css
+++ b/gray-theme/unauthenticated/gray-theme.css
@@ -317,7 +317,7 @@ form[action="config_save.cgi"] #sortableTable2 > thead > tr > td {
   cursor: pointer;
 }
 .leftmenu details > summary::marker {
-  color: #bbb;
+  color: #bfbfbf;
   font-size: 120%;
 }
 .leftmenu details > summary  span {
@@ -346,4 +346,38 @@ form[action="config_save.cgi"] #sortableTable2 > thead > tr > td {
 }
 .ui_alert_box > tbody > tr[bgcolor="#F2DEDE"] > td {
   border: 1px solid #da10bb57;
-}
\ No newline at end of file
+}
+
+.right-top-links {
+  margin-bottom: 4px;
+}
+
+details table.wrapper, details table.shrinkwrapper,
+details.ui_hidden_table_start {
+  background-color: #f5f5f5;
+}
+details.ui_hidden_table_start {
+  border: 1px solid #d9d9d9;
+  margin: 2px 0;
+}
+details.ui_hidden_table_start > summary {
+  cursor: pointer;
+  background-color: #d0dffc;
+  padding: 1px 6px;
+}
+details.ui_hidden_table_start > summary span {
+  font-weight: bold;
+}
+details.ui_hidden_table_start > summary span.rightheading {
+  float: right
+}
+details.ui_hidden_table_start > summary::marker {
+  color: #aaa;
+  font-size: 120%;
+}
+details.ui_hidden_table_start > summary  span {
+  padding-left: 4px;
+  white-space: nowrap;
+  color: #393939;
+  vertical-align: top;
+}