From c13f1aa5d10eb82c5d6d2614b7ac11aa5183939d Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Wed, 12 Oct 2016 15:25:35 +0100
Subject: [PATCH 1/2] Fix API log page in Firefox
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The details of each notification were not being hidden on page load in
Firefox.

Firefox does not natively support the `<details>` element, so we
polyfill it.

Because of the way the polyfill is written[1]

1. There can’t be any `<div>` elements inside the `<summary>` (this
   commit changes them to be `<span>`s instead, and adds CSS to make
   sure they wrap as before)
2. The contents to be shown/hidden must be wrapped in a `<div>` (which
   this commit adds)

***

1. https://github.com/alphagov/govuk_elements/blob/48fde82c721917feed3b7cf9b655e41fcddb3f49/public/javascripts/govuk/details.polyfill.js#L90
---
 app/assets/stylesheets/views/api.scss |  1 +
 app/templates/views/api/index.html    | 30 ++++++++++++++-------------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/app/assets/stylesheets/views/api.scss b/app/assets/stylesheets/views/api.scss
index 6a947afef..98e21685e 100644
--- a/app/assets/stylesheets/views/api.scss
+++ b/app/assets/stylesheets/views/api.scss
@@ -19,6 +19,7 @@
     }
 
     &-meta {
+      display: block;
       color: $secondary-text-colour;
     }
 
diff --git a/app/templates/views/api/index.html b/app/templates/views/api/index.html
index a446e9dbb..cd650bc85 100644
--- a/app/templates/views/api/index.html
+++ b/app/templates/views/api/index.html
@@ -61,25 +61,27 @@
           <h3 class="api-notifications-item-recipient">
             {{ notification.to }}
           </h3>
-          <div class="grid-row api-notifications-item-meta">
-            <div class="column-half api-notifications-item-key">
+          <span class="grid-row api-notifications-item-meta">
+            <span class="column-half api-notifications-item-key">
               {{notification.key_name}}
-            </div>
-            <div class="column-half api-notifications-item-time">
+            </span>
+            <span class="column-half api-notifications-item-time">
               <time class="timeago" datetime="{{ notification.created_at }}">
                 {{ notification.created_at|format_delta }}
               </time>
-            </div>
-          </div>
+            </span>
+          </span>
         </summary>
-        <dl id="notification-{{ notification.id }}" class="api-notifications-item-data bottom-gutter-1-2">
-          {% for key in [
-            'id', 'notification_type', 'created_at', 'updated_at', 'sent_at', 'status'
-          ] %}
-            <dt>{{ key }}:</dt>
-            <dd class="api-notifications-item-data-item">{{ notification[key] }}</dd>
-          {% endfor %}
-        </dl>
+        <div>
+          <dl id="notification-{{ notification.id }}" class="api-notifications-item-data bottom-gutter-1-2">
+            {% for key in [
+              'id', 'notification_type', 'created_at', 'updated_at', 'sent_at', 'status'
+            ] %}
+              <dt>{{ key }}:</dt>
+              <dd class="api-notifications-item-data-item">{{ notification[key] }}</dd>
+            {% endfor %}
+          </dl>
+        </div>
       </details>
     {% endfor %}
     {% if api_notifications.notifications %}

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 2/2] 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;
+}