Better expandables for the instance debugger

assets/index.css

@@ -14,17 +14,9 @@ html {
   font-family: sans-serif;
   font-size: 18px;
   text-decoration: none;
-  height: 100%;
   line-height: 1.4;
 }
 
-body {
-  min-height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
 img {
   max-width:100%;
   max-height:100%;
@@ -37,7 +29,6 @@ img {
 }
 
 .root {
-  flex: 0 0;
   display: flex;
   flex-direction: column;
   margin: 0.5rem auto;
@@ -112,7 +103,7 @@ img {
 }
 
 .instance-title {
-  font-size: 1.5rem;
+  font-size: 1.2rem;
   padding: 0.5rem;
 }
 
@@ -124,6 +115,38 @@ img {
   padding: 0.5rem 0 0.5rem 1rem;
 }
 
+.expandable-input {
+  display: none;
+}
+
+.expandable-input ~ .expandable-label .expandable-visualizer {
+  font-family: monospace;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+  width: 1rem;
+  height: 1rem;
+  border: 1px solid #666;
+  margin: 0 0.5rem;
+}
+
+.expandable-visualizer::before {
+  content: "";
+}
+
+.expandable-input:checked ~ .expandable-label .expandable-visualizer::before {
+  content: "-";
+}
+
+.expandable-input:not(:checked) ~ .expandable-label .expandable-visualizer::before {
+  content: "+";
+}
+
+.expandable-input:not(:checked) ~ .expandable-items {
+  display: none;
+}
+
 .imfs-entry {
 }
 

src/web/ui.rs

@@ -202,9 +202,23 @@ impl<F: ImfsFetcher> UiService<F> {
             HtmlContent::None
         } else {
             html! {
-                <div class="instance-children">
+                <section class="instance-children-section">
-                    { Fragment::new(children_list) }
+                    <input
-                </div>
+                        class="expandable-input"
+                        id={ format!("instance-{}-children", id) }
+                        type="checkbox"
+                        checked="checked" />
+
+                    <h1 class="expandable-label">
+                        <label for={ format!("instance-{}-children", id) }>
+                            <span class="expandable-visualizer"></span>
+                            "Children"
+                        </label>
+                    </h1>
+                    <div class="instance-children expandable-items">
+                        { Fragment::new(children_list) }
+                    </div>
+                </section>
             }
         };
 
@@ -226,9 +240,22 @@ impl<F: ImfsFetcher> UiService<F> {
             HtmlContent::None
         } else {
             html! {
-                <div class="instance-properties">
+                <section class="instance-properties-section">
-                    { Fragment::new(property_list) }
+                    <input
-                </div>
+                        class="expandable-input"
+                        id={ format!("instance-{}-properties", id) }
+                        type="checkbox" />
+
+                    <h1 class="expandable-label">
+                        <label for={ format!("instance-{}-properties", id) }>
+                            <span class="expandable-visualizer"></span>
+                            "Properties"
+                        </label>
+                    </h1>
+                    <div class="instance-properties expandable-items">
+                        { Fragment::new(property_list) }
+                    </div>
+                </section>
             }
         };
 
@@ -244,10 +271,10 @@ impl<F: ImfsFetcher> UiService<F> {
 
         html! {
             <div class="instance">
-                <div class="instance-title">
+                <label class="instance-title" for={ format!("instance-{}", id) }>
                     { instance.name().to_owned() }
                     { class_name_specifier }
-                </div>
+                </label>
                 { property_container }
                 { children_container }
             </div>