rename issue_stacktrace.js (reflecting what it actually is)

which exposed a needed cleanup

static/js/issue_stacktrace.js

@@ -0,0 +1,129 @@
+"use strict";
+
+function toggleFoo(element) {
+    element.classList.toggle("rotate-180");
+}
+    
+function distanceToWindowBottom() {
+    // https://stackoverflow.com/a/2800676/339144
+    let scrollPosition = window.pageYOffset;
+    let windowSize     = window.innerHeight;
+    let bodyHeight     = document.querySelector("html").offsetHeight;
+    return Math.max(bodyHeight - (scrollPosition + windowSize), 0);
+}
+
+onscroll = (event) => {
+    setBodyMinHeight();
+};
+
+function setBodyMinHeight() {
+  let body = document.querySelector("html");
+  let bodyHeightPreCollapse = body.offsetHeight;
+  // console.log("was actually", bodyHeightPreCollapse, "minimally", body.style.minHeight);
+  body.style.minHeight = (bodyHeightPreCollapse - distanceToWindowBottom()) + "px";
+  // console.log("is now actually", document.html.offsetHeight, "minimally", html.style.minHeight);
+}
+
+function collapseSection(element) {
+  if (element.getAttribute("data-collapsed") === "true") {
+    return;
+  }
+
+  // get the height of the element's inner content, regardless of its actual size
+  const sectionHeight = element.scrollHeight;
+
+  setBodyMinHeight();
+
+  // temporarily disable all css transitions
+  const elementTransition = element.style.transition;
+  element.style.transition = '';
+
+  // on the next frame (as soon as the previous style change has taken effect),
+  // explicitly set the element's height to its current pixel height, so we
+  // aren't transitioning out of 'auto'
+  requestAnimationFrame(function() {
+    element.style.height = sectionHeight + 'px';
+    element.style.transition = elementTransition;
+
+    // on the next frame (as soon as the previous style change has taken effect),
+    // have the element transition to height: 0
+    requestAnimationFrame(function() {
+      element.style.height = 0 + 'px';
+    });
+  });
+
+  // mark the section as "currently collapsed"
+  element.setAttribute('data-collapsed', 'true');
+}
+
+function expandSection(element) {
+  if (element.getAttribute("data-collapsed") !== "true") {
+    return;
+  }
+
+  setBodyMinHeight();
+
+  // get the height of the element's inner content, regardless of its actual size
+  const sectionHeight = element.scrollHeight;
+
+  // have the element transition to the height of its inner content
+  let explicitlySetValue = sectionHeight + 'px';
+  element.style.height = explicitlySetValue;
+
+  // when the next css transition finishes (which should be the one we just triggered)
+  const onTransitioned = function(e) {
+    // remove this event listener so it only gets triggered once
+    element.removeEventListener('transitionend', onTransitioned);
+    
+    // remove "height" from the element's inline styles, so it can return to its initial value
+    if (element.style.height == explicitlySetValue) {
+        element.style.removeProperty("height");
+    }
+  }
+
+  element.addEventListener('transitionend', onTransitioned);
+
+  // mark the section as "currently not collapsed"
+  element.setAttribute('data-collapsed', 'false');
+}
+
+function toggleFrameVisibility(frameHeader) {
+    const frameDetails = frameHeader.parentNode.querySelector(".js-frame-details");
+    if (frameDetails.getAttribute("data-collapsed") === "true") {
+        expandSection(frameDetails);
+    } else {
+        collapseSection(frameDetails);
+    }
+    frameHeader.querySelector(".js-chevron").classList.toggle("rotate-180");
+}
+
+
+function showAllFrames() {
+    document.querySelectorAll(".js-frame-details").forEach((frameDetails) => {
+        expandSection(frameDetails);
+    });
+    document.querySelectorAll(".js-chevron").forEach((chevron) => {
+        chevron.classList.add("rotate-180");
+    });
+}
+
+function showInAppFrames() {
+    document.querySelectorAll(".js-frame-details").forEach((frameDetails) => {
+        if (frameDetails.classList.contains("js-in-app")) {
+            expandSection(frameDetails);
+            frameDetails.parentNode.querySelector(".js-chevron").classList.add("rotate-180");
+        } else {
+            collapseSection(frameDetails);
+            frameDetails.parentNode.querySelector(".js-chevron").classList.remove("rotate-180");
+        }
+    });
+}
+
+function hideAllFrames() {
+    document.querySelectorAll(".js-frame-details").forEach((frameDetails) => {
+        collapseSection(frameDetails);
+    });
+    document.querySelectorAll(".js-chevron").forEach((chevron) => {
+        chevron.classList.remove("rotate-180");
+    });
+}