From 71516bc4e87fc8e08003d4a2441e0d8f50c55c52 Mon Sep 17 00:00:00 2001
From: Austin Mroz <AustinMroz@utexas.edu>
Date: Sun, 11 Aug 2024 16:57:01 -0500
Subject: [PATCH] Update hiding logic, reduce reflows.

On collapse, hiding is no longer done b setting a cutoff height. This
ensures that portions of elements don't get displayed incorrectly and
that no amount of local font size configuration can cause lines to
incorrectly show.

Additional fixes (such as having the scroll bar always display) have
been introduced to prevent reflows from occuring which would move the
element from underneath the cursor

If there is a large amount of documentation and not everything
collapses, the selected element (from mouseover)) is now scrolled to
ensure it and it's children are visible
---
 web/js/documentation.js | 38 ++++++++++++++++++++++++++++++--------
 1 file changed, 30 insertions(+), 8 deletions(-)

diff --git a/web/js/documentation.js b/web/js/documentation.js
index 734cba3..670d6ba 100644
--- a/web/js/documentation.js
+++ b/web/js/documentation.js
@@ -65,7 +65,7 @@ function initHelpDOM() {
             width: "400px",
             minHeight: "100px",
             maxHeight: "600px",
-            overflowY: 'auto',
+            overflowY: 'scroll',
             transformOrigin: '0 0',
             transform: 'scale(' + scale + ',' + scale +')',
             fontSize: '18px',
@@ -81,15 +81,33 @@ function initHelpDOM() {
     function setCollapse(el, doCollapse) {
         if (doCollapse) {
             el.children[0].innerHTML = '[+]'
-            el.children[1].style.overflowY = 'hidden'
-            el.children[1].style.height = '1.5em'
-            el.children[1].style.height = '1.5em'
-            el.children[1].style.color = '#CCC'
+            Object.assign(el.children[1].style, {
+                color: '#CCC',
+                overflowX: 'hidden',
+                width: '0px',
+                minWidth: 'calc(100% - 20px)',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+            })
+            for (let child of el.children[1].children) {
+                if (child.style.display != 'none'){
+                    child.origDisplay = child.style.display
+                }
+                child.style.display = 'none'
+            }
         } else {
             el.children[0].innerHTML = '[-]'
-            el.children[1].style.overflowY = ''
-            el.children[1].style.height = ''
-            el.children[1].style.color = ''
+            Object.assign(el.children[1].style, {
+                color: '',
+                overflowX: '',
+                width: '100%',
+                minWidth: '',
+                textOverflow: '',
+                whiteSpace: '',
+            })
+            for (let child of el.children[1].children) {
+                child.style.display = child.origDisplay
+            }
         }
     }
     helpDOM.collapseOnClick = function() {
@@ -111,6 +129,7 @@ function initHelpDOM() {
             if (!match) {
                 return null
             }
+            match.scrollIntoView(false)
             for (let i of items.querySelectorAll('.VHS_collapse')) {
                 if (i.contains(match)) {
                     setCollapse(i, false)
@@ -163,6 +182,9 @@ function initHelpDOM() {
                         e.children[0].onclick = helpDOM.collapseOnClick
                         e.children[0].style.cursor = 'pointer'
                     }
+                    for (let e of helpDOM.querySelectorAll('.VHS_precollapse')) {
+                        setCollapse(e, true)
+                    }
                 }
                 return true
             }