From a60d53de298b490570380dffa708c72fe92c85c3 Mon Sep 17 00:00:00 2001
From: tophf <tophf@gmx.com>
Date: Wed, 29 Nov 2017 19:24:40 +0300
Subject: [PATCH] edit: workaround for <details> not showing the toggle

---
 edit/edit.css | 7 +++++++
 edit/edit.js  | 9 +++++++++
 2 files changed, 16 insertions(+)

diff --git a/edit/edit.css b/edit/edit.css
index 51723102..208ec0c8 100644
--- a/edit/edit.css
+++ b/edit/edit.css
@@ -473,6 +473,13 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
 #lint {
   overflow-y: auto;
   overflow-x: hidden;}
+#lint > summary {
+  /* workaround for overflow:auto to show the toggle triangle */
+  position: absolute;
+}
+#lint > div {
+  margin-top: 4em;
+}
 #lint table {
   font-size: 100%;
   border-spacing: 0;
diff --git a/edit/edit.js b/edit/edit.js
index 438d26fe..e59b9962 100644
--- a/edit/edit.js
+++ b/edit/edit.js
@@ -61,6 +61,15 @@ Promise.all([
   } else {
     initWithSectionStyle({style});
   }
+
+  // workaround part2 for the <details> not showing its toggle icon: hide <summary> on scroll
+  $('#lint').addEventListener('scroll', function () {
+    const newOpacity = this.scrollTop === 0 ? '' : '0';
+    const style = this.firstElementChild.style;
+    if (style.opacity !== newOpacity) {
+      style.opacity = newOpacity;
+    }
+  }, {passive: true});
 });
 
 // make querySelectorAll enumeration code readable