From f561bfe603e59c265b2ca2c66e42e7271bfaf2a5 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Wed, 12 Oct 2016 15:55:53 +0100
Subject: [PATCH] Show expander arrow for all browsers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The polyfill we use for details/summary only renders the arrow if the
browser doesn’t natively support the feature.

The latest versions of Firefox _do_ now support the feature (after 5
years), but for some reason they don’t draw the arrow. So this commit
forces the arrow to be polyfilled in all browsers, and hides the browser
default one, for those browsers that do render it.
---
 app/assets/javascripts/detailsPolyfill.js | 24 +++++++++++------------
 app/assets/stylesheets/app.scss           | 22 +++++++++++++++++++++
 2 files changed, 33 insertions(+), 13 deletions(-)

diff --git a/app/assets/javascripts/detailsPolyfill.js b/app/assets/javascripts/detailsPolyfill.js
index c3c5dc1cc..ce0692195 100644
--- a/app/assets/javascripts/detailsPolyfill.js
+++ b/app/assets/javascripts/detailsPolyfill.js
@@ -133,22 +133,20 @@
 
       // If this is not a native implementation, create an arrow
       // inside the summary
-      if (!NATIVE_DETAILS) {
 
-        var twisty = document.createElement('i');
-
-        if (openAttr === true) {
-          twisty.className = 'arrow arrow-open';
-          twisty.appendChild(document.createTextNode('\u25bc'));
-        } else {
-          twisty.className = 'arrow arrow-closed';
-          twisty.appendChild(document.createTextNode('\u25ba'));
-        }
-
-        details.__summary.__twisty = details.__summary.insertBefore(twisty, details.__summary.firstChild);
-        details.__summary.__twisty.setAttribute('aria-hidden', 'true');
+      var twisty = document.createElement('i');
 
+      if (openAttr === true) {
+        twisty.className = 'arrow arrow-open';
+        twisty.appendChild(document.createTextNode('\u25bc'));
+      } else {
+        twisty.className = 'arrow arrow-closed';
+        twisty.appendChild(document.createTextNode('\u25ba'));
       }
+
+      details.__summary.__twisty = details.__summary.insertBefore(twisty, details.__summary.firstChild);
+      details.__summary.__twisty.setAttribute('aria-hidden', 'true');
+
     }
 
     // Define a statechange function that updates aria-expanded and style.display
diff --git a/app/assets/stylesheets/app.scss b/app/assets/stylesheets/app.scss
index a6538fc3a..8144e50ba 100644
--- a/app/assets/stylesheets/app.scss
+++ b/app/assets/stylesheets/app.scss
@@ -192,3 +192,25 @@ details summary {
 .tabular-numbers {
   @include core-19($tabular-numbers: true);
 }
+
+summary::-moz-details-marker {
+  display: none;
+}
+summary::-ms-details-marker {
+  display: none;
+}
+summary::-o-details-marker {
+  display: none;
+}
+
+summary::details-marker {
+  display: none;
+}
+
+summary::-webkit-details-marker {
+  display: none;
+}
+
+details .arrow {
+  font-size: 16px;
+}